Layout Support appears to be incomplete

Created on 24 July 2024, 6 months ago

Problem/Motivation

Currently doing a clean install or update to the latest Gutenberg version shows that the layout is visually broken compared to what it originally was in 2.x.

It appears that we are missing some of the generated styles which the WordPress version generates.

On first glance two issues pop out:

  1. The styles generated here are not actually used or added to the page similar to the Style engine used in Add Style Engine for style rendering on server-side Fixed .
  2. Update the LayoutProcessor::isSupported() so that it supports existing content which might not have the layout or style supports by checking if the block definition actually supports it.

Steps to reproduce

Spin up a new Gutenberg instance either in gitpod.io or simplytest.me/tugboat, and attempt to add 3 columns with background colours - the UI will be a bit broken.

Proposed resolution

Update the styles so that they have parity with the upsteam WordPress version for the same piece of content.

Remaining tasks

Provide issue fork.

User interface changes

UI should no longer be broken for existing blocks which support the layout feature.

🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @codebymikey
  • 🇳🇴Norway thorandre

    Thanks for submitting. I tried to recreate with DG 3 and Drupal 10 with the Gutenberg starter theme and I cannot recreate it.

    Maybe I just miss out on the part of the UI you're thinking about?

  • Hi Thor,

    I also couldn't replicate the issue in the latest version, and on doing some further investigation, a fix for the missing styles was added in this commit.

    I think my tests at the time of writing were based off 3.0.0-beta5 which didn't have the fix, and was only added in 3.0.0-beta6.

    The LayoutProcessor::isSupported() review part was added for a reason though, I haven't worked on the 3.x branch in a while, but I'll be sure to update the issue summary accordingly if I run into any specific issues when I attempt an upgrade.

  • Upon upgrading to the latest 3.0.5 version, I was finally able to replicate what my original issue was.

    And can be replicated by creating the attached piece of content on a WordPress installation running Gutenberg 10.7.0 (equivalent of Drupal's v2.14) and WP 5.9, then later viewing the same content after updating to Gutenberg 16.7.0 (equivalent of Drupal's 3.0.5).

    The frontend styles and HTML has changed enough that it no longer uses margins for the spacing, however, those same classes are currently missing in the current Drupal implementation and messes up the layout:

    The expected layout should be something along the lines of this:

Production build 0.71.5 2024