[Livro] Fix wide and full width content in index/archive/home templates

[jffng]

Changes proposed in this Pull Request:

This PR changes where layout is inherited in certain templates, so that wide and full width content appears as expected. To test, create a recent post with wide and full width content, and ensure it looks okay on the Index, Archive, and Home templates.

Before	After

Related issue(s):

Fixes #5327.

[kjellr]

Thanks for tackling this! It is looking pretty good, but I'm seeing just a couple bugs:

1. This doesn't appear to be working in the Site Editor. Is that happening for you too?

Front End	Site Editor

2. I'm now seeing a little content shifting when I visit a single post from the homepage. The spacing between the date + content is correct on the single post, but not on the archive page(s).

[jffng]

Oh yeah, it's broken on the site editor for me too.

Regarding the content shifting on the archive template, I think it's related to the post-content no longer getting the wp-container-as98dfh > * + * block-gap styles, I'll look into it more...

[jffng]

Struggling to get this to work because there is an extra wrapping div output in the site editor post content block:

Site Editor	Front-end (no extra wrapping div)

Will need to look upstream / open a PR because I'm not sure why that extra div is there.

Also, is this our first theme that uses the post-content block inside the Query Loop? TT2, Stewart, Blockbase and its children all seem to use the post-excerpt.

[kjellr]

Also, is this our first theme that uses the post-content block inside the Query Loop? TT2, Stewart, Blockbase and its children all seem to use the post-excerpt.

Yes, I think it is.

[scruffian]

I spent a long time looking into this today and have a fix but I don't think it's done properly. In the meantime I suggest we merge this.

[kjellr]

I'm not sure about merging it, because it still breaks the front-end spacing between the post date and the post content.

Since wide/full is the status quo for now and generally fine, I'd prefer keeping things as is until we can fix the wide/full without introducing the spacing bug.

[MaggieCabrera]

is the spacing bug caused by gap because of the extra div? maybe we can counter that with margin or some CSS?

[scruffian]

I think the way to fix the space is to ensure that all templates have the same levels of nesting so that they behave in the same way with respect to block gaps. I've added a commit to do this in the index, archive, home and single templates.

There are a couple of other things we could do to improve these templates:

1. The code that outputs the post is the same in each case, so this could be a template part
2. I think there are more layout: inherit wrappers than we need.

I'll add separate commits for each of these changes so you can remove them if you don't agree and also to make it easier to review.

[scruffian]

I think this ready for another review

[jffng]

Here's what I see:

Post editor	Site editor	Front-end

I see that the spacing bug that was introduced in this PR is fixed. It looks like there's a regression in the single template for the default alignment because of the max-width being unset.

However when I remove that rule (max-width: unset), it still looks broken in the post editor because our left-right margin CSS is overriding the auto rules that would center the block:

[scruffian]

D'oh! Hopefully my latest commit fixes this. I didn't see the issue with the post editor...

[jffng]

Hmm I still get the same result as the last screenshots I shared, after pulling down your latest commit.

That said, I think the templates are cleaner, so if there's no visual difference between this and trunk, I'm fine with the change.

[scruffian]

Hmm I still get the same result as the last screenshots I shared, after pulling down your latest commit.

In the home template too?

[scruffian]

Can you share the post markup you're testing with? I've been working from pcrugM-lB-p2

[jffng]

In the home template too?

Yes.

Can you share the post markup you're testing with?

<!-- wp:group {"backgroundColor":"primary"} -->
<div class="wp-block-group has-primary-background-color has-background"><!-- wp:paragraph {"textColor":"background"} -->
<p class="has-background-color has-text-color">Group block (no alignment)</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","backgroundColor":"primary"} -->
<div class="wp-block-group alignwide has-primary-background-color has-background"><!-- wp:paragraph {"textColor":"background"} -->
<p class="has-background-color has-text-color">Group block (wide alignment)</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","backgroundColor":"primary"} -->
<div class="wp-block-group alignfull has-primary-background-color has-background"><!-- wp:paragraph {"textColor":"background"} -->
<p class="has-background-color has-text-color">Group block (full alignment)</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

[scruffian]

The extra div is removed now, so we should be able to get this working in the site editor too: WordPress/gutenberg#38451

[jffng]

This seems to be working great with the Gutenberg PR that adds the alignment classes to the site editor!

Site Editor	Post Editor	Front-end

There's some extra vertical padding on groups in the site editor but I think that's unrelated to this PR.