themes

themes copied to clipboard

Steps to replicate

1. Add a Blog Posts block to a page, and make it full width.
2. View on the front end.

Result

The block touches the edges of the browser chrome (or, potentially gets cut off, depending on how the theme is handling alignfull for blocks:

Expected

To avoid this, many themes have special styles for blocks that can be full-width, but include text that shouldn't sit so close to the edges (blocks like Columns, Pullquote, or captions in the Image block). I would expect the Blog Posts block to have the same kind of styles:

No user report -- moved from: https://github.com/Automattic/newspack-blocks/issues/334

(Also it's been forever since I've been to this repo! Hi! 👋 )

@laurelfulford I just read your notes on https://github.com/Automattic/newspack-blocks/issues/334 as I was wondering if it wouldn’t be better to address this issue on a plugin level instead of a theme level.

You mentioned that it might break themes. According to https://wordpress.stackexchange.com/a/26622 the theme gets loaded after the plugin. Thus, if a theme should come with a fix of this issue, it would simply overwrite the fix of the plugin, wouldn’t it? Create one fix that works for (almost) all themes sounds more loving to me than creating a fix for every single theme that is using this plugin. After all, on WordPress.org and ThemeForest alone you’ll find 15.000+ themes.

I was wondering if it wouldn’t be better to address this issue on a plugin level instead of a theme level.

I guess it comes down to whether we want to follow Core's example here, or do something different with 'alignfull' blocks? And I'm honestly not sure of the answer there :) I personally think the current behaviour is more predictable compared to how other blocks work, but I also get that this kind of thing -- not just with this block, but any non-Core block needing some kind of style exception -- is just one more thing for themers to have to worry about.

Honestly, my ideal fix would be some kind of option for blocks themselves, to distinguish edge-hitting alignfull blocks from non-edge-hitting alignfull blocks, so a theme could just style two classes, and not make exceptions for specific blocks, but I'm not sure how well that would really work. Blocks like Pullquote could be both, depending on whether they have a background.

I'd be interested to hear what other people think about this!

cc @iamtakashi @alaczek for further thoughts since we've been using this block lately.

My opinion is that blocks should do the best to make the block appear fine as default. In this Gutenberg era, as thousands of blocks are blooming, leaving themes to style every block isn't realistic :)

More importantly, let's put users first. Would they ever want the block to be edge-to-edge? I doubt it unless they choose the "show media behind" option or they add the block inside of a group block with a background color or some sort of a layout block that already has paddings.

Therefore, I think it's best for the block to have gutters on outside as default, and have an option to remove it for the cases like above.

If we are concerned about "breaking" the sites that already have the block, we could leave the default as it is now and add an option to add gutters outside, but I think it'd be better for a long term if the block appears as good as it can be without asking the users to do something.

I was thinking something similar do any of the alignfull blocks feature text? I think they all have text with some sort of bounded area.

I was thinking something similar do any of the alignfull blocks feature text?

Two of the bigger ones that come to mind are:

• Columns (though it doesn't have to have text -- it just can)
• Images with captions

I've also run into this with the Pullquote block, though it kind of depends how the theme is styling it otherwise. Out of the box <blockquote> and block styles have padding, and text aligned center, but depending on what you've done with it in your theme -- eg. removed the <blockquote> padding and made it left-aligned -- you also need to explicitly add spacing when its full width.

There are some oddball ones, too, but I feel they're much less likely to get aligned full on sites. It doesn't look like any of these have special styles in Twenty Twenty, so they do hit the edges:

• Archive
• Categories
• Latest Comments
• Latest Posts

There are some oddball ones, too, but I feel they're much less likely to get aligned full on sites. It doesn't look like any of these have special styles in Twenty Twenty, so they do hit the edges:

Gah, I remember how annoying it was to style all those blocks, that very clearly need a bit of horizontal space on either side to not look broken. From theming perspective it was a ton of tedious and superfluous work, and something that should be handled by the block itself at a basic level. I dug through the Gutenberg issues and didn't find any mentioning this for the core blocks, so might be worth reporting there.

In this case though what would be the right place to address this if we wanted a fix at block level? Newspack?

I'd say that if the root cause is a Core Block then we should be looking to resolve this in Core as the benefit will then ripple out to all our projects and the open source.

Opened an issue for it in Core: https://github.com/WordPress/gutenberg/issues/20646, but Blog Posts is a Newspack block, so it still needs a separate fix, right?

but Blog Posts is a Newspack block, so it still needs a separate fix, right?

Yes, correct. And I agree that the block should address the issue with CSS in the block. Having gutters outside alone would be a good first step. It'd be nice if we can change the gutter size though.

Hey! I've been tracking an issue regarding this and I'm unsure if this is related or not.

Whenever the Blog posts block is grouped and the Blog posts block has a wide or a full-width alignment, the Group block content/wide options are ignored. Example:

If I removed the alignment on the Blog posts block, I'm getting the right results:

Does this qualify as the same issue or a different one?

Note: I can't seem to get the Newspack blocks to work on my self-hosted site so I cannot confirm if that's a .com specific thing or not.