Use inline styles instead of CSS variables for the style attribute

lib/patterns/its-time.json

@@ -1,5 +1,5 @@
 {
 	"__file": "wp_block",
 	"title": "It's time",
-	"content": "<!-- wp:group {\"align\":\"wide\",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group alignwide has-background\" style=\"--wp--color--background:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"customTextColor\":\"#df3100\"} -->\n<p style=\"color:#df3100\" class=\"has-text-color\"><strong>NEW</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">John Lenwood \"Jackie\" McLean was an American jazz alto saxophonist, composer, bandleader, and educator, and is one of the few musicians to be elected to the DownBeat Hall of Fame in the year of their death.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"customTextColor\":\"#ffffff\"} -->\n<p style=\"color:#ffffff\" class=\"has-text-color\"> space</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Derek Ansell's full-length biography of McLean, Sugar Free Saxophone (London: Northway Books, 2012), details the story of his career and provides a full analysis of his music on record.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"width\":0} -->\n<div class=\"wp-block-column\" style=\"flex-basis:0%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":100} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#000000\",\"customFontSize\":250} -->\n<p style=\"color:#000000;font-size:250px\" class=\"has-text-color has-text-align-center\"><strong><em>it's time</em></strong> </p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->"
+	"content": "<!-- wp:group {\"align\":\"wide\",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group alignwide has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"customTextColor\":\"#df3100\"} -->\n<p style=\"color:#df3100\" class=\"has-text-color\"><strong>NEW</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">John Lenwood \"Jackie\" McLean was an American jazz alto saxophonist, composer, bandleader, and educator, and is one of the few musicians to be elected to the DownBeat Hall of Fame in the year of their death.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"customTextColor\":\"#ffffff\"} -->\n<p style=\"color:#ffffff\" class=\"has-text-color\"> space</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Derek Ansell's full-length biography of McLean, Sugar Free Saxophone (London: Northway Books, 2012), details the story of his career and provides a full analysis of his music on record.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"width\":0} -->\n<div class=\"wp-block-column\" style=\"flex-basis:0%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":100} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#000000\",\"customFontSize\":250} -->\n<p style=\"color:#000000;font-size:250px\" class=\"has-text-color has-text-align-center\"><strong><em>it's time</em></strong> </p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->"
   }

lib/patterns/numbered-features.json

@@ -1,5 +1,5 @@
 {
 	"__file": "wp_block",
 	"title": "Numbered Features",
-	"content": "<!-- wp:group {\"align\":\"wide\",\"style\":{\"color\":{\"background\":\"#f3ece3\"}}} -->\n<div class=\"wp-block-group alignwide has-background\" style=\"--wp--color--background:#f3ece3\"><div class=\"wp-block-group__inner-container\"><!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>1</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">Custom Designs</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Extend it with over 54,000 plugins to help your website meet your needs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":20} -->\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>2</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">High Performance</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Add an online store, galleries, mailing lists, forums, analytics, and much more.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":20} -->\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>3</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">Easy and Accessible</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Hundreds of thousands of developers and site owners trust it worldwide.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group --></div></div>\n<!-- /wp:group -->"
+	"content": "<!-- wp:group {\"align\":\"wide\",\"style\":{\"color\":{\"background\":\"#f3ece3\"}}} -->\n<div class=\"wp-block-group alignwide has-background\" style=\"background-color:#f3ece3\"><div class=\"wp-block-group__inner-container\"><!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>1</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">Custom Designs</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Extend it with over 54,000 plugins to help your website meet your needs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":20} -->\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>2</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">High Performance</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Add an online store, galleries, mailing lists, forums, analytics, and much more.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":20} -->\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>3</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">Easy and Accessible</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Hundreds of thousands of developers and site owners trust it worldwide.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group --></div></div>\n<!-- /wp:group -->"
   }

packages/block-editor/src/hooks/style.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mapKeys, kebabCase, isObject, entries, identity } from 'lodash';
+import { has, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,43 +35,27 @@ const hasStyleSupport = ( blockType ) =>
 	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
 
 /**
- * Flatten a nested Global styles config and generates the corresponding
- * flattened CSS variables.
+ * Returns the inline styles to add depending on the style object
  *
  * @param  {Object} styles Styles configuration
  * @return {Object}        Flattened CSS variables declaration
  */
-export function getCSSVariables( styles = {} ) {
-	const prefix = '--wp';
-	const token = '--';
-	const valueFormatters = {
-		fontSize: ( value ) => ( value ? value + 'px' : value ),
+export function getInlineStyles( styles = {} ) {
+	const mappings = {
+		lineHeight: [ 'typography', 'lineHeight' ],
+		fontSize: [ 'typography', 'fontSize' ],
+		backgroundColor: [ 'color', 'background' ],
+		color: [ 'color', 'text' ],
 	};
-	const getNestedCSSVariables = ( config ) => {
-		let result = {};
-		entries( config ).forEach( ( [ key, value ] ) => {
-			if ( ! isObject( value ) ) {
-				const formatter = valueFormatters[ key ] || identity;
-				result[ kebabCase( key ) ] = formatter( value );
-				return;
-			}
-
-			result = {
-				...result,
-				...mapKeys(
-					getNestedCSSVariables( value ),
-					( _, subkey ) => kebabCase( key ) + token + subkey
-				),
-			};
-		} );
 
-		return result;
-	};
+	const output = {};
+	Object.entries( mappings ).forEach( ( [ styleKey, objectKey ] ) => {
+		if ( has( styles, objectKey ) ) {
+			output[ styleKey ] = get( styles, objectKey );
+		}
+	} );
 
-	return mapKeys(
-		getNestedCSSVariables( styles ),
-		( _, key ) => prefix + token + key
-	);
+	return output;
 }
 
 /**
@@ -111,9 +95,8 @@ export function addSaveProps( props, blockType, attributes ) {
 	}
 
 	const { style } = attributes;
-
 	props.style = {
-		...getCSSVariables( style ),
+		...getInlineStyles( style ),
 		...props.style,
 	};
 

packages/block-editor/src/hooks/test/style.js

@@ -1,32 +1,28 @@
 /**
  * Internal dependencies
  */
-import { getCSSVariables } from '../style';
+import { getInlineStyles } from '../style';
 
-describe( 'getCSSVariables', () => {
+describe( 'getInlineStyles', () => {
 	it( 'should return an empty object when called with undefined', () => {
-		expect( getCSSVariables() ).toEqual( {} );
+		expect( getInlineStyles() ).toEqual( {} );
 	} );
 
-	it( 'should return the correct simple CSS variables', () => {
-		expect( getCSSVariables( { color: 'red' } ) ).toEqual( {
-			'--wp--color': 'red',
-		} );
-	} );
-
-	it( 'should omit CSS variables when the provided value is falsy', () => {
-		expect( getCSSVariables( { color: undefined } ) ).toEqual( {} );
+	it( 'should ignore unknown styles', () => {
+		expect( getInlineStyles( { color: 'red' } ) ).toEqual( {} );
 	} );
 
-	it( 'should flatten nested style config', () => {
+	it( 'should return the correct inline styles', () => {
 		expect(
-			getCSSVariables( {
-				color: { text: 'red' },
-				typography: { lineHeight: 1.5 },
+			getInlineStyles( {
+				color: { text: 'red', background: 'black' },
+				typography: { lineHeight: 1.5, fontSize: 10 },
 			} )
 		).toEqual( {
-			'--wp--color--text': 'red',
-			'--wp--typography--line-height': 1.5,
+			backgroundColor: 'black',
+			color: 'red',
+			lineHeight: 1.5,
+			fontSize: 10,
 		} );
 	} );
 } );

packages/block-library/src/button/style.scss

@@ -36,10 +36,6 @@ $blocks-button__height: 56px;
 	}
 }
 
-.wp-gs .wp-block-button__link:not(.has-background) {
-	background-color: var(--wp--color--primary);
-}
-
 .is-style-squared .wp-block-button__link {
 	border-radius: 0;
 }

packages/block-library/src/columns/style.scss

@@ -1,8 +1,6 @@
 .wp-block-columns {
 	display: flex;
 	margin-bottom: $default-block-margin;
-	background-color: var(--wp--color--background);
-	color: var(--wp--color--text);
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;

packages/block-library/src/heading/style.scss

@@ -1,16 +1,3 @@
-:root {
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		background-color: var(--wp--color--background);
-		color: var(--wp--color--text);
-		line-height: var(--wp--typography--line-height);
-	}
-}
-
 h1,
 h2,
 h3,

packages/block-library/src/media-text/style.scss

@@ -1,7 +1,4 @@
 .wp-block-media-text {
-	background-color: var(--wp--color--background);
-	color: var(--wp--color--text);
-
 	// This block's direction should not be manipulated by rtl, as the mediaPosition control does.
 	/*!rtl:begin:ignore*/
 	direction: ltr;

packages/block-library/src/paragraph/save.js

@@ -6,34 +6,19 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getFontSizeClass, RichText } from '@wordpress/block-editor';
+import { RichText } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const {
-		align,
-		content,
-		dropCap,
-		fontSize,
-		customFontSize,
-		direction,
-	} = attributes;
-
-	const fontSizeClass = getFontSizeClass( fontSize );
+	const { align, content, dropCap, direction } = attributes;
 
 	const className = classnames( {
 		'has-drop-cap': dropCap,
 		[ `has-text-align-${ align }` ]: align,
-		[ fontSizeClass ]: fontSizeClass,
 	} );
 
-	const styles = {
-		fontSize: fontSizeClass ? undefined : customFontSize,
-	};
-
 	return (
 		<RichText.Content
 			tagName="p"
-			style={ styles }
 			className={ className ? className : undefined }
 			value={ content }
 			dir={ direction }

packages/block-library/src/paragraph/style.scss

@@ -1,10 +1,3 @@
-:root p {
-	background-color: var(--wp--color--background);
-	color: var(--wp--color--text);
-	line-height: var(--wp--typography--line-height);
-	font-size: var(--wp--typography--font-size);
-}
-
 .is-small-text {
 	font-size: 14px;
 }

packages/block-library/src/style.scss

@@ -13,7 +13,6 @@
 @import "./embed/style.scss";
 @import "./file/style.scss";
 @import "./gallery/style.scss";
-@import "./group/style.scss";
 @import "./heading/style.scss";
 @import "./image/style.scss";
 @import "./latest-comments/style.scss";

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:heading {"style":{"color":{"text":"#268ebb"}}} -->
-<h2 class="has-text-color" style="--wp--color--text:#268ebb">Text</h2>
+<h2 class="has-text-color" style="color:#268ebb">Text</h2>
 <!-- /wp:heading -->

packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap

@@ -14,7 +14,7 @@ exports[`Heading can be created by prefixing number sign and a space 1`] = `
 
 exports[`Heading it should correctly apply custom colors 1`] = `
 "<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#7700ff\\"}}} -->
-<h3 class=\\"has-text-color\\" style=\\"--wp--color--text:#7700ff\\">Heading</h3>
+<h3 class=\\"has-text-color\\" style=\\"color:#7700ff\\">Heading</h3>
 <!-- /wp:heading -->"
 `;
 

packages/e2e-tests/specs/editor/various/__snapshots__/font-size-picker.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Font Size Picker should apply a custom font size using the font size input 1`] = `
 "<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":23}}} -->
-<p style=\\"--wp--typography--font-size:23px\\">Paragraph to be made \\"small\\"</p>
+<p style=\\"font-size:23px\\">Paragraph to be made \\"small\\"</p>
 <!-- /wp:paragraph -->"
 `;
 

packages/editor/src/editor-styles.scss

@@ -42,6 +42,17 @@ h6 {
 	font-size: 0.8em;
 }
 
+// Adjust line spacing for larger headings.
+h1,
+h2,
+h3 {
+	line-height: 1.4;
+}
+
+h4 {
+	line-height: 1.5;
+}
+
 // Default margins.
 h1 {
 	margin-top: 0.67em;
@@ -73,7 +84,18 @@ h6 {
 	margin-bottom: 2.33em;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: inherit;
+}
+
 p {
+	font-size: inherit;
+	line-height: inherit;
 	margin-top: $default-block-margin;
 	margin-bottom: $default-block-margin;
 }

storybook/stories/playground/editor-styles.scss

@@ -4,6 +4,11 @@
 	line-height: $editor-line-height;
 	color: $dark-gray-900;
 
+	p {
+		font-size: inherit;
+		line-height: inherit;
+	}
+
 	ul,
 	ol {
 		margin: 0;