1

I have a pattern template for a custom post type which uses the Post Thumbnail Block as a placeholder for the thumbnail when/if it is set. However the Post Thumbnail Block does not support opening the image itself in a lightbox (I use my own functionality for that).

To solve this I thought I might be able to use the new Block Bindings API. I can't get this to work with post thumbnail though (works good with paragraph and custom meta field):

<!-- wp:image { "metadata":{
                "bindings":{
                    "url":{
                        "source":"core/post-meta",
                        "args":{
                            "key":"_thumbnail_id"
                        }
                    },                          
                    "alt":{
                        "source":"core/post-meta",
                        "args":{
                            "key":"_wp_attachment_image_alt"
                        }
                    }

                }
            }
        } -->
    <figure class="wp-block-image">
        <img src="" alt="" />
    </figure>
<!-- /wp:image -->

The block can't render and I get TypeErrors for _thumbnail_id and _wp_attachment_image_alt react-dom.min.js?ver=18.2.0:10 TypeError: Cannot read properties of undefined (reading '_thumbnail_id').

Maybe it's not possible to replicate Post Thumbnail block? Do I have to modify that block instead to add a lightbox option? Or can I filter the output somehow?

2
  • As of now, Block bindings only support a very limited number of blocks (issue at github.com/WordPress/gutenberg/issues/59607) Additionally, there is an existing request to add lightbox functionality to the featured image block (which displays a thumbnail from the post) - github.com/WordPress/gutenberg/issues/57849
    – Will
    Commented Apr 30 at 19:48
  • 1
    Thanks for the reply Will, I appreciate it! Yes I'm aware of that, it's early, but I'm using the wp:image block (which is stated to be supported) and the meta data shouldn't matter right? Both _thumbnail_id and _wp_attachment_image_alt is meta keys in the postmeta table. But I guess I'm missing something or don't fully understand the release notes and documentation.
    – lepardman
    Commented Apr 30 at 23:07

1 Answer 1

2

While the lightbox is not yet supported (as of WP version 6.5) for the featured image block, we can play with the block binding example from the docs by Justin Tadlock, on how to connect a custom block binding source to the core image block.

Let’s introduce a custom block binding source wpse/featured-image that provides the featured image url and alt text to the core image block.

The image block markup with our custom binding source settings becomes:

<!-- wp:image {
    "metadata":{
        "bindings":{
            "url":{
                "source":"wpse/featured-image",
                "args":{
                    "key":"url"
                }
            },
            "alt":{
                "source":"wpse/featured-image",
                "args":{
                    "key":"alt"
                }
            }
        }
    }
} -->
<figure class="wp-block-image">
    <img src="" alt=""/>
</figure>
<!-- /wp:image -->

where the custom binding source wpse/featured-image, that provides the url and alt values, is registered via PHP code:

add_action( 'init', 'wpse_register_block_bindings' );

function wpse_register_block_bindings() {
    register_block_bindings_source( 'wpse/featured-image', array(
        'label'              => esc_html__( 'Featured Image', 'wpse' ),
        'get_value_callback' => 'wpse_featured_image_bindings'
    ) );
}

function wpse_featured_image_bindings( $args ) {
    if ( ! isset( $args['key'] ) ) {
        return null;
    }

    if ( ! has_post_thumbnail() ) {
        return null;
    }

    $id  = get_post_thumbnail_id();
    $url = get_the_post_thumbnail_url();
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true );

    switch ( $args['key'] ) {
        case 'url':
            return esc_url( $url );
        case 'alt':
            return  esc_attr( $alt );
        default:
            return null;
    }
}

This is just a bare bone code example using the Block Binding API that hopefully you can adjust further to your needs! It might e.g. be better have a default image src and alt in the markup.

PS: Regarding your example, I'm not sure the bindings API supports a hidden registered meta field (with underscore in the key's name), even though it's registered meta that displays via REST API and also note that _thumbnail_id is just a number, not url.

1
  • 1
    Takk! Thought post thumbnail stuff would be available in core/post-meta. Very good explanation, will try this!
    – lepardman
    Commented May 2 at 7:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.