Zoom out is not working on full page patterns

[MaggieCabrera]

Description

I have been testing TT5 with zoom out and I have encountered a problem with full page patterns:

Because there is a group containing all the patterns, zoom out detects that as a full section, and it doesn't let you insert patterns in between. If we remove that wrapper group:

The problem is that if we remove that wrapper group, we miss the blockGap value.

I can't suggest a solution for this, there are options:

• We can remove the wrapper from the full page pattern and solve the blockGap issue on a per pattern basis. This would be the easy solution. Probably only the patterns with colored backgrounds need their margins set to 0 for this to work
• The problem with the above solution is that it's not universal, so other themes doing these face the same issue. The problem is that there is no way for zoom out to know that it should ignore the wrapper, unless we set the tag to main, which I think it's also an option here, since it makes sense semantically, but I'll let the accessibility experts weigh in on that

/cc @richtabor

[carolinan]

The theme already tried using margin 0. When the margin is set to 0, the patterns are too close to the other blocks. This becomes a problem as soon as the full width block has a background.

[carolinan]

It can not be set to the main, because the pattern can be inserted in any supported template, there can be more than one on any page, and there must absolutely not be two mains.
There can't be a template available in the theme that requires the user to know how to insert the <main>, users shouldn't have to know any HTML to be able to create a site that is accessible.

What I mean is that the risk is that users uses the template that does not have a main, and then do not insert one of the patterns that has a main.

[MaggieCabrera]

What I mean is that the risk is that users uses the template that does not have a main, and then do not insert one of the patterns that has a main.

I am talking here only about the full page patterns, which are meant to be used as that: full page. The individual ones can stay as they are.

What would be your suggestion to fix the problem with zoom out?

[MaggieCabrera]

Another solution: in the full page pattern, wrap the patterns with colors inside an extra group block with margin 0. Like this for the landing for podcasts:

<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0">
	<!-- wp:pattern {"slug":"twentytwentyfive/hero-podcast"} /-->
</div>
<!-- /wp:group -->
 <!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0">
	<!-- wp:pattern {"slug":"twentytwentyfive/heading-and-paragraph-with-image"} /-->
</div>
<!-- /wp:group -->
	<!-- wp:pattern {"slug":"twentytwentyfive/logos"} /-->
	<!-- wp:pattern {"slug":"twentytwentyfive/grid-videos"} /-->
	<!-- wp:pattern {"slug":"twentytwentyfive/cta-newsletter"} /-->

[carolinan]

What would be your suggestion to fix the problem with zoom out?

I don't think this is a problem since you can edit them outside of the zoom out.

[carolinan]

What I mean is that the risk is that users uses the template that does not have a main, and then do not insert one of the patterns that has a main.

I am talking here only about the full page patterns, which are meant to be used as that: full page. The individual ones can stay as they are.

What would be your suggestion to fix the problem with zoom out?

The full page patterns do not have a page template that can only be used with these exact patterns, nor is there a way to assign a template for them to use, where the main could be removed, and where the page title (post title block) could be removed.

I opened a Gutenberg issue for this: WordPress/gutenberg#65812

[youknowriad]

I think we should increase the priority of this bug. It doesn't make sense to ship zoom-out and 2025 in the same release and 2025 doesn't work properly with zoom-out.

We know zoom-out is optimized for top level sections within "main" container or without container. It's optimized for users that will create pages using patterns. I feel like we should align 2025 with that.

[richtabor]

I think we should increase the priority of this bug. It doesn't make sense to ship zoom-out and 2025 in the same release and 2025 doesn't work properly with zoom-out.

Agreed.

What about removing the wrapping group block from each page pattern and then remove the block gap effectively with margin 0 on those patterns within?

[carolinan]

I may be misunderstanding again, but like I already wrote in the comment above, the patterns started out with 0 top and bottom margin.
And @richtabor you asked for this margin 0 to be removed. I opened an issue for removing it because the patterns were too close to the other content. There was not enough space for example between a regular paragraph and the pattern below it.

So adding it again will resurface that problem.

It is a low number of patterns where the user can not insert patterns between the pre-selected patterns when in zoom out mode.
The templates, as in single, archive, home etc, works.

[carolinan]

Another solution: in the full page pattern, wrap the patterns with colors inside an extra group block with margin 0.

Since @MaggieCabrera had assigned her self to the issue, I expected a pull request so that this could be tested 👍

[carolinan]

I am seeing another problem.
Some patterns are not contained within the area of the zoom out:

zoom-out-2-oct-8.mp4

[MaggieCabrera]

I am seeing another problem. Some patterns are not contained within the area of the zoom out:

that is a different issue reported in GB that needs to be fixed there WordPress/gutenberg#65673

[annezazu]

shuffle.tt5.mov

Just was testing TT5 with WP nightly and noticed that shuffling in zoom out is particularly painful for starter patterns as you go from lots of patterns in a page to just one.

[carolinan]

I don't believe there is a way to decide which patterns should be able to be shuffled between.

[carolinan]

Or does it only shuffle between items in the same category? Which category, then?

[youknowriad]

Thanks everyone (especially @carolinan) for addressing this one. Highly appreciated.

[MaggieCabrera]

Or does it only shuffle between items in the same category? Which category, then?

It's based on categories: WordPress/gutenberg#59251