"Coming Soon" Block Listing Scheduled Posts
Registers a "Coming Soon" block, rendered on the server without a build step, that lists the titles and dates of your next scheduled posts to build anticipation for upcoming content.
Opens WPIDE on
Code
add_action( 'init', function () {
wp_register_script( 'wpide-block-coming-soon', false, array( 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components', 'wp-server-side-render' ), '1.0', true );
wp_add_inline_script( 'wpide-block-coming-soon', <<<'JS'
( function ( wp ) {
var el = wp.element.createElement;
wp.blocks.registerBlockType( 'wpide/coming-soon', {
apiVersion: 3,
title: 'Coming Soon',
icon: 'clock',
category: 'widgets',
attributes: { count: { type: 'number', default: 5 }, showDate: { type: 'boolean', default: true } },
edit: function ( props ) {
return el( 'div', wp.blockEditor.useBlockProps(),
el( wp.blockEditor.InspectorControls, null,
el( wp.components.PanelBody, { title: 'Settings' },
el( wp.components.RangeControl, { label: 'Number of posts', min: 1, max: 20, value: props.attributes.count, onChange: function ( v ) { props.setAttributes( { count: v } ); } } ),
el( wp.components.ToggleControl, { label: 'Show date', checked: props.attributes.showDate, onChange: function ( v ) { props.setAttributes( { showDate: v } ); } } )
)
),
el( wp.serverSideRender, { block: 'wpide/coming-soon', attributes: props.attributes } )
);
},
save: function () { return null; }
} );
} )( window.wp );
JS
);
register_block_type( 'wpide/coming-soon', array(
'api_version' => 3,
'title' => 'Coming Soon',
'category' => 'widgets',
'editor_script_handles' => array( 'wpide-block-coming-soon' ),
'attributes' => array(
'count' => array( 'type' => 'number', 'default' => 5 ),
'showDate' => array( 'type' => 'boolean', 'default' => true ),
),
'render_callback' => function ( $attributes ) {
$posts = get_posts( array(
'post_status' => 'future',
'posts_per_page' => max( 1, min( 20, (int) $attributes['count'] ) ),
'orderby' => 'date',
'order' => 'ASC',
'no_found_rows' => true,
) );
if ( ! $posts ) {
return '';
}
$items = '';
foreach ( $posts as $post ) {
$items .= sprintf(
'<li><span class="wpide-coming-soon-title">%s</span>%s</li>',
esc_html( get_the_title( $post ) ),
! empty( $attributes['showDate'] ) ? ' <time datetime="' . esc_attr( get_post_time( 'c', true, $post ) ) . '">' . esc_html( get_the_date( '', $post ) ) . '</time>' : ''
);
}
return '<ul ' . get_block_wrapper_attributes( array( 'class' => 'wpide-coming-soon' ) ) . '>' . $items . '</ul>';
},
) );
} );
Notes
Only titles and dates are shown, never content; choose how many posts to list in the block settings.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.