WordPress (PHP) has a lot of functionality to retrieve the post featured image (post thumbnails). However I can't find easy ways to retrieve the post featured image in a dynamic block.

Using PHP:

get_post_thumbnail_id(); // <-- Post Thumbnail ID

---

Using WordPress REST API:

edit: withSelect( function( select ) {
    return {
        post_id: select( 'core/editor' ).getCurrentPostId(),
        post_type: select( 'core/editor' ).getCurrentPostType()
    };
} )( function ( props ) {
    wp.apiFetch( { path: '/wp/v2/' + props.post_type + 's/' + props.post_id + '?_embed' } ).then( function( post ) {
        console.log( post._embedded["wp:featuredmedia"][0].id ); // <-- Post Thumbnail ID
    } );  

    return el( 'div', null, '[Block Placeholder]' );
} ),

WordPress (PHP) has a lot of functionality to retrieve the post featured image (post thumbnails). However I can't find easy ways to retrieve the post featured image in a dynamic block.

Using PHP:

get_post_thumbnail_id(); // <-- Post Thumbnail ID

---

Using WordPress REST API:

edit: withSelect( function( select ) {
    return {
        post_id: select( 'core/editor' ).getCurrentPostId(),
        post_type: select( 'core/editor' ).getCurrentPostType()
    };
} )( function ( props ) {
    wp.apiFetch( { path: '/wp/v2/' + props.post_type + 's/' + props.post_id + '?_embed' } ).then( function( post ) {
        console.log( post._embedded["wp:featuredmedia"][0].id ); // <-- Post Thumbnail ID
    } );  

    return el( 'div', null, '[Block Placeholder]' );
} ),

• post-thumbnails
• block-editor

Share Improve this question edited Aug 4, 2019 at 11:15 Mark asked Aug 4, 2019 at 10:02 MarkMark 1,02911 gold badge1515 silver badges2727 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

I think you're looking for:

const featuredImageId = wp.data.select( 'core/editor' )
    .getEditedPostAttribute( 'featured_media' );

to get the ID of the featured image and then for the corresponding media object:

const media = featuredImageId 
    ? wp.data.select( 'core').getMedia( featuredImageId ) 
    : null;

See e.g. here in the post featured image component:

https://github/WordPress/gutenberg/blob/57c2ab37a872b63de215205458336b7fd6c9739d/packages/editor/src/components/post-featured-image/index.js#L105