Move things around

packages/block-editor/README.md

@@ -527,6 +527,10 @@ _Returns_
 
 -   `Object`: Typography block support derived CSS classes & styles.
 
+### GlobalStylesContext
+
+Undocumented declaration.
+
 ### InnerBlocks
 
 _Related_
@@ -788,6 +792,18 @@ _Returns_
 
 -   `any`: value
 
+### useGlobalStylesOutput
+
+Undocumented declaration.
+
+### useGlobalStylesReset
+
+Undocumented declaration.
+
+### useGlobalStylesSetting
+
+Undocumented declaration.
+
 ### useInnerBlocksProps
 
 This hook is used to lightly mark an element as an inner blocks wrapper
@@ -828,6 +844,10 @@ _Returns_
 
 -   `any`: Returns the value defined for the setting.
 
+### useStyle
+
+Undocumented declaration.
+
 ### Warning
 
 _Related_

packages/block-editor/src/components/global-styles/README.md

@@ -0,0 +1,78 @@
+# Global Styles
+
+This folder contains all the necessary APIs to manipulate the global styles data. It can be potentially extracted to its own package.
+
+# Available public APIs
+
+## useGlobalStylesReset
+
+A React hook used to retrieve whether the Global Styles have been edited and a callback to reset to the default theme values.
+
+```js
+import { useGlobalStylesReset } from '@wordpress/block-editor';
+
+function MyComponent() {
+	const [ canReset, reset ] = useGlobalStylesReset();
+
+	return canReset 
+		? <Button onClick={ () => reset() }>Reset</Button> 
+		: null;
+}
+```
+
+## useGlobalStylesOutput
+
+A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
+
+```js
+import { useGlobalStylesOutput, BlockEditorProvider, BlockList } from '@wordpress/block-editor';
+
+function MyComponent() {
+	const [ styles, settings ] = useGlobalStylesOutput();
+
+	return <BlockEditorProvider settings={{
+		styles,
+		__experimentalFeatures: settings
+	}}>
+		<BlockList />
+	</BlockEditorProvider>
+}
+```
+
+## useStyle
+
+A react hook used to retrieve the style applied to a given context.
+
+```js
+import { useStyle } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// Text color for the site root.
+	const [ color, setColor ] = useStyle( 'color.text' ); 
+
+	// The user modified color for the core paragraph block.
+	const [ pColor, setPColor ] = useStyle( 'color.text', 'core/paragraph', 'user' ); 
+
+	return "Something";
+}
+```
+
+## useSetting
+
+A react hook used to retrieve the setting applied to a given context.
+
+```js
+import { useGlobalStylesSetting as useSetting } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// The default color palette.
+	const [ colorPalette, setColorPalette ] = useSetting( 'color.palette' ); 
+
+	// The base (theme + core) color palette for the paragraph block,
+	// ignoring user provided palette.
+	// If the palette is not defined for the paragraph block, the root one is returned.
+	const [ pColor, setPColor ] = useSetting( 'color.palette', 'core/paragraph', 'base' ); 
+
+	return "Something";
+}
+```

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

@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useCallback } from '@wordpress/element';
+import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable, getPresetVariableFromValue } from './utils';
+import { GlobalStylesContext } from './context';
+
+const EMPTY_CONFIG = { settings: {}, styles: {} };
+
+export const useGlobalStylesReset = () => {
+	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
+	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
+	return [
+		canReset,
+		useCallback(
+			() => setUserConfig( () => EMPTY_CONFIG ),
+			[ setUserConfig ]
+		),
+	];
+};
+
+export function useSetting( path, blockName, source = 'all' ) {
+	const {
+		merged: mergedConfig,
+		base: baseConfig,
+		user: userConfig,
+		setUserConfig,
+	} = useContext( GlobalStylesContext );
+
+	const fullPath = ! blockName
+		? `settings.${ path }`
+		: `settings.blocks.${ blockName }.${ path }`;
+
+	const setSetting = ( newValue ) => {
+		setUserConfig( ( currentConfig ) => {
+			// Deep clone `currentConfig` to avoid mutating it later.
+			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
+			const pathToSet = PATHS_WITH_MERGE[ path ]
+				? fullPath + '.custom'
+				: fullPath;
+			set( newUserConfig, pathToSet, newValue );
+
+			return newUserConfig;
+		} );
+	};
+
+	const getSettingValueForContext = ( name ) => {
+		const currentPath = ! name
+			? `settings.${ path }`
+			: `settings.blocks.${ name }.${ path }`;
+
+		const getSettingValue = ( configToUse ) => {
+			const result = get( configToUse, currentPath );
+			if ( PATHS_WITH_MERGE[ path ] ) {
+				return result?.custom ?? result?.theme ?? result?.default;
+			}
+			return result;
+		};
+
+		let result;
+		switch ( source ) {
+			case 'all':
+				result = getSettingValue( mergedConfig );
+				break;
+			case 'user':
+				result = getSettingValue( userConfig );
+				break;
+			case 'base':
+				result = getSettingValue( baseConfig );
+				break;
+			default:
+				throw 'Unsupported source';
+		}
+
+		return result;
+	};
+
+	// Unlike styles settings get inherited from top level settings.
+	const resultWithFallback =
+		getSettingValueForContext( blockName ) ?? getSettingValueForContext();
+
+	return [ resultWithFallback, setSetting ];
+}
+
+export function useStyle( path, blockName, source = 'all' ) {
+	const {
+		merged: mergedConfig,
+		base: baseConfig,
+		user: userConfig,
+		setUserConfig,
+	} = useContext( GlobalStylesContext );
+	const finalPath = ! blockName
+		? `styles.${ path }`
+		: `styles.blocks.${ blockName }.${ path }`;
+
+	const setStyle = ( newValue ) => {
+		setUserConfig( ( currentConfig ) => {
+			// Deep clone `currentConfig` to avoid mutating it later.
+			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
+			set(
+				newUserConfig,
+				finalPath,
+				getPresetVariableFromValue(
+					mergedConfig.settings,
+					blockName,
+					path,
+					newValue
+				)
+			);
+			return newUserConfig;
+		} );
+	};
+
+	let result;
+	switch ( source ) {
+		case 'all':
+			result = getValueFromVariable(
+				mergedConfig,
+				blockName,
+				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				finalPath === 'styles.css'
+					? get( userConfig, finalPath )
+					: get( userConfig, finalPath ) ??
+							get( baseConfig, finalPath )
+			);
+			break;
+		case 'user':
+			result = getValueFromVariable(
+				mergedConfig,
+				blockName,
+				get( userConfig, finalPath )
+			);
+			break;
+		case 'base':
+			result = getValueFromVariable(
+				baseConfig,
+				blockName,
+				get( baseConfig, finalPath )
+			);
+			break;
+		default:
+			throw 'Unsupported source';
+	}
+
+	return [ result, setStyle ];
+}

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

@@ -0,0 +1,8 @@
+// TODO: Should probably __experimental these.
+export {
+	useGlobalStylesReset,
+	useStyle,
+	useSetting as useGlobalStylesSetting, // TODO: Naming conflict with useSetting from @wordpress/block-editor. Are they the same function?
+} from './hooks';
+export { useGlobalStylesOutput } from './use-global-styles-output';
+export { GlobalStylesContext } from './context';

packages/edit-site/src/components/global-styles/typography-utils.js → packages/block-editor/src/components/global-styles/typography-utils.js

@@ -5,9 +5,9 @@
  */
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
+import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
 
 /**
  * @typedef {Object} FluidPreset

packages/edit-site/src/components/global-styles/use-global-styles-output.js → packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -15,11 +15,6 @@ import {
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
-import {
-	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
-	__experimentalGetGapCSSValue as getGapCSSValue,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -28,6 +23,9 @@ import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useSetting } from './hooks';
+import { PresetDuotoneFilter } from '../duotone/components';
+import { getGapCSSValue } from '../../hooks/gap';
+import { store as blockEditorStore } from '../../store';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.