@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/font-sizes/fluid-utils.js

@@ -12,7 +12,7 @@ const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
 const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
 
 /**
- * Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
+ * Computes a fluid font-size value that uses clamp(). A minimum and maximum
  * font size OR a single font size can be specified.
  *
  * If a single font size is specified, it is scaled up and down by

package/src/components/font-sizes/utils.js

@@ -56,7 +56,7 @@ export function getFontSizeObjectByValue( fontSizes, value ) {
  *
  * @param {string} fontSizeSlug Slug of the fontSize.
  *
- * @return {string} String with the class corresponding to the fontSize passed.
+ * @return {string | undefined} String with the class corresponding to the fontSize passed.
  *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
  */
 export function getFontSizeClass( fontSizeSlug ) {

package/src/components/font-sizes/with-font-sizes.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pickBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -160,35 +155,40 @@ export default ( ...fontSizeNames ) => {
 						}
 
 						const newState = Object.entries(
-							pickBy(
-								fontSizeAttributeNames,
-								didAttributesChange
+							fontSizeAttributeNames
+						)
+							.filter( ( [ key, value ] ) =>
+								didAttributesChange( value, key )
 							)
-						).reduce(
-							(
-								newStateAccumulator,
-								[
-									fontSizeAttributeName,
-									customFontSizeAttributeName,
-								]
-							) => {
-								const fontSizeAttributeValue =
-									attributes[ fontSizeAttributeName ];
-								const fontSizeObject = getFontSize(
-									fontSizes,
-									fontSizeAttributeValue,
-									attributes[ customFontSizeAttributeName ]
-								);
-								newStateAccumulator[ fontSizeAttributeName ] = {
-									...fontSizeObject,
-									class: getFontSizeClass(
-										fontSizeAttributeValue
-									),
-								};
-								return newStateAccumulator;
-							},
-							{}
-						);
+							.reduce(
+								(
+									newStateAccumulator,
+									[
+										fontSizeAttributeName,
+										customFontSizeAttributeName,
+									]
+								) => {
+									const fontSizeAttributeValue =
+										attributes[ fontSizeAttributeName ];
+									const fontSizeObject = getFontSize(
+										fontSizes,
+										fontSizeAttributeValue,
+										attributes[
+											customFontSizeAttributeName
+										]
+									);
+									newStateAccumulator[
+										fontSizeAttributeName
+									] = {
+										...fontSizeObject,
+										class: getFontSizeClass(
+											fontSizeAttributeValue
+										),
+									};
+									return newStateAccumulator;
+								},
+								{}
+							);
 
 						return {
 							...previousState,

package/src/components/global-styles/README.md

@@ -0,0 +1,77 @@
+# 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>
+}
+```
+
+## useGlobalStyle
+
+A react hook used to retrieve the style applied to a given context.
+
+```js
+import { useGlobalStyle } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// Text color for the site root.
+	const [ color, setColor ] = useGlobalStyle( 'color.text' ); 
+
+	// The user modified color for the core paragraph block.
+	const [ pColor, setPColor ] = useGlobalStyle( 'color.text', 'core/paragraph', 'user' ); 
+
+	return "Something";
+}
+```
+
+## useGlobalSetting
+
+A react hook used to retrieve the setting applied to a given context.
+
+```js
+import { useGlobalSetting } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// The theme color palette.
+	const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette.theme' ); 
+
+	// The theme color palette for the paragraph block, ignoring user changes.
+	// If the palette is not defined for the paragraph block, the root one is returned.
+	const [ pColor, setPColor ] = useGlobalSetting( 'color.palette.theme', 'core/paragraph', 'base' ); 
+
+	return "Something";
+}
+```

package/src/components/global-styles/context.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const DEFAULT_GLOBAL_STYLES_CONTEXT = {
+	user: {},
+	base: {},
+	merged: {},
+	setUserConfig: () => {},
+};
+
+export const GlobalStylesContext = createContext(
+	DEFAULT_GLOBAL_STYLES_CONTEXT
+);

package/src/components/global-styles/hooks.js

@@ -0,0 +1,145 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useCallback } from '@wordpress/element';
+
+/**
+ * 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 useGlobalSetting( 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 ) );
+			set( newUserConfig, fullPath, newValue );
+
+			return newUserConfig;
+		} );
+	};
+
+	const getSettingValueForContext = ( name ) => {
+		const currentPath = ! name
+			? `settings.${ path }`
+			: `settings.blocks.${ name }.${ path }`;
+
+		let result;
+		switch ( source ) {
+			case 'all':
+				result = get( mergedConfig, currentPath );
+				break;
+			case 'user':
+				result = get( userConfig, currentPath );
+				break;
+			case 'base':
+				result = get( baseConfig, currentPath );
+				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 useGlobalStyle( 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 ];
+}

package/src/components/global-styles/index.js

@@ -0,0 +1,7 @@
+export {
+	useGlobalStylesReset,
+	useGlobalSetting,
+	useGlobalStyle,
+} from './hooks';
+export { useGlobalStylesOutput } from './use-global-styles-output';
+export { GlobalStylesContext } from './context';