Button Block: Link to the post in a Query Loop

[andersnoren]

What problem does this address?

It would be useful if we could link a button block to the current post when the button is used in a Query Loop, like this:

What is your proposed solution?

Add "Link to post" as an option to the button block.

[msabirz]

You mean particular block should be shown as active if its related to current post ? And its in Javascript? If so, Can I pull this up

[carolinan]

Hi!

There is a block for this purpose, it is called Read more and links to the current post/page/ custom post type inside the post template in the loop. It does not have the exact same options as the button block, but plenty of styling options like border, color and spacing. It is available in WordPress 6.0.

[andersnoren]

@carolinan I had completely missed that one – thanks Carolina!

[ethanclevenger91]

@carolinan I would rather be able to use a button block proper so that my global styles applied to button blocks are applied to this button as well, rather than custom styling the link. Is that something the block bindings API will make possible?

[carolinan]

Yes you can already use the block bindings API with the button block.
Please use the support forum for support questions.

[ethanclevenger91]

You can use the block bindings API but there is no data source for core post data - just post meta. Or if there is, it's not documented.

[BenceSzalai]

To achieve this the simplest way I figured is to add a binding source in PHP:

// Code is based on wp-includes/block-bindings/post-meta.php

function issue_42261_register_block_bindings_post_core_get_value( array $source_args, $block_instance ) {
	if ( empty( $source_args['key'] ) ) {
		return null;
	}
	
	if ( empty( $block_instance->context['postId'] ) ) {
		return null;
	}
	$post_id = $block_instance->context['postId'];
	
	// If a post isn't public, we need to prevent unauthorized users from accessing the post meta.
	$post = get_post( $post_id );
	if ( ( ! is_post_publicly_viewable( $post ) && ! current_user_can( 'read_post', $post_id ) ) || post_password_required( $post ) ) {
		return null;
	}
	
	switch( $source_args['key'] ) {
		case 'url':
			return get_permalink( $post_id );
		// Some more keys for example:
		case 'title':
			return get_the_title( $post_id );
		case 'excerpt':
			return get_the_excerpt( $post_id );
		case 'featured_image_url':
			return get_the_post_thumbnail_url( $post_id );
		case 'published_date':
			return get_the_date( '', $post_id );
		case 'modified_date':
			return get_the_modified_date( '', $post_id );
	}
	
	return null;
}

// Register Post Meta source in the block bindings registry.
add_action( 'init', function () {
	register_block_bindings_source(
		'issue_42261/post-core',
		[
			'label'              => _x( 'Issue 42261 Post Core', 'block bindings source' ),
			'get_value_callback' => 'issue_42261_register_block_bindings_post_core_get_value',
			'uses_context'       => [ 'postId' ],
		]
	);
} );

Once this is in place set up your button like this in the editor's Code editor inside your wp:query block:

<!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:buttons -->
  <div class="wp-block-buttons">
  <!-- wp:button {"metadata":{"bindings":{"url":{"source":"issue_42261/post-core","args":{"key":"url"}}}}} -->
  <div class="wp-block-button">
    <a class="wp-block-button__link wp-element-button">Read more</a>
  </div>
  <!-- /wp:button -->
</div>
<!-- /wp:buttons -->
<!-- /wp:post-template -->