Full page patterns: Improve zoom out #514
Conversation
Preview changesYou can preview these changes by following the link below: I will update this comment with the latest preview links as you push more changes to this PR. |
carolinan
added
[Type] Enhancement
|
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. |
|
I was not able to get a recording of this where the patterns don't show outside the zoom out area. Deactivating zoom and and enabling it again still shows the pattern outside the area, but by a smaller amount. |
|
Tested the outlined patterns, this is working well for me. Here's just one example:
Separate from this PR, we probably need to tweak the Stories pattern, this one:
It seems to break onto two lines in very many cases, unfortunately, so we might need to reduce the font size a bit. |
There was a problem hiding this comment.
Thanks Carolina, it's working well for me. I was able to use the zoom out mode with these landing pages, the gap is not there and I'm able to insert patterns in between.
One thing I noticed, probably unrelated to this PR and a problem with zoom out is that when the list view or inserter sidebar are not there, the zoom out has some sort of left/right padding. I'm on the latest Gutenberg (trunk)
Screen.Recording.2024-10-08.at.15.42.41.mov
|
@getdave would you be able to briefly take a look at juanfra's comment above, see if this is a known issue in the block editor or not? |
|
It's not 100% ideal, but it works. Can we add names to these groups though, so it's more helpful to scan and identify patterns?
|
|
@richtabor The problem with the names is that it was discovered that they are not translatable. |
Oh that's not good. The names are stored in the |
|
Oh hold on. These are <!-- wp:group {"metadata":{"name":"<?php _e( 'My custom name here', 'my-text-domain' ) ?>"},"align":"full","className":"is-style-section-5","style":{"spacing":{"padding": |
|
It needs to be tested. Please see the linked conversation here: #403 |
|
There are already attributes in other pattern files that have the PHP functions added inside, like the aria labels for the search block. |
Left a comment there. We should really consider adding names to these—they're much more identifiable in list view with names. |
|
Upon thoroughly reviewing on my end, everything appears to be in order. The zoom functionality is working as expected, including proper interaction with the group name. Screen.Recording.2024-10-11.at.5.52.52.PM.mov |
Description
This PR updates the block patterns that are designed as full page layouts. These patterns were built using one group that wrapped all inner patterns. The PR removes the outer group and instead places each pattern inside its own group.
These new groups have top and bottom margin set to 0, to remove the blank space between the sections.
This ensures that each inner pattern show as a separate section when zoom out is enabled, and the spacing is maintained.
Closes #497
Screenshots
zoom-out-3-oct-8.mp4
Testing Instructions
Create a new page.
In the pattern selection modal, select a pattern that has multiple sections, for example the business homepage.
Confirm that visually, there is no change before and after the PR.
Select and add background colors to all patterns: Confirm that there is no vertical space between the colored sections.
Enable zoom out. Confirm that you can add patterns between the sections.