search

bobbingwide / fizzie

Fizzie theme - a Full Site Editing theme using Gutenberg blocks
9 stars 1 forks source link

Properly implement alignwide and alignfull styling #44

Closed bobbingwide closed 1 year ago

bobbingwide commented 3 years ago

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" ( https://github.com/WordPress/gutenberg/issues/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:

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 commented 3 years ago

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 https://github.com/WordPress/gutenberg/issues/20650 which covers align left, center and right as well.

bobbingwide commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 image

Fizzie - single.html page image

Fizzie - home.html ( blog ) page image

bobbingwide commented 3 years ago

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: https://github.com/WordPress/theme-experiments/pull/236 Guidance to block authors: https://github.com/WordPress/theme-experiments/issues/234

I've already tried it in https://github.com/bobbingwide/sb/issues/4

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

Unnecessary HTML includes:

Group block - 13 occurrences

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

Solution

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

"layout": {
                    "contentSize": "1140px",
                    "wideSize": "1340px"
            }
bobbingwide commented 3 years ago

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.

image

These also appear for other template parts.

bobbingwide commented 3 years ago

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.

image

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: https://github.com/WordPress/gutenberg/issues/26731

bobbingwide commented 3 years ago

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 commented 3 years ago

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

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 commented 3 years ago

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

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.

image

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

bobbingwide commented 3 years ago

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

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

bobbingwide commented 3 years ago

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

Solution / workaround

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

bobbingwide commented 3 years ago

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

bobbingwide commented 3 years ago

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.

image

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 https://github.com/bobbingwide/sb/issues/4#issuecomment-808207396 image

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 image

bobbingwide commented 3 years ago

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.

image

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 image

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 commented 3 years ago

I believe the Site Logo size issue is associated with https://github.com/WordPress/gutenberg/pull/30843 or https://github.com/WordPress/gutenberg/pull/30845

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

bobbingwide commented 3 years ago

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 commented 1 year ago

Delivered in v0.5.0