Closed bobbingwide closed 1 year 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.
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?
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.
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.
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
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:
template-part.php
to support the area
attribute. See SB themeUnnecessary HTML includes:
Group block - 13 occurrences
<div class="wp-block-group__inner-container">
experimental-theme.json
replacing "custom" with "layout"add_theme_support('align-wide');
from functions.php
."layout": {"inherit": true }
attribute on relevant blocks in templates/ template parts"align":"full"
attribute where necessary."tagName": "header"
or "tagName": "footer"
as required for styling.The values for layout
in the experimental-theme.json
file for Fizzie should be:
"layout": {
"contentSize": "1140px",
"wideSize": "1340px"
}
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.
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: https://github.com/WordPress/gutenberg/issues/26731
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%"}
| 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.
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.
experimental-theme.json
.single-full.html
; copied from single.html
post-content.html
"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.
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.
And I get a different result when the post type is page.
Normal is left aligned and wide is full width.
Convert the content to a group block and toggle Inherit default layout on.
I think I'm getting the hang of this at last.
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 https://github.com/bobbingwide/sb/issues/4#issuecomment-808207396
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
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.
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.
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
Delivered in v0.5.0
It appears I'm not the only one who doesn't really understand how to implement
alignfull
andalignwide
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: