@wordpress/editor 14.6.0 → 14.7.0

package/src/bindings/post-meta.js

@@ -10,9 +10,6 @@ import { store as editorStore } from '../store';
 
 export default {
 	name: 'core/post-meta',
-	getPlaceholder( { args } ) {
-		return args.key;
-	},
 	getValues( { registry, context, bindings } ) {
 		const meta = registry
 			.select( coreDataStore )
@@ -23,7 +20,9 @@ export default {
 			)?.meta;
 		const newValues = {};
 		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
-			newValues[ attributeName ] = meta?.[ source.args.key ];
+			// Use the key if the value is not set.
+			newValues[ attributeName ] =
+				meta?.[ source.args.key ] || source.args.key;
 		}
 		return newValues;
 	},
@@ -53,13 +52,20 @@ export default {
 		}
 
 		// Check that the custom field is not protected and available in the REST API.
-		const isFieldExposed = !! select( coreDataStore ).getEntityRecord(
+		// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.
+		const fieldValue = select( coreDataStore ).getEntityRecord(
 			'postType',
 			postType,
 			context?.postId
 		)?.meta?.[ args.key ];
 
-		if ( ! isFieldExposed ) {
+		if ( fieldValue === undefined ) {
+			return false;
+		}
+		// Check that custom fields metabox is not enabled.
+		const areCustomFieldsEnabled =
+			select( editorStore ).getEditorSettings().enableCustomFields;
+		if ( areCustomFieldsEnabled ) {
 			return false;
 		}
 

package/src/components/block-manager/index.js

@@ -67,6 +67,8 @@ function BlockManager( {
 						numberOfHiddenBlocks
 					) }
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="link"
 						onClick={ () => enableAllBlockTypes( blockTypes ) }
 					>

package/src/components/block-settings-menu/content-only-settings-menu.js

@@ -10,7 +10,7 @@ import {
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalText as Text, MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -137,27 +137,23 @@ function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {
 	);
 	const blockDisplayInformation =
 		useBlockDisplayInformation( contentLockingParent );
-	// Disable reason: We're using a hook here so it has to be on top-level.
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-	const { modifyContentLockBlock, selectBlock } = unlock(
-		useDispatch( blockEditorStore )
-	);
-
+	const blockEditorActions = useDispatch( blockEditorStore );
 	if ( ! blockDisplayInformation?.title ) {
 		return null;
 	}
 
+	const { modifyContentLockBlock } = unlock( blockEditorActions );
+
 	return (
 		<>
 			<BlockSettingsMenuFirstItem>
 				<MenuItem
 					onClick={ () => {
-						selectBlock( contentLockingParent );
 						modifyContentLockBlock( contentLockingParent );
 						onClose();
 					} }
 				>
-					{ __( 'Unlock' ) }
+					{ _x( 'Unlock', 'Unlock content locked blocks' ) }
 				</MenuItem>
 			</BlockSettingsMenuFirstItem>
 			<Text

package/src/components/create-template-part-modal/style.scss

@@ -5,7 +5,7 @@
 .editor-create-template-part-modal__area-radio-group {
 	width: 100%;
 	border: $border-width solid $gray-700;
-	border-radius: 2px;
+	border-radius: $radius-small;
 
 	.components-button.editor-create-template-part-modal__area-radio {
 		display: block;

package/src/components/document-bar/index.js

@@ -120,9 +120,9 @@ export default function DocumentBar( props ) {
 	const title = props.title || entityTitle;
 	const icon = props.icon || templateIcon;
 
-	const mounted = useRef( false );
+	const mountedRef = useRef( false );
 	useEffect( () => {
-		mounted.current = true;
+		mountedRef.current = true;
 	}, [] );
 
 	return (
@@ -143,7 +143,7 @@ export default function DocumentBar( props ) {
 						} }
 						size="compact"
 						initial={
-							mounted.current
+							mountedRef.current
 								? { opacity: 0, transform: 'translateX(15%)' }
 								: false // Don't show entry animation when DocumentBar mounts.
 						}
@@ -170,7 +170,7 @@ export default function DocumentBar( props ) {
 						// Force entry animation when the back button is added or removed.
 						key={ hasBackButton }
 						initial={
-							mounted.current
+							mountedRef.current
 								? {
 										opacity: 0,
 										transform: hasBackButton

package/src/components/document-outline/style.scss

@@ -51,7 +51,7 @@
 	padding: 2px 5px 2px 1px;
 	color: $gray-900;
 	text-align: left;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&:disabled {
 		cursor: default;

package/src/components/editor-history/redo.js

@@ -25,6 +25,8 @@ function EditorHistoryRedo( props, ref ) {
 	const { redo } = useDispatch( editorStore );
 	return (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			{ ...props }
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }

package/src/components/editor-history/undo.js

@@ -21,6 +21,8 @@ function EditorHistoryUndo( props, ref ) {
 	const { undo } = useDispatch( editorStore );
 	return (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			{ ...props }
 			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }

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

@@ -99,7 +99,6 @@ export default function EditorInterface( {
 				select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
-	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
@@ -122,11 +121,10 @@ export default function EditorInterface( {
 	return (
 		<InterfaceSkeleton
 			enableRegionNavigation={ enableRegionNavigation }
-			isDistractionFree={ isDistractionFree && isWideViewport }
+			isDistractionFree={ isDistractionFree }
 			className={ clsx( 'editor-editor-interface', className, {
 				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
-				'is-distraction-free':
-					isDistractionFree && isWideViewport && ! isPreviewMode,
+				'is-distraction-free': isDistractionFree && ! isPreviewMode,
 			} ) }
 			labels={ {
 				...interfaceLabels,

package/src/components/error-boundary/index.js

@@ -29,7 +29,12 @@ function getContent() {
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
+			variant="secondary"
+			ref={ ref }
+		>
 			{ children }
 		</Button>
 	);

package/src/components/header/style.scss

@@ -228,7 +228,7 @@
 }
 
 .editor-header__post-preview-button {
-	@include break-small {
+	@include break-mobile {
 		display: none;
 	}
 }
@@ -240,10 +240,13 @@
 
 	.editor-header {
 		background-color: $white;
-		border-bottom: 1px solid #e0e0e0;
-		position: absolute;
 		width: 100%;
 
+		@include break-medium {
+			border-bottom: 1px solid #e0e0e0;
+			position: absolute;
+		}
+
 
 		// hide some parts
 		& > .edit-post-header__settings > .edit-post-header__post-preview-button {

package/src/components/index.js

@@ -32,6 +32,7 @@ export { default as PluginMoreMenuItem } from './plugin-more-menu-item';
 export { default as PluginPostPublishPanel } from './plugin-post-publish-panel';
 export { default as PluginPostStatusInfo } from './plugin-post-status-info';
 export { default as PluginPrePublishPanel } from './plugin-pre-publish-panel';
+export { default as PluginPreviewMenuItem } from './plugin-preview-menu-item';
 export { default as PluginSidebar } from './plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './plugin-sidebar-more-menu-item';
 export { default as PostTemplatePanel } from './post-template/panel';

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

@@ -38,13 +38,14 @@ export default function InserterSidebar() {
 			getBlockInsertionPoint,
 			getBlockRootClientId,
 			__unstableGetEditorMode,
-			getSettings,
-		} = select( blockEditorStore );
+			getSectionRootClientId,
+		} = unlock( select( blockEditorStore ) );
 		const { get } = select( preferencesStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const getBlockSectionRootClientId = () => {
 			if ( __unstableGetEditorMode() === 'zoom-out' ) {
-				const { sectionRootClientId } = unlock( getSettings() );
+				const sectionRootClientId = getSectionRootClientId();
+
 				if ( sectionRootClientId ) {
 					return sectionRootClientId;
 				}

package/src/components/local-autosave-monitor/index.js

@@ -144,20 +144,20 @@ function useAutosavePurge() {
 			[]
 		);
 
-	const lastIsDirty = useRef( isDirty );
-	const lastIsAutosaving = useRef( isAutosaving );
+	const lastIsDirtyRef = useRef( isDirty );
+	const lastIsAutosavingRef = useRef( isAutosaving );
 
 	useEffect( () => {
 		if (
 			! didError &&
-			( ( lastIsAutosaving.current && ! isAutosaving ) ||
-				( lastIsDirty.current && ! isDirty ) )
+			( ( lastIsAutosavingRef.current && ! isAutosaving ) ||
+				( lastIsDirtyRef.current && ! isDirty ) )
 		) {
 			localAutosaveClear( postId, isEditedPostNew );
 		}
 
-		lastIsDirty.current = isDirty;
-		lastIsAutosaving.current = isAutosaving;
+		lastIsDirtyRef.current = isDirty;
+		lastIsAutosavingRef.current = isAutosaving;
 	}, [ isDirty, isAutosaving, didError ] );
 
 	// Once the isEditedPostNew changes from true to false, let's clear the auto-draft autosave.

package/src/components/page-attributes/parent.js

@@ -222,10 +222,11 @@ function PostParentToggle( { isOpen, onClick } ) {
 }
 
 export function ParentRow() {
-	const homeUrl = useSelect(
-		( select ) => select( coreStore ).getUnstableBase()?.home,
-		[]
-	);
+	const homeUrl = useSelect( ( select ) => {
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
+	}, [] );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );

package/src/components/plugin-preview-menu-item/index.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { MenuItem } from '@wordpress/components';
+import { withPluginContext } from '@wordpress/plugins';
+import { ActionItem } from '@wordpress/interface';
+
+/**
+ * Renders a menu item in the Preview dropdown, which can be used as a button or link depending on the props provided.
+ * The text within the component appears as the menu item label.
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {string}                [props.href]                          When `href` is provided, the menu item is rendered as an anchor instead of a button. It corresponds to the `href` attribute of the anchor.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The icon to be rendered to the left of the menu item label. Can be a Dashicon slug or an SVG WP element.
+ * @param {Function}              [props.onClick]                       The callback function to be executed when the user clicks the menu item.
+ * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying MenuItem component.
+ *
+ * @example
+ * ```jsx
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPreviewMenuItem } from '@wordpress/editor';
+ * import { external } from '@wordpress/icons';
+ *
+ * function onPreviewClick() {
+ *   // Handle preview action
+ * }
+ *
+ * const ExternalPreviewMenuItem = () => (
+ *   <PreviewDropdownMenuItem
+ *     icon={ external }
+ *     onClick={ onPreviewClick }
+ *   >
+ *     { __( 'Preview in new tab' ) }
+ *   </PreviewDropdownMenuItem>
+ * );
+ * registerPlugin( 'external-preview-menu-item', {
+ *     render: ExternalPreviewMenuItem,
+ * } );
+ * ```
+ *
+ * @return {Component} The rendered menu item component.
+ */
+export default compose(
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			as: ownProps.as ?? MenuItem,
+			icon: ownProps.icon || context.icon,
+			name: 'core/plugin-preview-menu',
+		};
+	} )
+)( ActionItem );

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

@@ -18,13 +18,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { unlock } from '../../lock-unlock';
 import { usePostActions } from './actions';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	kebabCase,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2, kebabCase } = unlock( componentsPrivateApis );
 
 export default function PostActions( { postType, postId, onActionPerformed } ) {
 	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
@@ -60,7 +54,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 	}, [ allActions, itemWithPermissions ] );
 
 	return (
-		<DropdownMenu
+		<DropdownMenuV2
 			open={ isActionsMenuOpen }
 			trigger={
 				<Button
@@ -85,7 +79,7 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 					setIsActionsMenuOpen( false );
 				} }
 			/>
-		</DropdownMenu>
+		</DropdownMenuV2>
 	);
 }
 
@@ -99,12 +93,12 @@ function DropdownMenuItemTrigger( { action, onClick, items } ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
 	return (
-		<DropdownMenuItem
+		<DropdownMenuV2.Item
 			onClick={ onClick }
 			hideOnClick={ ! action.RenderModal }
 		>
-			<DropdownMenuItemLabel>{ label }</DropdownMenuItemLabel>
-		</DropdownMenuItem>
+			<DropdownMenuV2.ItemLabel>{ label }</DropdownMenuV2.ItemLabel>
+		</DropdownMenuV2.Item>
 	);
 }
 
@@ -151,7 +145,7 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 // With an added onClose prop.
 function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 	return (
-		<DropdownMenuGroup>
+		<DropdownMenuV2.Group>
 			{ actions.map( ( action ) => {
 				if ( action.RenderModal ) {
 					return (
@@ -173,6 +167,6 @@ function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
 					/>
 				);
 			} ) }
-		</DropdownMenuGroup>
+		</DropdownMenuV2.Group>
 	);
 }

package/src/components/post-card-panel/style.scss

@@ -46,7 +46,7 @@
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	font-size: 12px;
 	font-weight: 400;
 	flex-shrink: 0;

package/src/components/post-excerpt/panel.js

@@ -198,6 +198,8 @@ function PrivateExcerpt() {
 				ref={ setPopoverAnchor }
 				renderToggle={ ( { onToggle } ) => (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="editor-post-excerpt__dropdown__trigger"
 						onClick={ onToggle }
 						variant="link"

package/src/components/post-featured-image/index.js

@@ -160,6 +160,8 @@ function PostFeaturedImage( {
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									ref={ toggleRef }
 									className={
 										! featuredImageId
@@ -200,6 +202,8 @@ function PostFeaturedImage( {
 								{ !! featuredImageId && (
 									<HStack className="editor-post-featured-image__actions">
 										<Button
+											// TODO: Switch to `true` (40px size) if possible
+											__next40pxDefaultSize={ false }
 											className="editor-post-featured-image__action"
 											onClick={ open }
 											aria-haspopup="dialog"
@@ -207,6 +211,8 @@ function PostFeaturedImage( {
 											{ __( 'Replace' ) }
 										</Button>
 										<Button
+											// TODO: Switch to `true` (40px size) if possible
+											__next40pxDefaultSize={ false }
 											className="editor-post-featured-image__action"
 											onClick={ () => {
 												onRemoveImage();

package/src/components/post-featured-image/style.scss

@@ -22,7 +22,7 @@
 	}
 
 	.components-drop-zone__content {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 
 	// Align text and icons horizontally to avoid clipping when the featured image is not set.
@@ -65,7 +65,6 @@
 }
 
 .editor-post-featured-image__toggle {
-	border-radius: $radius-block-ui;
 	height: 100%;
 	line-height: 20px;
 	padding: $grid-unit-10 0;

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

@@ -100,6 +100,8 @@ export default function PostFormat() {
 				{ suggestion && suggestion.id !== postFormat && (
 					<p className="editor-post-format__suggestion">
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							variant="link"
 							onClick={ () =>
 								onUpdatePostFormat( suggestion.id )

package/src/components/post-last-revision/index.js

@@ -36,6 +36,8 @@ function PostLastRevision() {
 	return (
 		<PostLastRevisionCheck>
 			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				href={ addQueryArgs( 'revision.php', {
 					revision: lastRevisionId,
 				} ) }

package/src/components/post-locked-modal/index.js

@@ -178,6 +178,8 @@ export default function PostLockedModal() {
 			shouldCloseOnClickOutside={ false }
 			shouldCloseOnEsc={ false }
 			isDismissible={ false }
+			// Do not remove this class, as this class is used by third party plugins.
+			className="editor-post-locked-modal"
 			size="medium"
 		>
 			<HStack alignment="top" spacing={ 6 }>
@@ -254,11 +256,21 @@ export default function PostLockedModal() {
 						justify="flex-end"
 					>
 						{ ! isTakeover && (
-							<Button variant="tertiary" href={ unlockUrl }>
+							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
+								variant="tertiary"
+								href={ unlockUrl }
+							>
 								{ __( 'Take over' ) }
 							</Button>
 						) }
-						<Button variant="primary" href={ allPostsUrl }>
+						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
+							variant="primary"
+							href={ allPostsUrl }
+						>
 							{ allPostsLabel }
 						</Button>
 					</HStack>

package/src/components/post-locked-modal/style.scss

@@ -3,7 +3,7 @@
 }
 
 .editor-post-locked-modal__avatar {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-round;
 	margin-top: $grid-unit-20;
 	min-width: initial !important;
 }

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

@@ -78,6 +78,8 @@ export class PostPublishPanel extends Component {
 				<div className="editor-post-publish-panel__header">
 					{ isPostPublish ? (
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							onClick={ onClose }
 							icon={ closeSmall }
 							label={ __( 'Close panel' ) }

package/src/components/post-publish-panel/maybe-post-format-panel.js

@@ -25,6 +25,8 @@ const PostFormatSuggestion = ( {
 	onUpdatePostFormat,
 } ) => (
 	<Button
+		// TODO: Switch to `true` (40px size) if possible
+		__next40pxDefaultSize={ false }
 		variant="link"
 		onClick={ () => onUpdatePostFormat( suggestedPostFormat ) }
 	>