Block Styles: Remove preview from inspector panel #63039
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aaronrobertshaw
added
[Type] Enhancement
|
I've left this PR in draft status for the moment until I can confirm whether it makes sense to still remove the previews from the native editor too. |
|
Size Change: -470 B (-0.03%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
|
The native block styles UI still uses the inline preview approach and wasn't updated to the web's popover preview in #34522. I think it makes sense to address the native UI in a dedicated follow-up. 
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ramonjd
approved these changes
Jul 3, 2024
|
I think we shouldn't remove the preview but instead improve the contents of the group example source—add a nicer layout with a heading, text, maybe an image or button, that better represents groups as layout units. |
|
Thanks for this. Let's also try an alternate approach, to see if we can get a bit closer to the request.
Perhaps something as simple as updating the group block's |
|
Thanks for the reviews and feedback 👍 I'll spin up a fresh PR to improve the existing group block example.
It's pretty straightforward to get the actual block into the preview. The catch is constraining its size, layout changes etc. If the preview is scaled, we might run into issues where the value of the preview is diminished because it's all scaled too small. 
Here's a quick demo after hacking around a little: Screen.Recording.2024-07-04.at.11.46.48.AM.mp4 |
|
I have an alternate PR (draft only at this stage) which updates the Group block example to include a heading, paragraph, image, and button. Previously, all the Group block variations (Row, Stack, and Grid) share the same example. In the new PR, I've kept the old example content for those variations. If have any suggestions on exactly what content each variation should display, please drop a comment over on #63114 and I'll tweak it? |
|
Closing this in favour of #63114 |
Yea, we'd want to leverage viewportSize to maintain a "desktop" view for the preview. As well as allowing for a max height of the preview (though perhaps it's scrollable vertically). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes: #63035
What?
Removes preview popover for block styles in the block inspector sidebar.
Why?
A block style's preview is generated from the selected block type's example content. This results in some less-than-helpful previews that are also disconnected from the selected block.
This PR trials removing these previews entirely given their limited value and the ease at which a user can toggle between the available block styles to see them in action and in the real context of their page.
How?
Testing Instructions
Screenshots or screencast