@wordpress/editor 13.34.0 → 14.0.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import {
 } 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';
 
@@ -32,14 +32,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-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();
+function DocumentTools( { className, disableBlockTools = false } ) {
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
 	const {
@@ -47,16 +40,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(),
@@ -64,10 +62,13 @@ 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',
 		};
 	}, [] );
 
@@ -82,17 +83,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(
@@ -107,7 +101,7 @@ 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
@@ -118,7 +112,7 @@ function DocumentTools( {
 			<div className="editor-document-tools__left">
 				{ ! isDistractionFree && (
 					<ToolbarItem
-						ref={ inserterButton }
+						ref={ inserterSidebarToggleRef }
 						as={ Button }
 						className="editor-document-tools__inserter-toggle"
 						variant="primary"
@@ -165,7 +159,7 @@ function DocumentTools( {
 								disabled={ disableBlockTools }
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ listViewLabel }
+								label={ __( 'Document Overview' ) }
 								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
 								showTooltip={ ! showIconLabels }
@@ -179,7 +173,6 @@ function DocumentTools( {
 						) }
 					</>
 				) }
-				{ children }
 			</div>
 		</NavigableToolbar>
 	);

package/src/components/editor-help/help-get-support-button.native.js

@@ -28,7 +28,7 @@ const HelpGetSupportButton = ( { onPress, title } ) => {
 		<Pressable
 			style={ buttonStyle }
 			onPress={ onPress }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 		>
 			<Text style={ textStyle }>{ title }</Text>
 		</Pressable>

package/src/components/editor-interface/content-slot-fill.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const SLOT_FILL_NAME = 'EditCanvasContainerSlot';
+const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME );
+
+export default EditorContentSlotFill;

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( className, {
+				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+			} ) }
+			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 ] ) =>
+							! isPreviewMode && 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' && (
+					<div className="edit-post-layout__footer">
+						<BlockBreadcrumb rootLabelText={ documentLabel } />
+					</div>
+				)
+			}
+			actions={
+				<SavePublishPanels
+					closeEntitiesSavedStates={ closeEntitiesSavedStates }
+					isEntitiesSavedStatesOpen={ entitiesSavedStatesCallback }
+					setEntitiesSavedStatesCallback={
+						setEntitiesSavedStatesCallback
+					}
+					forceIsDirtyPublishPanel={ forceIsDirty }
+				/>
+			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
+		/>
+	);
+}

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

@@ -37,3 +37,16 @@
 		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-keyboard-shortcuts/register-shortcuts.js

@@ -72,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',