Consider allowing page templates to opt in or out of wide elements, instead of a global opt-in

[maddisondesigns]

Issue Overview

At the moment, Gutenberg only seems to be concerned with full width pages. The ability to change the page template still hasn't been implemented yet, but I'm assuming that it will be by the time 5.0 comes around. Not everyone wants every page on their site to be full-width, so the ability to change page templates is a must. Not only that, the use of page templates is extremely useful when using something like ACF as you can configure different custom fields to display based on the template in use.

At the moment, Gutenberg only allows you to turn on/off the ability to add wide images/tables using add_theme_support. This might be fine when you first create or edit a page, but what happens when someone changes their template to one that has a sidebar? Users are going to be presented with toolbar icons that perform no useful function, or at worse, break their layout. Having images/tables that extend outside of the main body content area is not something that's of use when using a template that has a sidebar.

Gutenberg needs to automatically disable these toolbar icons when the template is switched to one with a sidebar. If Gutenberg had true multi-column support like a proper page builder, this would be less of a problem as a theme could actually get away without having a template with a sidebar as the user could just add a sidebar column into their page. Since it doesn't though, and it definitely wont when it's first released, this makes it an issue that Gutenberg needs to handle in other ways, such as by disabling icons automatically. By not disabling them, you're going to cause users endless frustration, thinking that their site doesn't work properly as it has toolbar options that sometimes work and sometime don't.

[karmatosed]

This is just a suggestion but as a theme maker if you were creating a theme that supported full width images, you'd unhook that using CSS for sidebar templates. As multi-column support isn't part of the first focus, the editor, this makes sense. Because the theme is declaring it, representation is up to the theme.

[maddisondesigns]

@karmatosed I'm not sure if I'm following you correctly. My question was in relation to how Gutenberg is going to handle things on the editor side, not the front-end.

When a user is editing their page in Gutenberg, and they change the template from the default template (which is single-column full-width, for example), to a template that is using a sidebar, how is Gutenberg to handle the fact that toolbar icons such as Wide Width and Full Width will no longer be relevant?

Using the Gutenberg Theme as a reference...

The first image you see in that screenshot has no alignment, the second is Wide Width and the third is Full Width. When the template is just displaying a single column of content, you can see that the Wide and Full aligned images extend past the width of the top Paragraph block. For a single column (full width) template, this works fine.

If I want to use a template that has a sidebar though, having images that extend outside of the main content area makes no sense as they'd extend into the sidebar column. So going back to the editor, if I change the template for the current page to one which has a sidebar, I still have toolbar icons for Wide Width and Full Width. When a users adds an image and then aligns it with either of those icons, they're going to find that they don't actually do anything when they preview their page. So what I'm saying is, if the template is changed to one which has a sidebar, Gutenberg needs to disable or remove those icons from the toolbars because it's a terrible user experience having icons that basically perform no function.

To put it in simpler terms, if you have a theme with a sidebar template like the following, having Wide Width and Full Width icons on Image and table blocks makes no sense so Gutenberg needs to disable them whenever someone switches the template to one that has a sidebar.

[karmatosed]

The way that full widths work is by being declared in the theme. Therefore currently, it is expected the theme would accommodate depending on the template. For example having CSS or other work arounds.

[maddisondesigns]

Sorry, but that still doesn't answer my question though. I fully understand that the theme declares support for wide images/tables.

When a theme has declared support for wide images/tables, what happens when the template is switched (to one with a sidebar) while editing the page? The Wide Width and Full Width toolbar buttons no longer do anything useful when editing that page. The theme can't control this, it's up to Gutenberg to disable them for that particular template.

[jasmussen]

Wanted to add this codepen, which features wide images, floats, and a sidebar, and the code is fairly simple: https://codepen.io/joen/pen/oEYVXB

what happens when the template is switched (to one with a sidebar) while editing the page? The Wide Width and Full Width toolbar buttons no longer do anything useful when editing that page.

Two questions in that statement as far as I can parse, please correct me if I'm wrong:

1. What happens when you have authored posts that leverage wide and fullwide images in one theme, switch to a new theme that does not support wide and fullwide images?

2. What happens when you switch from a theme that supports wide images, to a theme that supports wide images and have a sidebar?

In the case of 2, that's easy — things just continue to work. They'll just look different in the theme.

1 is less ideal, though should still be transparent for the user. In the end, all the wide and fullwide buttons do, is add the CSS classes alignwide and alignfull to the image (more here). If the theme doesn't do anything with those classes, the images will just look like images with no alignment. In the editor, the classes may still be there underneath, but with the buttons visible.

Did that answer your question?

[maddisondesigns]

Thanks for that example. What you've done looks really nice, but for a large portion of sites and existing themes, that layout isn't going to work that well. That layout works nicely when the page is full width. Also, you have an extremely large amount of space between the main content area and the sidebar. In reality, there's an awful lot of sites that don't have this.

As an example, take a look at (the preview for) these three random themes (Explore, Positor, Tokimeki). There was no thought in which themes I chose there, they were just the first three themes that appear in the Theme Directory Featured section on WordPress.org.

This layout is very typical of a lot of websites. A main content area of a certain width (Typically 800px - 1100px on average), and either one or two sidebars. Most times these sidebars only have a margin of 20-50px from the main content area.

While I fully understand it's up to the theme itself on how it handles wide and full images, my concern is how a theme is going to handle both a single column templates and two or three columns templates (eg. one or two sidebars).

A typical single column layout might look something like this...

In this example above, you'd want to take advantage of the ability to insert Wide and Full images. And this would obviously be easy to do.

That same theme though, is most likely also going to have a template with a sidebar, which would most likely look something like this.

When using a template like this, the css for the template is basically going to ignore Wide Width and Full Width classes so that the images don't overlap the sidebar content .

And that's where my concern is. When Someone is editing their page, if they have the page template set to a single column template, the Wide Width and Full Width toolbar icons are useful, and when they preview their page, they'll be able to see how it's made their images display wider.

However, if the user switches the template to one that has a sidebar, those Wide Width and Full Width toolbar icons are basically useless because no matter what they select, the image is most likely going to be restrained to that main column width. I feel this is going to be confusing for the user. They'll be expecting the Wide Width and Full Width toolbar icons to change how their images are displayed, but in actual fact, they wont do anything. I feel that if your editing your page and you change to a sidebar template, then those Wide Width and Full Width toolbar icons should become disabled.

Or an even better option, would be allowing the theme to specify whether they should be enabled or disabled, based on the template that's selected.

Apologies if I'm not explaining myself clearly. I quickly created those images above to hopefully help illustrate my point better.

[jasmussen]

This layout is very typical of a lot of websites. A main content area of a certain width (Typically 800px - 1100px on average), and either one or two sidebars. Most times these sidebars only have a margin of 20-50px from the main content area.

That same theme though, is most likely also going to have a template with a sidebar, which would most likely look something like this.

And that's where my concern is. When Someone is editing their page, if they have the page template set to a single column template, the Wide Width and Full Width toolbar icons are useful, and when they preview their page, they'll be able to see how it's made their images display wider.

Solid points, and solid observation too. Good explanation too. The key aspect here is that the same theme might offer wide aligments using one template, and not another.

Or an even better option, would be allowing the theme to specify whether they should be enabled or disabled, based on the template that's selected.

I think that's an option — registering the theme support on a per-template or per-CPT basis.

One of the hopes of Gutenberg is that at some point the theme stylesheet, style.css, not editor-style.css, will be loaded directly into Gutenberg, affecting both the theme main column width, how floats and wide images look, etc. In such a situation, the direct preview of the end result should help mitigate any disconnects a user might feel when trying to apply a wide alignment on a page template that doesn't leverage it well.

In the near future, though, I think the challenge you present should ideally be handled by the theme developer, and that this challenge is exactly why the feature is opt-in.

The example you sketched out here, would not be optimized for wide images. However I firmly believe that a theme can be optimized for wide images, with or without sidebar, just like how a theme can work well in a mobile responsive context, yet scale to leverage columns on a larger display.

These two codepens could easily be the same theme, with two different page templates:

• With sidebar: https://codepen.io/joen/pen/oEYVXB
• Without sidebar: https://codepen.io/joen/pen/oEzYxb

[maddisondesigns]

The ability to register theme support on a per-template basis would be really useful.

[jasmussen]

Took the liberty of renaming the ticket.

[ChemicalSailor]

I think that's an option — registering the theme support on a per-template or per-CPT basis.

Just want to show my support for this. I'm making a child theme at the moment to add some block editor goodness. I've added align wide/full support for pages using a fullwidth and sidebar templates. Somehow it doesn't quite seem right to have the same support for posts (based on the template I'm working with) and I'd rather not be showing the alignment options to users in the backend in that case, but it seems that is not possible at the moment. As it's a child theme I don't particularly want to make lots of heavy changes to the layout.

[ChemicalSailor]

It would also be nice, if adding this type of granularity, to be able to specify support for only alignwide and not alignfull.

[youngmicroserf]

Has there been any movement on this matter?

[paaljoachim]

I am just dropping by...
From seeing the linked PR's it looks like this issue is still valid.

[paaljoachim]

Regarding Page templates. Here is a PR that is being worked on:
#30438

[youknowriad]

I think the crux of this issue is now solved with the "layout" feature. A dedicate dev note will be published soon.

[ethanclevenger91]

@youknowriad not sure what a Gutenberg "layout" is, and Google isn't providing much. Any chance you have a link to this dev note?

[youknowriad]

Sure, here's the dev note: https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/