Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use the new logic for alignwide and alignfull #4

Open
4 of 5 tasks
bobbingwide opened this issue Mar 23, 2021 · 12 comments
Open
4 of 5 tasks

Use the new logic for alignwide and alignfull #4

bobbingwide opened this issue Mar 23, 2021 · 12 comments
Assignees
Labels
enhancement New feature or request

Comments

@bobbingwide
Copy link
Owner

bobbingwide commented Mar 23, 2021

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 bobbingwide self-assigned this Mar 23, 2021
@bobbingwide
Copy link
Owner Author

bobbingwide commented Mar 23, 2021

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.

image

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

@bobbingwide
Copy link
Owner Author

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
Copy link

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
Copy link

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
Copy link
Owner Author

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

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

@bobbingwide
Copy link
Owner Author

bobbingwide commented Mar 24, 2021

@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.
image

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.

image

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
Copy link
Owner Author

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.

image

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
Copy link

youknowriad commented Mar 24, 2021

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
Copy link
Owner Author

thanks.

@bobbingwide bobbingwide added the enhancement New feature or request label Mar 24, 2021
bobbingwide added a commit that referenced this issue Mar 24, 2021
…gn-wide') to use the new declarative method
@bobbingwide
Copy link
Owner Author

Well I thought I had it working. My footer columns appeared to have reverted.
image
It turns out this was the customised template part, where the Group wasn't set to Full Width alignfull.

@bobbingwide
Copy link
Owner Author

I'm not going to close this yet.
Some of the templates and template parts are including template parts with what could be unnecessary align and layout attributes.

@bobbingwide
Copy link
Owner Author

Still leaving this open even though I've delivered v0.2.1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants