Apply same styles to block previews on inserter and Global Styles #63177
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
MaggieCabrera
added
[Type] Enhancement
|
Size Change: -5.83 kB (-0.33%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
|
I've found an issue with the grid block (I don't think it happens to any other core blocks): 
This is caused by the flexbox rules we are applying to the body to center it. Because the grid block example doesn't have a width defined, it will shrink to center horizontally since there is no content pushing for a minimum width. I think about this and I can only think of two solutions that maintain the centering using flexbox:
Both are similar solutions and I'm not particularly inclined by one or the other. I can't think of a way to center the examples that won't incur in this problem or others like this one, but maybe I need to let it sit and a 💡 will come up The reason this wasn't a problem before is because the centering was only being applied for the previews on global styles, and in there the group block preview only shows the normal version of group, not of grid. |
|
@jasmussen @jameskoster this one is mostly there, I need to keep testing more blocks and settle on a solution for the grid block (and add screenshots of the testing to the PR description) but if you have any insights that would change the direction of this PR they would be welcome |
|
This one looks great to me, substantially better than trunk in virtually all cases. There's some animation happening that's also in trunk, but for some reason it stood out to me more here:
No action item necessarily, except perhaps turning off any transitions if you find them while you're here. The main point is the grid, which definitely looks more like a grid in trunk:
You mention this:
Is there any reason why blocks inside the preview should not be full-wide? If no, then it seems reasonable to apply a blanket 100% width to all blocks inside the previews. Can you explain in more detail the extra rule? |
MaggieCabrera
commented
Jul 9, 2024
Thanks for the input @jasmussen ! The main reason I see is cases like the button block, where if we apply the blanket width: 100% we would end up with the button aligned left. Same with blocks like site logo or anything that has a short text (login/out, site title, etc) |
|
Gotcha. It seems what you've found here is something you repro by putting a grid inside a row block:
Which suggests two paths foward, unless I'm missing nuance:
I don't know that I like either of those paths forward. Perhaps 2 if possible. But at the same time, flex is the main missing ingredient to make all these previews better, yes? How do we generally feel about adding bespoke CSS for individual previews? Is this something plugin blocks can do? If yes, seems fine to do here. |
MaggieCabrera
force-pushed
the
try-align-block-previews
branch
from
94c9867 to
170bf13
Compare
|
@jasmussen I found out that the flexbox issue was causing problems with the separator block too (it would resolve to width 0 and be invisible). I changed tactics and did the following:
I think this solves the breakage and the tradeoffs are minimal (some blocks are left aligned but still look ok). It also doesn't require any actions from third party blocks. The problem you pointed out that happens when combining flexbox and grid I couldn't figure out an easy way to solve, since that is how CSS interacts in the wild, and seemed a bit out of scope here but still important to have in mind |
|
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. |
|
Flaky tests detected in f7844fe. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9888899355
|
|
Seems fine with me. I think this one could use a broader code review than I can provide, though. |
I'll go fish for technical reviews |
scruffian
reviewed
Jul 11, 2024
Co-authored-by: Ben Dwyer <ben@scruffian.com>
scruffian
approved these changes
Jul 11, 2024
scruffian
reviewed
Jul 11, 2024
packages/edit-site/src/components/global-styles/block-preview-panel.js
Outdated
Show resolved
Hide resolved
scruffian
reviewed
Jul 11, 2024
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jul 18, 2024
…rdPress#63177) * apply same styles to both previews * reduced default viewport width * use sass units instead of magic numbers * revert viewport width change * fix height issue on inserter preview * calculate min height after scaling * change viewportWidth variable to add proper default * fix width issue with flexbox * centered buttons * centered blocks * remove unnecessary css rule * Update packages/block-editor/src/components/inserter/preview-panel.js Co-authored-by: Ben Dwyer <ben@scruffian.com> * Update packages/edit-site/src/components/global-styles/block-preview-panel.js * commented the CSS --------- Co-authored-by: Ben Dwyer <ben@scruffian.com>
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.
What?
This tries to apply the same styles to the Block Preview that lives in Global Styles to the one in the inserter, and tries to fix some minor visual issues for both in the meantime.
Why?
The previews for block look very different in the GS sidebar and the inserter. Different CSS is applied to both and GS wasn't even scaling with the viewport width selected on the blocks settings. This aims to align the two together for a more consistent experience.
How?
This tries to bring the changes from #46727 to the inserter previews and polish any issues that arise for certain blocks because of it.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Before:
After: