@wordpress/editor 14.3.0 → 14.5.0

package/src/components/template-content-panel/index.js

@@ -2,13 +2,12 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as interfaceStore } from '@wordpress/interface';
+import { applyFilters } from '@wordpress/hooks';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,29 +18,46 @@ import { store as editorStore } from '../../store';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
-const PAGE_CONTENT_BLOCKS = [
-	'core/post-content',
-	'core/post-featured-image',
+const POST_CONTENT_BLOCK_TYPES = [
 	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
 ];
 
 const TEMPLATE_PART_BLOCK = 'core/template-part';
 
-export default function TemplateContentPanel( { renderingMode } ) {
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const { clientIds, postType } = useSelect( ( select ) => {
-		const { getBlocksByName } = select( blockEditorStore );
-		const { getCurrentPostType } = select( editorStore );
-		const _postType = getCurrentPostType();
-		return {
-			postType: _postType,
-			clientIds: getBlocksByName(
-				TEMPLATE_POST_TYPE === _postType
-					? TEMPLATE_PART_BLOCK
-					: PAGE_CONTENT_BLOCKS
+export default function TemplateContentPanel() {
+	const postContentBlockTypes = useMemo(
+		() =>
+			applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
 			),
-		};
-	}, [] );
+		[]
+	);
+
+	const { clientIds, postType, renderingMode } = useSelect(
+		( select ) => {
+			const {
+				getCurrentPostType,
+				getPostBlocksByName,
+				getRenderingMode,
+			} = unlock( select( editorStore ) );
+			const _postType = getCurrentPostType();
+			return {
+				postType: _postType,
+				clientIds: getPostBlocksByName(
+					TEMPLATE_POST_TYPE === _postType
+						? TEMPLATE_PART_BLOCK
+						: postContentBlockTypes
+				),
+				renderingMode: getRenderingMode(),
+			};
+		},
+		[ postContentBlockTypes ]
+	);
+
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	if ( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) {
 		return null;

package/src/components/visual-editor/edit-template-blocks-notification.js

@@ -40,7 +40,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 
 	const canEditTemplate = useSelect(
 		( select ) =>
-			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+			!! select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+		[]
 	);
 
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );

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

@@ -34,7 +34,7 @@ import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import EditTemplateBlocksNotification from './edit-template-blocks-notification';
 import ResizableEditor from '../resizable-editor';
-import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block';
+import useSelectNearestEditableBlock from './use-select-nearest-editable-block';
 import {
 	NAVIGATION_POST_TYPE,
 	PATTERN_POST_TYPE,
@@ -107,6 +107,7 @@ function VisualEditor( {
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -142,7 +143,10 @@ function VisualEditor( {
 		const editorSettings = getEditorSettings();
 		const supportsTemplateMode = editorSettings.supportsTemplateMode;
 		const postTypeObject = getPostType( postTypeSlug );
-		const canEditTemplate = canUser( 'create', 'templates' );
+		const canEditTemplate = canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_template',
+		} );
 		const currentTemplateId = getCurrentTemplateId();
 		const template = currentTemplateId
 			? getEditedEntityRecord(
@@ -338,12 +342,13 @@ function VisualEditor( {
 		} ),
 	] );
 
-	const zoomOutProps = isZoomOutMode
-		? {
-				scale: 'default',
-				frameSize: '48px',
-		  }
-		: {};
+	const zoomOutProps =
+		isZoomOutMode && ! isTabletViewport
+			? {
+					scale: 'default',
+					frameSize: '48px',
+			  }
+			: {};
 
 	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
 	const enableResizing =

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

@@ -1,10 +1,7 @@
 .editor-visual-editor {
 	position: relative;
-	height: 100%;
-	display: block;
+	display: flex;
 	background-color: $gray-300;
-	// Make this a stacking context to contain the z-index of children elements.
-	isolation: isolate;
 
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;

package/src/{hooks → components/visual-editor}/use-select-nearest-editable-block.js

@@ -8,7 +8,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../lock-unlock';
+import { unlock } from '../../lock-unlock';
 
 const DISTANCE_THRESHOLD = 500;
 

package/src/dataviews/actions/delete-post.tsx

@@ -78,6 +78,7 @@ const deletePostAction: Action< Post > = {
 						onClick={ closeModal }
 						disabled={ isBusy }
 						accessibleWhenDisabled
+						__next40pxDefaultSize
 					>
 						{ __( 'Cancel' ) }
 					</Button>
@@ -95,6 +96,7 @@ const deletePostAction: Action< Post > = {
 						isBusy={ isBusy }
 						disabled={ isBusy }
 						accessibleWhenDisabled
+						__next40pxDefaultSize
 					>
 						{ __( 'Delete' ) }
 					</Button>

package/src/dataviews/actions/export-pattern.native.tsx

@@ -0,0 +1,3 @@
+const exportPattern = undefined;
+
+export default exportPattern;

package/src/dataviews/actions/permanently-delete-post.tsx

@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+const permanentlyDeletePost: Action< PostWithPermissions > = {
+	id: 'permanently-delete',
+	label: __( 'Permanently delete' ),
+	supportsBulk: true,
+	isEligible( item ) {
+		if ( isTemplateOrTemplatePart( item ) || item.type === 'wp_block' ) {
+			return false;
+		}
+		const { status, permissions } = item;
+		return status === 'trash' && permissions?.delete;
+	},
+	async callback( posts, { registry, onActionPerformed } ) {
+		const { createSuccessNotice, createErrorNotice } =
+			registry.dispatch( noticesStore );
+		const { deleteEntityRecord } = registry.dispatch( coreStore );
+		const promiseResult = await Promise.allSettled(
+			posts.map( ( post ) => {
+				return deleteEntityRecord(
+					'postType',
+					post.type,
+					post.id,
+					{ force: true },
+					{ throwOnError: true }
+				);
+			} )
+		);
+		// If all the promises were fulfilled with success.
+		if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
+			let successMessage;
+			if ( promiseResult.length === 1 ) {
+				successMessage = sprintf(
+					/* translators: The posts's title. */
+					__( '"%s" permanently deleted.' ),
+					getItemTitle( posts[ 0 ] )
+				);
+			} else {
+				successMessage = __( 'The items were permanently deleted.' );
+			}
+			createSuccessNotice( successMessage, {
+				type: 'snackbar',
+				id: 'permanently-delete-post-action',
+			} );
+			onActionPerformed?.( posts );
+		} else {
+			// If there was at lease one failure.
+			let errorMessage;
+			// If we were trying to permanently delete a single post.
+			if ( promiseResult.length === 1 ) {
+				const typedError = promiseResult[ 0 ] as {
+					reason?: CoreDataError;
+				};
+				if ( typedError.reason?.message ) {
+					errorMessage = typedError.reason.message;
+				} else {
+					errorMessage = __(
+						'An error occurred while permanently deleting the item.'
+					);
+				}
+				// If we were trying to permanently delete multiple posts
+			} else {
+				const errorMessages = new Set();
+				const failedPromises = promiseResult.filter(
+					( { status } ) => status === 'rejected'
+				);
+				for ( const failedPromise of failedPromises ) {
+					const typedError = failedPromise as {
+						reason?: CoreDataError;
+					};
+					if ( typedError.reason?.message ) {
+						errorMessages.add( typedError.reason.message );
+					}
+				}
+				if ( errorMessages.size === 0 ) {
+					errorMessage = __(
+						'An error occurred while permanently deleting the items.'
+					);
+				} else if ( errorMessages.size === 1 ) {
+					errorMessage = sprintf(
+						/* translators: %s: an error message */
+						__(
+							'An error occurred while permanently deleting the items: %s'
+						),
+						[ ...errorMessages ][ 0 ]
+					);
+				} else {
+					errorMessage = sprintf(
+						/* translators: %s: a list of comma separated error messages */
+						__(
+							'Some errors occurred while permanently deleting the items: %s'
+						),
+						[ ...errorMessages ].join( ',' )
+					);
+				}
+			}
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	},
+};
+
+export default permanentlyDeletePost;

package/src/dataviews/actions/restore-post.tsx

@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import { backup } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+const restorePost: Action< PostWithPermissions > = {
+	id: 'restore',
+	label: __( 'Restore' ),
+	isPrimary: true,
+	icon: backup,
+	supportsBulk: true,
+	isEligible( item ) {
+		return (
+			! isTemplateOrTemplatePart( item ) &&
+			item.type !== 'wp_block' &&
+			item.status === 'trash' &&
+			item.permissions?.update
+		);
+	},
+	async callback( posts, { registry, onActionPerformed } ) {
+		const { createSuccessNotice, createErrorNotice } =
+			registry.dispatch( noticesStore );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			registry.dispatch( coreStore );
+		await Promise.allSettled(
+			posts.map( ( post ) => {
+				return editEntityRecord( 'postType', post.type, post.id, {
+					status: 'draft',
+				} );
+			} )
+		);
+		const promiseResult = await Promise.allSettled(
+			posts.map( ( post ) => {
+				return saveEditedEntityRecord( 'postType', post.type, post.id, {
+					throwOnError: true,
+				} );
+			} )
+		);
+
+		if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
+			let successMessage;
+			if ( posts.length === 1 ) {
+				successMessage = sprintf(
+					/* translators: The number of posts. */
+					__( '"%s" has been restored.' ),
+					getItemTitle( posts[ 0 ] )
+				);
+			} else if ( posts[ 0 ].type === 'page' ) {
+				successMessage = sprintf(
+					/* translators: The number of posts. */
+					__( '%d pages have been restored.' ),
+					posts.length
+				);
+			} else {
+				successMessage = sprintf(
+					/* translators: The number of posts. */
+					__( '%d posts have been restored.' ),
+					posts.length
+				);
+			}
+			createSuccessNotice( successMessage, {
+				type: 'snackbar',
+				id: 'restore-post-action',
+			} );
+			if ( onActionPerformed ) {
+				onActionPerformed( posts );
+			}
+		} else {
+			// If there was at lease one failure.
+			let errorMessage;
+			// If we were trying to move a single post to the trash.
+			if ( promiseResult.length === 1 ) {
+				const typedError = promiseResult[ 0 ] as {
+					reason?: CoreDataError;
+				};
+				if ( typedError.reason?.message ) {
+					errorMessage = typedError.reason.message;
+				} else {
+					errorMessage = __(
+						'An error occurred while restoring the post.'
+					);
+				}
+				// If we were trying to move multiple posts to the trash
+			} else {
+				const errorMessages = new Set();
+				const failedPromises = promiseResult.filter(
+					( { status } ) => status === 'rejected'
+				);
+				for ( const failedPromise of failedPromises ) {
+					const typedError = failedPromise as {
+						reason?: CoreDataError;
+					};
+					if ( typedError.reason?.message ) {
+						errorMessages.add( typedError.reason.message );
+					}
+				}
+				if ( errorMessages.size === 0 ) {
+					errorMessage = __(
+						'An error occurred while restoring the posts.'
+					);
+				} else if ( errorMessages.size === 1 ) {
+					errorMessage = sprintf(
+						/* translators: %s: an error message */
+						__( 'An error occurred while restoring the posts: %s' ),
+						[ ...errorMessages ][ 0 ]
+					);
+				} else {
+					errorMessage = sprintf(
+						/* translators: %s: a list of comma separated error messages */
+						__(
+							'Some errors occurred while restoring the posts: %s'
+						),
+						[ ...errorMessages ].join( ',' )
+					);
+				}
+			}
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	},
+};
+
+export default restorePost;

package/src/dataviews/actions/trash-post.tsx

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+const trashPost: Action< PostWithPermissions > = {
+	id: 'move-to-trash',
+	label: __( 'Move to trash' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible( item ) {
+		if ( isTemplateOrTemplatePart( item ) || item.type === 'wp_block' ) {
+			return false;
+		}
+
+		return (
+			!! item.status &&
+			! [ 'auto-draft', 'trash' ].includes( item.status ) &&
+			item.permissions?.delete
+		);
+	},
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const { deleteEntityRecord } = useDispatch( coreStore );
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ items.length === 1
+						? sprintf(
+								// translators: %s: The item's title.
+								__(
+									'Are you sure you want to move "%s" to the trash?'
+								),
+								getItemTitle( items[ 0 ] )
+						  )
+						: sprintf(
+								// translators: %d: The number of items (2 or more).
+								_n(
+									'Are you sure you want to move %d item to the trash ?',
+									'Are you sure you want to move %d items to the trash ?',
+									items.length
+								),
+								items.length
+						  ) }
+				</Text>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							const promiseResult = await Promise.allSettled(
+								items.map( ( item ) =>
+									deleteEntityRecord(
+										'postType',
+										item.type,
+										item.id.toString(),
+										{},
+										{ throwOnError: true }
+									)
+								)
+							);
+							// If all the promises were fulfilled with success.
+							if (
+								promiseResult.every(
+									( { status } ) => status === 'fulfilled'
+								)
+							) {
+								let successMessage;
+								if ( promiseResult.length === 1 ) {
+									successMessage = sprintf(
+										/* translators: The item's title. */
+										__( '"%s" moved to the trash.' ),
+										getItemTitle( items[ 0 ] )
+									);
+								} else {
+									successMessage = sprintf(
+										/* translators: The number of items. */
+										_n(
+											'%s item moved to the trash.',
+											'%s items moved to the trash.',
+											items.length
+										),
+										items.length
+									);
+								}
+								createSuccessNotice( successMessage, {
+									type: 'snackbar',
+									id: 'move-to-trash-action',
+								} );
+							} else {
+								// If there was at least one failure.
+								let errorMessage;
+								// If we were trying to delete a single item.
+								if ( promiseResult.length === 1 ) {
+									const typedError = promiseResult[ 0 ] as {
+										reason?: CoreDataError;
+									};
+									if ( typedError.reason?.message ) {
+										errorMessage =
+											typedError.reason.message;
+									} else {
+										errorMessage = __(
+											'An error occurred while moving the item to the trash.'
+										);
+									}
+									// If we were trying to delete multiple items.
+								} else {
+									const errorMessages = new Set();
+									const failedPromises = promiseResult.filter(
+										( { status } ) => status === 'rejected'
+									);
+									for ( const failedPromise of failedPromises ) {
+										const typedError = failedPromise as {
+											reason?: CoreDataError;
+										};
+										if ( typedError.reason?.message ) {
+											errorMessages.add(
+												typedError.reason.message
+											);
+										}
+									}
+									if ( errorMessages.size === 0 ) {
+										errorMessage = __(
+											'An error occurred while moving the items to the trash.'
+										);
+									} else if ( errorMessages.size === 1 ) {
+										errorMessage = sprintf(
+											/* translators: %s: an error message */
+											__(
+												'An error occurred while moving the item to the trash: %s'
+											),
+											[ ...errorMessages ][ 0 ]
+										);
+									} else {
+										errorMessage = sprintf(
+											/* translators: %s: a list of comma separated error messages */
+											__(
+												'Some errors occurred while moving the items to the trash: %s'
+											),
+											[ ...errorMessages ].join( ',' )
+										);
+									}
+								}
+								createErrorNotice( errorMessage, {
+									type: 'snackbar',
+								} );
+							}
+							if ( onActionPerformed ) {
+								onActionPerformed( items );
+							}
+							setIsBusy( false );
+							closeModal?.();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ _x( 'Trash', 'verb' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export default trashPost;