From 132c8e4ddfce5b74829dc319c84c980ba71b1d33 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 24 Jul 2023 08:39:03 +0200 Subject: [PATCH] Preformatted: Add spacing support (#45196) * Preformatted: Add spacing support --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/preformatted/block.json | 4 ++++ packages/block-library/src/preformatted/style.scss | 5 ++++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index d0a6ca7d356b2f..62604319e9aa0e 100644 --- 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 index f781cb1125efa0..ec6ea839385eb2 100644 --- 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 index 71e60ffe4ea529..783fee74d4f4fa 100644 --- 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; }