Block Library: Allow themes to override the padding added via background color

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

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});
 
 
 /**

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

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;
 }
 
 

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;
 }

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"]) {

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;
 }

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

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;
 }

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;
 }