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

package/src/components/document-bar/index.js

@@ -31,6 +31,8 @@ import { TEMPLATE_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
 import { getTemplateInfo } from '../../utils/get-template-info';
+import { getStylesCanvasTitle } from '../styles-canvas';
+import { unlock } from '../../lock-unlock';
 
 /** @typedef {import("@wordpress/components").IconType} IconType */
 
@@ -45,9 +47,9 @@ const MotionButton = motion.create( Button );
  * ```jsx
  * <DocumentBar />
  * ```
+ *
  * @param {Object}   props       The component props.
- * @param {string}   props.title A title for the document, defaulting to the document or
- *                               template title currently being edited.
+ * @param {string}   props.title A title for the document, defaulting to the document or template title currently being edited.
  * @param {IconType} props.icon  An icon for the document, no default.
  *                               (A default icon indicating the document post type is no longer used.)
  *
@@ -63,6 +65,7 @@ export default function DocumentBar( props ) {
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
 		isTemplatePreview,
+		stylesCanvasTitle,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostType,
@@ -94,6 +97,17 @@ export default function DocumentBar( props ) {
 		} );
 		const _postTypeLabel = getPostType( _postType )?.labels?.singular_name;
 
+		// Check if styles canvas is active and get its title
+		const { getStylesPath, getShowStylebook } = unlock(
+			select( editorStore )
+		);
+		const _stylesPath = getStylesPath();
+		const _showStylebook = getShowStylebook();
+		const _stylesCanvasTitle = getStylesCanvasTitle(
+			_stylesPath,
+			_showStylebook
+		);
+
 		return {
 			postId: _postId,
 			postType: _postType,
@@ -111,6 +125,7 @@ export default function DocumentBar( props ) {
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
 			isTemplatePreview: getRenderingMode() === 'template-locked',
+			stylesCanvasTitle: _stylesCanvasTitle,
 		};
 	}, [] );
 
@@ -120,7 +135,7 @@ export default function DocumentBar( props ) {
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
 	const entityTitle = isTemplate ? templateTitle : documentTitle;
-	const title = props.title || entityTitle;
+	const title = props.title || stylesCanvasTitle || entityTitle;
 	const icon = props.icon;
 
 	const pageTypeBadge = usePageTypeBadge( postId );

package/src/components/editor/index.js

@@ -9,11 +9,14 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { store as editorStore } from '../../store';
 import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import EditorInterface from '../editor-interface';
 import { ExperimentalEditorProvider } from '../provider';
 import Sidebar from '../sidebar';
 import NotesSidebar from '../collab-sidebar';
+import GlobalStylesSidebar from '../global-styles-sidebar';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
 
 function Editor( {
 	postType,
@@ -32,15 +35,29 @@ function Editor( {
 	extraSidebarPanels,
 	...props
 } ) {
-	const { post, template, hasLoadedPost, error } = useSelect(
+	const {
+		post,
+		template,
+		hasLoadedPost,
+		error,
+		isBlockTheme,
+		showGlobalStyles,
+	} = useSelect(
 		( select ) => {
 			const {
 				getEntityRecord,
 				getResolutionError,
 				hasFinishedResolution,
+				getCurrentTheme,
 			} = select( coreStore );
+			const { getRenderingMode, getCurrentPostType } =
+				select( editorStore );
 
 			const postArgs = [ 'postType', postType, postId ];
+			const renderingMode = getRenderingMode();
+			const currentPostType = getCurrentPostType();
+			const _isBlockTheme = getCurrentTheme()?.is_block_theme;
+
 			return {
 				post: getEntityRecord( ...postArgs ),
 				template: templateId
@@ -56,6 +73,11 @@ function Editor( {
 				),
 				error: getResolutionError( 'getEntityRecord', postArgs )
 					?.message,
+				isBlockTheme: _isBlockTheme,
+				showGlobalStyles:
+					_isBlockTheme &&
+					( currentPostType === 'wp_template' ||
+						renderingMode === 'template-locked' ),
 			};
 		},
 		[ postType, postId, templateId ]
@@ -92,6 +114,8 @@ function Editor( {
 						extraPanels={ extraSidebarPanels }
 					/>
 					<NotesSidebar />
+					{ isBlockTheme && <GlobalStylesRenderer /> }
+					{ showGlobalStyles && <GlobalStylesSidebar /> }
 				</ExperimentalEditorProvider>
 			) }
 		</>

package/src/components/editor-help/style.scss

@@ -118,6 +118,6 @@
 
 .helpDetailBadgeText {
 	color: $white;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	font-size: 12px;
 }

package/src/components/editor-interface/index.js

@@ -18,6 +18,7 @@ import { useState, useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 import EditorNotices from '../editor-notices';
 import Header from '../header';
 import InserterSidebar from '../inserter-sidebar';
@@ -25,7 +26,7 @@ import ListViewSidebar from '../list-view-sidebar';
 import SavePublishPanels from '../save-publish-panels';
 import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
-import EditorContentSlotFill from './content-slot-fill';
+import StylesCanvas from '../styles-canvas';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -42,7 +43,6 @@ const interfaceLabels = {
 
 export default function EditorInterface( {
 	className,
-	styles,
 	children,
 	forceIsDirty,
 	contentRef,
@@ -51,7 +51,6 @@ export default function EditorInterface( {
 	customSaveButton,
 	customSavePanel,
 	forceDisableBlockTools,
-	title,
 	iframeProps,
 } ) {
 	const {
@@ -62,9 +61,14 @@ export default function EditorInterface( {
 		isPreviewMode,
 		showBlockBreadcrumbs,
 		documentLabel,
+		stylesPath,
+		showStylebook,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const { getStylesPath, getShowStylebook } = unlock(
+			select( editorStore )
+		);
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
 
@@ -86,12 +90,16 @@ export default function EditorInterface( {
 			documentLabel:
 				// translators: Default label for the Document in the Block Breadcrumb.
 				postTypeLabel || _x( 'Document', 'noun, breadcrumb' ),
+			stylesPath: getStylesPath(),
+			showStylebook: getShowStylebook(),
 		};
 	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
 		: __( 'Block Library' );
+	const shouldShowStylesCanvas =
+		showStylebook || stylesPath?.startsWith( '/revisions' );
 
 	// Local state for save panel.
 	// Note 'truthy' callback implies an open panel.
@@ -127,7 +135,6 @@ export default function EditorInterface( {
 						}
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
-						title={ title }
 					/>
 				)
 			}
@@ -148,41 +155,35 @@ export default function EditorInterface( {
 						<EditorNotices />
 					) }
 
-					<EditorContentSlotFill.Slot>
-						{ ( [ editorCanvasView ] ) =>
-							editorCanvasView ? (
-								editorCanvasView
-							) : (
-								<>
-									{ ! isPreviewMode && mode === 'text' && (
-										<TextEditor
-											// We should auto-focus the canvas (title) on load.
-											// eslint-disable-next-line jsx-a11y/no-autofocus
-											autoFocus={ autoFocus }
-										/>
-									) }
-									{ ! isPreviewMode &&
-										! isLargeViewport &&
-										mode === 'visual' && (
-											<BlockToolbar hideDragHandle />
-										) }
-									{ ( isPreviewMode ||
-										mode === 'visual' ) && (
-										<VisualEditor
-											styles={ styles }
-											contentRef={ contentRef }
-											disableIframe={ disableIframe }
-											// We should auto-focus the canvas (title) on load.
-											// eslint-disable-next-line jsx-a11y/no-autofocus
-											autoFocus={ autoFocus }
-											iframeProps={ iframeProps }
-										/>
-									) }
-									{ children }
-								</>
-							)
-						}
-					</EditorContentSlotFill.Slot>
+					{ shouldShowStylesCanvas ? (
+						<StylesCanvas />
+					) : (
+						<>
+							{ ! isPreviewMode && mode === 'text' && (
+								<TextEditor
+									// We should auto-focus the canvas (title) on load.
+									// eslint-disable-next-line jsx-a11y/no-autofocus
+									autoFocus={ autoFocus }
+								/>
+							) }
+							{ ! isPreviewMode &&
+								! isLargeViewport &&
+								mode === 'visual' && (
+									<BlockToolbar hideDragHandle />
+								) }
+							{ ( isPreviewMode || mode === 'visual' ) && (
+								<VisualEditor
+									contentRef={ contentRef }
+									disableIframe={ disableIframe }
+									// We should auto-focus the canvas (title) on load.
+									// eslint-disable-next-line jsx-a11y/no-autofocus
+									autoFocus={ autoFocus }
+									iframeProps={ iframeProps }
+								/>
+							) }
+							{ children }
+						</>
+					) }
 				</>
 			}
 			footer={

package/src/components/entities-saved-states/entity-type-list.js

@@ -5,18 +5,12 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { PanelBody, PanelRow } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useContext } from '@wordpress/element';
+import { getGlobalStylesChanges } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import EntityRecordItem from './entity-record-item';
-import { unlock } from '../../lock-unlock';
-
-const { getGlobalStylesChanges, GlobalStylesContext } = unlock(
-	blockEditorPrivateApis
-);
 
 function getEntityDescription( entity, count ) {
 	switch ( entity ) {
@@ -35,20 +29,28 @@ function getEntityDescription( entity, count ) {
 }
 
 function GlobalStylesDescription( { record } ) {
-	const { user: currentEditorGlobalStyles } =
-		useContext( GlobalStylesContext );
-	const savedRecord = useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecord(
-				record.kind,
-				record.name,
-				record.key
-			),
+	const { editedRecord, savedRecord } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getEntityRecord } =
+				select( coreStore );
+			return {
+				editedRecord: getEditedEntityRecord(
+					record.kind,
+					record.name,
+					record.key
+				),
+				savedRecord: getEntityRecord(
+					record.kind,
+					record.name,
+					record.key
+				),
+			};
+		},
 		[ record.kind, record.name, record.key ]
 	);
 
 	const globalStylesChanges = getGlobalStylesChanges(
-		currentEditorGlobalStyles,
+		editedRecord,
 		savedRecord,
 		{
 			maxResults: 10,

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