Skip to content
This repository has been archived by the owner on Jan 26, 2022. It is now read-only.

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Override has-background Gutenberg CSS.
Browse files Browse the repository at this point in the history
jffng committed Dec 13, 2021
1 parent 705a6da commit 395e093
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
@@ -92,6 +92,7 @@ a:active {

.wp-site-blocks,
.is-root-container,
.wp-block-group:where(.has-background),

This comment has been minimized.

Copy link
@kjellr

kjellr Dec 13, 2021

Collaborator

It's weird that this is necessary — I thought Gutenberg was using :where() specifically so that it would be easy to override? Maybe @jasmussen can provide a gut check here.

This comment has been minimized.

Copy link
@jasmussen

jasmussen Dec 13, 2021

It should be easy for you folks to target the group block and override the padding, regardless of whether the group block has any padding by default. I imagine it does when a background is applied, in which case this is copying the same rule which might make sense? But I'll dive in first thing tomorrow and check out what's up with the core rules. If we do apply a padding when a background is applied, potentially we can reduce the specificity to someting like :where(.wp-block-group.has-background) 🤔

This comment has been minimized.

Copy link
@jffng

jffng Dec 13, 2021

Author Collaborator

Previously we had block-level padding values on patterns / template parts containing a group block with a background color (like the dark header). But in this PR we remove them in favor of a global padding, and it takes a little CSS to override Gutenberg's default here, to apply this global padding to group block's with a background. I think that's fairly reasonable.

This comment has been minimized.

Copy link
@jasmussen

jasmussen Dec 14, 2021

I managed to lower the specificity further in WordPress/gutenberg#37356, which could reduce it here as well. It's a hyper optimization, but wanted to follow up.

.edit-post-visual-editor__post-title-wrapper {
padding-left: var(--wp--custom--spacing--outer);
padding-right: var(--wp--custom--spacing--outer);
@@ -113,4 +114,4 @@ a:active {
margin-left: auto !important;
margin-right: auto !important;
width: inherit;
}
}

0 comments on commit 395e093

Please sign in to comment.