From 8ac6b74641772516ac1e39c3956f5c7a77120a30 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 10 Apr 2019 14:36:04 +0100
Subject: [PATCH] Adjust paragraph block spacing to use standardised variables
 (#14679)

* Adds vars for Block padding when background present

There are a number of cases where a backgroud is added to a Block which then requires that the Block has padding within the Editor to make it look visally acceptable. These values are often hardcoded. To standardise these, we add vars for vertical and hoz padding for Blocks which have background applied.

* Adds new Block with background vars to paragraph Block

Replaces existing values with equivalents but as variables. This will allow us to utilise these standardised vars elsewhere such as the Section Block.

* Updates variable to BEM specification
---
 assets/stylesheets/_variables.scss              | 2 ++
 packages/block-library/src/paragraph/style.scss | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 1c30d4f053d66..f10eeb6152776 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -58,6 +58,8 @@ $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: 28px; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
+$block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or section)
+$block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or section)
 
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index 5fe83b763c70c..62f47a757a7bc 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -36,7 +36,7 @@
 }
 
 p.has-background {
-	padding: 20px 30px;
+	padding: $block-bg-padding--v $block-bg-padding--h;
 }
 
 p.has-text-color a {