Properly implement alignwide and alignfull styling

[bobbingwide]

It appears I'm not the only one who doesn't really understand how to implement alignfull and alignwide styling on blocks.

Reading the issue entitled "How to style alignfull and alignwide" ( WordPress/gutenberg#8289 ) I can see a number of solutions but can't see any clearly documented requirements.

Whichever solution I go for I should understand my own requirements for Fizzie:

• Initially a single column theme with no sidebars
• then extended to support a theme with sidebars.

These are the widths I'm going to use:

Style	Width	Currently used for
normal	1140px	most areas except header and footer
alignwide	1340px	untried
alignfull	100% = 1519 pixels on my laptop	header and footer

[bobbingwide]

Solution copied and cobbled from nicfmc on 15th Jan 2019

I decided instead of trying to make the wide classes break outside of my wrapper I would add the following to add a max width to blocks without the classes.

div.wp-block-template-part > *:not(.alignfull) {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

div.wp-block-template-part > *:not(.alignfull).alignwide {
    max-width: 1340px;
}

Reading more of the issue's comments I found a reference to some ongoing work WordPress/gutenberg#20650 which covers align left, center and right as well.

[bobbingwide]

This solution works for template-parts. But I can't get images to display wider than the template in which it's contained.
How to achieve this?

[bobbingwide]

I also read https://daverupert.com/2017/03/full-bleed-with-not/
to try to get the images to fully go full width when there's a background colour on the containing div.
which automatically adds padding.
I didn't have much success.

[bobbingwide]

I also tried using display: grid but couldn't make it behave at all. I couldn't work out where to apply the styling.
The CSS was just too hard.
I appeared to have some luck with the following
but had no idea how to make it apply where I needed it.

grid-template-columns:
        [body-start]
        minmax( 10px, 1fr )
        [wide-start]
        minmax( 0px, 100px )
        [container-start]
        minmax( 300px, 1000px)
        [container-end]
        minmax( 0px, 100px)
        [wide-end]
        minmax( 10px, 1fr )
        [body-end];

I appeared to be able to get the header template part to go full width, but had no control over the other areas which I wanted as full width.

[bobbingwide]

Following the release of WordPress 5.7 I was prompted to look at how different themes support alignfull for the cover block.
I copied the relevant CSS from TT1-blocks and tried again.

I created a Full Width cover block using TT1-blocks and viewed the post containing the block as a single post and in the blog archive. Then I attempted to reproduce the result in Fizzie.

Where viewed	TT1 blocks	Fizzie
Single post	Full width	Full width
Blog page	Wider than a normal blog post	Same as normal blog post

TT1-blocks blog page

Fizzie - single.html page

Fizzie - home.html ( blog ) page

[bobbingwide]

There's a new way of doing this alignfull stuff.

As documented by Anne McCarthy in #fse-outreach-experiment

TLDR: a new PR landed that reimagines alignments with block themes. This change first landed in Gutenberg in 10.3 and then in TT1 Blocks. Both have new versions today so please update to the latest when you’re testing. If you update Gutenberg but not TT1 Blocks, the editor will show up strangely as pictured below with everything shoved to one side. If you are a theme author and curious to learn more, check out what TT1 blocks did here as well as guidance given to block authors here.

What TT1 blocks did: WordPress/theme-experiments#236
Guidance to block authors: WordPress/theme-experiments#234

I've already tried it in bobbingwide/sb#4

I need to apply similar changes to Fizzie. The changes should include:

• updating the template parts that include unnecessary HTML. See below.
• reworking my override of template-part.php to support the area attribute. See SB theme
• Updating the stylesheet to cater for different HTML for header and footer areas.

Unnecessary HTML includes:

Group block - 13 occurrences

<div class="wp-block-group__inner-container">

Solution

• Use either Gutenberg-source or Gutenberg 10.3.1 ( or higher )
• Change experimental-theme.json replacing "custom" with "layout"
• remove add_theme_support('align-wide'); from functions.php.
• Implement "layout": {"inherit": true } attribute on relevant blocks in templates/ template parts
• Implement "align":"full" attribute where necessary.
• Implement "tagName": "header" or "tagName": "footer" as required for styling.
• Try using different blocks with different widths.

The values for layout in the experimental-theme.json file for Fizzie should be:

"layout": {
					"contentSize": "1140px",
					"wideSize": "1340px"
			}

[bobbingwide]

Once again I'm completely baffled.
In the Block settings for my Header template part the Layout panel just displays "Customize the width for all elements that are assigned to the center or wide columns."

In a Group block within a page template I see the Content and Wide entry fields.

These also appear for other template parts.

[bobbingwide]

Additionally, when inspecting the front end output, I've got unwanted paragraph tags in the inline styles setting the .wp-container-hhhhhhhhhh styles. These prevented alignfull blocks from be displayed correctly.

Explanation:
Initially I assumed this was a problem caused by oik-css. On further investigation I determined it was caused by wpautop() being run against template parts.

This is a known problem: WordPress/gutenberg#26731

[bobbingwide]

Once again I'm completely baffled.

The solution that appears to work, is to edit the templates and template parts .html files
adding "align":"wide" or "align":"full" and either "layout":{"inherit":true} or "layout":{"contentSize":"80%","wideSize":"90%"}

[bobbingwide]

| Once again I'm completely baffled

What I didn't mention was that I never saw the Inherit default layout toggle.
Once again, this was due to a syntax error in experimental-theme.json, a missing close curly brace.

I've now got the toggle to display...

But I still don't understand how to use the controls.
Nor do I understand when the toolbar displays the align wide and align full icons.

I see them in Fizzie but not in TT1 blocks.

[bobbingwide]

I've been making progress as you'll see by a few commits soon. But I still didn't know how I could get my images to be aligned wide and full. I thought that I'd need to use a custom template, but couldn't see how to do this. I asked in Slack

Q. How do you create "page templates" with FSE.

And Carolina Nymark gave me the link to the documentation I needed.
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#other-theme-metadata

Armed with that information I set about defining a custom template.

1. Add the definition to experimental-theme.json.
2. Remove the comments from the example so that json_decode works.
3. Create the new block template file single-full.html; copied from single.html
4. Fiddle about with the template part post-content.html
5. Write some new content to test it.
6. Suffer Uncaught Type Error: array_key_exists(): Argument #2 ($array) must be of type array, null given #62 along the way.
7. Do a couple of screen captures to show that it works with 10.3.1

"customTemplates": [
    {
      "name": "single-full",
      "title": "Full width stuff",
      "postTypes": [
        "page",
        "post",
        "block",
        "block_example"
      ]
    }
  ]

This shows the Post Attributes Settings Panel where I've chosen the Template.
In Status and Visibility the Template is single-full.

Here we can see the results on the Front End.
I've zoomed right out so that you can see the three images: normal, wide and full width.
Interestingly the full width image doesn't scale down.

I haven't yet tried to create content with other blocks being wide and full.

[bobbingwide]

I changed the height of my test image so that I don't have to scroll to see all three. In the post version using the custom template ( single-full.html ) the images look OK.

But in the block_example equivalent, where I haven't (yet) wrapped everything in a group, the wide image is a bit wonky.
It appears to be full width aligned left.

[bobbingwide]

And I get a different result when the post type is page.
Normal is left aligned and wide is full width.

Solution / workaround

Convert the content to a group block and toggle Inherit default layout on.

[bobbingwide]

I think I'm getting the hang of this at last.

[bobbingwide]

Well, that's what I thought. The footer's gone tits up again with GB 10.4.0
The site logo is larger than expected and the site title and tagline wrap around.

In 10.3.0 to 10.3.2 the site logo was smaller.
The footer widgets are still using the full width.
... which is different from how I had it at one stage with SB bobbingwide/sb#4 (comment)

I should have taken a screen capture of how I thought it was, where the footer widgets are normal width!
Note: On the Live site the widgets are currently full width.

There's another tiny problem. Every now and then I see small bits of styling of empty paragraphs in the third block column. It happens with the last paragraph after the <div class="bw_blog "><a href="https://blocks.wp.a2z/">WordPress Blocks</a></div>
Not visibile in this screen capture though.

This is what the footer looks like in the genesis-a2z theme

[bobbingwide]

Changing the HTML for the template part to add "inherit": true alters the footer so that the background gradient is applied only to the wide bit. No screen capture for this intermediate stage.
<!-- wp:template-part {"slug":"page-footer","theme":"fizzie", "align":"full","layout":{"inherit": true }} /-->

Adding "tagName": "footer" allows the background gradient to be applied to the full width part.

then we can change the content of the page-footer template part, removing the alignwide from the groups.
Each template now needs the page-footer template part to be changed.
During the transition the stylesheet should add the background gradient to both .page-footer and footer.

Then there's still the problem of the site logo, which is still too large. This is what it's like in 10.3.2

Note: The site-logo in the header has also changed - increasing the overall depth of the header.

Wrong header

<div class="wp-block-column" style="flex-basis:80px"><div class="aligncenter wp-block-site-logo"><a href="https://blocks.wp.a2z/" class="custom-logo-link" rel="home"><img loading="lazy" width="64" height="64" src="https://blocks.wp.a2z/wp-content/uploads/sites/10/2019/01/blocks-wp-a2z-icon-256x256.jpg" class="custom-logo" alt="WordPress Blocks"></a></div></div>

Correct header logo

<div class="wp-block-column" style="flex-basis:80px"><div class="aligncenter wp-block-site-logo"><a href="https://blocks.wp.a2z/" class="custom-logo-link" rel="home"><img loading="lazy" width="64" height="64" src="https://blocks.wp.a2z/wp-content/uploads/sites/10/2019/01/blocks-wp-a2z-icon-256x256.jpg" class="custom-logo" alt="WordPress Blocks"></a></div></div>

The HTML is the same. No surprise since I haven't changed it.

[bobbingwide]

I believe the Site Logo size issue is associated with WordPress/gutenberg#30843 or WordPress/gutenberg#30845

The problem is far more obvious in the header for the SB theme since it overlaps the site title next to it.

[bobbingwide]

There's another tiny problem. Every now and then I see small bits of styling of empty paragraphs in the third block column. It happens with the last paragraph after the <div class="bw_blog "><a href="https://blocks.wp.a2z/">WordPress Blocks</a>

See also #20

[bobbingwide]

Delivered in v0.5.0