@wordpress/editor 14.33.5 → 14.34.1-next.2f1c7c01b.0

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;
+}

package/src/components/global-styles-sidebar/default-sidebar.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ComplementaryArea,
+	ComplementaryAreaMoreMenuItem,
+} from '@wordpress/interface';
+
+export default function DefaultSidebar( {
+	className,
+	identifier,
+	title,
+	icon,
+	children,
+	closeLabel,
+	header,
+	headerClassName,
+	panelClassName,
+	isActiveByDefault,
+} ) {
+	return (
+		<>
+			<ComplementaryArea
+				className={ className }
+				scope="core"
+				identifier={ identifier }
+				title={ title }
+				icon={ icon }
+				closeLabel={ closeLabel }
+				header={ header }
+				headerClassName={ headerClassName }
+				panelClassName={ panelClassName }
+				isActiveByDefault={ isActiveByDefault }
+			>
+				{ children }
+			</ComplementaryArea>
+			<ComplementaryAreaMoreMenuItem
+				scope="core"
+				identifier={ identifier }
+				icon={ icon }
+			>
+				{ title }
+			</ComplementaryAreaMoreMenuItem>
+		</>
+	);
+}

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

@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import { FlexItem, Flex, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { styles, seen, backup } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useViewportMatch, usePrevious } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import GlobalStylesUI from '../global-styles';
+import { GlobalStylesActionMenu } from '../global-styles/menu';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import DefaultSidebar from './default-sidebar';
+import WelcomeGuideStyles from './welcome-guide';
+
+export default function GlobalStylesSidebar() {
+	const {
+		shouldResetNavigation,
+		stylesPath,
+		showStylebook,
+		showListViewByDefault,
+		hasRevisions,
+		activeComplementaryArea,
+	} = useSelect( ( select ) => {
+		const { getActiveComplementaryArea } = select( interfaceStore );
+		const { getStylesPath, getShowStylebook } = unlock(
+			select( editorStore )
+		);
+		const _isVisualEditorMode =
+			'visual' === select( editorStore ).getEditorMode();
+		const _showListViewByDefault = select( preferencesStore ).get(
+			'core',
+			'showListViewByDefault'
+		);
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			stylesPath: getStylesPath(),
+			showStylebook: getShowStylebook(),
+			shouldResetNavigation:
+				'edit-site/global-styles' !==
+					getActiveComplementaryArea( 'core' ) ||
+				! _isVisualEditorMode,
+			showListViewByDefault: _showListViewByDefault,
+			hasRevisions:
+				!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,
+			activeComplementaryArea:
+				select( interfaceStore ).getActiveComplementaryArea( 'core' ),
+		};
+	}, [] );
+	const { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(
+		useDispatch( editorStore )
+	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	// Derive state from path and showStylebook
+	const isRevisionsOpened =
+		stylesPath.startsWith( '/revisions' ) && ! showStylebook;
+	const isRevisionsStyleBookOpened =
+		stylesPath.startsWith( '/revisions' ) && showStylebook;
+
+	const previousActiveArea = usePrevious( activeComplementaryArea );
+
+	// Reset navigation when sidebar opens
+	useEffect( () => {
+		if (
+			activeComplementaryArea === 'edit-site/global-styles' &&
+			previousActiveArea !== 'edit-site/global-styles'
+		) {
+			resetStylesNavigation();
+		}
+	}, [ activeComplementaryArea, previousActiveArea, resetStylesNavigation ] );
+
+	useEffect( () => {
+		if ( shouldResetNavigation ) {
+			resetStylesNavigation();
+		}
+	}, [ shouldResetNavigation, resetStylesNavigation ] );
+
+	const { setIsListViewOpened } = useDispatch( editorStore );
+
+	const toggleRevisions = () => {
+		setIsListViewOpened( false );
+		if ( isRevisionsOpened || isRevisionsStyleBookOpened ) {
+			// Close revisions, go back to root
+			setStylesPath( '/' );
+		} else {
+			// Open revisions
+			setStylesPath( '/revisions' );
+		}
+	};
+	const toggleStyleBook = () => {
+		setIsListViewOpened( showStylebook && showListViewByDefault );
+		setShowStylebook( ! showStylebook );
+	};
+
+	return (
+		<>
+			<DefaultSidebar
+				className="editor-global-styles-sidebar"
+				identifier="edit-site/global-styles"
+				title={ __( 'Styles' ) }
+				icon={ styles }
+				closeLabel={ __( 'Close Styles' ) }
+				panelClassName="editor-global-styles-sidebar__panel"
+				header={
+					<Flex
+						className="editor-global-styles-sidebar__header"
+						gap={ 1 }
+					>
+						<FlexItem>
+							<h2 className="editor-global-styles-sidebar__header-title">
+								{ __( 'Styles' ) }
+							</h2>
+						</FlexItem>
+						<Flex
+							justify="flex-end"
+							gap={ 1 }
+							className="editor-global-styles-sidebar__header-actions"
+						>
+							{ ! isMobileViewport && (
+								<FlexItem>
+									<Button
+										icon={ seen }
+										label={ __( 'Style Book' ) }
+										isPressed={ showStylebook }
+										accessibleWhenDisabled
+										disabled={ shouldResetNavigation }
+										onClick={ toggleStyleBook }
+										size="compact"
+									/>
+								</FlexItem>
+							) }
+							<FlexItem>
+								<Button
+									label={ __( 'Revisions' ) }
+									icon={ backup }
+									onClick={ toggleRevisions }
+									accessibleWhenDisabled
+									disabled={ ! hasRevisions }
+									isPressed={
+										isRevisionsOpened ||
+										isRevisionsStyleBookOpened
+									}
+									size="compact"
+								/>
+							</FlexItem>
+							<GlobalStylesActionMenu
+								onChangePath={ setStylesPath }
+							/>
+						</Flex>
+					</Flex>
+				}
+			>
+				<GlobalStylesUI
+					path={ stylesPath }
+					onPathChange={ setStylesPath }
+				/>
+			</DefaultSidebar>
+			<WelcomeGuideStyles />
+		</>
+	);
+}

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

@@ -0,0 +1,119 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-global-styles-sidebar {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+
+	&__panel {
+		flex: 1;
+	}
+
+	.components-navigator-screen {
+		padding: 0;
+	}
+}
+
+.editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
+	margin: 0;
+}
+
+.editor-global-styles-sidebar .editor-global-styles-sidebar__header-actions {
+	flex: 1;
+}
+
+.editor-global-styles-sidebar .components-navigation__menu-title-heading {
+	font-size: $default-font-size * 1.2;
+	font-weight: $font-weight-medium;
+}
+
+.editor-global-styles-sidebar .components-navigation__item > button span {
+	font-weight: $font-weight-medium;
+}
+
+.editor-global-styles-sidebar .block-editor-panel-color-gradient-settings {
+	border: 0;
+}
+
+.editor-global-styles-sidebar .single-column {
+	grid-column: span 1;
+}
+
+.editor-global-styles-sidebar .components-tools-panel .span-columns {
+	grid-column: 1 / -1;
+}
+
+.editor-global-styles-sidebar__blocks-group {
+	padding-top: $grid-unit-30;
+	border-top: $border-width solid $gray-200;
+}
+
+.editor-global-styles-sidebar__blocks-group-help {
+	padding: 0 $grid-unit-20;
+}
+
+.global-styles-ui-color-palette-panel,
+.global-styles-ui-gradient-palette-panel {
+	padding: $grid-unit-20;
+}
+
+// Override the `hr` styles defined in the `ComplementaryArea` component
+// from the `@wordpress/interface` package.
+.editor-global-styles-sidebar hr {
+	margin: 0;
+}
+
+.show-icon-labels {
+	.editor-global-styles-sidebar__header {
+		.components-button.has-icon {
+			width: auto;
+
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+				font-size: $helptext-font-size;
+			}
+		}
+	}
+}
+
+.editor-welcome-guide {
+	width: 312px;
+
+	&.guide-styles .editor-welcome-guide__image {
+		background: #00a0d2;
+	}
+
+	&__image {
+		margin: 0 0 $grid-unit-20;
+		> img {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__heading {
+		font-family: $default-font;
+		font-size: 24px;
+		line-height: 1.4;
+		margin: $grid-unit-20 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+	}
+
+	&__text {
+		font-size: $default-font-size;
+		line-height: 1.4;
+		margin: 0 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+
+		img {
+			vertical-align: bottom;
+		}
+	}
+}

package/src/components/global-styles-sidebar/welcome-guide-image.js

@@ -0,0 +1,11 @@
+export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+	return (
+		<picture className="editor-welcome-guide__image">
+			<source
+				srcSet={ nonAnimatedSrc }
+				media="(prefers-reduced-motion: reduce)"
+			/>
+			<img src={ animatedSrc } width="312" height="240" alt="" />
+		</picture>
+	);
+}