Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout issues in Row block with Yoast plugin active #54943

Closed
bgardner opened this issue Sep 29, 2023 · 10 comments · Fixed by #54981
Closed

Layout issues in Row block with Yoast plugin active #54943

bgardner opened this issue Sep 29, 2023 · 10 comments · Fixed by #54981
Assignees
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Status] In Progress Tracking issues with work in progress [Type] Regression Related to a regression in the latest release

Comments

@bgardner
Copy link

bgardner commented Sep 29, 2023

Description

As reported in Slack, I am experiencing an issue with layout (Row block inside of Group block) and the "Space between items" setting not being honored with Yoast plugin active.

Step-by-step reproduction instructions

  1. Add a Group block, set to Full-width layout.
  2. Add a Row block inside, set to Wide-width layout, add two items, and select "Space between items" setting.
  3. Activate Yoast plugin.

Screenshots, screen recording, code snippet

Screen.Recording.2023-09-29.at.2.21.31.PM.mp4

Environment info

WordPress 6.4-beta1, with and without Gutenberg 16.7 active.
TT3 theme active.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@bgardner
Copy link
Author

Worth noting that this is only an issue with the block editor, as the front end operates as expected.

@Mamaduka
Copy link
Member

You can also reproduce the issue by enabling the Custom Fields. This is probably related to the editor switching to a non-framed canvas.

Screenshot

CleanShot 2023-09-30 at 10 07 51

@Mamaduka Mamaduka added [Type] Regression Related to a regression in the latest release [Feature] Layout Layout block support, its UI controls, and style output. labels Sep 30, 2023
@t-hamano
Copy link
Contributor

t-hamano commented Oct 2, 2023

I found that when the editor is not an iframe, the style is not applied because the .editor-styles-wrapper selector is nested in the output container class.

editor-styles-wrapper

@Mamaduka
Copy link
Member

Mamaduka commented Oct 2, 2023

I think the regression is a side-effect of the following changes:

  • Iframe: skip scoping styles #46752 - makes only non-iframed editor styles scoped. It is not an issue itself, but it makes it harder to catch the bug when using the Gutenberg plugin and metaboxes aren't active.
  • Layout: use override editor style API #54466 - switched layout styles to use new styles override API. Layout styles are rendered via the EditorStyles component, so scoping is applied for non-iframed editors.

The getLayoutStyle method already appends the wrapper scope to the generated CSS, so we get double wrapping.

@t-hamano
Copy link
Contributor

t-hamano commented Oct 2, 2023

I was also looking for the cause of this problem, and through git bisect I was able to identify that #54466 caused this problem.

@Mamaduka
Copy link
Member

Mamaduka commented Oct 2, 2023

I tried fixing this without changing the way layout styles are generated — result #54981.

@bgardner
Copy link
Author

bgardner commented Oct 3, 2023

@Mamaduka @glendaviesnz @t-hamano @annezazu

This issue does not appear to be resolved, as I just tested again with WP 6.4 Beta-2.

Screen.Recording.2023-10-03.at.11.59.09.AM.mp4

@mikachan
Copy link
Member

mikachan commented Oct 3, 2023

Hey @bgardner. #54981 wasn't included in Beta 2 (we'd already synced the GB Beta 2 fixes when it was merged), but it will go into Beta 3. In the meantime, I can test this as soon as #54981 has been cherry-picked, ahead of Beta 3.

@bgardner
Copy link
Author

bgardner commented Oct 3, 2023

@mikachan Ah, gotcha. For some reason I thought it was in Beta 2, so I'll test again once 3 goes out. Appreciate the insight.

@mikachan
Copy link
Member

mikachan commented Oct 9, 2023

Confirming that I've tested these changes as part of the updates for 6.4 Beta 3, and I can no longer see this issue. @bgardner It would be amazing if you could also double-check this once Beta 3 is released! 🙇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Status] In Progress Tracking issues with work in progress [Type] Regression Related to a regression in the latest release
Projects
No open projects
Status: Done
Development

Successfully merging a pull request may close this issue.

4 participants