Data Views > Pages: Show a preview of pages for grid view

[annezazu]

Right now, pages is empty and doesn't show a preview, like you find on templates or patterns:

Can we add a preview of the page here? Any reason this is empty? It makes it look like something is broken or missing @WordPress/gutenberg-design

[t-hamano]

Unlike templates and patterns, the grid layout in Pages displays featured images in the preview area instead of content previews. Maybe we should display some kind of icon or placeholder, as suggested in this comment.

[annezazu]

Hmmm there were featured images set for some of these pages though and they didn't show. Perhaps this is a bug then?

[t-hamano]

That's strange. I was unable to reproduce this issue in WP6.5 Beta1. The issue cannot be reproduced even if Gutenberg version 17.7.0 is enabled 🤔

d98319ad81dda8d216715b6606b05a85.mp4

[annezazu]

Hmm here's what it looks like with just 6.5-beta1:

Screen.Recording.2024-02-14.at.9.03.08.PM.mov

I could then replicate it with 6.5-beta1-57631.

[t-hamano]

Just to be sure, is the featured image not displayed even when the "featured image" field is enabled in the table layout?

[jameskoster]

We should probably update the placeholder design a bit. When there are no featured images at all it's not entirely clear what's going on. We might use an icon, or something similar to the placeholder state you find in the editor:

[annezazu]

Just to be sure, is the featured image not displayed even when the "featured image" field is enabled in the table layout?

Correct. I don't see it there either. I'm going to mark this as a bug to be safe and add to 6.5 @colorful-tones @fabiankaegy can you all replicate by chance? To be clear, when you set featured images for pages can you see those images previewed when using data views.

[annezazu]

We should probably update the placeholder design a bit. When there are no featured images at all it's not entirely clear what's going on. We might use an icon, or something similar to the placeholder state you find in the editor:

Opened a separate issue for this: #59098

[colorful-tones]

I see featured images fine in the 'Manage all pages' area with new data views, and for both the Grid and Table layouts.

WP 6.5-beta1 - no plugins

'Manage all pages' Grid view	'Manage all pages' Table view

WP 6.5-beta1 + Gutenberg trunk colorful-tones@d46d7a1 active

'Manage all pages' Grid view	'Manage all pages' Table view

WP 6.5-beta1-57633 - no plugins

'Manage all pages' Grid view	'Manage all pages' Table view

In all my testing scenarios the featured image is displaying fine. @annezazu I wonder how if it could be your testing platform? Are you using Playground?

FYI - I'm using the WordPress Beta Tester plugin to test WP 6.5 betas on Local. Just in case it helps. 🤷

[annezazu]

Hmmm seems this might be a playground issue 😭 @adamziel no clue what's going on here but this is making playground less and less likely for me to use for testing features due to how unreliable it seems to be with giving a "true" environment. Going forward, I'm no longer going to use playground for testing issues related to 6.5 for this release and will try again in 6.6. It's wasting too much time for me to have to duplicate across situations and, in this case, was a collective waste of time.

Closing this out for now. Thank you all for testing and digging in here. I didn't realize how many differences there would be.

[t-hamano]

I see, this is a problem that can be reproduced with Playground. I was able to reproduce it too 😅 However, I found that this problem can be reproduced even in a non-Playground environment. For example, if you set a very small image such as 50px as the featured image, you will be able to reproduce this problem.

Therefore, I would like to reopen this issue and submit a PR.

---

@adamziel, As far as I investigated, I think that one of the reasons is that the media sizes are not generated in Playground. For example, if I run wp.data.select( 'core' ).getEntityRecord( 'root', 'media', X ) in the browser console after uploading media, media_details.size will always be an empty object. Is my understanding correct?

Another reason is that Gutenberg did not consider a scenario where these sizes did not exist.

gutenberg/packages/edit-site/src/components/media/index.js

Lines 8 to 14 in 0e899f7

	const currentSize = size.find(
	( s ) => !! media?.media_details?.sizes[ s ]
	);
	const mediaDetails = media?.media_details?.sizes[ currentSize ];
	if ( ! mediaDetails ) {
	return null;
	}

[colorful-tones]

@t-hamano you are amazing and nice digging to find and reproduce that bug. 👏

[annezazu]

Amazing work! In sleuthing a non-bug, you found a bug 🐛 .

[t-hamano]

The issue on Playground should also be resolved. You can test it by following the steps below.

• Access Gutenberg PR Previewer and enter the PR number (59111)
• From the top right panel, change the WordPress version to 6.5-beta1

#59111 should be backported to 6.5Beta2, so once Beta2 is released, you should simply launch Playground.

19b80b419e45a38a4008904a30c2cfc0.mp4

[adamziel]

This is amazing, thank you so much @t-hamano!

if I run wp.data.select( 'core' ).getEntityRecord( 'root', 'media', X ) in the browser console after uploading media, media_details.size will always be an empty object. Is my understanding correct?

I think so! I imagine the getEntityRecord selector would synchronously return what's already in the store, and the resolver would start an asynchronous request to retrieve the information from the server.