@wordpress/edit-post 7.32.0 → 7.34.0

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

@@ -4,30 +4,37 @@
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	PanelBody,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
+	PluginPostStatusInfo,
 	PostAuthorPanel,
 	PostSchedulePanel,
-	PostSwitchToDraftButton,
 	PostSyncStatus,
 	PostURLPanel,
 	PostTemplatePanel,
 	PostFeaturedImagePanel,
 	store as editorStore,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import PostVisibility from '../post-visibility';
 import PostTrash from '../post-trash';
 import PostSticky from '../post-sticky';
 import PostSlug from '../post-slug';
 import PostFormat from '../post-format';
-import PostPendingStatus from '../post-pending-status';
-import PluginPostStatusInfo from '../plugin-post-status-info';
+import { unlock } from '../../../lock-unlock';
+
+const {
+	PostStatus: PostStatusPanel,
+	PrivatePostExcerptPanel,
+	PostContentInformation,
+	PostLastEditedPanel,
+} = unlock( editorPrivateApis );
 
 /**
  * Module Constants
@@ -35,16 +42,30 @@ import PluginPostStatusInfo from '../plugin-post-status-info';
 const PANEL_NAME = 'post-status';
 
 export default function PostStatus() {
-	const { isOpened, isRemoved } = useSelect( ( select ) => {
-		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
-		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, isEditorPanelOpened } =
-			select( editorStore );
-		return {
-			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-		};
-	}, [] );
+	const { isOpened, isRemoved, showPostContentPanels } = useSelect(
+		( select ) => {
+			// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+			const {
+				isEditorPanelRemoved,
+				isEditorPanelOpened,
+				getCurrentPostType,
+			} = select( editorStore );
+			const postType = getCurrentPostType();
+			return {
+				isRemoved: isEditorPanelRemoved( PANEL_NAME ),
+				isOpened: isEditorPanelOpened( PANEL_NAME ),
+				// Post excerpt panel is rendered in different place depending on the post type.
+				// So we cannot make this check inside the PostExcerpt component based on the current edited entity.
+				showPostContentPanels: ! [
+					'wp_template',
+					'wp_template_part',
+					'wp_block',
+				].includes( postType ),
+			};
+		},
+		[]
+	);
 	const { toggleEditorPanelOpened } = useDispatch( editorStore );
 
 	if ( isRemoved ) {
@@ -61,14 +82,33 @@ export default function PostStatus() {
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
-						<PostFeaturedImagePanel withPanelBody={ false } />
-						<PostVisibility />
-						<PostSchedulePanel />
-						<PostTemplatePanel />
-						<PostURLPanel />
-						<PostSyncStatus />
+						{ showPostContentPanels && (
+							<VStack
+								spacing={ 3 }
+								//  TODO: this needs to be consolidated with the panel in site editor, when we unify them.
+								style={ { marginBlockEnd: '24px' } }
+							>
+								<PostFeaturedImagePanel
+									withPanelBody={ false }
+								/>
+								<PrivatePostExcerptPanel />
+								<VStack spacing={ 1 }>
+									<PostContentInformation />
+									<PostLastEditedPanel />
+								</VStack>
+							</VStack>
+						) }
+						<VStack
+							spacing={ 1 }
+							style={ { marginBlockEnd: '12px' } }
+						>
+							<PostStatusPanel />
+							<PostSchedulePanel />
+							<PostTemplatePanel />
+							<PostURLPanel />
+							<PostSyncStatus />
+						</VStack>
 						<PostSticky />
-						<PostPendingStatus />
 						<PostFormat />
 						<PostSlug />
 						<PostAuthorPanel />
@@ -77,10 +117,7 @@ export default function PostStatus() {
 							style={ {
 								marginTop: '16px',
 							} }
-							spacing={ 4 }
-							wrap
 						>
-							<PostSwitchToDraftButton />
 							<PostTrash />
 						</HStack>
 					</>

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

@@ -13,20 +13,21 @@ import {
 	useEffect,
 	useRef,
 } from '@wordpress/element';
-import { isRTL, __ } from '@wordpress/i18n';
+import { isRTL, __, sprintf } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	store as editorStore,
 	PageAttributesPanel,
 	PluginDocumentSettingPanel,
+	PluginSidebar,
 	PostDiscussionPanel,
-	PostExcerptPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { addQueryArgs } from '@wordpress/url';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -34,15 +35,15 @@ import {
 import SettingsHeader from '../settings-header';
 import PostStatus from '../post-status';
 import MetaBoxes from '../../meta-boxes';
-import PluginSidebarEditPost from '../plugin-sidebar';
 import { store as editPostStore } from '../../../store';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { unlock } from '../../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
-
+const { PostCardPanel, PostActions, interfaceStore } =
+	unlock( editorPrivateApis );
 const { Tabs } = unlock( componentsPrivateApis );
-const { PatternOverridesPanel } = unlock( editorPrivateApis );
+const { PatternOverridesPanel, useAutoSwitchEditorSidebars } =
+	unlock( editorPrivateApis );
 
 const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 	web: true,
@@ -53,13 +54,9 @@ export const sidebars = {
 	block: 'edit-post/block',
 };
 
-const SidebarContent = ( {
-	sidebarName,
-	keyboardShortcut,
-	isEditingTemplate,
-} ) => {
+const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 	const tabListRef = useRef( null );
-	// Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
+	// Because `PluginSidebar` renders a `ComplementaryArea`, we
 	// need to forward the `Tabs` context so it can be passed through the
 	// underlying slot/fill.
 	const tabsContextValue = useContext( Tabs.Context );
@@ -76,7 +73,7 @@ const SidebarContent = ( {
 			// We are purposefully using a custom `data-tab-id` attribute here
 			// because we don't want rely on any assumptions about `Tabs`
 			// component internals.
-			( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
+			( element ) => element.getAttribute( 'data-tab-id' ) === tabName
 		);
 		const activeElement = selectedTabElement?.ownerDocument.activeElement;
 		const tabsHasFocus = tabsElements.some( ( element ) => {
@@ -89,11 +86,61 @@ const SidebarContent = ( {
 		) {
 			selectedTabElement?.focus();
 		}
-	}, [ sidebarName ] );
+	}, [ tabName ] );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						const postType = items[ 0 ].type;
+						document.location.href = addQueryArgs( 'edit.php', {
+							post_type: postType,
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											const postId = newItem.id;
+											document.location.href =
+												addQueryArgs( 'post.php', {
+													post: postId,
+													action: 'edit',
+												} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
+			}
+		},
+		[ createSuccessNotice ]
+	);
 
 	return (
-		<PluginSidebarEditPost
-			identifier={ sidebarName }
+		<PluginSidebar
+			identifier={ tabName }
 			header={
 				<Tabs.Context.Provider value={ tabsContextValue }>
 					<SettingsHeader ref={ tabListRef } />
@@ -113,65 +160,63 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					<PostCardPanel />
-					{ ! isEditingTemplate && (
-						<>
-							<PostStatus />
-							<PluginDocumentSettingPanel.Slot />
-							<PostLastRevisionPanel />
-							<PostTaxonomiesPanel />
-							<PostExcerptPanel />
-							<PostDiscussionPanel />
-							<PageAttributesPanel />
-							<PatternOverridesPanel />
-							<MetaBoxes location="side" />
-						</>
-					) }
+					<PostCardPanel
+						actions={
+							<PostActions
+								onActionPerformed={ onActionPerformed }
+							/>
+						}
+					/>
+					{ ! isEditingTemplate && <PostStatus /> }
+					<PluginDocumentSettingPanel.Slot />
+					<PostLastRevisionPanel />
+					<PostTaxonomiesPanel />
+					<PostDiscussionPanel />
+					<PageAttributesPanel />
+					<PatternOverridesPanel />
+					{ ! isEditingTemplate && <MetaBoxes location="side" /> }
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 					<BlockInspector />
 				</Tabs.TabPanel>
 			</Tabs.Context.Provider>
-		</PluginSidebarEditPost>
+		</PluginSidebar>
 	);
 };
 
 const SettingsSidebar = () => {
-	const {
-		sidebarName,
-		isSettingsSidebarActive,
-		keyboardShortcut,
-		isEditingTemplate,
-	} = useSelect( ( select ) => {
-		// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
-		// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
-		// If one of the two sidebars is active the component will contain the content of that sidebar.
-		// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
-		// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
-		// should contain the sidebar that will be active when the toggle button is pressed. If a block
-		// is selected, that should be edit-post/block otherwise it's edit-post/document.
-		let sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editPostStore.name
-		);
-		let isSettingsSidebar = true;
-		if ( ! [ sidebars.document, sidebars.block ].includes( sidebar ) ) {
-			isSettingsSidebar = false;
-			if ( select( blockEditorStore ).getBlockSelectionStart() ) {
-				sidebar = sidebars.block;
+	useAutoSwitchEditorSidebars();
+	const { tabName, keyboardShortcut, isEditingTemplate } = useSelect(
+		( select ) => {
+			const shortcut = select(
+				keyboardShortcutsStore
+			).getShortcutRepresentation( 'core/editor/toggle-sidebar' );
+
+			const sidebar =
+				select( interfaceStore ).getActiveComplementaryArea( 'core' );
+			const _isEditorSidebarOpened = [
+				sidebars.block,
+				sidebars.document,
+			].includes( sidebar );
+			let _tabName = sidebar;
+			if ( ! _isEditorSidebarOpened ) {
+				_tabName = !! select(
+					blockEditorStore
+				).getBlockSelectionStart()
+					? sidebars.block
+					: sidebars.document;
 			}
-			sidebar = sidebars.document;
-		}
-		const shortcut = select(
-			keyboardShortcutsStore
-		).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
-		return {
-			sidebarName: sidebar,
-			isSettingsSidebarActive: isSettingsSidebar,
-			keyboardShortcut: shortcut,
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
-		};
-	}, [] );
+
+			return {
+				tabName: _tabName,
+				keyboardShortcut: shortcut,
+				isEditingTemplate:
+					select( editorStore ).getCurrentPostType() ===
+					'wp_template',
+			};
+		},
+		[]
+	);
 
 	const { openGeneralSidebar } = useDispatch( editPostStore );
 
@@ -186,17 +231,12 @@ const SettingsSidebar = () => {
 
 	return (
 		<Tabs
-			// Due to how this component is controlled (via a value from the
-			// `interfaceStore`), when the sidebar closes the currently selected
-			// tab can't be found. This causes the component to continuously reset
-			// the selection to `null` in an infinite loop.Proactively setting
-			// the selected tab to `null` avoids that.
-			selectedTabId={ isSettingsSidebarActive ? sidebarName : null }
+			selectedTabId={ tabName }
 			onSelect={ onTabSelect }
 			selectOnMove={ false }
 		>
 			<SidebarContent
-				sidebarName={ sidebarName }
+				tabName={ tabName }
 				keyboardShortcut={ keyboardShortcut }
 				isEditingTemplate={ isEditingTemplate }
 			/>

package/src/components/visual-editor/block-inspector-button.js

@@ -19,7 +19,7 @@ export function BlockInspectorButton( { onClick = noop, small = false } ) {
 		( select ) => ( {
 			shortcut: select(
 				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
+			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
 			areAdvancedSettingsOpened:
 				select( editPostStore ).getActiveGeneralSidebarName() ===
 				'edit-post/block',

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

@@ -19,6 +19,7 @@ import { store as blocksStore } from '@wordpress/blocks';
  */
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { usePaddingAppender } from './use-padding-appender';
 
 const { EditorCanvas } = unlock( editorPrivateApis );
 
@@ -53,6 +54,8 @@ export default function VisualEditor( { styles } ) {
 		[]
 	);
 
+	const paddingAppenderRef = usePaddingAppender();
+
 	let paddingBottom;
 
 	// Add a constant padding for the typewritter effect. When typing at the
@@ -91,6 +94,7 @@ export default function VisualEditor( { styles } ) {
 				// We should auto-focus the canvas (title) on load.
 				// eslint-disable-next-line jsx-a11y/no-autofocus
 				autoFocus={ ! isWelcomeGuideVisible }
+				contentRef={ paddingAppenderRef }
 			/>
 		</div>
 	);

package/src/components/visual-editor/use-padding-appender.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+export function usePaddingAppender() {
+	const registry = useRegistry();
+	return useRefEffect(
+		( node ) => {
+			function onMouseDown( event ) {
+				if ( event.target !== node ) {
+					return;
+				}
+
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+
+				const paddingBottom = defaultView.parseInt(
+					defaultView.getComputedStyle( node ).paddingBottom,
+					10
+				);
+
+				if ( ! paddingBottom ) {
+					return;
+				}
+
+				// only handle clicks under the last child
+				const lastChild = node.lastElementChild;
+				if ( ! lastChild ) {
+					return;
+				}
+
+				const lastChildRect = lastChild.getBoundingClientRect();
+				if ( event.clientY < lastChildRect.bottom ) {
+					return;
+				}
+
+				event.preventDefault();
+
+				const blockOrder = registry
+					.select( blockEditorStore )
+					.getBlockOrder( '' );
+				const lastBlockClientId = blockOrder[ blockOrder.length - 1 ];
+				const lastBlock = registry
+					.select( blockEditorStore )
+					.getBlock( lastBlockClientId );
+				const { selectBlock, insertDefaultBlock } =
+					registry.dispatch( blockEditorStore );
+
+				if ( isUnmodifiedDefaultBlock( lastBlock ) ) {
+					selectBlock( lastBlockClientId );
+				} else {
+					insertDefaultBlock();
+				}
+			}
+			node.addEventListener( 'mousedown', onMouseDown );
+			return () => {
+				node.removeEventListener( 'mousedown', onMouseDown );
+			};
+		},
+		[ registry ]
+	);
+}

package/src/deprecated.js

@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as editorPrivateApis,
+	PluginBlockSettingsMenuItem as EditorPluginBlockSettingsMenuItem,
+	PluginDocumentSettingPanel as EditorPluginDocumentSettingPanel,
+	PluginMoreMenuItem as EditorPluginMoreMenuItem,
+	PluginPrePublishPanel as EditorPluginPrePublishPanel,
+	PluginPostPublishPanel as EditorPluginPostPublishPanel,
+	PluginPostStatusInfo as EditorPluginPostStatusInfo,
+	PluginSidebar as EditorPluginSidebar,
+	PluginSidebarMoreMenuItem as EditorPluginSidebarMoreMenuItem,
+} from '@wordpress/editor';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+const { PluginPostExcerpt } = unlock( editorPrivateApis );
+
+const deprecateSlot = ( name ) => {
+	deprecated( `wp.editPost.${ name }`, {
+		since: '6.6',
+		alternative: `wp.editor.${ name }`,
+	} );
+};
+
+/* eslint-disable jsdoc/require-param */
+/**
+ * @see PluginBlockSettingsMenuItem in @wordpress/editor package.
+ */
+export function PluginBlockSettingsMenuItem( props ) {
+	deprecateSlot( 'PluginBlockSettingsMenuItem' );
+	return <EditorPluginBlockSettingsMenuItem { ...props } />;
+}
+
+/**
+ * @see PluginDocumentSettingPanel in @wordpress/editor package.
+ */
+export function PluginDocumentSettingPanel( props ) {
+	deprecateSlot( 'PluginDocumentSettingPanel' );
+	return <EditorPluginDocumentSettingPanel { ...props } />;
+}
+
+/**
+ * @see PluginMoreMenuItem in @wordpress/editor package.
+ */
+export function PluginMoreMenuItem( props ) {
+	deprecateSlot( 'PluginMoreMenuItem' );
+	return <EditorPluginMoreMenuItem { ...props } />;
+}
+
+/**
+ * @see PluginPrePublishPanel in @wordpress/editor package.
+ */
+export function PluginPrePublishPanel( props ) {
+	deprecateSlot( 'PluginPrePublishPanel' );
+	return <EditorPluginPrePublishPanel { ...props } />;
+}
+
+/**
+ * @see PluginPostPublishPanel in @wordpress/editor package.
+ */
+export function PluginPostPublishPanel( props ) {
+	deprecateSlot( 'PluginPostPublishPanel' );
+	return <EditorPluginPostPublishPanel { ...props } />;
+}
+
+/**
+ * @see PluginPostStatusInfo in @wordpress/editor package.
+ */
+export function PluginPostStatusInfo( props ) {
+	deprecateSlot( 'PluginPostStatusInfo' );
+	return <EditorPluginPostStatusInfo { ...props } />;
+}
+
+/**
+ * @see PluginSidebar in @wordpress/editor package.
+ */
+export function PluginSidebar( props ) {
+	deprecateSlot( 'PluginSidebar' );
+	return <EditorPluginSidebar { ...props } />;
+}
+
+/**
+ * @see PluginSidebarMoreMenuItem in @wordpress/editor package.
+ */
+export function PluginSidebarMoreMenuItem( props ) {
+	deprecateSlot( 'PluginSidebarMoreMenuItem' );
+	return <EditorPluginSidebarMoreMenuItem { ...props } />;
+}
+
+/**
+ * @see PluginPostExcerpt in @wordpress/editor package.
+ */
+export function __experimentalPluginPostExcerpt() {
+	deprecated( 'wp.editPost.__experimentalPluginPostExcerpt', {
+		since: '6.6',
+		hint: 'Core and custom panels can be access programmatically using their panel name.',
+		link: 'https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/#accessing-a-panel-programmatically',
+	} );
+	return PluginPostExcerpt;
+}
+
+/* eslint-enable jsdoc/require-param */

package/src/editor.js

@@ -58,12 +58,12 @@ function Editor( {
 				getEditorSettings().supportsTemplateMode;
 			const isViewable =
 				getPostType( currentPost.postType )?.viewable ?? false;
-			const canEditTemplate = canUser( 'create', 'templates' );
+			const canViewTemplate = canUser( 'read', 'templates' );
 			return {
 				template:
 					supportsTemplateMode &&
 					isViewable &&
-					canEditTemplate &&
+					canViewTemplate &&
 					currentPost.postType !== 'wp_template'
 						? getEditedPostTemplate()
 						: null,