Preformatted: Add spacing support (#45196)

* Preformatted: Add spacing support
WordPress · Jul 24, 2023 · 132c8e4 · 132c8e4 · github-actions · Jul 24, 2023
1 parent fbe27a5
commit 132c8e4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -646,7 +646,7 @@ Add text that respects your spacing and tabs, and also allows styling. ([Source]
 
 -	**Name:** core/preformatted
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, text), typography (fontSize, lineHeight)
+-	**Supports:** anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** content
 
 ## Pullquote

diff --git a/packages/block-library/src/preformatted/block.json b/packages/block-library/src/preformatted/block.json
@@ -25,6 +25,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"padding": true,
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

diff --git a/packages/block-library/src/preformatted/style.scss b/packages/block-library/src/preformatted/style.scss
@@ -1,7 +1,10 @@
 .wp-block-preformatted {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	white-space: pre-wrap;
 }
 
-.wp-block-preformatted.has-background {
+// 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;
 }