@wordpress/edit-post 7.31.0 → 7.33.0

package/src/components/sidebar/plugin-post-publish-panel/index.js

@@ -1,83 +1,28 @@
 /**
  * WordPress dependencies
  */
-import { usePluginContext } from '@wordpress/plugins';
-import { createSlotFill, PanelBody } from '@wordpress/components';
-
-const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
+import deprecated from '@wordpress/deprecated';
+import { PluginPostPublishPanel } from '@wordpress/editor';
 
 /**
  * Renders provided content to the post-publish panel in the publish flow
  * (side panel that opens after a user publishes the post).
  *
+ * @deprecated since 6.6, use `wp.editor.PluginPostPublishPanel` instead.
+ *
  * @param {Object}                props                                 Component properties.
  * @param {string}                [props.className]                     An optional class name added to the panel.
  * @param {string}                [props.title]                         Title displayed at the top of the panel.
  * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened. When no title is provided it is always opened.
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
  * @param {Element}               props.children                        Children to be rendered
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
- *
- * function MyPluginPostPublishPanel() {
- * 	return React.createElement(
- * 		PluginPostPublishPanel,
- * 		{
- * 			className: 'my-plugin-post-publish-panel',
- * 			title: __( 'My panel title' ),
- * 			initialOpen: true,
- * 		},
- * 		__( 'My panel content' )
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginPostPublishPanel } from '@wordpress/edit-post';
- *
- * const MyPluginPostPublishPanel = () => (
- * 	<PluginPostPublishPanel
- * 		className="my-plugin-post-publish-panel"
- * 		title={ __( 'My panel title' ) }
- * 		initialOpen={ true }
- * 	>
- *         { __( 'My panel content' ) }
- * 	</PluginPostPublishPanel>
- * );
- * ```
- *
  * @return {Component} The component to be rendered.
  */
-const PluginPostPublishPanel = ( {
-	children,
-	className,
-	title,
-	initialOpen = false,
-	icon,
-} ) => {
-	const { icon: pluginIcon } = usePluginContext();
-
-	return (
-		<Fill>
-			<PanelBody
-				className={ className }
-				initialOpen={ initialOpen || ! title }
-				title={ title }
-				icon={ icon ?? pluginIcon }
-			>
-				{ children }
-			</PanelBody>
-		</Fill>
-	);
-};
-
-PluginPostPublishPanel.Slot = Slot;
-
-export default PluginPostPublishPanel;
+export default function EditPostPluginPostPublishPanel( props ) {
+	deprecated( 'wp.editPost.PluginPostPublishPanel', {
+		since: '6.6',
+		version: '6.8',
+		alternative: 'wp.editor.PluginPostPublishPanel',
+	} );
+	return <PluginPostPublishPanel { ...props } />;
+}

package/src/components/sidebar/plugin-pre-publish-panel/index.js

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelBody } from '@wordpress/components';
-import { usePluginContext } from '@wordpress/plugins';
-
-const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
+import deprecated from '@wordpress/deprecated';
+import { PluginPrePublishPanel } from '@wordpress/editor';
 
 /**
  * Renders provided content to the pre-publish side panel in the publish flow
  * (side panel that opens when a user first pushes "Publish" from the main editor).
  *
+ * @deprecated since 6.6, use `wp.editor.PluginPrePublishPanel` instead.
+ *
  * @param {Object}                props                                 Component props.
  * @param {string}                [props.className]                     An optional class name added to the panel.
  * @param {string}                [props.title]                         Title displayed at the top of the panel.
@@ -20,67 +20,13 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
  *                                                                      the sidebar is pinned to toolbar.
  * @param {Element}               props.children                        Children to be rendered
  *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
- *
- * function MyPluginPrePublishPanel() {
- * 	return React.createElement(
- * 		PluginPrePublishPanel,
- * 		{
- * 			className: 'my-plugin-pre-publish-panel',
- * 			title: __( 'My panel title' ),
- * 			initialOpen: true,
- * 		},
- * 		__( 'My panel content' )
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginPrePublishPanel } from '@wordpress/edit-post';
- *
- * const MyPluginPrePublishPanel = () => (
- * 	<PluginPrePublishPanel
- * 		className="my-plugin-pre-publish-panel"
- * 		title={ __( 'My panel title' ) }
- * 		initialOpen={ true }
- * 	>
- * 	    { __( 'My panel content' ) }
- * 	</PluginPrePublishPanel>
- * );
- * ```
- *
  * @return {Component} The component to be rendered.
  */
-const PluginPrePublishPanel = ( {
-	children,
-	className,
-	title,
-	initialOpen = false,
-	icon,
-} ) => {
-	const { icon: pluginIcon } = usePluginContext();
-
-	return (
-		<Fill>
-			<PanelBody
-				className={ className }
-				initialOpen={ initialOpen || ! title }
-				title={ title }
-				icon={ icon ?? pluginIcon }
-			>
-				{ children }
-			</PanelBody>
-		</Fill>
-	);
-};
-
-PluginPrePublishPanel.Slot = Slot;
-
-export default PluginPrePublishPanel;
+export default function EditPostPluginPrePublishPanel( props ) {
+	deprecated( 'wp.editPost.PluginPrePublishPanel', {
+		since: '6.6',
+		version: '6.8',
+		alternative: 'wp.editor.PluginPrePublishPanel',
+	} );
+	return <PluginPrePublishPanel { ...props } />;
+}

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

@@ -8,26 +8,27 @@ import {
 } 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 } = unlock( editorPrivateApis );
 
 /**
  * Module Constants
@@ -61,14 +62,13 @@ export default function PostStatus() {
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
+						<PostStatusPanel />
 						<PostFeaturedImagePanel withPanelBody={ false } />
-						<PostVisibility />
 						<PostSchedulePanel />
 						<PostTemplatePanel />
 						<PostURLPanel />
 						<PostSyncStatus />
 						<PostSticky />
-						<PostPendingStatus />
 						<PostFormat />
 						<PostSlug />
 						<PostAuthorPanel />
@@ -77,10 +77,7 @@ export default function PostStatus() {
 							style={ {
 								marginTop: '16px',
 							} }
-							spacing={ 4 }
-							wrap
 						>
-							<PostSwitchToDraftButton />
 							<PostTrash />
 						</HStack>
 					</>

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

@@ -15,17 +15,19 @@ import {
 } from '@wordpress/element';
 import { isRTL, __ } 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';
 
 /**
  * Internal dependencies
@@ -33,13 +35,15 @@ import {
 import SettingsHeader from '../settings-header';
 import PostStatus from '../post-status';
 import MetaBoxes from '../../meta-boxes';
-import PluginSidebarEditPost from '../plugin-sidebar';
-import TemplateSummary from '../template-summary';
 import { store as editPostStore } from '../../../store';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { unlock } from '../../../lock-unlock';
 
+const { PostCardPanel, PostActions, interfaceStore } =
+	unlock( editorPrivateApis );
 const { Tabs } = unlock( componentsPrivateApis );
+const { PatternOverridesPanel, useAutoSwitchEditorSidebars } =
+	unlock( editorPrivateApis );
 
 const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 	web: true,
@@ -50,13 +54,18 @@ export const sidebars = {
 	block: 'edit-post/block',
 };
 
-const SidebarContent = ( {
-	sidebarName,
-	keyboardShortcut,
-	isEditingTemplate,
-} ) => {
+function onActionPerformed( actionId, items ) {
+	if ( actionId === 'move-to-trash' ) {
+		const postType = items[ 0 ].type;
+		document.location.href = addQueryArgs( 'edit.php', {
+			post_type: postType,
+		} );
+	}
+}
+
+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 );
@@ -73,7 +82,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 ) => {
@@ -86,11 +95,11 @@ const SidebarContent = ( {
 		) {
 			selectedTabElement?.focus();
 		}
-	}, [ sidebarName ] );
+	}, [ tabName ] );
 
 	return (
-		<PluginSidebarEditPost
-			identifier={ sidebarName }
+		<PluginSidebar
+			identifier={ tabName }
 			header={
 				<Tabs.Context.Provider value={ tabsContextValue }>
 					<SettingsHeader ref={ tabListRef } />
@@ -110,6 +119,13 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
+					<PostCardPanel
+						actions={
+							<PostActions
+								onActionPerformed={ onActionPerformed }
+							/>
+						}
+					/>
 					{ ! isEditingTemplate && (
 						<>
 							<PostStatus />
@@ -119,55 +135,52 @@ const SidebarContent = ( {
 							<PostExcerptPanel />
 							<PostDiscussionPanel />
 							<PageAttributesPanel />
+							<PatternOverridesPanel />
 							<MetaBoxes location="side" />
 						</>
 					) }
-					{ isEditingTemplate && <TemplateSummary /> }
 				</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 );
 
@@ -182,17 +195,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/editor.js

@@ -32,11 +32,14 @@ function Editor( {
 	...props
 } ) {
 	const {
-		initialPost,
 		currentPost,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
-	} = useNavigateToEntityRecord( initialPostId, initialPostType );
+	} = useNavigateToEntityRecord(
+		initialPostId,
+		initialPostType,
+		'post-only'
+	);
 
 	const { post, template } = useSelect(
 		( select ) => {
@@ -55,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,
@@ -80,6 +83,13 @@ function Editor( {
 		[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
 	);
 
+	const initialPost = useMemo( () => {
+		return {
+			type: initialPostType,
+			id: initialPostId,
+		};
+	}, [ initialPostType, initialPostId ] );
+
 	if ( ! post ) {
 		return null;
 	}