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

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

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 {