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

Bug on useRootPaddingAwareAlignments mode when using core/columns block with alignfull #50861

Closed
daviedR opened this issue May 23, 2023 · 0 comments · Fixed by #53259
Closed
Assignees
Labels
[Block] Columns Affects the Columns Block [Block] Group Affects the Group Block (and row, stack and grid variants) [Feature] Layout Layout block support, its UI controls, and style output. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@daviedR
Copy link
Contributor

daviedR commented May 23, 2023

Description

When useRootPaddingAwareAlignments mode is enabled (on theme.json), root left and right padding will be added to core/group blocks with a constrained layout, and any nested full-width (alignfull) blocks will stretch outside of the parent group itself.

The children of the alignfull blocks will also get additional left and right padding to compensate for the negative margin given to the alignfull parent block.

However, this causes issues if the alignfull block is a core/columns block. The core/column blocks inside will automatically get additional left and right padding.

This issue also happens on core/group block with row mode (horizontal flex).

This issue doesn't happen in the Block Editor preview, only on the frontend side.

Step-by-step reproduction instructions

  1. Test using a fresh installation of WordPress 6.2.2 and use the default TwentyTwentyThree theme.
  2. Create a new page and insert this block snippet:
<!-- wp:columns {"align":"full","backgroundColor":"cyan-bluish-gray"} -->
<div class="wp-block-columns alignfull has-cyan-bluish-gray-background-color has-background"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph {"backgroundColor":"luminous-vivid-amber"} -->
<p class="has-luminous-vivid-amber-background-color has-background">Paragraph on The Left Column</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph {"backgroundColor":"light-green-cyan"} -->
<p class="has-light-green-cyan-background-color has-background">Paragraph on The Right Column</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
  1. Publish or save, and then view the page on the frontend side.

Screenshots, screen recording, code snippet

Screen Shot 2023-05-23 at 14 18 53

Environment info

  • WordPress 6.2.2
  • TwentyTwentyThree theme
  • Gutenberg 15.8.1 (bug occurs with or without Gutenberg plugin)

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

@kathrynwp kathrynwp added [Block] Columns Affects the Columns Block [Block] Group Affects the Group Block (and row, stack and grid variants) [Type] Bug An existing feature does not function as intended labels May 23, 2023
@tellthemachines tellthemachines added the [Feature] Layout Layout block support, its UI controls, and style output. label Aug 2, 2023
@tellthemachines tellthemachines self-assigned this Aug 2, 2023
@tellthemachines tellthemachines added the [Status] In Progress Tracking issues with work in progress label Aug 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block [Block] Group Affects the Group Block (and row, stack and grid variants) [Feature] Layout Layout block support, its UI controls, and style output. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants