@wordpress/editor 14.7.0 → 14.7.1-next.1f6eadc42.0

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

@@ -19,9 +19,7 @@ import { __ } from '@wordpress/i18n';
 import { desktop, mobile, tablet, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 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';
 
 /**
@@ -31,49 +29,21 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const {
-		deviceType,
-		editorMode,
-		homeUrl,
-		isTemplate,
-		isViewable,
-		showIconLabels,
-	} = useSelect( ( select ) => {
-		const { getDeviceType, getCurrentPostType } = select( editorStore );
-		const { getEntityRecord, getPostType } = select( coreStore );
-		const { get } = select( preferencesStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const _currentPostType = getCurrentPostType();
-		return {
-			deviceType: getDeviceType(),
-			editorMode: __unstableGetEditorMode(),
-			homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-			isTemplate: _currentPostType === 'wp_template',
-			isViewable: getPostType( _currentPostType )?.viewable ?? false,
-			showIconLabels: get( 'core', 'showIconLabels' ),
-		};
-	}, [] );
+	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
+		useSelect( ( select ) => {
+			const { getDeviceType, getCurrentPostType } = select( editorStore );
+			const { getEntityRecord, getPostType } = select( coreStore );
+			const { get } = select( preferencesStore );
+			const _currentPostType = getCurrentPostType();
+			return {
+				deviceType: getDeviceType(),
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+				isTemplate: _currentPostType === 'wp_template',
+				isViewable: getPostType( _currentPostType )?.viewable ?? false,
+				showIconLabels: get( 'core', 'showIconLabels' ),
+			};
+		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-
-	/**
-	 * Save the original editing mode in a ref to restore it when we exit zoom out.
-	 */
-	const originalEditingModeRef = useRef( editorMode );
-	useEffect( () => {
-		if ( editorMode !== 'zoom-out' ) {
-			originalEditingModeRef.current = editorMode;
-		}
-
-		return () => {
-			if (
-				editorMode === 'zoom-out' &&
-				editorMode !== originalEditingModeRef.current
-			) {
-				__unstableSetEditorMode( originalEditingModeRef.current );
-			}
-		};
-	}, [ editorMode, __unstableSetEditorMode ] );
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
@@ -112,44 +82,17 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			label: __( 'Desktop' ),
 			icon: desktop,
 		},
+		{
+			value: 'Tablet',
+			label: __( 'Tablet' ),
+			icon: tablet,
+		},
+		{
+			value: 'Mobile',
+			label: __( 'Mobile' ),
+			icon: mobile,
+		},
 	];
-	if ( window.__experimentalEnableZoomOutExperiment ) {
-		choices.push( {
-			value: 'ZoomOut',
-			label: __( 'Desktop (50%)' ),
-			icon: desktop,
-		} );
-	}
-	choices.push( {
-		value: 'Tablet',
-		label: __( 'Tablet' ),
-		icon: tablet,
-	} );
-	choices.push( {
-		value: 'Mobile',
-		label: __( 'Mobile' ),
-		icon: mobile,
-	} );
-
-	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;
-
-	/**
-	 * Handles the selection of a device type.
-	 *
-	 * @param {string} value The device type.
-	 */
-	const onSelect = ( value ) => {
-		let newEditorMode = originalEditingModeRef.current;
-
-		if ( value === 'ZoomOut' ) {
-			newEditorMode = 'zoom-out';
-			setDeviceType( 'Desktop' );
-		} else {
-			setDeviceType( value );
-		}
-
-		__unstableSetEditorMode( newEditorMode );
-	};
 
 	return (
 		<DropdownMenu
@@ -161,7 +104,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
-			text={ editorMode === 'zoom-out' ? __( '50%' ) : undefined }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>
@@ -170,8 +112,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 					<MenuGroup>
 						<MenuItemsChoice
 							choices={ choices }
-							value={ previewValue }
-							onSelect={ onSelect }
+							value={ deviceType }
+							onSelect={ setDeviceType }
 						/>
 					</MenuGroup>
 					{ isTemplate && (