-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
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:
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