Wide / full width alignment not applicable when layout has sidebar/non full width

[haszari]

Describe the bug

The Gutenberg image block has full and wide alignment options. In Storefront these are not fully supported - on pages and posts, images are limited to the main body content width.

Also there's a quirk with editor preview of wide and full. When editing, if you select wide or full alignment, the image is displayed with wide or full aligment (wider than content column). (Side note: this is a misleading preview, since it's not supported on the front end.) If you reload the editor, the image block displays with centered alignment - images are limited to the content width (default alignment).

Perhaps we should explicitly not support wide and full - there's a theme_option for this. Alternatively, if this is an important feature, we could improve our support and fix the editor preview (as an enhancement).

To Reproduce

Steps to reproduce the behavior:

1. Edit a post or page.
2. Add an image block.
3. Set alignment to wide or full – see image expand wider than content column in editor preview.
4. Publish post/page, check front end – see image is limited to content width.
5. Reload the editor for the post/page – note that image has wide/full set but is now limited to content width (default alignment option).

Screenshots

Full alignment selected in editor, preview shows image expanded to full width:

On front end, full is limited to column width (looks different from preview):

Reload editor, block set to full but preview is limited to column width:

[haszari]

See also potentially related / similar issues #1110 #1179 #1255

[nielslange]

Reported in 2766114-zen (Mentioned in #1286 by @anant1811)

[haszari]

Related: there's a specific module in Storefront which resets/tweaks an alignment attribute for blocks when the template is changed. See this file: https://github.com/woocommerce/storefront/commits/master/assets/js/src/editor.js

[haszari]

I have investigated and I think I understand what's happening.

Storefront does have some support for alignwide/alignfull. This is declared in class-storefront.php and there are lots of relevant styles in gutenberg-blocks.css.

You can see this working for columns and cover blocks, on pages that use the full width template. (Note this screenshot is taken with browser zoomed out, so looks weird)

Images don't seem to work. Since cover block and columns are working, perhaps we have some overrides which have regressed at some point.

In addition, there's support in editor.js related to this. It looks like it's resetting the align-wide option dynamically, dependent on what template the user has selected. However this doesn't seem to have any effect. I'm guessing that's because the blocks aren't subscribing to changes in align-wide - so they always show the full or wide options, since the option is true on page load.

I haven't tested what's happening with posts (as opposed to pages) – posts can be displayed in different templates/routes (e.g. posts/category archives, the post page) which can have sidebar. So in Storefront there may be limited benefit in using full or wide in posts.

[haszari]

Removing from 2.5.6 for now – I don't think we should rush into a fix for this. The existing behaviour is not causing problems, just has some quirks.

[haszari]

In my testing for 2.5.6 RC I saw that full/wide seem to be working well for pages with Full width template.

In blog posts, if there is a sidebar (i.e. sidebar has widgets) then the full width setting doesn't work - which makes sense. Full width still works when there's no sidebar content, so maybe that explains what I saw.

[haszari]

Updated the title to clarify. Now I understand what's supported, I don't think this is a major problem. We may be able to clarify documentation, and review if the editor.js custom support is working as expected & still providing value.

[haszari]

Added this to 2.5.7 - would be good to simplify/improve this if safe to do so.

[pmciano]

Something similar was reported in 21600190-hc / 3343680-zen.

On desktop, a full-width cover block image appears full width on all pages (backend and frontend), except for the Shop page (backend appears full-width, frontend is not full width).

On mobile, the full-width cover block images do not appear full width on any page (frontend).

If this requires a separate issue, let me know.