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

Properly implement alignwide and alignfull styling #44

Closed
bobbingwide opened this issue Nov 24, 2020 · 19 comments
Closed

Properly implement alignwide and alignfull styling #44

bobbingwide opened this issue Nov 24, 2020 · 19 comments
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@bobbingwide
Copy link
Owner

bobbingwide commented Nov 24, 2020

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 bobbingwide added enhancement New feature or request help wanted Extra attention is needed labels Nov 24, 2020
@bobbingwide bobbingwide self-assigned this Nov 24, 2020
@bobbingwide
Copy link
Owner Author

bobbingwide commented Nov 24, 2020

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

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

bobbingwide commented Nov 24, 2020

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

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

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 added a commit that referenced this issue Mar 13, 2021
@bobbingwide
Copy link
Owner Author

bobbingwide commented Apr 8, 2021

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

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

bobbingwide commented Apr 8, 2021

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: WordPress/gutenberg#26731

@bobbingwide
Copy link
Owner Author

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

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

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

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

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

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

@bobbingwide
Copy link
Owner Author

bobbingwide commented Apr 14, 2021

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 bobbingwide/sb#4 (comment)
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
Copy link
Owner Author

bobbingwide commented Apr 14, 2021

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

bobbingwide commented Apr 15, 2021

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

@bobbingwide
Copy link
Owner Author

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 added a commit that referenced this issue Apr 18, 2021
…imental-theme.json to use layout for contentSize and wideSize
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
…core styles. This version didn't produce a syntax error!
bobbingwide added a commit that referenced this issue Apr 18, 2021
- Attempt to style breadcrumbs when not using Yoast SEO - failed?
- Increase font size for term heading and post title
- Set background colour for home page group block
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
bobbingwide added a commit that referenced this issue Apr 18, 2021
@bobbingwide
Copy link
Owner Author

Delivered in v0.5.0

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

No branches or pull requests

1 participant