diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index d2460ba4b0e5d8..44a91036d6c324 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- Add a `$block-bg-padding` variable that resolves the default background padding through the `--wp--style--block-background-padding` custom property, keeping the existing values as its fallback ([#82024](https://github.com/WordPress/gutenberg/pull/82024)). + ## 13.0.0 (2026-08-26) ### Breaking Changes diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index e1d975ef0180ed..f199f9eeccd92f 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -153,8 +153,11 @@ $default-font-size: $font-size-medium; */ // Padding for blocks with a background color (e.g. paragraph or group). +// Use $block-bg-padding; the --v and --h values below are only its fallback, +// so referencing them directly skips the theme override. $block-bg-padding--v: 1.25em; $block-bg-padding--h: 2.375em; +$block-bg-padding: var(--wp--style--block-background-padding, #{$block-bg-padding--v} #{$block-bg-padding--h}); /** diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 4d575797282862..529cdb140ddb46 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -5,6 +5,7 @@ ### Enhancements - Math: Declare `interactivity.clientNavigation` support. The block's front end output is static markup, and without the declaration a Math block inside a Query block forced full page reloads on pagination ([#82248](https://github.com/WordPress/gutenberg/pull/82248)). +- Paragraph, List, Heading, Preformatted, Columns, Group, Template Part: Read the default padding these blocks add when they have a background color from the `--wp--style--block-background-padding` custom property, so themes can change or remove it ([#82024](https://github.com/WordPress/gutenberg/pull/82024)). - Query: Show a snackbar notice instead of a blocking modal when "Reload full page" is turned on automatically because a block inside the Query block doesn't support client-side navigation ([#82246](https://github.com/WordPress/gutenberg/pull/82246)). ### Bug Fixes diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 99de22de7ed1f2..9336c7b9a3a3c9 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -84,7 +84,7 @@ // Add low specificity default padding to columns blocks with backgrounds. :where(.wp-block-columns.has-background) { // Matches paragraph block padding. - padding: $block-bg-padding--v $block-bg-padding--h; + padding: $block-bg-padding; } diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss index 5890a7b0f19c8b..54c4a62b34d22a 100644 --- a/packages/block-library/src/group/theme.scss +++ b/packages/block-library/src/group/theme.scss @@ -3,5 +3,5 @@ // Add low specificity default padding to groups with backgrounds. :where(.wp-block-group.has-background) { // Matches paragraph block padding. - padding: $block-bg-padding--v $block-bg-padding--h; + padding: $block-bg-padding; } diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss index 2dbf16aaea842f..74140c4b33668a 100644 --- a/packages/block-library/src/heading/style.scss +++ b/packages/block-library/src/heading/style.scss @@ -7,7 +7,7 @@ h4, h5, h6 { &:where(.wp-block-heading).has-background { - padding: $block-bg-padding--v $block-bg-padding--h; + padding: $block-bg-padding; } &.has-text-align-right[style*="writing-mode"]:where([style*="vertical-rl"]), &.has-text-align-left[style*="writing-mode"]:where([style*="vertical-lr"]) { diff --git a/packages/block-library/src/list/style.scss b/packages/block-library/src/list/style.scss index 7a1107e5c027c1..9edc3c0a562833 100644 --- a/packages/block-library/src/list/style.scss +++ b/packages/block-library/src/list/style.scss @@ -6,5 +6,5 @@ ul { } :root :where(.wp-block-list.has-background) { - padding: $block-bg-padding--v $block-bg-padding--h; + padding: $block-bg-padding; } diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 686b574cebfcb6..1ae331ef9d19db 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -42,7 +42,7 @@ p.has-drop-cap.has-background { // Specificity is reduced to 0-1-0 so global styles can override this. :root :where(p.has-background) { - padding: $block-bg-padding--v $block-bg-padding--h; + padding: $block-bg-padding; } // Use :where to contain the specificity of this rule diff --git a/packages/block-library/src/preformatted/style.scss b/packages/block-library/src/preformatted/style.scss index fe529c4fbb02ce..da5e0ef283e15c 100644 --- a/packages/block-library/src/preformatted/style.scss +++ b/packages/block-library/src/preformatted/style.scss @@ -8,5 +8,5 @@ // Add low specificity default padding when a background is used. :where(.wp-block-preformatted.has-background) { - padding: $block-bg-padding--v $block-bg-padding--h; + padding: $block-bg-padding; } diff --git a/packages/block-library/src/template-part/theme.scss b/packages/block-library/src/template-part/theme.scss index 4b27771b92b5f6..379ba8dfb7514a 100644 --- a/packages/block-library/src/template-part/theme.scss +++ b/packages/block-library/src/template-part/theme.scss @@ -3,7 +3,7 @@ // Same as the group block styles. :root :where(.wp-block-template-part.has-background) { // Matches paragraph Block padding - padding: $block-bg-padding--v $block-bg-padding--h; + padding: $block-bg-padding; margin-top: 0; margin-bottom: 0; }