@wordpress/editor 13.35.0 → 14.0.1

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

@@ -0,0 +1,230 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
+import { useSelect } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	store as blockEditorStore,
+	BlockBreadcrumb,
+	BlockToolbar,
+} from '@wordpress/block-editor';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useViewportMatch } from '@wordpress/compose';
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import EditorNotices from '../editor-notices';
+import Header from '../header';
+import InserterSidebar from '../inserter-sidebar';
+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';
+
+const interfaceLabels = {
+	/* translators: accessibility text for the editor top bar landmark region. */
+	header: __( 'Editor top bar' ),
+	/* translators: accessibility text for the editor content landmark region. */
+	body: __( 'Editor content' ),
+	/* translators: accessibility text for the editor settings landmark region. */
+	sidebar: __( 'Editor settings' ),
+	/* translators: accessibility text for the editor publish landmark region. */
+	actions: __( 'Editor publish' ),
+	/* translators: accessibility text for the editor footer landmark region. */
+	footer: __( 'Editor footer' ),
+};
+
+export default function EditorInterface( {
+	className,
+	enableRegionNavigation,
+	styles,
+	children,
+	forceIsDirty,
+	contentRef,
+	disableIframe,
+	autoFocus,
+	customSaveButton,
+	forceDisableBlockTools,
+	title,
+	iframeProps,
+} ) {
+	const {
+		mode,
+		isRichEditingEnabled,
+		isInserterOpened,
+		isListViewOpened,
+		isDistractionFree,
+		isPreviewMode,
+		previousShortcut,
+		nextShortcut,
+		showBlockBreadcrumbs,
+		documentLabel,
+		blockEditorMode,
+	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const editorSettings = getEditorSettings();
+		const postTypeLabel = getPostTypeLabel();
+
+		return {
+			mode: select( editorStore ).getEditorMode(),
+			isRichEditingEnabled: editorSettings.richEditingEnabled,
+			isInserterOpened: select( editorStore ).isInserterOpened(),
+			isListViewOpened: select( editorStore ).isListViewOpened(),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			isPreviewMode: editorSettings.__unstableIsPreviewMode,
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
+			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			// translators: Default label for the Document in the Block Breadcrumb.
+			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+			blockEditorMode:
+				select( blockEditorStore ).__unstableGetEditorMode(),
+		};
+	}, [] );
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const secondarySidebarLabel = isListViewOpened
+		? __( 'Document Overview' )
+		: __( 'Block Library' );
+
+	// Local state for save panel.
+	// Note 'truthy' callback implies an open panel.
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
+	const closeEntitiesSavedStates = useCallback(
+		( arg ) => {
+			if ( typeof entitiesSavedStatesCallback === 'function' ) {
+				entitiesSavedStatesCallback( arg );
+			}
+			setEntitiesSavedStatesCallback( false );
+		},
+		[ entitiesSavedStatesCallback ]
+	);
+
+	return (
+		<InterfaceSkeleton
+			enableRegionNavigation={ enableRegionNavigation }
+			isDistractionFree={ isDistractionFree && isWideViewport }
+			className={ clsx( 'editor-editor-interface', className, {
+				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+				'is-distraction-free':
+					isDistractionFree && isWideViewport && ! isPreviewMode,
+			} ) }
+			labels={ {
+				...interfaceLabels,
+				secondarySidebar: secondarySidebarLabel,
+			} }
+			header={
+				! isPreviewMode && (
+					<Header
+						forceIsDirty={ forceIsDirty }
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+						customSaveButton={ customSaveButton }
+						forceDisableBlockTools={ forceDisableBlockTools }
+						title={ title }
+					/>
+				)
+			}
+			editorNotices={ <EditorNotices /> }
+			secondarySidebar={
+				! isPreviewMode &&
+				mode === 'visual' &&
+				( ( isInserterOpened && <InserterSidebar /> ) ||
+					( isListViewOpened && <ListViewSidebar /> ) )
+			}
+			sidebar={
+				! isPreviewMode &&
+				! isDistractionFree && <ComplementaryArea.Slot scope="core" />
+			}
+			content={
+				<>
+					{ ! isDistractionFree && ! isPreviewMode && (
+						<EditorNotices />
+					) }
+
+					<EditorContentSlotFill.Slot>
+						{ ( [ editorCanvasView ] ) =>
+							editorCanvasView ? (
+								editorCanvasView
+							) : (
+								<>
+									{ ! isPreviewMode &&
+										( mode === 'text' ||
+											! isRichEditingEnabled ) && (
+											<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 ||
+										( isRichEditingEnabled &&
+											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>
+				</>
+			}
+			footer={
+				! isPreviewMode &&
+				! isDistractionFree &&
+				isLargeViewport &&
+				showBlockBreadcrumbs &&
+				isRichEditingEnabled &&
+				blockEditorMode !== 'zoom-out' &&
+				mode === 'visual' && (
+					<BlockBreadcrumb rootLabelText={ documentLabel } />
+				)
+			}
+			actions={
+				<SavePublishPanels
+					closeEntitiesSavedStates={ closeEntitiesSavedStates }
+					isEntitiesSavedStatesOpen={ entitiesSavedStatesCallback }
+					setEntitiesSavedStatesCallback={
+						setEntitiesSavedStatesCallback
+					}
+					forceIsDirtyPublishPanel={ forceIsDirty }
+				/>
+			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
+		/>
+	);
+}

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

@@ -0,0 +1,3 @@
+.editor-editor-interface .entities-saved-states__panel-header {
+	height: $header-height + $border-width;
+}

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

@@ -10,6 +10,16 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import TemplateValidationNotice from '../template-validation-notice';
 
+/**
+ * This component renders the notices displayed in the editor. It displays pinned notices first, followed by dismissible
+ *
+ * @example
+ * ```jsx
+ * <EditorNotices />
+ * ```
+ *
+ * @return {JSX.Element} The rendered EditorNotices component.
+ */
 export function EditorNotices() {
 	const { notices } = useSelect(
 		( select ) => ( {

package/src/components/entities-saved-states/entity-record-item.js

@@ -1,25 +1,32 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, PanelRow } from '@wordpress/components';
+import { Icon, CheckboxControl, Flex, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { connection } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function EntityRecordItem( { record, checked, onChange } ) {
 	const { name, kind, title, key } = record;
 
 	// Handle templates that might use default descriptive titles.
-	const entityRecordTitle = useSelect(
+	const { entityRecordTitle, hasPostMetaChanges } = useSelect(
 		( select ) => {
 			if ( 'postType' !== kind || 'wp_template' !== name ) {
-				return title;
+				return {
+					entityRecordTitle: title,
+					hasPostMetaChanges: unlock(
+						select( editorStore )
+					).hasPostMetaChanges( name, key ),
+				};
 			}
 
 			const template = select( coreStore ).getEditedEntityRecord(
@@ -27,23 +34,45 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 				name,
 				key
 			);
-			return select( editorStore ).__experimentalGetTemplateInfo(
-				template
-			).title;
+			return {
+				entityRecordTitle:
+					select( editorStore ).__experimentalGetTemplateInfo(
+						template
+					).title,
+				hasPostMetaChanges: unlock(
+					select( editorStore )
+				).hasPostMetaChanges( name, key ),
+			};
 		},
 		[ name, kind, title, key ]
 	);
 
 	return (
-		<PanelRow>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={
-					decodeEntities( entityRecordTitle ) || __( 'Untitled' )
-				}
-				checked={ checked }
-				onChange={ onChange }
-			/>
-		</PanelRow>
+		<>
+			<PanelRow>
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={
+						decodeEntities( entityRecordTitle ) || __( 'Untitled' )
+					}
+					checked={ checked }
+					onChange={ onChange }
+				/>
+			</PanelRow>
+			{ hasPostMetaChanges && (
+				<PanelRow>
+					<Flex className="entities-saved-states__post-meta">
+						<Icon
+							className="entities-saved-states__connections-icon"
+							icon={ connection }
+							size={ 24 }
+						/>
+						<span className="entities-saved-states__bindings-text">
+							{ __( 'Post Meta.' ) }
+						</span>
+					</Flex>
+				</PanelRow>
+			) }
+		</>
 	);
 }

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

@@ -31,9 +31,15 @@
 	}
 }
 
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
-	.entities-saved-states__panel-header {
-		height: $header-height + $border-width;
-	}
+.entities-saved-states__post-meta {
+	margin-left: $grid-unit-30;
+	align-items: center;
+}
+
+.entities-saved-states__connections-icon {
+	flex-grow: 0;
+}
+
+.entities-saved-states__bindings-text {
+	flex-grow: 1;
 }

package/src/components/error-boundary/index.js

@@ -75,4 +75,14 @@ class ErrorBoundary extends Component {
 	}
 }
 
+/**
+ * ErrorBoundary is used to catch JavaScript errors anywhere in a child component tree, log those errors, and display a fallback UI.
+ *
+ * It uses the lifecycle methods getDerivedStateFromError and componentDidCatch to catch errors in a child component tree.
+ *
+ * getDerivedStateFromError is used to render a fallback UI after an error has been thrown, and componentDidCatch is used to log error information.
+ *
+ * @class ErrorBoundary
+ * @augments Component
+ */
 export default ErrorBoundary;

package/src/components/error-boundary/index.native.js

@@ -69,7 +69,7 @@ function CopyButton( {
 			activeOpacity={ 0.5 }
 			accessibilityLabel={ accessibilityLabel }
 			style={ [ containerStyle, secondary && containerSecondaryStyle ] }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={ accessibilityHint }
 			onPress={ () => {
 				Clipboard.setString(

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,32 @@
+/**
+ * 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
+			fillProps={ { length: ! fills ? 0 : fills.length } }
+		/>
+	);
+};
+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';
@@ -24,15 +25,24 @@ 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 } },
+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 +51,6 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
-	children,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -81,11 +90,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 }
@@ -102,18 +116,12 @@ function Header( {
 							! isBlockToolsCollapsed && hasTopToolbar,
 					} ) }
 				>
-					{ ! title ? (
-						<PostTypeSupportCheck supportKeys="title">
-							<DocumentBar />
-						</PostTypeSupportCheck>
-					) : (
-						title
-					) }
+					{ ! title ? <DocumentBar /> : title }
 				</div>
 			</motion.div>
 			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
+				variants={ toolbarVariations }
+				transition={ { type: 'tween' } }
 				className="editor-header__settings"
 			>
 				{ ! customSaveButton && ! isPublishSidebarOpened && (