@wordpress/editor 13.35.0 → 14.0.0

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

@@ -7,15 +7,17 @@ import { isPlainObject } from 'is-plain-object';
 /**
  * WordPress dependencies
  */
+import { registerBlockStyle, store as blocksStore } from '@wordpress/blocks';
 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 { useEffect, useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import setNestedValue from '../../utils/set-nested-value';
 
 const { GlobalStylesContext, cleanEmptyObject } = unlock(
 	blockEditorPrivateApis
@@ -30,8 +32,87 @@ export function mergeBaseAndUserConfigs( base, user ) {
 	} );
 }
 
+/**
+ * Resolves shared block style variation definitions from the user origin
+ * under their respective block types and registers the block style if required.
+ *
+ * @param {Object} userConfig Current user origin global styles data.
+ * @return {Object} Updated global styles data.
+ */
+function useResolvedBlockStyleVariationsConfig( userConfig ) {
+	const { getBlockStyles } = useSelect( blocksStore );
+	const sharedVariations = userConfig?.styles?.blocks?.variations;
+
+	// Collect block style variation definitions to merge and unregistered
+	// block styles for automatic registration.
+	const [ userConfigToMerge, unregisteredStyles ] = useMemo( () => {
+		if ( ! sharedVariations ) {
+			return [];
+		}
+
+		const variationsConfigToMerge = {};
+		const unregisteredBlockStyles = [];
+
+		Object.entries( sharedVariations ).forEach(
+			( [ variationName, variation ] ) => {
+				if ( ! variation?.blockTypes?.length ) {
+					return;
+				}
+
+				variation.blockTypes.forEach( ( blockName ) => {
+					const blockStyles = getBlockStyles( blockName );
+					const registeredBlockStyle = blockStyles.find(
+						( { name } ) => name === variationName
+					);
+
+					if ( ! registeredBlockStyle ) {
+						unregisteredBlockStyles.push( [
+							blockName,
+							{
+								name: variationName,
+								label: variationName,
+							},
+						] );
+					}
+
+					const path = [
+						'styles',
+						'blocks',
+						blockName,
+						'variations',
+						variationName,
+					];
+					setNestedValue( variationsConfigToMerge, path, variation );
+				} );
+			}
+		);
+
+		return [ variationsConfigToMerge, unregisteredBlockStyles ];
+	}, [ sharedVariations, getBlockStyles ] );
+
+	// Automatically register missing block styles from variations.
+	useEffect(
+		() =>
+			unregisteredStyles?.forEach( ( unregisteredStyle ) =>
+				registerBlockStyle( ...unregisteredStyle )
+			),
+		[ unregisteredStyles ]
+	);
+
+	// Merge shared block style variation definitions into overall user config.
+	const updatedConfig = useMemo( () => {
+		if ( ! userConfigToMerge ) {
+			return userConfig;
+		}
+
+		return deepmerge( userConfigToMerge, userConfig );
+	}, [ userConfigToMerge, userConfig ] );
+
+	return updatedConfig;
+}
+
 function useGlobalStylesUserConfig() {
-	const { globalStylesId, isReady, settings, styles } = useSelect(
+	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
@@ -65,6 +146,7 @@ function useGlobalStylesUserConfig() {
 				isReady: hasResolved,
 				settings: record?.settings,
 				styles: record?.styles,
+				_links: record?._links,
 			};
 		},
 		[]
@@ -76,8 +158,9 @@ function useGlobalStylesUserConfig() {
 		return {
 			settings: settings ?? {},
 			styles: styles ?? {},
+			_links: _links ?? {},
 		};
-	}, [ settings, styles ] );
+	}, [ settings, styles, _links ] );
 
 	const setConfig = useCallback(
 		( callback, options = {} ) => {
@@ -86,11 +169,14 @@ function useGlobalStylesUserConfig() {
 				'globalStyles',
 				globalStylesId
 			);
+
 			const currentConfig = {
 				styles: record?.styles ?? {},
 				settings: record?.settings ?? {},
+				_links: record?._links ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
+
 			editEntityRecord(
 				'root',
 				'globalStyles',
@@ -98,6 +184,7 @@ function useGlobalStylesUserConfig() {
 				{
 					styles: cleanEmptyObject( updatedConfig.styles ) || {},
 					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+					_links: cleanEmptyObject( updatedConfig._links ) || {},
 				},
 				options
 			);
@@ -122,23 +209,28 @@ export function useGlobalStylesContext() {
 	const [ isUserConfigReady, userConfig, setUserConfig ] =
 		useGlobalStylesUserConfig();
 	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
+	const userConfigWithVariations =
+		useResolvedBlockStyleVariationsConfig( userConfig );
+
 	const mergedConfig = useMemo( () => {
-		if ( ! baseConfig || ! userConfig ) {
+		if ( ! baseConfig || ! userConfigWithVariations ) {
 			return {};
 		}
-		return mergeBaseAndUserConfigs( baseConfig, userConfig );
-	}, [ userConfig, baseConfig ] );
+
+		return mergeBaseAndUserConfigs( baseConfig, userConfigWithVariations );
+	}, [ userConfigWithVariations, baseConfig ] );
+
 	const context = useMemo( () => {
 		return {
 			isReady: isUserConfigReady && isBaseConfigReady,
-			user: userConfig,
+			user: userConfigWithVariations,
 			base: baseConfig,
 			merged: mergedConfig,
 			setUserConfig,
 		};
 	}, [
 		mergedConfig,
-		userConfig,
+		userConfigWithVariations,
 		baseConfig,
 		setUserConfig,
 		isUserConfigReady,

package/src/components/header/back-button.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseSlotFills as useSlotFills,
+	createSlotFill,
+} from '@wordpress/components';
+
+// Keeping an old name for backward compatibility.
+const slotName = '__experimentalMainDashboardButton';
+
+const { Fill, Slot } = createSlotFill( slotName );
+
+const BackButton = Fill;
+const BackButtonSlot = ( { children } ) => {
+	const fills = useSlotFills( slotName );
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return children;
+	}
+
+	return <Slot bubblesVirtually />;
+};
+BackButton.Slot = BackButtonSlot;
+
+export default BackButton;

package/src/components/header/index.js

@@ -17,6 +17,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
+import BackButton from './back-button';
 import CollapsableBlockToolbar from '../collapsible-block-toolbar';
 import DocumentBar from '../document-bar';
 import DocumentTools from '../document-tools';
@@ -29,10 +30,20 @@ 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 } },
+const toolbarVariations = {
+	distractionFreeDisabled: { y: '-50px' },
+	distractionFreeHover: { y: 0 },
+	distractionFreeHidden: { y: '-50px' },
+	visible: { y: 0 },
+	hidden: { y: 0 },
+};
+
+const backButtonVariations = {
+	distractionFreeDisabled: { x: '-100%' },
+	distractionFreeHover: { x: 0 },
+	distractionFreeHidden: { x: '-100%' },
+	visible: { x: 0 },
+	hidden: { x: 0 },
 };
 
 function Header( {
@@ -41,7 +52,6 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
-	children,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -81,11 +91,16 @@ function Header( {
 	// 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 } }
+				variants={ backButtonVariations }
+				transition={ { type: 'tween' } }
+			>
+				<BackButton.Slot />
+			</motion.div>
+			<motion.div
+				variants={ toolbarVariations }
 				className="editor-header__toolbar"
+				transition={ { type: 'tween' } }
 			>
 				<DocumentTools
 					disableBlockTools={ forceDisableBlockTools || isTextEditor }
@@ -112,8 +127,8 @@ function Header( {
 				</div>
 			</motion.div>
 			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
+				variants={ toolbarVariations }
+				transition={ { type: 'tween' } }
 				className="editor-header__settings"
 			>
 				{ ! customSaveButton && ! isPublishSidebarOpened && (

package/src/components/header/style.scss

@@ -43,6 +43,11 @@
 	flex-grow: 1;
 	display: flex;
 	justify-content: center;
+	// Flex items will, by default, refuse to shrink below a minimum
+	// intrinsic width. In order to shrink this flexbox item, and
+	// subsequently truncate child text, we set an explicit min-width.
+	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+	min-width: 0;
 
 	&.is-collapsed {
 		display: none;

package/src/components/inserter-sidebar/index.js

@@ -3,13 +3,17 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	__experimentalLibrary as Library,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { useViewportMatch } from '@wordpress/compose';
+import {
+	useViewportMatch,
+	__experimentalUseDialog as useDialog,
+} from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { ESCAPE } from '@wordpress/keycodes';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -17,22 +21,25 @@ import { ESCAPE } from '@wordpress/keycodes';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-export default function InserterSidebar( {
-	closeGeneralSidebar,
-	isRightSidebarOpen,
-} ) {
+const { PrivateInserterLibrary } = unlock( blockEditorPrivateApis );
+
+export default function InserterSidebar() {
 	const {
 		blockSectionRootClientId,
 		inserterSidebarToggleRef,
 		insertionPoint,
 		showMostUsedBlocks,
+		sidebarIsOpened,
 	} = useSelect( ( select ) => {
-		const { getInserterSidebarToggleRef, getInsertionPoint } = unlock(
-			select( editorStore )
-		);
+		const {
+			getInserterSidebarToggleRef,
+			getInsertionPoint,
+			isPublishSidebarOpened,
+		} = unlock( select( editorStore ) );
 		const { getBlockRootClientId, __unstableGetEditorMode, getSettings } =
 			select( blockEditorStore );
 		const { get } = select( preferencesStore );
+		const { getActiveComplementaryArea } = select( interfaceStore );
 		const getBlockSectionRootClientId = () => {
 			if ( __unstableGetEditorMode() === 'zoom-out' ) {
 				const { sectionRootClientId } = unlock( getSettings() );
@@ -47,11 +54,19 @@ export default function InserterSidebar( {
 			insertionPoint: getInsertionPoint(),
 			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
 			blockSectionRootClientId: getBlockSectionRootClientId(),
+			sidebarIsOpened: !! (
+				getActiveComplementaryArea( 'core' ) || isPublishSidebarOpened()
+			),
 		};
 	}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );
+	const { disableComplementaryArea } = useDispatch( interfaceStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
+		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: true,
+	} );
 	const libraryRef = useRef();
 
 	// When closing the inserter, focus should return to the toggle button.
@@ -70,30 +85,48 @@ export default function InserterSidebar( {
 		[ closeInserterSidebar ]
 	);
 
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar">
-			<div className="editor-inserter-sidebar__content">
-				<Library
-					showMostUsedBlocks={ showMostUsedBlocks }
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobileViewport }
-					rootClientId={
-						blockSectionRootClientId ?? insertionPoint.rootClientId
-					}
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalInitialTab={ insertionPoint.tab }
-					__experimentalInitialCategory={ insertionPoint.category }
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					__experimentalOnPatternCategorySelection={
-						isRightSidebarOpen ? closeGeneralSidebar : undefined
-					}
-					ref={ libraryRef }
-					onClose={ closeInserterSidebar }
-				/>
+	const inserterContents = (
+		<div className="editor-inserter-sidebar__content">
+			<PrivateInserterLibrary
+				showMostUsedBlocks={ showMostUsedBlocks }
+				showInserterHelpPanel
+				shouldFocusBlock={ isMobileViewport }
+				rootClientId={
+					blockSectionRootClientId ?? insertionPoint.rootClientId
+				}
+				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
+				__experimentalInitialTab={ insertionPoint.tab }
+				__experimentalInitialCategory={ insertionPoint.category }
+				__experimentalFilterValue={ insertionPoint.filterValue }
+				onPatternCategorySelection={
+					sidebarIsOpened
+						? () => disableComplementaryArea( 'core' )
+						: undefined
+				}
+				ref={ libraryRef }
+				onClose={ closeInserterSidebar }
+			/>
+		</div>
+	);
+
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return (
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div
+				onKeyDown={ closeOnEscape }
+				className="editor-inserter-sidebar"
+			>
+				{ inserterContents }
 			</div>
+		);
+	}
+	return (
+		<div
+			ref={ inserterDialogRef }
+			{ ...inserterDialogProps }
+			className="editor-inserter-sidebar"
+		>
+			{ inserterContents }
 		</div>
 	);
 }

package/src/components/inserter-sidebar/style.scss

@@ -6,19 +6,6 @@
 	flex-direction: column;
 }
 
-.block-editor-inserter-sidebar__header {
-	border-bottom: $border-width solid $gray-300;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: space-between;
-
-	.block-editor-inserter-sidebar__close-button {
-		/* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
-		order: 1;
-		align-self: center;
-	}
-}
-
 .editor-inserter-sidebar__content {
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});

package/src/components/local-autosave-monitor/index.js

@@ -192,4 +192,16 @@ function LocalAutosaveMonitor() {
 	);
 }
 
+/**
+ * Monitors local autosaves of a post in the editor.
+ * It uses several hooks and functions to manage autosave behavior:
+ * - `useAutosaveNotice` hook: Manages the creation of a notice prompting the user to restore a local autosave, if one exists.
+ * - `useAutosavePurge` hook: Ejects a local autosave after a successful save occurs.
+ * - `hasSessionStorageSupport` function: Checks if the current environment supports browser sessionStorage.
+ * - `LocalAutosaveMonitor` component: Uses the `AutosaveMonitor` component to perform autosaves at a specified interval.
+ *
+ * The module also checks for sessionStorage support and conditionally exports the `LocalAutosaveMonitor` component based on that.
+ *
+ * @module LocalAutosaveMonitor
+ */
 export default ifCondition( hasSessionStorageSupport )( LocalAutosaveMonitor );

package/src/components/page-attributes/order.js

@@ -1,18 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
+	Button,
+	Dropdown,
 	Flex,
 	FlexBlock,
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import PostPanelRow from '../post-panel-row';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
@@ -41,9 +45,10 @@ function PageAttributesOrder() {
 				<NumberControl
 					__next40pxDefaultSize
 					label={ __( 'Order' ) }
+					help={ __( 'Set the page order.' ) }
 					value={ value }
 					onChange={ setUpdatedOrder }
-					labelPosition="side"
+					hideLabelFromVision
 					onBlur={ () => {
 						setOrderInput( null );
 					} }
@@ -66,3 +71,74 @@ export default function PageAttributesOrderWithChecks() {
 		</PostTypeSupportCheck>
 	);
 }
+
+function PostOrderToggle( { isOpen, onClick } ) {
+	const order = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'menu_order' ) ?? 0,
+		[]
+	);
+	return (
+		<Button
+			size="compact"
+			className="editor-post-order__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post parent.
+			aria-label={ sprintf( __( 'Change order: %s' ), order ) }
+			onClick={ onClick }
+		>
+			{ order }
+		</Button>
+	);
+}
+
+export function OrderRow() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostPanelRow label={ __( 'Order' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="editor-post-order__panel-dropdown"
+				contentClassName="editor-post-order__panel-dialog"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostOrderToggle isOpen={ isOpen } onClick={ onToggle } />
+				) }
+				renderContent={ ( { onClose } ) => (
+					<div className="editor-post-order">
+						<InspectorPopoverHeader
+							title={ __( 'Order' ) }
+							onClose={ onClose }
+						/>
+						<div>
+							{ __(
+								'This attribute determines the order of pages in the Pages List block.'
+							) }
+							<p>
+								{ __(
+									'Pages with the same order value will sorted alphabetically. Negative order values are also supported.'
+								) }
+							</p>
+						</div>
+						<PageAttributesOrder />
+					</div>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}

package/src/components/page-attributes/panel.js

@@ -1,54 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 import PageAttributesCheck from './check';
-import PageAttributesOrder from './order';
-import PageAttributesParent from './parent';
+import { OrderRow } from './order';
+import { ParentRow } from './parent';
 
 const PANEL_NAME = 'page-attributes';
 
 function AttributesPanel() {
-	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			isEditorPanelEnabled,
-			isEditorPanelOpened,
-		} = select( editorStore );
+	const { isEnabled, postType } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isEditorPanelEnabled } =
+			select( editorStore );
 		const { getPostType } = select( coreStore );
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
 			postType: getPostType( getEditedPostAttribute( 'type' ) ),
 		};
 	}, [] );
 
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
-
 	if ( ! isEnabled || ! postType ) {
 		return null;
 	}
 
 	return (
-		<PanelBody
-			title={ postType?.labels?.attributes ?? __( 'Page attributes' ) }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
-		>
-			<PageAttributesParent />
-			<PanelRow>
-				<PageAttributesOrder />
-			</PanelRow>
-		</PanelBody>
+		<>
+			<ParentRow />
+			<OrderRow />
+		</>
 	);
 }