From 6d21c0bfbb6149d440434e86ab7f1c8b321cd8a5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 6 Apr 2020 16:27:28 +0100 Subject: [PATCH 1/7] Add the Global Styles support to the blocks in an opt-in way --- lib/client-assets.php | 12 +++++ packages/block-editor/src/hooks/style.js | 52 +++++++++++++++++-- packages/block-editor/src/hooks/test/style.js | 25 ++++++++- packages/block-library/src/columns/style.scss | 7 ++- packages/block-library/src/group/style.scss | 2 +- packages/block-library/src/heading/style.scss | 2 +- .../block-library/src/media-text/style.scss | 4 +- .../block-library/src/paragraph/style.scss | 2 +- .../full-content/full-content.test.js | 1 + 9 files changed, 95 insertions(+), 12 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 609627dc1e3ed..389a3c5a11bb4 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -695,3 +695,15 @@ function gutenberg_extend_settings_custom_units( $settings ) { register_pattern( 'core/numbered-features', gutenberg_load_block_pattern( 'numbered-features' ) ); register_pattern( 'core/its-time', gutenberg_load_block_pattern( 'its-time' ) ); } + +/** + * Adds the global styles support flag to the frontend. + */ +add_action( 'init', function() { + // Add global styles support flag + wp_add_inline_script( + 'wp-blocks', + sprintf('__unstableSupportsGlobalStyles = %s;', gutenberg_experimental_global_styles_has_theme_support() ? 'true' : 'false' ), + 'before' + ); +} ); diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 156104d3022e4..72c07001db01f 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -1,7 +1,15 @@ /** * External dependencies */ -import { mapKeys, kebabCase, isObject, entries, identity } from 'lodash'; +import { + mapKeys, + kebabCase, + isObject, + entries, + has, + get, + identity, +} from 'lodash'; /** * WordPress dependencies @@ -34,6 +42,9 @@ const typographySupportKeys = [ const hasStyleSupport = ( blockType ) => styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) ); +const hasGlobalStylesSupport = () => + window && window.__unstableSupportsGlobalStyles; + /** * Flatten a nested Global styles config and generates the corresponding * flattened CSS variables. @@ -74,6 +85,30 @@ export function getCSSVariables( styles = {} ) { ); } +/** + * Returns the inline styles to add depending on the style object + * + * @param {Object} styles Styles configuration + * @return {Object} Flattened CSS variables declaration + */ +export function getInlineStyles( styles = {} ) { + const mappings = { + lineHeight: [ 'typography', 'lineHeight' ], + fontSize: [ 'typography', 'fontSize' ], + backgroundColor: [ 'color', 'background' ], + color: [ 'color', 'text' ], + }; + + const output = {}; + Object.entries( mappings ).forEach( ( [ styleKey, objectKey ] ) => { + if ( has( styles, objectKey ) ) { + output[ styleKey ] = get( styles, objectKey ); + } + } ); + + return output; +} + /** * Filters registered block settings, extending attributes to include `style` attribute. * @@ -112,10 +147,17 @@ export function addSaveProps( props, blockType, attributes ) { const { style } = attributes; - props.style = { - ...getCSSVariables( style ), - ...props.style, - }; + if ( hasGlobalStylesSupport() ) { + props.style = { + ...getCSSVariables( style ), + ...props.style, + }; + } else { + props.style = { + ...getInlineStyles( style ), + ...props.style, + }; + } return props; } diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index 886777ae8aa6c..bbe5ebb243a84 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { getCSSVariables } from '../style'; +import { getCSSVariables, getInlineStyles } from '../style'; describe( 'getCSSVariables', () => { it( 'should return an empty object when called with undefined', () => { @@ -30,3 +30,26 @@ describe( 'getCSSVariables', () => { } ); } ); } ); + +describe( 'getInlineStyles', () => { + it( 'should return an empty object when called with undefined', () => { + expect( getInlineStyles() ).toEqual( {} ); + } ); + + it( 'should ignore unknown styles', () => { + expect( getInlineStyles( { color: 'red' } ) ).toEqual( {} ); + } ); + + it( 'should return the correct inline styles', () => { + expect( + getInlineStyles( { + color: { text: 'red', background: 'black' }, + typography: { lineHeight: 1.5 }, + } ) + ).toEqual( { + backgroundColor: 'black', + color: 'red', + lineHeight: 1.5, + } ); + } ); +} ); diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index f1ad5b4f2217c..11afb2f23330c 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -1,8 +1,11 @@ +.wp-gs .wp-block-columns { + background-color: var(--wp--color--background); + color: var(--wp--color--text); +} + .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; diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss index d71f534fd2d97..f039c55ccec02 100644 --- a/packages/block-library/src/group/style.scss +++ b/packages/block-library/src/group/style.scss @@ -1,4 +1,4 @@ -.wp-block-group { +.wp-gs .wp-block-group { background-color: var(--wp--color--background); color: var(--wp--color--text); } diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss index b9a64de5655ec..4ab387579b75a 100644 --- a/packages/block-library/src/heading/style.scss +++ b/packages/block-library/src/heading/style.scss @@ -1,4 +1,4 @@ -:root { +.wp-gs { h1, h2, h3, diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index 74f791a974a65..f9ad1c3ccee43 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/packages/block-library/src/media-text/style.scss @@ -1,7 +1,9 @@ -.wp-block-media-text { +.wp-gs .wp-block-media-text { background-color: var(--wp--color--background); color: var(--wp--color--text); +} +.wp-block-media-text { // This block's direction should not be manipulated by rtl, as the mediaPosition control does. /*!rtl:begin:ignore*/ direction: ltr; diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index ef83bffddf125..349e33c10275e 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -1,4 +1,4 @@ -:root p { +.wp-gs p { background-color: var(--wp--color--background); color: var(--wp--color--text); line-height: var(--wp--typography--line-height); diff --git a/test/integration/full-content/full-content.test.js b/test/integration/full-content/full-content.test.js index 77c237540def9..75debf1ea04a4 100644 --- a/test/integration/full-content/full-content.test.js +++ b/test/integration/full-content/full-content.test.js @@ -54,6 +54,7 @@ function normalizeParsedBlocks( blocks ) { describe( 'full post content fixture', () => { beforeAll( () => { + window.__unstableSupportsGlobalStyles = true; unstable__bootstrapServerSideBlockDefinitions( require( './server-registered.json' ) ); From 2e22f84ae0afa2888657de62c6c5bfa8afcba5d2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Apr 2020 13:40:32 +0100 Subject: [PATCH 2/7] Avoid CSS variables for support hook customizations --- lib/client-assets.php | 12 ---- packages/block-editor/src/hooks/style.js | 69 ++----------------- packages/block-editor/src/hooks/test/style.js | 33 +-------- packages/block-library/src/columns/style.scss | 5 -- packages/block-library/src/group/style.scss | 4 -- packages/block-library/src/heading/style.scss | 13 ---- .../block-library/src/paragraph/style.scss | 7 -- packages/block-library/src/style.scss | 1 - ...ore__heading__deprecated-3.serialized.html | 2 +- .../full-content/full-content.test.js | 1 - 10 files changed, 9 insertions(+), 138 deletions(-) delete mode 100644 packages/block-library/src/group/style.scss diff --git a/lib/client-assets.php b/lib/client-assets.php index 389a3c5a11bb4..609627dc1e3ed 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -695,15 +695,3 @@ function gutenberg_extend_settings_custom_units( $settings ) { register_pattern( 'core/numbered-features', gutenberg_load_block_pattern( 'numbered-features' ) ); register_pattern( 'core/its-time', gutenberg_load_block_pattern( 'its-time' ) ); } - -/** - * Adds the global styles support flag to the frontend. - */ -add_action( 'init', function() { - // Add global styles support flag - wp_add_inline_script( - 'wp-blocks', - sprintf('__unstableSupportsGlobalStyles = %s;', gutenberg_experimental_global_styles_has_theme_support() ? 'true' : 'false' ), - 'before' - ); -} ); diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 72c07001db01f..c4639da55fb8b 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -1,15 +1,7 @@ /** * External dependencies */ -import { - mapKeys, - kebabCase, - isObject, - entries, - has, - get, - identity, -} from 'lodash'; +import { has, get } from 'lodash'; /** * WordPress dependencies @@ -42,49 +34,6 @@ const typographySupportKeys = [ const hasStyleSupport = ( blockType ) => styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) ); -const hasGlobalStylesSupport = () => - window && window.__unstableSupportsGlobalStyles; - -/** - * Flatten a nested Global styles config and generates the corresponding - * flattened CSS variables. - * - * @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 ), - }; - 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; - }; - - return mapKeys( - getNestedCSSVariables( styles ), - ( _, key ) => prefix + token + key - ); -} - /** * Returns the inline styles to add depending on the style object * @@ -146,18 +95,10 @@ export function addSaveProps( props, blockType, attributes ) { } const { style } = attributes; - - if ( hasGlobalStylesSupport() ) { - props.style = { - ...getCSSVariables( style ), - ...props.style, - }; - } else { - props.style = { - ...getInlineStyles( style ), - ...props.style, - }; - } + props.style = { + ...getInlineStyles( style ), + ...props.style, + }; return props; } diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index bbe5ebb243a84..533694be7282e 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -1,35 +1,7 @@ /** * Internal dependencies */ -import { getCSSVariables, getInlineStyles } from '../style'; - -describe( 'getCSSVariables', () => { - it( 'should return an empty object when called with undefined', () => { - expect( getCSSVariables() ).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 flatten nested style config', () => { - expect( - getCSSVariables( { - color: { text: 'red' }, - typography: { lineHeight: 1.5 }, - } ) - ).toEqual( { - '--wp--color--text': 'red', - '--wp--typography--line-height': 1.5, - } ); - } ); -} ); +import { getInlineStyles } from '../style'; describe( 'getInlineStyles', () => { it( 'should return an empty object when called with undefined', () => { @@ -44,12 +16,13 @@ describe( 'getInlineStyles', () => { expect( getInlineStyles( { color: { text: 'red', background: 'black' }, - typography: { lineHeight: 1.5 }, + typography: { lineHeight: 1.5, fontSize: 10 }, } ) ).toEqual( { backgroundColor: 'black', color: 'red', lineHeight: 1.5, + fontSize: 10, } ); } ); } ); diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 11afb2f23330c..5b2f44dcf1702 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -1,8 +1,3 @@ -.wp-gs .wp-block-columns { - background-color: var(--wp--color--background); - color: var(--wp--color--text); -} - .wp-block-columns { display: flex; margin-bottom: $default-block-margin; diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss deleted file mode 100644 index f039c55ccec02..0000000000000 --- a/packages/block-library/src/group/style.scss +++ /dev/null @@ -1,4 +0,0 @@ -.wp-gs .wp-block-group { - background-color: var(--wp--color--background); - color: var(--wp--color--text); -} diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss index 4ab387579b75a..31a6989c39c81 100644 --- a/packages/block-library/src/heading/style.scss +++ b/packages/block-library/src/heading/style.scss @@ -1,16 +1,3 @@ -.wp-gs { - 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, diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 349e33c10275e..ddea388de29ba 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -1,10 +1,3 @@ -.wp-gs 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; } diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 46686a47e63f8..2cedc194e3b2e 100644 --- a/packages/block-library/src/style.scss +++ b/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"; diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html index 13bc6d11332bc..c2c4470e500f1 100644 --- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-3.serialized.html @@ -1,3 +1,3 @@ -

Text

+

Text

diff --git a/test/integration/full-content/full-content.test.js b/test/integration/full-content/full-content.test.js index 75debf1ea04a4..77c237540def9 100644 --- a/test/integration/full-content/full-content.test.js +++ b/test/integration/full-content/full-content.test.js @@ -54,7 +54,6 @@ function normalizeParsedBlocks( blocks ) { describe( 'full post content fixture', () => { beforeAll( () => { - window.__unstableSupportsGlobalStyles = true; unstable__bootstrapServerSideBlockDefinitions( require( './server-registered.json' ) ); From 149751df8f896df03ab8bbcbfa4bdbbfba1209b8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Apr 2020 14:16:57 +0100 Subject: [PATCH 3/7] fix e2e tests --- packages/block-library/src/paragraph/save.js | 19 ++----------------- .../blocks/__snapshots__/heading.test.js.snap | 2 +- .../font-size-picker.test.js.snap | 2 +- 3 files changed, 4 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js index 9dadd6e01a7ac..434cc02229558 100644 --- a/packages/block-library/src/paragraph/save.js +++ b/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 ( -

Heading

+

Heading

" `; diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/font-size-picker.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/font-size-picker.test.js.snap index 74039348f0892..bc58980c7ce53 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/font-size-picker.test.js.snap +++ b/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`] = ` " -

Paragraph to be made \\"small\\"

+

Paragraph to be made \\"small\\"

" `; From 892ae4f0895894163f191c42c1d301c33e28d57d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Apr 2020 16:39:02 +0100 Subject: [PATCH 4/7] Remove useless styles --- packages/block-library/src/media-text/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index f9ad1c3ccee43..76549eac20269 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/packages/block-library/src/media-text/style.scss @@ -1,8 +1,3 @@ -.wp-gs .wp-block-media-text { - background-color: var(--wp--color--background); - color: var(--wp--color--text); -} - .wp-block-media-text { // This block's direction should not be manipulated by rtl, as the mediaPosition control does. /*!rtl:begin:ignore*/ From e5b8b38940e27aa28786ed6c929cadcde3077490 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Apr 2020 16:42:17 +0100 Subject: [PATCH 5/7] Fix patterns --- lib/patterns/its-time.json | 2 +- lib/patterns/numbered-features.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/patterns/its-time.json b/lib/patterns/its-time.json index d1f319b70282e..0e048a908ba56 100644 --- a/lib/patterns/its-time.json +++ b/lib/patterns/its-time.json @@ -1,5 +1,5 @@ { "__file": "wp_block", "title": "It's time", - "content": "\n
\n
\n
\n

NEW

\n\n\n\n

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.

\n
\n\n\n\n
\n

space

\n\n\n\n

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.

\n
\n
\n\n\n\n
\n
\n\n\n\n
\n

it's time

\n
\n
\n
\n" + "content": "\n
\n
\n
\n

NEW

\n\n\n\n

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.

\n
\n\n\n\n
\n

space

\n\n\n\n

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.

\n
\n
\n\n\n\n
\n
\n\n\n\n
\n

it's time

\n
\n
\n
\n" } diff --git a/lib/patterns/numbered-features.json b/lib/patterns/numbered-features.json index d3e547614e808..010a0f52e09ed 100644 --- a/lib/patterns/numbered-features.json +++ b/lib/patterns/numbered-features.json @@ -1,5 +1,5 @@ { "__file": "wp_block", "title": "Numbered Features", - "content": "\n
\n
\n
\n
\n

1

\n
\n\n\n\n
\n

Custom Designs

\n\n\n\n

Extend it with over 54,000 plugins to help your website meet your needs.

\n\n\n\n
\n
\n
\n
\n\n\n\n
\n
\n
\n

2

\n
\n\n\n\n
\n

High Performance

\n\n\n\n

Add an online store, galleries, mailing lists, forums, analytics, and much more.

\n\n\n\n
\n
\n
\n
\n\n\n\n
\n
\n
\n

3

\n
\n\n\n\n
\n

Easy and Accessible

\n\n\n\n

Hundreds of thousands of developers and site owners trust it worldwide.

\n
\n
\n
\n
\n" + "content": "\n
\n
\n
\n
\n

1

\n
\n\n\n\n
\n

Custom Designs

\n\n\n\n

Extend it with over 54,000 plugins to help your website meet your needs.

\n\n\n\n
\n
\n
\n
\n\n\n\n
\n
\n
\n

2

\n
\n\n\n\n
\n

High Performance

\n\n\n\n

Add an online store, galleries, mailing lists, forums, analytics, and much more.

\n\n\n\n
\n
\n
\n
\n\n\n\n
\n
\n
\n

3

\n
\n\n\n\n
\n

Easy and Accessible

\n\n\n\n

Hundreds of thousands of developers and site owners trust it worldwide.

\n
\n
\n
\n
\n" } From 08336519fe60f2f1f8fadcfc201d4fd5fe01f7a9 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Apr 2020 16:57:20 +0100 Subject: [PATCH 6/7] Remove useless button style --- packages/block-library/src/button/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 7bbe8900b8dc2..f2ad6bf77b130 100644 --- a/packages/block-library/src/button/style.scss +++ b/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; } From 2d186bb51eb264ea70fc8cdf4cd77d7d08c16b80 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Apr 2020 17:02:20 +0100 Subject: [PATCH 7/7] Restore editor styles --- packages/editor/src/editor-styles.scss | 22 +++++++++++++++++++ .../stories/playground/editor-styles.scss | 5 +++++ 2 files changed, 27 insertions(+) diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss index 8b77567925269..f8eee44a11693 100644 --- a/packages/editor/src/editor-styles.scss +++ b/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; } diff --git a/storybook/stories/playground/editor-styles.scss b/storybook/stories/playground/editor-styles.scss index 9d94b0d1b5cae..d920ea8de5ba0 100644 --- a/storybook/stories/playground/editor-styles.scss +++ b/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;