Can I use Post Thumbnail with Block Bindings API

admin管理员组

文章数量:1122846

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?

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?

• block-editor
• post-thumbnails

Share Improve this question asked Apr 30, 2024 at 9:58 lepardmanlepardman 33422 silver badges1111 bronze badges 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, 2024 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, 2024 at 23:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： Can I use Post Thumbnail with Block Bindings API