@wordpress/editor 14.33.3 → 14.34.0

package/src/components/global-styles/block-link.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { usePrevious } from '@wordpress/compose';
+
+/**
+ * Auto-navigate to block styles when a block is selected in the canvas.
+ *
+ * @param {Object}   props
+ * @param {string}   props.path         Current navigation path.
+ * @param {Function} props.onPathChange Callback to change the navigation path.
+ */
+export function GlobalStylesBlockLink( { path, onPathChange } ) {
+	const { selectedBlockName, selectedBlockClientId } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockName } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				selectedBlockName: getBlockName( clientId ),
+				selectedBlockClientId: clientId,
+			};
+		},
+		[]
+	);
+
+	// const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
+	const blockHasGlobalStyles = true;
+	const previousBlockClientId = usePrevious( selectedBlockClientId );
+
+	// When we're in the `Blocks` screen enable deep linking to the selected block.
+	useEffect( () => {
+		// Only navigate when block selection changes, not when path changes
+		if ( selectedBlockClientId === previousBlockClientId ) {
+			return;
+		}
+		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
+			return;
+		}
+		if (
+			! path ||
+			( path !== '/blocks' && ! path.startsWith( '/blocks/' ) )
+		) {
+			return;
+		}
+		const newPath = '/blocks/' + encodeURIComponent( selectedBlockName );
+		// Avoid navigating to the same path. This can happen when selecting
+		// a new block of the same type.
+		if ( newPath !== path ) {
+			onPathChange?.( newPath );
+		}
+	}, [
+		selectedBlockClientId,
+		previousBlockClientId,
+		selectedBlockName,
+		blockHasGlobalStyles,
+		path,
+		onPathChange,
+	] );
+
+	return null;
+}

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

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	__experimentalView as View,
+	Navigator,
+} from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
+
+function ScreenHeader( { title, description, onBack } ) {
+	return (
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<Navigator.BackButton
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							size="small"
+							label={ __( 'Back' ) }
+							onClick={ onBack }
+						/>
+						<Spacer>
+							<Heading
+								className="editor-global-styles-header"
+								level={ 2 }
+								size={ 13 }
+							>
+								{ title }
+							</Heading>
+						</Spacer>
+					</HStack>
+				</Spacer>
+			</View>
+			{ description && (
+				<p className="editor-global-styles-header__description">
+					{ description }
+				</p>
+			) }
+		</VStack>
+	);
+}
+
+export default ScreenHeader;

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

@@ -0,0 +1,216 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useCallback } from '@wordpress/element';
+import {
+	mergeGlobalStyles,
+	getStyle,
+	getSetting,
+} from '@wordpress/global-styles-engine';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+
+/**
+ * Hook to fetch and manage user global styles config
+ */
+function useGlobalStylesUserConfig() {
+	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				getEditedEntityRecord,
+				hasFinishedResolution,
+				canUser,
+			} = select( coreStore );
+			const _globalStylesId =
+				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
+
+			let record;
+
+			const userCanEditGlobalStyles = _globalStylesId
+				? canUser( 'update', {
+						kind: 'root',
+						name: 'globalStyles',
+						id: _globalStylesId,
+				  } )
+				: null;
+
+			if (
+				_globalStylesId &&
+				typeof userCanEditGlobalStyles === 'boolean'
+			) {
+				if ( userCanEditGlobalStyles ) {
+					record = getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+					);
+				} else {
+					record = getEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId,
+						{ context: 'view' }
+					);
+				}
+			}
+
+			let hasResolved = false;
+			if (
+				hasFinishedResolution(
+					'__experimentalGetCurrentGlobalStylesId'
+				)
+			) {
+				if ( _globalStylesId ) {
+					hasResolved = userCanEditGlobalStyles
+						? hasFinishedResolution( 'getEditedEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+						  ] )
+						: hasFinishedResolution( 'getEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+								{ context: 'view' },
+						  ] );
+				} else {
+					hasResolved = true;
+				}
+			}
+
+			return {
+				globalStylesId: _globalStylesId,
+				isReady: hasResolved,
+				settings: record?.settings,
+				styles: record?.styles,
+				_links: record?._links,
+			};
+		},
+		[]
+	);
+
+	const { getEditedEntityRecord } = useSelect( coreStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	const config = useMemo( () => {
+		return {
+			settings: settings ?? {},
+			styles: styles ?? {},
+			_links: _links ?? {},
+		};
+	}, [ settings, styles, _links ] );
+
+	const setConfig = useCallback(
+		( callbackOrObject, options = {} ) => {
+			const record = getEditedEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId
+			);
+
+			const currentConfig = {
+				styles: record?.styles ?? {},
+				settings: record?.settings ?? {},
+				_links: record?._links ?? {},
+			};
+
+			const updatedConfig =
+				typeof callbackOrObject === 'function'
+					? callbackOrObject( currentConfig )
+					: callbackOrObject;
+
+			editEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				{
+					styles: cleanEmptyObject( updatedConfig.styles ) || {},
+					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+					_links: cleanEmptyObject( updatedConfig._links ) || {},
+				},
+				options
+			);
+		},
+		[ globalStylesId, editEntityRecord, getEditedEntityRecord ]
+	);
+
+	return [ isReady, config, setConfig ];
+}
+
+/**
+ * Hook to fetch base/theme global styles config
+ */
+function useGlobalStylesBaseConfig() {
+	const baseConfig = useSelect(
+		( select ) =>
+			select( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		[]
+	);
+	return [ !! baseConfig, baseConfig ];
+}
+
+/**
+ * Hook to get merged global styles configuration
+ *
+ * @return {Object} Object containing merged, base, user configs and setUser function
+ *                  { merged, base, user, setUser }
+ */
+export function useGlobalStyles() {
+	const [ isUserConfigReady, userConfig, setUserConfig ] =
+		useGlobalStylesUserConfig();
+	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
+
+	const merged = useMemo( () => {
+		if ( ! isUserConfigReady || ! isBaseConfigReady ) {
+			return {};
+		}
+		return mergeGlobalStyles( baseConfig || {}, userConfig );
+	}, [ isUserConfigReady, isBaseConfigReady, baseConfig, userConfig ] );
+
+	return {
+		merged,
+		base: baseConfig || {},
+		user: userConfig,
+		setUser: setUserConfig,
+		isReady: isUserConfigReady && isBaseConfigReady,
+	};
+}
+
+/**
+ * Hook to get a style value from global styles
+ *
+ * @param {string} path      Style path (e.g., 'color.background')
+ * @param {string} blockName Optional block name
+ * @return {*} Style value
+ */
+export function useStyle( path, blockName ) {
+	const { merged } = useGlobalStyles();
+	return useMemo(
+		() => getStyle( merged, path, blockName ),
+		[ merged, path, blockName ]
+	);
+}
+
+/**
+ * Hook to get a setting value from global styles
+ *
+ * @param {string} path      Setting path (e.g., 'spacing.blockGap')
+ * @param {string} blockName Optional block name
+ * @return {*} Setting value
+ */
+export function useSetting( path, blockName ) {
+	const { merged } = useGlobalStyles();
+	return useMemo(
+		() => getSetting( merged, path, blockName ),
+		[ merged, path, blockName ]
+	);
+}

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

@@ -0,0 +1,125 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { GlobalStylesUI } from '@wordpress/global-styles-ui';
+import { uploadMedia } from '@wordpress/media-utils';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { GlobalStylesBlockLink } from './block-link';
+import { useGlobalStyles } from './hooks';
+
+/**
+ * Hook to fetch server CSS and settings for BlockEditorProvider that are not Global Styles.
+ */
+function useServerData() {
+	const {
+		styles,
+		__unstableResolvedAssets,
+		colors,
+		gradients,
+		__experimentalDiscussionSettings,
+		mediaUploadHandler,
+		fontLibraryEnabled,
+	} = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { canUser } = select( coreStore );
+		const editorSettings = getEditorSettings();
+
+		const canUserUploadMedia = canUser( 'create', {
+			kind: 'root',
+			name: 'media',
+		} );
+
+		return {
+			styles: editorSettings?.styles || [],
+			__unstableResolvedAssets:
+				editorSettings?.__unstableResolvedAssets || {},
+			colors: editorSettings?.colors || [],
+			gradients: editorSettings?.gradients || [],
+			__experimentalDiscussionSettings:
+				editorSettings?.__experimentalDiscussionSettings,
+			mediaUploadHandler: canUserUploadMedia ? uploadMedia : undefined,
+			fontLibraryEnabled: editorSettings?.fontLibraryEnabled ?? true,
+		};
+	}, [] );
+
+	// Filter out global styles to get only server-provided styles
+	const serverCSS = useMemo( () => {
+		if ( ! styles ) {
+			return [];
+		}
+		return styles.filter( ( style ) => ! style.isGlobalStyles );
+	}, [ styles ] );
+
+	// Create server settings object
+	const serverSettings = useMemo( () => {
+		return {
+			__unstableResolvedAssets,
+			settings: {
+				color: {
+					palette: {
+						theme: colors,
+					},
+					gradients: {
+						theme: gradients,
+					},
+					duotone: {
+						theme: [],
+					},
+				},
+			},
+			__experimentalDiscussionSettings,
+			mediaUpload: mediaUploadHandler,
+		};
+	}, [
+		__unstableResolvedAssets,
+		colors,
+		gradients,
+		__experimentalDiscussionSettings,
+		mediaUploadHandler,
+	] );
+
+	return { serverCSS, serverSettings, fontLibraryEnabled };
+}
+
+export default function GlobalStylesUIWrapper( { path, onPathChange } ) {
+	const {
+		user: userConfig,
+		base: baseConfig,
+		setUser: setUserConfig,
+		isReady,
+	} = useGlobalStyles();
+	const { serverCSS, serverSettings, fontLibraryEnabled } = useServerData();
+
+	// Show loading state while data is being fetched
+	if ( ! isReady ) {
+		return null;
+	}
+
+	return (
+		<>
+			<GlobalStylesUI
+				value={ userConfig }
+				baseValue={ baseConfig || {} }
+				onChange={ setUserConfig }
+				path={ path }
+				onPathChange={ onPathChange }
+				fontLibraryEnabled={ fontLibraryEnabled }
+				serverCSS={ serverCSS }
+				serverSettings={ serverSettings }
+			/>
+			<GlobalStylesBlockLink
+				path={ path }
+				onPathChange={ onPathChange }
+			/>
+		</>
+	);
+}
+
+export { useGlobalStyles, useStyle, useSetting } from './hooks';

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

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { moreVertical } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStyles } from './hooks';
+
+/**
+ * Action menu with Reset, Welcome Guide, and Additional CSS.
+ *
+ * @param {Object}   props                  Component props.
+ * @param {boolean}  props.hideWelcomeGuide Whether to hide the Welcome Guide option.
+ * @param {Function} props.onChangePath     Callback for navigation to different paths (e.g., '/css').
+ * @return {JSX.Element} The Global Styles Action Menu component.
+ */
+export function GlobalStylesActionMenu( {
+	hideWelcomeGuide = false,
+	onChangePath,
+} ) {
+	const { user, setUser } = useGlobalStyles();
+
+	// Check if there are user customizations that can be reset
+	const canReset =
+		!! user &&
+		( Object.keys( user?.styles ?? {} ).length > 0 ||
+			Object.keys( user?.settings ?? {} ).length > 0 );
+
+	// Reset function to clear all user customizations
+	const onReset = () => {
+		setUser( { styles: {}, settings: {} } );
+	};
+	const { toggle } = useDispatch( preferencesStore );
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+		};
+	}, [] );
+	const loadCustomCSS = () => {
+		onChangePath( '/css' );
+	};
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'More' ) }
+			toggleProps={ { size: 'compact' } }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						{ canEditCSS && (
+							<MenuItem onClick={ loadCustomCSS }>
+								{ __( 'Additional CSS' ) }
+							</MenuItem>
+						) }
+						{ ! hideWelcomeGuide && (
+							<MenuItem
+								onClick={ () => {
+									toggle(
+										'core/edit-site',
+										'welcomeGuideStyles'
+									);
+									onClose();
+								} }
+							>
+								{ __( 'Welcome Guide' ) }
+							</MenuItem>
+						) }
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								onReset();
+								onClose();
+							} }
+							disabled={ ! canReset }
+						>
+							{ __( 'Reset styles' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/global-styles/style.scss

@@ -0,0 +1,11 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-global-styles-header__description {
+	padding: 0 $grid-unit-20;
+}
+
+.editor-global-styles-header {
+	// Need to override the too specific bottom margin for complementary areas.
+	margin-bottom: 0 !important;
+}

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

@@ -1,9 +1,3 @@
-/**
- * External dependencies
- */
-import deepmerge from 'deepmerge';
-import { isPlainObject } from 'is-plain-object';
-
 /**
  * WordPress dependencies
  */
@@ -11,37 +5,14 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo, useCallback } from '@wordpress/element';
+import { mergeGlobalStyles } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 
-const { GlobalStylesContext, cleanEmptyObject } = unlock(
-	blockEditorPrivateApis
-);
-
-export function mergeBaseAndUserConfigs( base, user ) {
-	return deepmerge( base, user, {
-		/*
-		 * We only pass as arrays the presets,
-		 * in which case we want the new array of values
-		 * to override the old array (no merging).
-		 */
-		isMergeableObject: isPlainObject,
-		/*
-		 * Exceptions to the above rule.
-		 * Background images should be replaced, not merged,
-		 * as they themselves are specific object definitions for the style.
-		 */
-		customMerge: ( key ) => {
-			if ( key === 'backgroundImage' ) {
-				return ( baseConfig, userConfig ) => userConfig;
-			}
-			return undefined;
-		},
-	} );
-}
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
@@ -212,7 +183,7 @@ export function useGlobalStylesContext() {
 			return {};
 		}
 
-		return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		return mergeGlobalStyles( baseConfig, userConfig );
 	}, [ userConfig, baseConfig ] );
 
 	const context = useMemo( () => {
@@ -234,16 +205,3 @@ export function useGlobalStylesContext() {
 
 	return context;
 }
-
-export function GlobalStylesProvider( { children } ) {
-	const context = useGlobalStylesContext();
-	if ( ! context.isReady ) {
-		return null;
-	}
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			{ children }
-		</GlobalStylesContext.Provider>
-	);
-}

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { useGlobalStylesOutput } from '../../hooks/use-global-styles-output';
+
+function useGlobalStylesRenderer( disableRootPadding ) {
+	const [ styles, settings ] = useGlobalStylesOutput( disableRootPadding );
+	const { getEditorSettings } = useSelect( editorStore );
+	const { updateEditorSettings } = useDispatch( editorStore );
+
+	useEffect( () => {
+		if ( ! styles || ! settings ) {
+			return;
+		}
+
+		const currentStoreSettings = getEditorSettings();
+		const nonGlobalStyles = Object.values(
+			currentStoreSettings.styles ?? []
+		).filter( ( style ) => ! style.isGlobalStyles );
+		updateEditorSettings( {
+			...currentStoreSettings,
+			styles: [ ...nonGlobalStyles, ...styles ],
+			__experimentalFeatures: settings,
+		} );
+	}, [ styles, settings, updateEditorSettings, getEditorSettings ] );
+}
+
+export function GlobalStylesRenderer( { disableRootPadding } ) {
+	useGlobalStylesRenderer( disableRootPadding );
+
+	return null;
+}