Global Styles

packages/block-editor/package.json

@@ -23,6 +23,7 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.4.4",
+		"@emotion/is-prop-valid": "^0.8.6",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/blob": "file:../blob",
 		"@wordpress/blocks": "file:../blocks",
@@ -44,8 +45,12 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
+		"create-emotion": "^10.0.27",
+		"deepmerge": "^4.2.2",
 		"diff": "^3.5.0",
 		"dom-scroll-into-view": "^1.2.1",
+		"fast-deep-equal": "^3.1.1",
+		"flat": "^5.0.0",
 		"inherits": "^2.0.3",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",

packages/block-editor/src/components/global-styles/block/block.json

@@ -0,0 +1,12 @@
+{
+	"name": "core/global-styles",
+	"category": "layout",
+	"attributes": {
+		"rootCssString": {
+			"type": "string"
+		},
+		"cssString": {
+			"type": "string"
+		}
+	}
+}

packages/block-editor/src/components/global-styles/block/edit.js

@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getGlobalStylesSheetAsCssString,
+	globalStylesManager,
+	useRootStyleSystem,
+} from '../style-system';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useState } from '@wordpress/element';
+
+window.gsm = globalStylesManager;
+
+function GlobalStylesEdit( { className, setAttributes } ) {
+	const [ cssString, setCssString ] = useState( '' );
+	const [ rootSystemState ] = useRootStyleSystem();
+	const rootClassName = rootSystemState.className;
+
+	const cssStringRef = useRef( '' );
+
+	useEffect( () => {
+		if ( rootClassName ) {
+			const rootStyles =
+				globalStylesManager.cache.registered[ rootClassName ];
+			if ( rootStyles ) {
+				const rootCssString = `:root { ${ rootStyles } }`;
+				setAttributes( { rootCssString } );
+			}
+		}
+	}, [ rootClassName ] );
+
+	useEffect( () => {
+		getGlobalStylesSheetAsCssString().then( setCssString );
+	}, [ setCssString ] );
+
+	useEffect( () => {
+		if ( cssString && cssString !== cssStringRef.current ) {
+			setAttributes( { cssString } );
+			cssStringRef.current = cssString;
+		}
+	}, [ cssString, cssStringRef, setAttributes ] );
+
+	return (
+		<div className={ className } style={ { opacity: 0.3 } }>
+			Experimental: This block renders global styles on the front-end
+		</div>
+	);
+}
+
+export default GlobalStylesEdit;

packages/block-editor/src/components/global-styles/block/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Global Styles' ),
+	description: __( 'Renders global styles' ),
+	keywords: [ __( 'style' ) ],
+	edit,
+	save,
+};

packages/block-editor/src/components/global-styles/block/save.js

@@ -0,0 +1,11 @@
+function GlobalStylesSave( { attributes } ) {
+	const { cssString, rootCssString } = attributes;
+	return (
+		<>
+			<style dangerouslySetInnerHTML={ { __html: rootCssString } } />
+			<style dangerouslySetInnerHTML={ { __html: cssString } } />
+		</>
+	);
+}
+
+export default GlobalStylesSave;

packages/block-editor/src/components/global-styles/index.js

@@ -0,0 +1 @@
+export * from './style-system';

packages/block-editor/src/components/global-styles/style-system/context.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+export const initialContext = { theme: {} };
+export const StyleSystemContext = createContext( initialContext );
+export const useStyleSystemContext = () => useContext( StyleSystemContext );

packages/block-editor/src/components/global-styles/style-system/css-variable-transform.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import flatten from 'flat';
+
+export function getCssVariableValue( key ) {
+	const prefix = '--wp-gs';
+	const renamedKey = key.replace( /\./g, '-' );
+
+	return `${ prefix }-${ renamedKey }`;
+}
+
+export function cssVariableTransform( state ) {
+	const flattenedState = flatten( state );
+	const keys = Object.keys( flattenedState );
+
+	const cssVariableData = keys.reduce( ( data, key ) => {
+		const value = flattenedState[ key ];
+		const enhancedKey = getCssVariableValue( key );
+
+		return {
+			...data,
+			[ enhancedKey ]: value,
+		};
+	}, {} );
+
+	return cssVariableData;
+}