1

In my edit() function for a custom block I'm using the following to list my post titles and featured images:

import { useSelect } from '@wordpress/data';   

edit( { attributes, setAttributes } ) {

// Request data
const data = useSelect((select) => {
  return select('core').getEntityRecords('postType', 'post');
});

return (
  <div { ...blockProps }>
    {data &&
      data.map( ( post, i ) => {
        const featuredImage = post.featured_media ? wp.data.select('core').getMedia( post.featured_media ) : null;

        return (
          <div>
            { post.title.rendered }
            { featuredImage &&
              <img src={ featuredImage.media_details.sizes.thumbnail.source_url } />
            }
          </div>
        )
      })
     }
  </div>
);

},

....

In the editor, this shows all my post titles but shows only a few featured images. When I click the block in the editor, all the other images appear as well. Why is this happening? I'm not sure what I'm doing wrong. I don't get errors.

1
  • I noticed this too. If you check the console and observe the XHR requests being made, then you'll see that your component will be rendered before the request of the images has been completed. Whenever you re-select the block, the images will be cached from the previous download en shown properly. You'd need to either re-render after each download or wait for every image to finish downloading before re-rendering. Jan 22, 2022 at 9:00

0

Your Answer

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

Browse other questions tagged or ask your own question.