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

Apply negative margins for alignfull children of blocks with custom padding set #60716

Merged
merged 1 commit into from
Apr 15, 2024

Conversation

richtabor
Copy link
Member

@richtabor richtabor commented Apr 12, 2024

What?

As part of the layout exploration from #60308, I noticed that the negative margin applied to top-level fullwidth blocks of groups with custom padding was not being applied on the front-end. The result is overflowing content on the front-end of the site. I'm using this gist to test.

Why?

Currently if you place a fullwidth block inside another fullwidth block, the expectation is that it is also fullwidth—that's what's happening in the editor.

That works fine, until that parent block has custom padding applied to it. Within the editor, the treatment is applied to appropriately negate the custom padding, but the corresponding treatment on the front-end was omitted from fullwidth blocks.

How?

I moved it out of the logic that was previously filtering it to $content or $wide align blocks only.

Testing Instructions

  1. Open a post or page.
  2. Insert a group block.
  3. Give it a background color (so you can see the padding better).
  4. Set it to fullwidth.
  5. Assign a padding value to it.
  6. Add an image to the group block.
  7. Set that image to fullwidth.
  8. See that the image is fullwidth and there is no overflow scroll, in the editor or on the front-end.

Visuals

CleanShot.2024-04-12.at.16.26.39.mp4

This also resolves the inconsistency between the editor and front-end of fullwidth > fullwidth blocks within constrained layouts:

Before (editor/front-end)

CleanShot 2024-04-12 at 16 21 32

After (editor/front-end)

CleanShot 2024-04-12 at 16 22 52

@richtabor richtabor added [Type] Enhancement A suggestion for improvement. [Feature] Layout Layout block support, its UI controls, and style output. labels Apr 12, 2024
@richtabor richtabor self-assigned this Apr 12, 2024
@richtabor richtabor requested a review from SaxonF April 12, 2024 20:30
@richtabor richtabor marked this pull request as ready for review April 12, 2024 20:36
Copy link

github-actions bot commented Apr 12, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: bph <bph@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

richtabor added a commit that referenced this pull request Apr 12, 2024
@richtabor richtabor mentioned this pull request Apr 12, 2024
7 tasks
@bph
Copy link
Contributor

bph commented Apr 13, 2024

Pinging the @WordPress/outreach group. @richtabor mentioned, he could us more eyes on this PR

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh well spotted, thanks for fixing this! Looks like the issue was there since #42085 😅

if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
$padding_right = $block_spacing_values['declarations']['padding-right'];
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any way a theme can filter this CSS?

I am applying automatic padding for blocks with background set in my theme, however the CSS in the theme has a higher specificity (and can not be lowered) than the Gutenberg produced CSS.

So, I'd like to filter this Gutenberg CSS and rise the specificity by changing "$selector > .alignfull" to "$selector > .alignfull.alignfull", for example. Is this possible somehow?

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. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants