@wordpress/editor 14.6.0 → 14.7.1-next.5368f64a9.0

package/src/components/post-trash/check.js

@@ -8,6 +8,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { GLOBAL_POST_TYPES } from '../../store/constants';
 
 /**
  * Wrapper component that renders its children only if the post can trashed.
@@ -34,10 +35,12 @@ export default function PostTrashCheck( { children } ) {
 			: false;
 
 		return {
-			canTrashPost: ( ! isNew || postId ) && canUserDelete,
+			canTrashPost:
+				( ! isNew || postId ) &&
+				canUserDelete &&
+				! GLOBAL_POST_TYPES.includes( postType ),
 		};
 	}, [] );
-
 	if ( ! canTrashPost ) {
 		return null;
 	}

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

@@ -1,31 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import PostTrashCheck from './check';
 
 /**
  * Displays the Post Trash Button and Confirm Dialog in the Editor.
  *
+ * @param {?{onActionPerformed: Object}} An object containing the onActionPerformed function.
  * @return {JSX.Element|null} The rendered PostTrash component.
  */
-export default function PostTrash() {
-	const { isNew, isDeleting, postId } = useSelect( ( select ) => {
+export default function PostTrash( { onActionPerformed } ) {
+	const registry = useRegistry();
+	const { isNew, isDeleting, postId, title } = useSelect( ( select ) => {
 		const store = select( editorStore );
 		return {
 			isNew: store.isEditedPostNew(),
 			isDeleting: store.isDeletingPost(),
 			postId: store.getCurrentPostId(),
+			title: store.getCurrentPostAttribute( 'title' ),
 		};
 	}, [] );
 	const { trashPost } = useDispatch( editorStore );
@@ -35,13 +39,18 @@ export default function PostTrash() {
 		return null;
 	}
 
-	const handleConfirm = () => {
+	const handleConfirm = async () => {
 		setShowConfirmDialog( false );
-		trashPost();
+		await trashPost();
+		const item = await registry
+			.resolveSelect( editorStore )
+			.getCurrentPost();
+		// After the post is trashed, we want to trigger the onActionPerformed callback, so the user is redirect
+		// to the post view depending on if the user is on post editor or site editor.
+		onActionPerformed?.( 'move-to-trash', [ item ] );
 	};
-
 	return (
-		<>
+		<PostTrashCheck>
 			<Button
 				__next40pxDefaultSize
 				className="editor-post-trash"
@@ -60,12 +69,14 @@ export default function PostTrash() {
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
 				confirmButtonText={ __( 'Move to trash' ) }
-				size="medium"
+				size="small"
 			>
-				{ __(
-					'Are you sure you want to move this post to the trash?'
+				{ sprintf(
+					// translators: %s: The item's title.
+					__( 'Are you sure you want to move "%s" to the trash?' ),
+					title
 				) }
 			</ConfirmDialog>
-		</>
+		</PostTrashCheck>
 	);
 }

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

@@ -110,6 +110,8 @@ export default function PostURL( { onClose } ) {
 							}
 							suffix={
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									icon={ copySmall }
 									ref={ copyButtonRef }
 									label={ __( 'Copy' ) }

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

@@ -26,6 +26,7 @@ import PageAttributesCheck from '../page-attributes/check';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useStartPatterns } from '../start-page-options';
 
 const {
 	PreferencesModal,
@@ -57,214 +58,267 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 	const { setIsListViewOpened, setIsInserterOpened } =
 		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
+	const hasStarterPatterns = !! useStartPatterns().length;
 
 	const sections = useMemo(
-		() => [
-			{
-				name: 'general',
-				tabLabel: __( 'General' ),
-				content: (
-					<>
-						<PreferencesModalSection title={ __( 'Interface' ) }>
-							<PreferenceToggleControl
-								scope="core"
-								featureName="showListViewByDefault"
-								help={ __(
-									'Opens the List View sidebar by default.'
-								) }
-								label={ __( 'Always open List View' ) }
-							/>
-							{ showBlockBreadcrumbsOption && (
+		() =>
+			[
+				{
+					name: 'general',
+					tabLabel: __( 'General' ),
+					content: (
+						<>
+							<PreferencesModalSection
+								title={ __( 'Interface' ) }
+							>
 								<PreferenceToggleControl
 									scope="core"
-									featureName="showBlockBreadcrumbs"
+									featureName="showListViewByDefault"
 									help={ __(
-										'Display the block hierarchy trail at the bottom of the editor.'
+										'Opens the List View sidebar by default.'
 									) }
-									label={ __( 'Show block breadcrumbs' ) }
+									label={ __( 'Always open List View' ) }
 								/>
-							) }
-							<PreferenceToggleControl
-								scope="core"
-								featureName="allowRightClickOverrides"
-								help={ __(
-									'Allows contextual List View menus via right-click, overriding browser defaults.'
-								) }
-								label={ __(
-									'Allow right-click contextual menus'
-								) }
-							/>
-						</PreferencesModalSection>
-						<PreferencesModalSection
-							title={ __( 'Document settings' ) }
-							description={ __(
-								'Select what settings are shown in the document panel.'
-							) }
-						>
-							<EnablePluginDocumentSettingPanelOption.Slot />
-							<PostTaxonomies
-								taxonomyWrapper={ ( content, taxonomy ) => (
-									<EnablePanelOption
-										label={ taxonomy.labels.menu_name }
-										panelName={ `taxonomy-panel-${ taxonomy.slug }` }
+								{ showBlockBreadcrumbsOption && (
+									<PreferenceToggleControl
+										scope="core"
+										featureName="showBlockBreadcrumbs"
+										help={ __(
+											'Display the block hierarchy trail at the bottom of the editor.'
+										) }
+										label={ __( 'Show block breadcrumbs' ) }
 									/>
 								) }
-							/>
-							<PostFeaturedImageCheck>
-								<EnablePanelOption
-									label={ __( 'Featured image' ) }
-									panelName="featured-image"
-								/>
-							</PostFeaturedImageCheck>
-							<PostExcerptCheck>
-								<EnablePanelOption
-									label={ __( 'Excerpt' ) }
-									panelName="post-excerpt"
-								/>
-							</PostExcerptCheck>
-							<PostTypeSupportCheck
-								supportKeys={ [ 'comments', 'trackbacks' ] }
-							>
-								<EnablePanelOption
-									label={ __( 'Discussion' ) }
-									panelName="discussion-panel"
-								/>
-							</PostTypeSupportCheck>
-							<PageAttributesCheck>
-								<EnablePanelOption
-									label={ __( 'Page attributes' ) }
-									panelName="page-attributes"
+								<PreferenceToggleControl
+									scope="core"
+									featureName="allowRightClickOverrides"
+									help={ __(
+										'Allows contextual List View menus via right-click, overriding browser defaults.'
+									) }
+									label={ __(
+										'Allow right-click contextual menus'
+									) }
 								/>
-							</PageAttributesCheck>
-						</PreferencesModalSection>
-						{ isLargeViewport && (
+								{ hasStarterPatterns && (
+									<PreferenceToggleControl
+										scope="core"
+										featureName="enableChoosePatternModal"
+										help={ __(
+											'Shows starter patterns when creating a new page.'
+										) }
+										label={ __( 'Show starter patterns' ) }
+									/>
+								) }
+							</PreferencesModalSection>
 							<PreferencesModalSection
-								title={ __( 'Publishing' ) }
+								title={ __( 'Document settings' ) }
+								description={ __(
+									'Select what settings are shown in the document panel.'
+								) }
 							>
-								<EnablePublishSidebarOption
-									help={ __(
-										'Review settings, such as visibility and tags.'
+								<EnablePluginDocumentSettingPanelOption.Slot />
+								<PostTaxonomies
+									taxonomyWrapper={ ( content, taxonomy ) => (
+										<EnablePanelOption
+											label={ taxonomy.labels.menu_name }
+											panelName={ `taxonomy-panel-${ taxonomy.slug }` }
+										/>
 									) }
-									label={ __( 'Enable pre-publish checks' ) }
 								/>
+								<PostFeaturedImageCheck>
+									<EnablePanelOption
+										label={ __( 'Featured image' ) }
+										panelName="featured-image"
+									/>
+								</PostFeaturedImageCheck>
+								<PostExcerptCheck>
+									<EnablePanelOption
+										label={ __( 'Excerpt' ) }
+										panelName="post-excerpt"
+									/>
+								</PostExcerptCheck>
+								<PostTypeSupportCheck
+									supportKeys={ [ 'comments', 'trackbacks' ] }
+								>
+									<EnablePanelOption
+										label={ __( 'Discussion' ) }
+										panelName="discussion-panel"
+									/>
+								</PostTypeSupportCheck>
+								<PageAttributesCheck>
+									<EnablePanelOption
+										label={ __( 'Page attributes' ) }
+										panelName="page-attributes"
+									/>
+								</PageAttributesCheck>
 							</PreferencesModalSection>
-						) }
-						{ extraSections?.general }
-					</>
-				),
-			},
-			{
-				name: 'appearance',
-				tabLabel: __( 'Appearance' ),
-				content: (
-					<PreferencesModalSection
-						title={ __( 'Appearance' ) }
-						description={ __(
-							'Customize the editor interface to suit your needs.'
-						) }
-					>
-						<PreferenceToggleControl
-							scope="core"
-							featureName="fixedToolbar"
-							onToggle={ () =>
-								setPreference(
-									'core',
-									'distractionFree',
-									false
-								)
-							}
-							help={ __(
-								'Access all block and document tools in a single place.'
-							) }
-							label={ __( 'Top toolbar' ) }
-						/>
-						<PreferenceToggleControl
-							scope="core"
-							featureName="distractionFree"
-							onToggle={ () => {
-								setPreference( 'core', 'fixedToolbar', true );
-								setIsInserterOpened( false );
-								setIsListViewOpened( false );
-							} }
-							help={ __(
-								'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
-							) }
-							label={ __( 'Distraction free' ) }
-						/>
-						<PreferenceToggleControl
-							scope="core"
-							featureName="focusMode"
-							help={ __(
-								'Highlights the current block and fades other content.'
+							{ isLargeViewport && (
+								<PreferencesModalSection
+									title={ __( 'Publishing' ) }
+								>
+									<EnablePublishSidebarOption
+										help={ __(
+											'Review settings, such as visibility and tags.'
+										) }
+										label={ __(
+											'Enable pre-publish checks'
+										) }
+									/>
+								</PreferencesModalSection>
 							) }
-							label={ __( 'Spotlight mode' ) }
-						/>
-						{ extraSections?.appearance }
-					</PreferencesModalSection>
-				),
-			},
-			{
-				name: 'accessibility',
-				tabLabel: __( 'Accessibility' ),
-				content: (
-					<>
+							{ extraSections?.general }
+						</>
+					),
+				},
+				{
+					name: 'appearance',
+					tabLabel: __( 'Appearance' ),
+					content: (
 						<PreferencesModalSection
-							title={ __( 'Navigation' ) }
+							title={ __( 'Appearance' ) }
 							description={ __(
-								'Optimize the editing experience for enhanced control.'
+								'Customize the editor interface to suit your needs.'
 							) }
 						>
 							<PreferenceToggleControl
 								scope="core"
-								featureName="keepCaretInsideBlock"
+								featureName="fixedToolbar"
+								onToggle={ () =>
+									setPreference(
+										'core',
+										'distractionFree',
+										false
+									)
+								}
 								help={ __(
-									'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
-								) }
-								label={ __(
-									'Contain text cursor inside block'
+									'Access all block and document tools in a single place.'
 								) }
+								label={ __( 'Top toolbar' ) }
 							/>
-						</PreferencesModalSection>
-						<PreferencesModalSection title={ __( 'Interface' ) }>
 							<PreferenceToggleControl
 								scope="core"
-								featureName="showIconLabels"
-								label={ __( 'Show button text labels' ) }
+								featureName="distractionFree"
+								onToggle={ () => {
+									setPreference(
+										'core',
+										'fixedToolbar',
+										true
+									);
+									setIsInserterOpened( false );
+									setIsListViewOpened( false );
+								} }
 								help={ __(
-									'Show text instead of icons on buttons across the interface.'
+									'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
 								) }
+								label={ __( 'Distraction free' ) }
 							/>
-						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'blocks',
-				tabLabel: __( 'Blocks' ),
-				content: (
-					<>
-						<PreferencesModalSection title={ __( 'Inserter' ) }>
 							<PreferenceToggleControl
 								scope="core"
-								featureName="mostUsedBlocks"
+								featureName="focusMode"
 								help={ __(
-									'Adds a category with the most frequently used blocks in the inserter.'
+									'Highlights the current block and fades other content.'
 								) }
-								label={ __( 'Show most used blocks' ) }
+								label={ __( 'Spotlight mode' ) }
 							/>
+							{ extraSections?.appearance }
 						</PreferencesModalSection>
-						<PreferencesModalSection
-							title={ __( 'Manage block visibility' ) }
-							description={ __(
-								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
-							) }
-						>
-							<BlockManager />
-						</PreferencesModalSection>
-					</>
-				),
-			},
-		],
+					),
+				},
+				{
+					name: 'accessibility',
+					tabLabel: __( 'Accessibility' ),
+					content: (
+						<>
+							<PreferencesModalSection
+								title={ __( 'Navigation' ) }
+								description={ __(
+									'Optimize the editing experience for enhanced control.'
+								) }
+							>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="keepCaretInsideBlock"
+									help={ __(
+										'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
+									) }
+									label={ __(
+										'Contain text cursor inside block'
+									) }
+								/>
+							</PreferencesModalSection>
+							<PreferencesModalSection
+								title={ __( 'Interface' ) }
+							>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="showIconLabels"
+									label={ __( 'Show button text labels' ) }
+									help={ __(
+										'Show text instead of icons on buttons across the interface.'
+									) }
+								/>
+							</PreferencesModalSection>
+						</>
+					),
+				},
+				{
+					name: 'blocks',
+					tabLabel: __( 'Blocks' ),
+					content: (
+						<>
+							<PreferencesModalSection title={ __( 'Inserter' ) }>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="mostUsedBlocks"
+									help={ __(
+										'Adds a category with the most frequently used blocks in the inserter.'
+									) }
+									label={ __( 'Show most used blocks' ) }
+								/>
+							</PreferencesModalSection>
+							<PreferencesModalSection
+								title={ __( 'Manage block visibility' ) }
+								description={ __(
+									"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
+								) }
+							>
+								<BlockManager />
+							</PreferencesModalSection>
+						</>
+					),
+				},
+				window.__experimentalMediaProcessing && {
+					name: 'media',
+					tabLabel: __( 'Media' ),
+					content: (
+						<>
+							<PreferencesModalSection
+								title={ __( 'General' ) }
+								description={ __(
+									'Customize options related to the media upload flow.'
+								) }
+							>
+								<PreferenceToggleControl
+									scope="core/media"
+									featureName="optimizeOnUpload"
+									help={ __(
+										'Compress media items before uploading to the server.'
+									) }
+									label={ __( 'Pre-upload compression' ) }
+								/>
+								<PreferenceToggleControl
+									scope="core/media"
+									featureName="requireApproval"
+									help={ __(
+										'Require approval step when optimizing existing media.'
+									) }
+									label={ __( 'Approval step' ) }
+								/>
+							</PreferencesModalSection>
+						</>
+					),
+				},
+			].filter( Boolean ),
 		[
 			showBlockBreadcrumbsOption,
 			extraSections,
@@ -272,6 +326,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 			setIsListViewOpened,
 			setPreference,
 			isLargeViewport,
+			hasStarterPatterns,
 		]
 	);
 

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

@@ -22,6 +22,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { ActionItem } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -39,14 +40,14 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const { getDeviceType, getCurrentPostType } = select( editorStore );
-		const { getUnstableBase, getPostType } = select( coreStore );
+		const { getEntityRecord, getPostType } = select( coreStore );
 		const { get } = select( preferencesStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const _currentPostType = getCurrentPostType();
 		return {
 			deviceType: getDeviceType(),
 			editorMode: __unstableGetEditorMode(),
-			homeUrl: getUnstableBase()?.home,
+			homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 			isTemplate: _currentPostType === 'wp_template',
 			isViewable: getPostType( _currentPostType )?.viewable ?? false,
 			showIconLabels: get( 'core', 'showIconLabels' ),
@@ -58,18 +59,18 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	/**
 	 * Save the original editing mode in a ref to restore it when we exit zoom out.
 	 */
-	const originalEditingMode = useRef( editorMode );
+	const originalEditingModeRef = useRef( editorMode );
 	useEffect( () => {
 		if ( editorMode !== 'zoom-out' ) {
-			originalEditingMode.current = editorMode;
+			originalEditingModeRef.current = editorMode;
 		}
 
 		return () => {
 			if (
 				editorMode === 'zoom-out' &&
-				editorMode !== originalEditingMode.current
+				editorMode !== originalEditingModeRef.current
 			) {
-				__unstableSetEditorMode( originalEditingMode.current );
+				__unstableSetEditorMode( originalEditingModeRef.current );
 			}
 		};
 	}, [ editorMode, __unstableSetEditorMode ] );
@@ -111,22 +112,24 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			label: __( 'Desktop' ),
 			icon: desktop,
 		},
-		{
+	];
+	if ( window.__experimentalEnableZoomOutExperiment ) {
+		choices.push( {
 			value: 'ZoomOut',
 			label: __( 'Desktop (50%)' ),
 			icon: desktop,
-		},
-		{
-			value: 'Tablet',
-			label: __( 'Tablet' ),
-			icon: tablet,
-		},
-		{
-			value: 'Mobile',
-			label: __( 'Mobile' ),
-			icon: mobile,
-		},
-	];
+		} );
+	}
+	choices.push( {
+		value: 'Tablet',
+		label: __( 'Tablet' ),
+		icon: tablet,
+	} );
+	choices.push( {
+		value: 'Mobile',
+		label: __( 'Mobile' ),
+		icon: mobile,
+	} );
 
 	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;
 
@@ -136,7 +139,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	 * @param {string} value The device type.
 	 */
 	const onSelect = ( value ) => {
-		let newEditorMode = originalEditingMode.current;
+		let newEditorMode = originalEditingModeRef.current;
 
 		if ( value === 'ZoomOut' ) {
 			newEditorMode = 'zoom-out';
@@ -206,6 +209,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 							/>
 						</MenuGroup>
 					) }
+					<ActionItem.Slot
+						name="core/plugin-preview-menu"
+						as={ MenuGroup }
+						fillProps={ { onClick: onClose } }
+					/>
 				</>
 			) }
 		</DropdownMenu>