Feedback on Template Part Width Settings in Template Editor

[annezazu]

What problem does this address?

Currently, the dynamic between a template part's width and the width of the blocks within creates a bit of a confusing workflow as described below from feedback on the sixth call for testing for the FSE Outreach Program:

One part that was somewhat unclear is the alignment options aren’t reflected in the editor vs how they display on the site. Specifically for the custom footer section, when selecting full width I see it is applied when I view on the front-end, but in editor it was not full-width. I figured out that I needed to set the footer to full width as well as the columns within to full width to see it reflected in editor.

Here's a video that better shows this problem in action where, in the editor, setting the columns of a block within the template part causes the block to be full width on the front end but not in the editor until you also set the template part block to full width:

Screen.Recording.2021-05-15.at.11.42.52.AM.mov

What is your proposed solution?

It seems like there needs to be some clarification or hierarchy around template part width and any nested blocks. This somewhat relates to overall feedback around widths and alignments in this issue #30724

cc @carolinan can you confirm this doesn't happen to be a TT1 blocks issue either? It occurred to me while writing this that that might be the case.

[carolinan]

With Gutenberg 10.6.0 and TT 1 Blocks version: 0.4.5, the template part is full width when I place it in the site editor, and it does not have alignment options.
I need to know if the template part was inside another block.

[annezazu]

The template part was not inside another block! It was created just beneath a Cover Block.

[circlecube]

Yes, I experienced this. I added a template part and dropped a column block inside, then I set up my column content and it seemed to look fine in the editor (without adjusting the alignment settings on either the custom template part or the columns block).
Here's the blocks in list view to be clear:

The editor view:

But on the front-end the alignment did not match the editor. The front view:

It took a second and I think may be a "feature" since the template part and the columns can each have their own alignment settings and when combined can achieve some complex layouts, but the real issue is that as a user I didn't expect I had to set the alignment in the editor because it looked good to go already. The custom template part has a no alignment at first and then if I select either the wide or the full alignment option, it adjusts to look better. Seems like the unselected alignment is where it is having issues reflecting what is on the front.

Maybe it should force an alignment and have one preselected as default? We just need to make sure the alignment displays in editor like it will on the front, I think that would solve this.

[carolinan]

I see the confusion now, I tested in the site editor but both the image and video above is from the template editor.

[annezazu]

Thanks for following up @circlecube with more screenshots. That's correct, Carolina! I'll update the issue title to make that clearer.

[carolinan]

Tested again today.
A template part at the root level (not inside another block) does not have wide and full width options. Unless it is aligned to the left or right it always displays at full width.
The front and editor match, both the template part and the inner columns block display at full width.

[gingerling]

Hi, I seem to have the opposite issue, or at least there is a lack of clarity.

These two footers look the same in the editor. The top one is the default footer changed from white to green, the bottom one is a pattern changed from black to green. The settings for both blocks seem to be identical, I checked one by one, they were the same.

Yet on the live site I see:

I had a similar issue earlier with just changing a background to blue

The editor shows it full width but on the live site there is white space at each side.

I didn't check all the settings then as it was just at the start of my testing the editor.

I think that if there is white space on the front of the site it should also be visible in the editor

[gingerling]

Note may have been solved by WordPress/twentytwentytwo#336 (comment) apparently, I'm not able to check this with my set up though.

[kathrynwp]

@annezazu Hey there :) Circling back to see if this should this be kept open, or can it be closed? Thanks!

[annezazu]

Whew, just having time to circle back. I'd like to keep this open. The problem remains with certain template parts. For some reason, GitHub won't let me upload a video but I will try again. For now, here's a link where anyone can view it: https://drive.google.com/file/d/1Fg4lsz67QsRAzFqWXo8ZxbPgx1SjpCTd/view?usp=sharing

[annezazu]

Closing this out as two years on we aren't getting much momentum and the issue is inconsistent. Let's reopen or create a new issue if it becomes widespread.