Extract the Global Styles Typography Panel into block-editor package (#…

…47356)

packages/block-editor/src/components/font-appearance-control/index.js

@@ -63,7 +63,7 @@ const FONT_WEIGHTS = [
  * @param {boolean} hasFontWeights Whether font weights are enabled and present.
  * @return {string} A label representing what font appearance is being edited.
  */
-export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
+const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
 	if ( ! hasFontStyles ) {
 		return __( 'Font weight' );
 	}

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

@@ -7,16 +7,67 @@ import { get, set } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useContext, useCallback } from '@wordpress/element';
+import { useContext, useCallback, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
 import { GlobalStylesContext } from './context';
+import { unlock } from '../../lock-unlock';
 
 const EMPTY_CONFIG = { settings: {}, styles: {} };
 
+const VALID_SETTINGS = [
+	'appearanceTools',
+	'useRootPaddingAwareAlignments',
+	'border.color',
+	'border.radius',
+	'border.style',
+	'border.width',
+	'shadow.presets',
+	'shadow.defaultPresets',
+	'color.background',
+	'color.custom',
+	'color.customDuotone',
+	'color.customGradient',
+	'color.defaultDuotone',
+	'color.defaultGradients',
+	'color.defaultPalette',
+	'color.duotone',
+	'color.gradients',
+	'color.link',
+	'color.palette',
+	'color.text',
+	'custom',
+	'dimensions.minHeight',
+	'layout.contentSize',
+	'layout.definitions',
+	'layout.wideSize',
+	'position.fixed',
+	'position.sticky',
+	'spacing.customSpacingSize',
+	'spacing.spacingSizes',
+	'spacing.spacingScale',
+	'spacing.blockGap',
+	'spacing.margin',
+	'spacing.padding',
+	'spacing.units',
+	'typography.fuild',
+	'typography.customFontSize',
+	'typography.dropCap',
+	'typography.fontFamilies',
+	'typography.fontSizes',
+	'typography.fontStyle',
+	'typography.fontWeight',
+	'typography.letterSpacing',
+	'typography.lineHeight',
+	'typography.textDecoration',
+	'typography.textTransform',
+];
+
 export const useGlobalStylesReset = () => {
 	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
@@ -29,68 +80,78 @@ export const useGlobalStylesReset = () => {
 	];
 };
 
-export function useGlobalSetting( path, blockName, source = 'all' ) {
-	const {
-		merged: mergedConfig,
-		base: baseConfig,
-		user: userConfig,
-		setUserConfig,
-	} = useContext( GlobalStylesContext );
+export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
+	const { setUserConfig, ...configs } = useContext( GlobalStylesContext );
 
-	const fullPath = ! blockName
-		? `settings.${ path }`
-		: `settings.blocks.${ blockName }.${ path }`;
+	const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
+	const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
+	const contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;
+	const globalPath = `settings${ appendedPropertyPath }`;
+	const sourceKey = source === 'all' ? 'merged' : source;
+
+	const settingValue = useMemo( () => {
+		const configToUse = configs[ sourceKey ];
+		if ( ! configToUse ) {
+			throw 'Unsupported source';
+		}
+
+		if ( propertyPath ) {
+			return (
+				get( configToUse, contextualPath ) ??
+				get( configToUse, globalPath )
+			);
+		}
+
+		const result = {};
+		VALID_SETTINGS.forEach( ( setting ) => {
+			const value =
+				get(
+					configToUse,
+					`settings${ appendedBlockPath }.${ setting }`
+				) ?? get( configToUse, `settings.${ setting }` );
+			if ( value ) {
+				set( result, setting, value );
+			}
+		} );
+		return result;
+	}, [
+		configs,
+		sourceKey,
+		propertyPath,
+		contextualPath,
+		globalPath,
+		appendedBlockPath,
+	] );
 
 	const setSetting = ( newValue ) => {
 		setUserConfig( ( currentConfig ) => {
 			// Deep clone `currentConfig` to avoid mutating it later.
 			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set( newUserConfig, fullPath, newValue );
+			set( newUserConfig, contextualPath, 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 ];
+	return [ settingValue, setSetting ];
 }
 
-export function useGlobalStyle( path, blockName, source = 'all' ) {
+export function useGlobalStyle(
+	path,
+	blockName,
+	source = 'all',
+	{ shouldDecodeEncode = true } = {}
+) {
 	const {
 		merged: mergedConfig,
 		base: baseConfig,
 		user: userConfig,
 		setUserConfig,
 	} = useContext( GlobalStylesContext );
+	const appendedPath = path ? '.' + path : '';
 	const finalPath = ! blockName
-		? `styles.${ path }`
-		: `styles.blocks.${ blockName }.${ path }`;
+		? `styles${ appendedPath }`
+		: `styles.blocks.${ blockName }${ appendedPath }`;
 
 	const setStyle = ( newValue ) => {
 		setUserConfig( ( currentConfig ) => {
@@ -99,47 +160,61 @@ export function useGlobalStyle( path, blockName, source = 'all' ) {
 			set(
 				newUserConfig,
 				finalPath,
-				getPresetVariableFromValue(
-					mergedConfig.settings,
-					blockName,
-					path,
-					newValue
-				)
+				shouldDecodeEncode
+					? getPresetVariableFromValue(
+							mergedConfig.settings,
+							blockName,
+							path,
+							newValue
+					  )
+					: newValue
 			);
 			return newUserConfig;
 		} );
 	};
 
-	let result;
+	let rawResult, result;
 	switch ( source ) {
 		case 'all':
-			result = getValueFromVariable(
-				mergedConfig,
-				blockName,
+			rawResult =
 				// 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 )
-			);
+					: get( mergedConfig, finalPath );
+			result = shouldDecodeEncode
+				? getValueFromVariable( mergedConfig, blockName, rawResult )
+				: rawResult;
 			break;
 		case 'user':
-			result = getValueFromVariable(
-				mergedConfig,
-				blockName,
-				get( userConfig, finalPath )
-			);
+			rawResult = get( userConfig, finalPath );
+			result = shouldDecodeEncode
+				? getValueFromVariable( mergedConfig, blockName, rawResult )
+				: rawResult;
 			break;
 		case 'base':
-			result = getValueFromVariable(
-				baseConfig,
-				blockName,
-				get( baseConfig, finalPath )
-			);
+			rawResult = get( baseConfig, finalPath );
+			result = shouldDecodeEncode
+				? getValueFromVariable( baseConfig, blockName, rawResult )
+				: rawResult;
 			break;
 		default:
 			throw 'Unsupported source';
 	}
 
 	return [ result, setStyle ];
 }
+
+export function useSupportedStyles( name, element ) {
+	const { supportedPanels } = useSelect(
+		( select ) => {
+			return {
+				supportedPanels: unlock(
+					select( blocksStore )
+				).getSupportedStyles( name, element ),
+			};
+		},
+		[ name, element ]
+	);
+
+	return supportedPanels;
+}

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

@@ -5,3 +5,7 @@ export {
 } from './hooks';
 export { useGlobalStylesOutput } from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
+export {
+	default as TypographyPanel,
+	useHasTypographyPanel,
+} from './typography-panel';