Use the new logic for alignwide and alignfull

[bobbingwide]

In WordPress/gutenberg#29335 a solution has been developed that make alignments more declarative.
ie A new solution makes it a lot easier to use alignwide and alignfull. I believe this means you no longer need a ton of confusing CSS.

Since SB is a brand new theme I feel I should implement the solution in this theme first.
Later, when comfortable with the solution, and when a run time version of Gutenberg is delivered, I should apply it to Fizzie as well. See http://github.com/bobbingwide/fizzies/issues/44

Requirements

As for Fizzie. Properly support alignwide and alignfull, but with widths as below

Style	Width	Currently used for
normal	800px	the content area
alignwide	1200px	header
alignfull	100% = 1519 pixels on my laptop, 1903 on my second screen	footer

Solution

• Switch to using a newly built version of gutenberg-source
• remove assets/alignments-front.css - I'd already done this
• Change experimental-theme.json replacing "custom" with "layout"
• Implement `{"layout": {"inherit": true }} attribute on relevant blocks in templates/ template parts
• Try using different blocks with different widths.

Which is basically the same as for WordPress/theme-experiments#233

Caveat
I don't know what to expect with the sidebar.

[bobbingwide]

OK. I have no idea what I need to do in order to get the ability to choose Wide or Full width and what these Layout settings are.

Additionally, the Categories block below Structured Breakdown has encountered an error.

[bobbingwide]

I give up for tonight. Tomorrow have a look at WordPress/theme-experiments#234. Maybe the Site Editor's hasn't been updated so I'll need to edit the templates and template parts manually.

[scruffian]

It looks like you aren't running the latest version of the Gutenberg plugin. You'll need to be using the latest version of trunk to get the new alignments and the "inherit default layout" option.

[youknowriad]

We'll have to write a lot more docs about this functionality, it's still very early and being proved. Judging by your screenshot if you want to define a global "layout" config that is used in the post editor and that can be "inherited" in the site editor containers, you'll have to define it in your experimental-theme.json default settings section, it doesn't look like it's the case in that screenshot.

[bobbingwide]

I still had "custom" in the experimental-theme.json file. Removing that enabled the toggle.

Now I need to understand which blocks are the ones which support the alignwide or alignfull width attribute.

[bobbingwide]

@scruffian I was using the latest build, just bad JSON. See the second screenshot in #5 (comment)

Here's the latest screenshot for the front end, with the [guts] shortcode expanded.

And here's the results with the background colour on the group block removed... the group block wasn't filling the whole of the window width. Is this expected?
But now the columns aren't full width.

Structure of this "Footer" template part is

Footer template part - full width with CSS defined background
  Group
    3 Columns
       Tag cloud for S-words
       Tag cloud for B-words
       Info area

Looks like I need guidance on how to set the Layout options for the Template part and Group.
I honestly don't understand the hint. "Customize the width for all elements that are assigned to the center or wide columns."

[bobbingwide]

So having resolved the Tag cloud problem - a temporary fix applied to stop wpautop() from running on template parts - I've now changed the align attribute on the columns block in the footer, template part page-footer.

It's looking better. Here's a diff of the relevant changes.

-<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-<div class="wp-block-group alignfull"><!-- wp:columns -->
-    <div class="wp-block-columns"><!-- wp:column -->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:columns {"align":"full"} -->
+    <div class="wp-block-columns alignfull"><!-- wp:column -->

Interpret this diff output as:

• Remove "align:full" from the Group block
• Set "align":"full" on the Columns block

Maybe I don't need the Group block any more!

Note: You can't really tell in the Site Editor whether or not what you want is what you're going to get.

[youknowriad]

I think the problem comes down to understanding the "layout" feature, the documentation is not yet there. If I had to define it it's something like:

• Assigning a layout to a container (group, template part or post content block) doesn't impact it directly, it impacts its children, its means its children can be aligned wide/full and by default are centered according to its layout config.
• In theme.json, you can define a layout config that is going to be used by default in post editor but is not going to be used at all in site editor, unless a container decides that it "inherits" that config.

[bobbingwide]

thanks.

[bobbingwide]

Well I thought I had it working. My footer columns appeared to have reverted.

It turns out this was the customised template part, where the Group wasn't set to Full Width alignfull.