Add the Global Styles support to the blocks in an opt-in way

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'
+	);
+} );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mapKeys, kebabCase, isObject, entries } from 'lodash';
+import { mapKeys, kebabCase, isObject, entries, has, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,9 @@ const styleSupportKeys = [ COLOR_SUPPORT_KEY, LINE_HEIGHT_SUPPRT_KEY ];
 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.
@@ -56,6 +59,29 @@ 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' ],
+		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.
  *
@@ -94,10 +120,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;
 }

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,
+		} );
+	} );
+} );

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;

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);
 }

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

@@ -1,4 +1,4 @@
-:root {
+.wp-gs {
 	h1,
 	h2,
 	h3,

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;

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

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' )
 		);