@wordpress/editor 14.4.0 → 14.6.0

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -6,14 +11,17 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
+	MenuItemsChoice,
 	VisuallyHidden,
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
+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';
 
 /**
  * Internal dependencies
@@ -22,21 +30,50 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
-		useSelect( ( select ) => {
-			const { getDeviceType, getCurrentPostType } = select( editorStore );
-			const { getUnstableBase, getPostType } = select( coreStore );
-			const { get } = select( preferencesStore );
-			const _currentPostType = getCurrentPostType();
-			return {
-				deviceType: getDeviceType(),
-				homeUrl: getUnstableBase()?.home,
-				isTemplate: _currentPostType === 'wp_template',
-				isViewable: getPostType( _currentPostType )?.viewable ?? false,
-				showIconLabels: get( 'core', 'showIconLabels' ),
-			};
-		}, [] );
+	const {
+		deviceType,
+		editorMode,
+		homeUrl,
+		isTemplate,
+		isViewable,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const { getDeviceType, getCurrentPostType } = select( editorStore );
+		const { getUnstableBase, getPostType } = select( coreStore );
+		const { get } = select( preferencesStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const _currentPostType = getCurrentPostType();
+		return {
+			deviceType: getDeviceType(),
+			editorMode: __unstableGetEditorMode(),
+			homeUrl: getUnstableBase()?.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 originalEditingMode = useRef( editorMode );
+	useEffect( () => {
+		if ( editorMode !== 'zoom-out' ) {
+			originalEditingMode.current = editorMode;
+		}
+
+		return () => {
+			if (
+				editorMode === 'zoom-out' &&
+				editorMode !== originalEditingMode.current
+			) {
+				__unstableSetEditorMode( originalEditingMode.current );
+			}
+		};
+	}, [ editorMode, __unstableSetEditorMode ] );
+
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
 		return null;
@@ -47,6 +84,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 	const toggleProps = {
 		className: 'editor-preview-dropdown__toggle',
+		iconPosition: 'right',
 		size: 'compact',
 		showTooltip: ! showIconLabels,
 		disabled,
@@ -57,42 +95,81 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	};
 
 	const deviceIcons = {
+		desktop,
 		mobile,
 		tablet,
-		desktop,
+	};
+
+	/**
+	 * The choices for the device type.
+	 *
+	 * @type {Array}
+	 */
+	const choices = [
+		{
+			value: 'Desktop',
+			label: __( 'Desktop' ),
+			icon: desktop,
+		},
+		{
+			value: 'ZoomOut',
+			label: __( 'Desktop (50%)' ),
+			icon: desktop,
+		},
+		{
+			value: 'Tablet',
+			label: __( 'Tablet' ),
+			icon: tablet,
+		},
+		{
+			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 = originalEditingMode.current;
+
+		if ( value === 'ZoomOut' ) {
+			newEditorMode = 'zoom-out';
+			setDeviceType( 'Desktop' );
+		} else {
+			setDeviceType( value );
+		}
+
+		__unstableSetEditorMode( newEditorMode );
 	};
 
 	return (
 		<DropdownMenu
-			className="editor-preview-dropdown"
+			className={ clsx(
+				'editor-preview-dropdown',
+				`editor-preview-dropdown--${ deviceType.toLowerCase() }`
+			) }
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			text={ editorMode === 'zoom-out' ? __( '50%' ) : undefined }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>
 			{ ( { onClose } ) => (
 				<>
 					<MenuGroup>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
-						>
-							{ __( 'Desktop' ) }
-						</MenuItem>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Tablet' ) }
-							icon={ deviceType === 'Tablet' && check }
-						>
-							{ __( 'Tablet' ) }
-						</MenuItem>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Mobile' ) }
-							icon={ deviceType === 'Mobile' && check }
-						>
-							{ __( 'Mobile' ) }
-						</MenuItem>
+						<MenuItemsChoice
+							choices={ choices }
+							value={ previewValue }
+							onSelect={ onSelect }
+						/>
 					</MenuGroup>
 					{ isTemplate && (
 						<MenuGroup>
@@ -118,6 +195,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 								className="editor-preview-dropdown__button-external"
 								role="menuitem"
 								forceIsAutosaveable={ forceIsAutosaveable }
+								aria-label={ __( 'Preview in new tab' ) }
 								textContent={
 									<>
 										{ __( 'Preview in new tab' ) }

package/src/components/preview-dropdown/style.scss

@@ -1,3 +1,8 @@
+.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
+	padding-right: 4px;
+	padding-left: 6px;
+}
+
 .editor-preview-dropdown__button-external {
 	width: 100%;
 	display: flex;

package/src/components/provider/disable-non-page-content-blocks.js

@@ -3,14 +3,19 @@
  */
 import { useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
-const DEFAULT_CONTENT_ONLY_BLOCKS = [
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const POST_CONTENT_BLOCK_TYPES = [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',
-	'core/template-part',
 ];
 
 /**
@@ -18,32 +23,30 @@ const DEFAULT_CONTENT_ONLY_BLOCKS = [
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
-	const contentOnlyBlocks = applyFilters(
-		'editor.postContentBlockTypes',
-		DEFAULT_CONTENT_ONLY_BLOCKS
+	const contentOnlyBlockTypes = useMemo(
+		() => [
+			...applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
+			),
+			'core/template-part',
+		],
+		[]
 	);
 
-	// Note that there are two separate subscription because the result for each
+	// Note that there are two separate subscriptions because the result for each
 	// returns a new array.
-	const contentOnlyIds = useSelect( ( select ) => {
-		const { getBlocksByName, getBlockParents, getBlockName } =
-			select( blockEditorStore );
-		return getBlocksByName( contentOnlyBlocks ).filter( ( clientId ) =>
-			getBlockParents( clientId ).every( ( parentClientId ) => {
-				const parentBlockName = getBlockName( parentClientId );
-				return (
-					// Ignore descendents of the query block.
-					parentBlockName !== 'core/query' &&
-					// Enable only the top-most block.
-					! contentOnlyBlocks.includes( parentBlockName )
-				);
-			} )
-		);
-	}, [] );
+	const contentOnlyIds = useSelect(
+		( select ) => {
+			const { getPostBlocksByName } = unlock( select( editorStore ) );
+			return getPostBlocksByName( contentOnlyBlockTypes );
+		},
+		[ contentOnlyBlockTypes ]
+	);
 	const disabledIds = useSelect( ( select ) => {
 		const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
-		return getBlocksByName( [ 'core/template-part' ] ).flatMap(
-			( clientId ) => getBlockOrder( clientId )
+		return getBlocksByName( 'core/template-part' ).flatMap( ( clientId ) =>
+			getBlockOrder( clientId )
 		);
 	}, [] );
 

package/src/components/save-publish-panels/style.scss

@@ -3,7 +3,7 @@
 .editor-layout__toggle-sidebar-panel,
 .editor-layout__toggle-entities-saved-states-panel {
 	z-index: z-index(".editor-layout__toggle-sidebar-panel");
-	position: fixed !important; // Need to override the default relative positionning
+	position: fixed !important; // Necessary to override the default relative positioning.
 	top: -9999em;
 	bottom: auto;
 	left: auto;
@@ -11,8 +11,8 @@
 	box-sizing: border-box;
 	width: $sidebar-width;
 	background-color: $white;
-	border: 1px dotted $gray-300;
-	height: auto !important; // Need to override the default sidebar positionnings
+	border: $border-width dotted $gray-300;
+	height: auto !important; // Necessary to override the default sidebar positioning.
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;

package/src/components/sidebar/post-summary.js

@@ -8,7 +8,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import PluginPostStatusInfo from '../plugin-post-status-info';
-import PostActions from '../post-actions';
 import PostAuthorPanel from '../post-author/panel';
 import PostCardPanel from '../post-card-panel';
 import PostContentInformation from '../post-content-information';
@@ -36,16 +35,23 @@ import { PrivatePostLastRevision } from '../post-last-revision';
 const PANEL_NAME = 'post-status';
 
 export default function PostSummary( { onActionPerformed } ) {
-	const { isRemovedPostStatusPanel } = 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, getCurrentPostType } =
-			select( editorStore );
-		return {
-			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
-			postType: getCurrentPostType(),
-		};
-	}, [] );
+	const { isRemovedPostStatusPanel, postType, postId } = 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,
+				getCurrentPostType,
+				getCurrentPostId,
+			} = select( editorStore );
+			return {
+				isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
+				postType: getCurrentPostType(),
+				postId: getCurrentPostId(),
+			};
+		},
+		[]
+	);
 
 	return (
 		<PostPanelSection className="editor-post-summary">
@@ -54,11 +60,9 @@ export default function PostSummary( { onActionPerformed } ) {
 					<>
 						<VStack spacing={ 4 }>
 							<PostCardPanel
-								actions={
-									<PostActions
-										onActionPerformed={ onActionPerformed }
-									/>
-								}
+								postType={ postType }
+								postId={ postId }
+								onActionPerformed={ onActionPerformed }
 							/>
 							<PostFeaturedImagePanel withPanelBody={ false } />
 							<PostExcerptPanel />

package/src/components/site-discussion/index.js

@@ -23,29 +23,17 @@ import { store as editorStore } from '../../store';
 
 const COMMENT_OPTIONS = [
 	{
-		label: (
-			<>
-				{ _x( 'Open', 'Adjective: e.g. "Comments are open"' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Visitors can add new comments and replies.' ) }
-				</Text>
-			</>
-		),
+		label: _x( 'Open', 'Adjective: e.g. "Comments are open"' ),
 		value: 'open',
+		description: __( 'Visitors can add new comments and replies.' ),
 	},
 	{
-		label: (
-			<>
-				{ __( 'Closed' ) }
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Visitors cannot add new comments or replies.' ) }
-				</Text>
-				<Text variant="muted" size={ 12 }>
-					{ __( 'Existing comments remain visible.' ) }
-				</Text>
-			</>
-		),
+		label: __( 'Closed' ),
 		value: '',
+		description: [
+			__( 'Visitors cannot add new comments or replies.' ),
+			__( 'Existing comments remain visible.' ),
+		].join( ' ' ),
 	},
 ];
 

package/src/components/site-discussion/style.scss

@@ -3,17 +3,3 @@
 	padding: $grid-unit-20;
 }
 
-.editor-site-discussion__options {
-	// TODO: it's not great to override component styles.. This might be resolved
-	// by the new radio control component.
-	.components-radio-control__option {
-		align-items: flex-start;
-	}
-
-	label {
-		.components-text {
-			display: block;
-			margin-top: $grid-unit-05;
-		}
-	}
-}

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,32 +18,51 @@ 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() {
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const { clientIds, postType, renderingMode } = 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
+	const postContentBlockTypes = useMemo(
+		() =>
+			applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
 			),
-			renderingMode: select( editorStore ).getRenderingMode(),
-		};
-	}, [] );
+		[]
+	);
+
+	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 ) {
+	if (
+		( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) ||
+		clientIds.length === 0
+	) {
 		return null;
 	}
 

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

@@ -107,6 +107,7 @@ function VisualEditor( {
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -341,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,9 +1,7 @@
 .editor-visual-editor {
 	position: relative;
-	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/dataviews/actions/duplicate-pattern.tsx

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import type { Pattern } from '../types';
+
+// Patterns.
+const { CreatePatternModalContents, useDuplicatePatternProps } =
+	unlock( patternsPrivateApis );
+
+const duplicatePattern: Action< Pattern > = {
+	id: 'duplicate-pattern',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type !== 'wp_template_part',
+	modalHeader: _x( 'Duplicate pattern', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const duplicatedProps = useDuplicatePatternProps( {
+			pattern: item,
+			onSuccess: () => closeModal?.(),
+		} );
+		return (
+			<CreatePatternModalContents
+				onClose={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				{ ...duplicatedProps }
+			/>
+		);
+	},
+};
+
+export default duplicatePattern;

package/src/dataviews/actions/duplicate-post.native.tsx

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