Skip to content

Bug: Post Featured Image sometimes retrieves incomplete media data if getMedia with _fields parameter is used earlier #71375

@albanyacademy

Description

@albanyacademy

Description

This is a very hard to reproduce bug, and for whatever reason it only seems to be occurring on one client's website with only the most recent half-dozen images.

Essentially, we have a custom Image Block in the editor, and it has this code:

	const imageData = useSelect(
		( select ) =>
			imageUrl ? { source_url: imageUrl } : select( coreStore ).getMedia( imageId, {
				context: 'view',
				_fields: [ 'source_url', 'alt_text' ],
			} ),
		[ imageId, imageUrl, imageAlt ],
	);

The idea being if it has an image url, just provide that as an object, otherwise use getMedia but only return those two fields.

Now, when one of our Image Blocks was present in the editor, had one of the problematic images set, and the user went to change the Post Featured Image via the sidebar, if they picked one of those same problematic images that were already in the editor, they'd get an error:

TypeError: can't access property "width", e.media_details is undefined
@https://www.animatematerials.org/wp-includes/js/dist/editor.min.js?ver=e143f7bc0f4773342f31:14:124889
Pp<@https://www.animatematerials.org/wp-includes/js/dist/editor.min.js?ver=e143f7bc0f4773342f31:14:124986
ht@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:45677
vr@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:56342
Qs@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:121002
wl@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:88343
bl@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:88271
yl@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:88132
il@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:84984
fl@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:85364
Nn@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:32442
n/ul/<@https://www.animatematerials.org/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1:10:82952

It seems to fall apart here:

mediaWidth: media.media_details.width,

To try and diagnose it, I created a PostFeaturedImage filter:

wp.hooks.addFilter( 'editor.PostFeaturedImage', 'test', ( PostFeaturedImage ) => {
	const withFeat = wp.compose.createHigherOrderComponent( ( PostFeaturedImage ) => ( props ) => {
		console.log( props );
		return (
			<>hlelo

				<PostFeaturedImage { ...props } />
			</>
		);
	} );

	return withFeat( PostFeaturedImage );
} );

Just to see what was happening.

I redid the error steps, and just before the error occurred, I got this props object from my HOC Post Featured Image:

{
  "media": {
    "alt_text": "",
    "source_url": "[REDACTED]",
  },
  "currentPostId": 3510,
  "featuredImageId": 3487,
  "isRequestingFeaturedImageMedia": false,
   // ... yadda yadda other unrelated stuff
}

And the only connection I can make is getMedia with the fields parameter cached the media object for when it was eventually retrieved by PostFeaturedImage.

I don't know why this only occurs with the most recent images, and I feel like I would have to really dive into Gutenberg with a dev build to understand the exact process taking place here.

TLDR: I can sort of replicate what is happening in the console:

Image

Using getEntityRecord with the _fields parameter appears to be a little sticky - once we get a response, and I use it again without the fields parameter, I get the entity ID as well as the fields that were already present in the previous response.

This issue appears to be related to #56355 but because its dealing with a specific core component resulting in a critical error, felt the need to still make this issue.

Step-by-step reproduction instructions

See above for the very convoluted process.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

Labels

[Package] Core data/packages/core-data[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions