@wordpress/editor 13.33.0 → 13.34.0

package/src/components/post-status/index.js

@@ -21,6 +21,7 @@ import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
+import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,8 +32,8 @@ import {
 	PATTERN_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
-import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 function PostStatusLabel( { canEdit } ) {
 	const status = useSelect(
@@ -183,14 +184,6 @@ export default function PostStatus() {
 		return null;
 	}
 
-	if ( ! canEdit ) {
-		return (
-			<div className="editor-post-status">
-				<PostStatusLabel />
-			</div>
-		);
-	}
-
 	const updatePost = ( {
 		status: newStatus = status,
 		password: newPassword = password,
@@ -232,79 +225,94 @@ export default function PostStatus() {
 	};
 
 	return (
-		<Dropdown
-			className="editor-post-status"
-			contentClassName="editor-change-status__content"
-			popoverProps={ popoverProps }
-			focusOnMount
-			ref={ setPopoverAnchor }
-			renderToggle={ ( { onToggle } ) => (
-				<Button
-					className="editor-post-status-trigger"
-					onClick={ onToggle }
-				>
-					<PostStatusLabel canEdit={ canEdit } />
-				</Button>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<>
-					<InspectorPopoverHeader
-						title={ __( 'Status & visibility' ) }
-						onClose={ onClose }
-					/>
-					<form>
-						<VStack spacing={ 4 }>
-							<RadioControl
-								className="editor-change-status__options"
-								hideLabelFromVision
-								label={ __( 'Status' ) }
-								options={ STATUS_OPTIONS }
-								onChange={ handleStatus }
-								selected={
-									status === 'auto-draft' ? 'draft' : status
-								}
+		<PostPanelRow label={ __( 'Status' ) } ref={ setPopoverAnchor }>
+			{ canEdit ? (
+				<Dropdown
+					className="editor-post-status"
+					contentClassName="editor-change-status__content"
+					popoverProps={ popoverProps }
+					focusOnMount
+					renderToggle={ ( { onToggle } ) => (
+						<Button
+							className="editor-post-status-trigger"
+							onClick={ onToggle }
+						>
+							<PostStatusLabel canEdit={ canEdit } />
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<>
+							<InspectorPopoverHeader
+								title={ __( 'Status & visibility' ) }
+								onClose={ onClose }
 							/>
-							{ status !== 'private' && (
-								<VStack
-									as="fieldset"
-									spacing={ 4 }
-									className="editor-change-status__password-fieldset"
-								>
-									<CheckboxControl
-										__nextHasNoMarginBottom
-										label={ __( 'Password protected' ) }
-										help={ __(
-											'Only visible to those who know the password'
-										) }
-										checked={ showPassword }
-										onChange={ handleTogglePassword }
+							<form>
+								<VStack spacing={ 4 }>
+									<RadioControl
+										className="editor-change-status__options"
+										hideLabelFromVision
+										label={ __( 'Status' ) }
+										options={ STATUS_OPTIONS }
+										onChange={ handleStatus }
+										selected={
+											status === 'auto-draft'
+												? 'draft'
+												: status
+										}
 									/>
-									{ showPassword && (
-										<div className="editor-change-status__password-input">
-											<TextControl
-												label={ __( 'Password' ) }
-												onChange={ ( value ) =>
-													updatePost( {
-														password: value,
-													} )
-												}
-												value={ password }
-												placeholder={ __(
-													'Use a secure password'
-												) }
-												type="text"
-												id={ passwordInputId }
-												__next40pxDefaultSize
+									{ status !== 'private' && (
+										<VStack
+											as="fieldset"
+											spacing={ 4 }
+											className="editor-change-status__password-fieldset"
+										>
+											<CheckboxControl
 												__nextHasNoMarginBottom
+												label={ __(
+													'Password protected'
+												) }
+												help={ __(
+													'Only visible to those who know the password'
+												) }
+												checked={ showPassword }
+												onChange={
+													handleTogglePassword
+												}
 											/>
-										</div>
+											{ showPassword && (
+												<div className="editor-change-status__password-input">
+													<TextControl
+														label={ __(
+															'Password'
+														) }
+														onChange={ ( value ) =>
+															updatePost( {
+																password: value,
+															} )
+														}
+														value={ password }
+														placeholder={ __(
+															'Use a secure password'
+														) }
+														type="text"
+														id={ passwordInputId }
+														__next40pxDefaultSize
+														__nextHasNoMarginBottom
+													/>
+												</div>
+											) }
+										</VStack>
 									) }
 								</VStack>
-							) }
-						</VStack>
-					</form>
-				</>
+							</form>
+						</>
+					) }
+				/>
+			) : (
+				<div className="editor-post-status">
+					<PostStatusLabel />
+				</div>
 			) }
-		/>
+		</PostPanelRow>
 	);
 }

package/src/components/post-status/style.scss

@@ -1,6 +1,5 @@
 .editor-post-status {
 	max-width: 100%;
-	margin-bottom: $grid-unit-20;
 
 	.editor-post-status-trigger {
 		padding: 1px;

package/src/components/post-template/block-theme.js

@@ -76,7 +76,7 @@ export default function BlockThemeControl( { id } ) {
 			popoverProps={ POPOVER_PROPS }
 			focusOnMount
 			toggleProps={ {
-				__next40pxDefaultSize: true,
+				size: 'compact',
 				variant: 'tertiary',
 			} }
 			label={ __( 'Template options' ) }
@@ -128,7 +128,7 @@ export default function BlockThemeControl( { id } ) {
 								);
 							} }
 						>
-							{ __( 'Template preview' ) }
+							{ __( 'Show template' ) }
 						</MenuItem>
 					</MenuGroup>
 				</>

package/src/components/post-template/classic-theme.js

@@ -45,7 +45,6 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 	return (
 		<Button
 			__next40pxDefaultSize
-			className="edit-post-post-template__toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
 			aria-label={ __( 'Template options' ) }

package/src/components/post-template/swap-template-button.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { MenuItem, Modal } from '@wordpress/components';
@@ -18,9 +18,6 @@ import { useAvailableTemplates, useEditedPostContext } from './hooks';
 
 export default function SwapTemplateButton( { onClick } ) {
 	const [ showModal, setShowModal ] = useState( false );
-	const onClose = useCallback( () => {
-		setShowModal( false );
-	}, [] );
 	const { postType, postId } = useEditedPostContext();
 	const availableTemplates = useAvailableTemplates( postType );
 	const { editEntityRecord } = useDispatch( coreStore );
@@ -35,7 +32,7 @@ export default function SwapTemplateButton( { onClick } ) {
 			{ template: template.name },
 			{ undoIgnore: true }
 		);
-		onClose(); // Close the template suggestions modal first.
+		setShowModal( false ); // Close the template suggestions modal first.
 		onClick();
 	};
 	return (
@@ -46,7 +43,7 @@ export default function SwapTemplateButton( { onClick } ) {
 			{ showModal && (
 				<Modal
 					title={ __( 'Choose a template' ) }
-					onRequestClose={ onClose }
+					onRequestClose={ () => setShowModal( false ) }
 					overlayClassName="editor-post-template__swap-template-modal"
 					isFullScreen
 				>

package/src/components/post-text-editor/style.scss

@@ -1,4 +1,4 @@
-.edit-post-text-editor__body textarea.editor-post-text-editor {
+textarea.editor-post-text-editor {
 	border: $border-width solid $gray-600;
 	border-radius: 0;
 	display: block;

package/src/components/post-title/style.scss

@@ -1,5 +1,5 @@
 // Raw Text Variant
-.edit-post-text-editor__body .editor-post-title.is-raw-text {
+.editor-post-title.is-raw-text {
 	margin-bottom: $grid-unit-30;
 	margin-top: 2px; // space for focus outline to appear.
 	max-width: none;

package/src/components/post-url/index.js

@@ -89,6 +89,7 @@ export default function PostURL( { onClose } ) {
 								<Button
 									icon={ copySmall }
 									ref={ copyButtonRef }
+									label={ __( 'Copy' ) }
 								/>
 							}
 							label={ __( 'Link' ) }

package/src/components/post-url/panel.js

@@ -60,7 +60,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 	const decodedSlug = safeDecodeURIComponent( slug );
 	return (
 		<Button
-			__next40pxDefaultSize
+			size="compact"
 			className="editor-post-url__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }

package/src/components/preferences-modal/enable-publish-sidebar.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
+
+export default compose(
+	withSelect( ( select ) => ( {
+		isChecked: select( editorStore ).isPublishSidebarEnabled(),
+	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { enablePublishSidebar, disablePublishSidebar } =
+			dispatch( editorStore );
+		return {
+			onChange: ( isEnabled ) =>
+				isEnabled ? enablePublishSidebar() : disablePublishSidebar(),
+		};
+	} )
+)( PreferenceBaseOption );

package/src/components/preferences-modal/index.js

@@ -17,6 +17,7 @@ import { store as interfaceStore } from '@wordpress/interface';
  */
 import EnablePanelOption from './enable-panel';
 import EnablePluginDocumentSettingPanelOption from './enable-plugin-document-setting-panel';
+import EnablePublishSidebarOption from './enable-publish-sidebar';
 import BlockManager from '../block-manager';
 import PostTaxonomies from '../post-taxonomies';
 import PostFeaturedImageCheck from '../post-featured-image/check';
@@ -136,6 +137,18 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 								/>
 							</PageAttributesCheck>
 						</PreferencesModalSection>
+						{ isLargeViewport && (
+							<PreferencesModalSection
+								title={ __( 'Publishing' ) }
+							>
+								<EnablePublishSidebarOption
+									help={ __(
+										'Review settings, such as visibility and tags.'
+									) }
+									label={ __( 'Enable pre-publish checks' ) }
+								/>
+							</PreferencesModalSection>
+						) }
 						{ extraSections?.general }
 					</>
 				),
@@ -258,6 +271,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 			setIsInserterOpened,
 			setIsListViewOpened,
 			setPreference,
+			isLargeViewport,
 		]
 	);
 

package/src/components/preview-dropdown/index.js

@@ -38,7 +38,9 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
 	const isMobile = useViewportMatch( 'medium', '<' );
-	if ( isMobile ) return null;
+	if ( isMobile ) {
+		return null;
+	}
 
 	const popoverProps = {
 		placement: 'bottom-end',

package/src/components/provider/disable-non-page-content-blocks.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
@@ -18,6 +18,8 @@ const CONTENT_ONLY_BLOCKS = applyFilters( 'editor.postContentBlockTypes', [
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
+	// Note that there are two separate subscription because the result for each
+	// returns a new array.
 	const contentOnlyIds = useSelect( ( select ) => {
 		const { getBlocksByName, getBlockParents, getBlockName } =
 			select( blockEditorStore );
@@ -33,7 +35,6 @@ export default function DisableNonPageContentBlocks() {
 			} )
 		);
 	}, [] );
-
 	const disabledIds = useSelect( ( select ) => {
 		const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
 		return getBlocksByName( [ 'core/template-part' ] ).flatMap(
@@ -41,33 +42,34 @@ export default function DisableNonPageContentBlocks() {
 		);
 	}, [] );
 
-	const { setBlockEditingMode, unsetBlockEditingMode } =
-		useDispatch( blockEditorStore );
+	const registry = useRegistry();
 
 	useEffect( () => {
-		setBlockEditingMode( '', 'disabled' );
-		for ( const clientId of contentOnlyIds ) {
-			setBlockEditingMode( clientId, 'contentOnly' );
-		}
-		for ( const clientId of disabledIds ) {
-			setBlockEditingMode( clientId, 'disabled' );
-		}
+		const { setBlockEditingMode, unsetBlockEditingMode } =
+			registry.dispatch( blockEditorStore );
 
-		return () => {
-			unsetBlockEditingMode( '' );
+		registry.batch( () => {
+			setBlockEditingMode( '', 'disabled' );
 			for ( const clientId of contentOnlyIds ) {
-				unsetBlockEditingMode( clientId );
+				setBlockEditingMode( clientId, 'contentOnly' );
 			}
 			for ( const clientId of disabledIds ) {
-				unsetBlockEditingMode( clientId );
+				setBlockEditingMode( clientId, 'disabled' );
 			}
+		} );
+
+		return () => {
+			registry.batch( () => {
+				unsetBlockEditingMode( '' );
+				for ( const clientId of contentOnlyIds ) {
+					unsetBlockEditingMode( clientId );
+				}
+				for ( const clientId of disabledIds ) {
+					unsetBlockEditingMode( clientId );
+				}
+			} );
 		};
-	}, [
-		contentOnlyIds,
-		disabledIds,
-		setBlockEditingMode,
-		unsetBlockEditingMode,
-	] );
+	}, [ contentOnlyIds, disabledIds, registry ] );
 
 	return null;
 }

package/src/components/save-publish-panels/index.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button, createSlotFill } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import EntitiesSavedStates from '../entities-saved-states';
+import PostPublishPanel from '../post-publish-panel';
+import PluginPrePublishPanel from '../plugin-pre-publish-panel';
+import PluginPostPublishPanel from '../plugin-post-publish-panel';
+import { store as editorStore } from '../../store';
+
+const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
+
+export const ActionsPanelFill = Fill;
+
+export default function SavePublishPanels( {
+	setEntitiesSavedStatesCallback,
+	closeEntitiesSavedStates,
+	isEntitiesSavedStatesOpen,
+	forceIsDirtyPublishPanel,
+} ) {
+	const { closePublishSidebar, togglePublishSidebar } =
+		useDispatch( editorStore );
+	const { publishSidebarOpened, hasNonPostEntityChanges } = useSelect(
+		( select ) => ( {
+			publishSidebarOpened:
+				select( editorStore ).isPublishSidebarOpened(),
+			hasNonPostEntityChanges:
+				select( editorStore ).hasNonPostEntityChanges(),
+		} ),
+		[]
+	);
+
+	const openEntitiesSavedStates = useCallback(
+		() => setEntitiesSavedStatesCallback( true ),
+		[]
+	);
+
+	// It is ok for these components to be unmounted when not in visual use.
+	// We don't want more than one present at a time, decide which to render.
+	let unmountableContent;
+	if ( publishSidebarOpened ) {
+		unmountableContent = (
+			<PostPublishPanel
+				onClose={ closePublishSidebar }
+				forceIsDirty={ forceIsDirtyPublishPanel }
+				PrePublishExtension={ PluginPrePublishPanel.Slot }
+				PostPublishExtension={ PluginPostPublishPanel.Slot }
+			/>
+		);
+	} else if ( hasNonPostEntityChanges ) {
+		unmountableContent = (
+			<div className="editor-layout__toggle-entities-saved-states-panel">
+				<Button
+					variant="secondary"
+					className="editor-layout__toggle-entities-saved-states-panel-button"
+					onClick={ openEntitiesSavedStates }
+					aria-expanded={ false }
+				>
+					{ __( 'Open save panel' ) }
+				</Button>
+			</div>
+		);
+	} else {
+		unmountableContent = (
+			<div className="editor-layout__toggle-publish-panel">
+				<Button
+					variant="secondary"
+					className="editor-layout__toggle-publish-panel-button"
+					onClick={ togglePublishSidebar }
+					aria-expanded={ false }
+				>
+					{ __( 'Open publish panel' ) }
+				</Button>
+			</div>
+		);
+	}
+
+	// Since EntitiesSavedStates controls its own panel, we can keep it
+	// always mounted to retain its own component state (such as checkboxes).
+	return (
+		<>
+			{ isEntitiesSavedStatesOpen && (
+				<EntitiesSavedStates close={ closeEntitiesSavedStates } />
+			) }
+			<Slot bubblesVirtually />
+			{ ! isEntitiesSavedStatesOpen && unmountableContent }
+		</>
+	);
+}

package/src/components/save-publish-panels/style.scss

@@ -0,0 +1,36 @@
+
+.editor-layout__toggle-publish-panel,
+.editor-layout__toggle-sidebar-panel,
+.editor-layout__toggle-entities-saved-states-panel {
+	z-index: z-index(".editor-layout__toggle-sidebar-panel");
+	position: fixed !important; // Need to override the default relative positionning
+	top: -9999em;
+	bottom: auto;
+	left: auto;
+	right: 0;
+	box-sizing: border-box;
+	width: $sidebar-width;
+	background-color: $white;
+	border: 1px dotted $gray-300;
+	height: auto !important; // Need to override the default sidebar positionnings
+	padding: $grid-unit-30;
+	display: flex;
+	justify-content: center;
+}
+
+.editor-layout__toggle-entities-saved-states-panel,
+.editor-layout__toggle-publish-panel {
+	.interface-interface-skeleton__actions:focus &,
+	.interface-interface-skeleton__actions:focus-within & {
+		top: auto;
+		bottom: 0;
+	}
+}
+
+.edit-post-layout__toggle-sidebar-panel {
+	.interface-interface-skeleton__sidebar:focus &,
+	.interface-interface-skeleton__sidebar:focus-within & {
+		top: auto;
+		bottom: 0;
+	}
+}

package/src/components/start-page-options/index.js

@@ -11,6 +11,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -71,7 +72,11 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) {
 			blockPatterns={ blockPatterns }
 			shownPatterns={ shownBlockPatterns }
 			onClickPattern={ ( _pattern, blocks ) => {
-				editEntityRecord( 'postType', postType, postId, { blocks } );
+				editEntityRecord( 'postType', postType, postId, {
+					blocks,
+					content: ( { blocks: blocksForSerialization = [] } ) =>
+						__unstableSerializeAndClean( blocksForSerialization ),
+				} );
 				onChoosePattern();
 			} }
 		/>

package/src/private-apis.js

@@ -6,6 +6,7 @@ import * as interfaceApis from '@wordpress/interface';
 /**
  * Internal dependencies
  */
+import CollapsableBlockToolbar from './components/collapsible-block-toolbar';
 import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
@@ -15,7 +16,7 @@ import useBlockEditorSettings from './components/provider/use-block-editor-setti
 import DocumentTools from './components/document-tools';
 import InserterSidebar from './components/inserter-sidebar';
 import ListViewSidebar from './components/list-view-sidebar';
-import ModeSwitcher from './components/mode-switcher';
+import MoreMenu from './components/more-menu';
 import PatternOverridesPanel from './components/pattern-overrides-panel';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostPanelRow from './components/post-panel-row';
@@ -26,18 +27,26 @@ import PostActions from './components/post-actions';
 import { usePostActions } from './components/post-actions/actions';
 import PostCardPanel from './components/post-card-panel';
 import PostStatus from './components/post-status';
+import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
+import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
+import { PrivatePostExcerptPanel } from './components/post-excerpt/panel';
+import PostPublishButtonOrToggle from './components/post-publish-button/post-publish-button-or-toggle';
+import SavePublishPanels from './components/save-publish-panels';
+import PostContentInformation from './components/post-content-information';
+import PostLastEditedPanel from './components/post-last-edited-panel';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
 export const privateApis = {};
 lock( privateApis, {
+	CollapsableBlockToolbar,
 	DocumentTools,
 	EditorCanvas,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
 	InserterSidebar,
 	ListViewSidebar,
-	ModeSwitcher,
+	MoreMenu,
 	PatternOverridesPanel,
 	PluginPostExcerpt,
 	PostActions,
@@ -48,6 +57,13 @@ lock( privateApis, {
 	usePostActions,
 	PostCardPanel,
 	PostStatus,
+	ToolsMoreMenuGroup,
+	ViewMoreMenuGroup,
+	PrivatePostExcerptPanel,
+	PostPublishButtonOrToggle,
+	SavePublishPanels,
+	PostContentInformation,
+	PostLastEditedPanel,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useAutoSwitchEditorSidebars,