@wordpress/editor 13.33.0 → 13.35.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,11 +13,10 @@ import {
 	NavigableToolbar,
 	ToolSelector,
 	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
-import { useRef, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -29,8 +28,6 @@ import { store as editorStore } from '../../store';
 import EditorHistoryRedo from '../editor-history/redo';
 import EditorHistoryUndo from '../editor-history/undo';
 
-const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
@@ -38,11 +35,9 @@ const preventDefault = ( event ) => {
 function DocumentTools( {
 	className,
 	disableBlockTools = false,
-	children,
 	// This is a temporary prop until the list view is fully unified between post and site editors.
 	listViewLabel = __( 'Document Overview' ),
 } ) {
-	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
 	const {
@@ -50,16 +45,21 @@ function DocumentTools( {
 		isInserterOpened,
 		isListViewOpen,
 		listViewShortcut,
+		inserterSidebarToggleRef,
 		listViewToggleRef,
 		hasFixedToolbar,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { get } = select( preferencesStore );
-		const { isListViewOpened, getListViewToggleRef } = unlock(
-			select( editorStore )
-		);
+		const {
+			isListViewOpened,
+			getEditorMode,
+			getInserterSidebarToggleRef,
+			getListViewToggleRef,
+		} = unlock( select( editorStore ) );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		return {
 			isInserterOpened: select( editorStore ).isInserterOpened(),
@@ -67,16 +67,18 @@ function DocumentTools( {
 			listViewShortcut: getShortcutRepresentation(
 				'core/editor/toggle-list-view'
 			),
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			listViewToggleRef: getListViewToggleRef(),
 			hasFixedToolbar: getSettings().hasFixedToolbar,
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
+			isVisualMode: getEditorMode() === 'visual',
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	const { showFixedToolbar } = useShowBlockTools();
 
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
@@ -86,17 +88,10 @@ function DocumentTools( {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	const toggleInserter = useCallback( () => {
-		if ( isInserterOpened ) {
-			// Focusing the inserter button should close the inserter popover.
-			// However, there are some cases it won't close when the focus is lost.
-			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
-			inserterButton.current.focus();
-			setIsInserterOpened( false );
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpened, setIsInserterOpened ] );
+	const toggleInserter = useCallback(
+		() => setIsInserterOpened( ! isInserterOpened ),
+		[ isInserterOpened, setIsInserterOpened ]
+	);
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(
@@ -111,19 +106,18 @@ function DocumentTools( {
 		// supported, but we're keeping it in the list of class names for backwards
 		// compatibility.
 		<NavigableToolbar
-			className={ classnames(
+			className={ clsx(
 				'editor-document-tools',
 				'edit-post-header-toolbar',
 				className
 			) }
 			aria-label={ toolbarAriaLabel }
-			shouldUseKeyboardFocusShortcut={ ! showFixedToolbar }
 			variant="unstyled"
 		>
 			<div className="editor-document-tools__left">
 				{ ! isDistractionFree && (
 					<ToolbarItem
-						ref={ inserterButton }
+						ref={ inserterSidebarToggleRef }
 						as={ Button }
 						className="editor-document-tools__inserter-toggle"
 						variant="primary"
@@ -184,7 +178,6 @@ function DocumentTools( {
 						) }
 					</>
 				) }
-				{ children }
 			</div>
 		</NavigableToolbar>
 	);

package/src/components/editor-canvas/edit-template-blocks-notification.js

@@ -82,7 +82,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			onCancel={ () => setIsDialogOpen( false ) }
 		>
 			{ __(
-				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?.'
+				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?'
 			) }
 		</ConfirmDialog>
 	);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -161,13 +161,17 @@ function EditorCanvas( {
 		hasRootPaddingAwareAlignments,
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
+		const { getSettings, __unstableGetEditorMode } =
+			select( blockEditorStore );
+		const _settings = getSettings();
 		return {
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			hasRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
@@ -248,7 +252,7 @@ function EditorCanvas( {
 		'core/post-content'
 	);
 
-	const blockListLayoutClass = classnames(
+	const blockListLayoutClass = clsx(
 		{
 			'is-layout-flow': ! themeSupportsLayout,
 		},
@@ -319,6 +323,13 @@ function EditorCanvas( {
 		} ),
 	] );
 
+	const zoomOutProps = isZoomOutMode
+		? {
+				scale: 'default',
+				frameSize: '20px',
+		  }
+		: {};
+
 	return (
 		<BlockCanvas
 			shouldIframe={
@@ -328,10 +339,11 @@ function EditorCanvas( {
 			styles={ styles }
 			height="100%"
 			iframeProps={ {
-				className: classnames( 'editor-canvas__iframe', {
+				className: clsx( 'editor-canvas__iframe', {
 					'has-editor-padding': showEditorPadding,
 				} ),
 				...iframeProps,
+				...zoomOutProps,
 				style: {
 					...iframeProps?.style,
 					...deviceStyles,
@@ -362,7 +374,7 @@ function EditorCanvas( {
 				) }
 			{ renderingMode === 'post-only' && ! isDesignPostType && (
 				<div
-					className={ classnames(
+					className={ clsx(
 						'editor-editor-canvas__post-title-wrapper',
 						// The following class is only here for backward comapatibility
 						// some themes might be using it to style the post title.
@@ -387,7 +399,7 @@ function EditorCanvas( {
 				uniqueId={ wrapperUniqueId }
 			>
 				<BlockList
-					className={ classnames(
+					className={ clsx(
 						className,
 						'is-' + deviceType.toLowerCase() + '-preview',
 						renderingMode !== 'post-only' || isDesignPostType

package/src/components/editor-history/redo.js

@@ -41,4 +41,14 @@ function EditorHistoryRedo( props, ref ) {
 	);
 }
 
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
+
+/**
+ * Renders the redo button for the editor history.
+ *
+ * @param {Object} props - Props.
+ * @param {Ref}    ref   - Forwarded ref.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default forwardRef( EditorHistoryRedo );

package/src/components/editor-history/undo.js

@@ -37,4 +37,14 @@ function EditorHistoryUndo( props, ref ) {
 	);
 }
 
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
+
+/**
+ * Renders the undo button for the editor history.
+ *
+ * @param {Object} props - Props.
+ * @param {Ref}    ref   - Forwarded ref.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default forwardRef( EditorHistoryUndo );

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

@@ -8,6 +8,11 @@ import { store as noticesStore } from '@wordpress/notices';
 // Last three notices. Slices from the tail end of the list.
 const MAX_VISIBLE_NOTICES = -3;
 
+/**
+ * Renders the editor snackbars component.
+ *
+ * @return {JSX.Element} The rendered component.
+ */
 export default function EditorSnackbars() {
 	const notices = useSelect(
 		( select ) => select( noticesStore ).getNotices(),

package/src/components/entities-saved-states/style.scss

@@ -30,3 +30,10 @@
 		margin-bottom: $grid-unit-05;
 	}
 }
+
+.edit-post-layout,
+.edit-site-editor__interface-skeleton {
+	.entities-saved-states__panel-header {
+		height: $header-height + $border-width;
+	}
+}

package/src/components/global-keyboard-shortcuts/index.js

@@ -11,6 +11,13 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Component handles the keyboard shortcuts for the editor.
+ *
+ * It provides functionality for various keyboard shortcuts such as toggling editor mode,
+ * toggling distraction-free mode, undo/redo, saving the post, toggling list view,
+ * and toggling the sidebar.
+ */
 export default function EditorKeyboardShortcuts() {
 	const isModeToggleDisabled = useSelect( ( select ) => {
 		const { richEditingEnabled, codeEditingEnabled } =

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -8,6 +8,11 @@ import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { isAppleOS } from '@wordpress/keycodes';
 
+/**
+ * Component for registering editor keyboard shortcuts.
+ *
+ * @return {Element} The component to be rendered.
+ */
 function EditorKeyboardShortcutsRegister() {
 	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
@@ -67,7 +72,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-list-view',
 			category: 'global',
-			description: __( 'Open the block list view.' ),
+			description: __( 'Open the List View.' ),
 			keyCombination: {
 				modifier: 'access',
 				character: 'o',
@@ -103,6 +108,42 @@ function EditorKeyboardShortcutsRegister() {
 				character: 'h',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/editor/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
+			],
+		} );
 	}, [ registerShortcut ] );
 
 	return <BlockEditorKeyboardShortcuts.Register />;

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

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import deepmerge from 'deepmerge';
+import { isPlainObject } from 'is-plain-object';
+
+/**
+ * WordPress dependencies
+ */
+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';
+
+/**
+ * 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,
+	} );
+}
+
+function useGlobalStylesUserConfig() {
+	const { globalStylesId, isReady, settings, styles } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const _globalStylesId =
+				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
+			const record = _globalStylesId
+				? getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+				  )
+				: undefined;
+
+			let hasResolved = false;
+			if (
+				hasFinishedResolution(
+					'__experimentalGetCurrentGlobalStylesId'
+				)
+			) {
+				hasResolved = _globalStylesId
+					? hasFinishedResolution( 'getEditedEntityRecord', [
+							'root',
+							'globalStyles',
+							_globalStylesId,
+					  ] )
+					: true;
+			}
+
+			return {
+				globalStylesId: _globalStylesId,
+				isReady: hasResolved,
+				settings: record?.settings,
+				styles: record?.styles,
+			};
+		},
+		[]
+	);
+
+	const { getEditedEntityRecord } = useSelect( coreStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const config = useMemo( () => {
+		return {
+			settings: settings ?? {},
+			styles: styles ?? {},
+		};
+	}, [ settings, styles ] );
+
+	const setConfig = useCallback(
+		( callback, options = {} ) => {
+			const record = getEditedEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId
+			);
+			const currentConfig = {
+				styles: record?.styles ?? {},
+				settings: record?.settings ?? {},
+			};
+			const updatedConfig = callback( currentConfig );
+			editEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				{
+					styles: cleanEmptyObject( updatedConfig.styles ) || {},
+					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+				},
+				options
+			);
+		},
+		[ globalStylesId ]
+	);
+
+	return [ isReady, config, setConfig ];
+}
+
+function useGlobalStylesBaseConfig() {
+	const baseConfig = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeBaseGlobalStyles();
+	}, [] );
+
+	return [ !! baseConfig, baseConfig ];
+}
+
+export function useGlobalStylesContext() {
+	const [ isUserConfigReady, userConfig, setUserConfig ] =
+		useGlobalStylesUserConfig();
+	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
+	const mergedConfig = useMemo( () => {
+		if ( ! baseConfig || ! userConfig ) {
+			return {};
+		}
+		return mergeBaseAndUserConfigs( baseConfig, userConfig );
+	}, [ userConfig, baseConfig ] );
+	const context = useMemo( () => {
+		return {
+			isReady: isUserConfigReady && isBaseConfigReady,
+			user: userConfig,
+			base: baseConfig,
+			merged: mergedConfig,
+			setUserConfig,
+		};
+	}, [
+		mergedConfig,
+		userConfig,
+		baseConfig,
+		setUserConfig,
+		isUserConfigReady,
+		isBaseConfigReady,
+	] );
+
+	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/header/index.js

@@ -0,0 +1,154 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useState } from '@wordpress/element';
+import { PinnedItems } from '@wordpress/interface';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import CollapsableBlockToolbar from '../collapsible-block-toolbar';
+import DocumentBar from '../document-bar';
+import DocumentTools from '../document-tools';
+import MoreMenu from '../more-menu';
+import PostPreviewButton from '../post-preview-button';
+import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';
+import PostSavedState from '../post-saved-state';
+import PostTypeSupportCheck from '../post-type-support-check';
+import PostViewLink from '../post-view-link';
+import PreviewDropdown from '../preview-dropdown';
+import { store as editorStore } from '../../store';
+
+const slideY = {
+	hidden: { y: '-50px' },
+	distractionFreeInactive: { y: 0 },
+	hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
+function Header( {
+	customSaveButton,
+	forceIsDirty,
+	forceDisableBlockTools,
+	setEntitiesSavedStatesCallback,
+	title,
+	children,
+} ) {
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const {
+		isTextEditor,
+		isPublishSidebarOpened,
+		showIconLabels,
+		hasFixedToolbar,
+		isNestedEntity,
+		isZoomedOutView,
+	} = useSelect( ( select ) => {
+		const { get: getPreference } = select( preferencesStore );
+		const {
+			getEditorMode,
+			getEditorSettings,
+			isPublishSidebarOpened: _isPublishSidebarOpened,
+		} = select( editorStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+
+		return {
+			isTextEditor: getEditorMode() === 'text',
+			isPublishSidebarOpened: _isPublishSidebarOpened(),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isNestedEntity:
+				!! getEditorSettings().onNavigateToPreviousEntityRecord,
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
+		};
+	}, [] );
+
+	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
+
+	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
+		useState( true );
+
+	// The edit-post-header classname is only kept for backward compatibilty
+	// as some plugins might be relying on its presence.
+	return (
+		<div className="editor-header edit-post-header">
+			{ children }
+			<motion.div
+				variants={ slideY }
+				transition={ { type: 'tween', delay: 0.8 } }
+				className="editor-header__toolbar"
+			>
+				<DocumentTools
+					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+				/>
+				{ hasTopToolbar && (
+					<CollapsableBlockToolbar
+						isCollapsed={ isBlockToolsCollapsed }
+						onToggle={ setIsBlockToolsCollapsed }
+					/>
+				) }
+				<div
+					className={ clsx( 'editor-header__center', {
+						'is-collapsed':
+							! isBlockToolsCollapsed && hasTopToolbar,
+					} ) }
+				>
+					{ ! title ? (
+						<PostTypeSupportCheck supportKeys="title">
+							<DocumentBar />
+						</PostTypeSupportCheck>
+					) : (
+						title
+					) }
+				</div>
+			</motion.div>
+			<motion.div
+				variants={ slideY }
+				transition={ { type: 'tween', delay: 0.8 } }
+				className="editor-header__settings"
+			>
+				{ ! customSaveButton && ! isPublishSidebarOpened && (
+					// This button isn't completely hidden by the publish sidebar.
+					// We can't hide the whole toolbar when the publish sidebar is open because
+					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+					// We track that DOM node to return focus to the PostPublishButtonOrToggle
+					// when the publish sidebar has been closed.
+					<PostSavedState forceIsDirty={ forceIsDirty } />
+				) }
+				<PreviewDropdown
+					forceIsAutosaveable={ forceIsDirty }
+					disabled={ isNestedEntity || isZoomedOutView }
+				/>
+				<PostPreviewButton
+					className="editor-header__post-preview-button"
+					forceIsAutosaveable={ forceIsDirty }
+				/>
+				<PostViewLink />
+				{ ! customSaveButton && (
+					<PostPublishButtonOrToggle
+						forceIsDirty={ forceIsDirty }
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+					/>
+				) }
+				{ customSaveButton }
+				{ ( isWideViewport || ! showIconLabels ) && (
+					<PinnedItems.Slot scope="core" />
+				) }
+				<MoreMenu />
+			</motion.div>
+		</div>
+	);
+}
+
+export default Header;