@wordpress/editor 14.5.0 → 14.7.0

package/src/components/post-status/style.scss

@@ -18,25 +18,6 @@
 		padding: $grid-unit-20;
 	}
 
-	.editor-change-status__options {
-		.components-base-control__field > .components-v-stack {
-			gap: $grid-unit-15;
-		}
-
-		// 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;
-			}
-		}
-	}
-
 	.editor-change-status__password-legend {
 		padding: 0;
 		margin-bottom: $grid-unit-10;

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -12,6 +12,7 @@ import {
 	withFilters,
 	Flex,
 	FlexItem,
+	SearchControl,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useDebounce } from '@wordpress/compose';
@@ -406,7 +407,8 @@ export function HierarchicalTermSelector( { slug } ) {
 	return (
 		<Flex direction="column" gap="4">
 			{ showFilter && (
-				<TextControl
+				<SearchControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ filterLabel }
 					value={ filterValue }
@@ -426,6 +428,8 @@ export function HierarchicalTermSelector( { slug } ) {
 			{ ! loading && hasCreateAction && (
 				<FlexItem>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						onClick={ onToggleForm }
 						className="editor-post-taxonomies__hierarchical-terms-add"
 						aria-expanded={ showForm }

package/src/components/post-taxonomies/most-used-terms.js

@@ -62,6 +62,8 @@ export default function MostUsedTerms( { onSelect, taxonomy } ) {
 				{ terms.map( ( term ) => (
 					<li key={ term.id }>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							variant="link"
 							onClick={ () => onSelect( term ) }
 						>

package/src/components/post-template/block-theme.js

@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -43,6 +44,8 @@ export default function BlockThemeControl( { id } ) {
 		};
 	}, [] );
 
+	const { get: getPreference } = useSelect( preferencesStore );
+
 	const { editedRecord: template, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_template',
@@ -75,6 +78,17 @@ export default function BlockThemeControl( { id } ) {
 				},
 		  ]
 		: undefined;
+
+	const mayShowTemplateEditNotice = () => {
+		if ( ! getPreference( 'core/edit-site', 'welcomeGuideTemplate' ) ) {
+			createSuccessNotice(
+				__(
+					'Editing template. Changes made here affect all posts and pages that use the template.'
+				),
+				{ type: 'snackbar', actions: notificationAction }
+			);
+		}
+	};
 	return (
 		<DropdownMenu
 			popoverProps={ POPOVER_PROPS }
@@ -99,15 +113,7 @@ export default function BlockThemeControl( { id } ) {
 										postType: 'wp_template',
 									} );
 									onClose();
-									createSuccessNotice(
-										__(
-											'Editing template. Changes made here affect all posts and pages that use the template.'
-										),
-										{
-											type: 'snackbar',
-											actions: notificationAction,
-										}
-									);
+									mayShowTemplateEditNotice();
 								} }
 							>
 								{ __( 'Edit template' ) }

package/src/components/post-template/classic-theme.js

@@ -177,6 +177,8 @@ function PostTemplateDropdownContent( { onClose } ) {
 			{ canEdit && onNavigateToEntityRecord && (
 				<p>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="link"
 						onClick={ () => {
 							onNavigateToEntityRecord( {

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

@@ -15,7 +15,6 @@ import { pasteHandler } from '@wordpress/blocks';
 import {
 	__unstableUseRichText as useRichText,
 	create,
-	toHTMLString,
 	insert,
 } from '@wordpress/rich-text';
 import { useMergeRefs } from '@wordpress/compose';
@@ -50,9 +49,35 @@ function PostTitle( _, forwardedRef ) {
 	const { clearSelectedBlock, insertBlocks, insertDefaultBlock } =
 		useDispatch( blockEditorStore );
 
-	function onChange( value ) {
-		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
-	}
+	const decodedPlaceholder =
+		decodeEntities( placeholder ) || __( 'Add title' );
+
+	const {
+		value,
+		onChange,
+		ref: richTextRef,
+	} = useRichText( {
+		value: title,
+		onChange( newValue ) {
+			onUpdate( newValue.replace( REGEXP_NEWLINES, ' ' ) );
+		},
+		placeholder: decodedPlaceholder,
+		selectionStart: selection.start,
+		selectionEnd: selection.end,
+		onSelectionChange( newStart, newEnd ) {
+			setSelection( ( sel ) => {
+				const { start, end } = sel;
+				if ( start === newStart && end === newEnd ) {
+					return sel;
+				}
+				return {
+					start: newStart,
+					end: newEnd,
+				};
+			} );
+		},
+		__unstableDisableFormats: false,
+	} );
 
 	function onInsertBlockAfter( blocks ) {
 		insertBlocks( blocks, 0 );
@@ -130,49 +155,14 @@ function PostTitle( _, forwardedRef ) {
 				onInsertBlockAfter( content );
 			}
 		} else {
-			const value = {
-				...create( { html: title } ),
-				...selection,
-			};
-
 			// Strip HTML to avoid unwanted HTML being added to the title.
 			// In the majority of cases it is assumed that HTML in the title
 			// is undesirable.
 			const contentNoHTML = stripHTML( content );
-
-			const newValue = insert( value, create( { html: contentNoHTML } ) );
-			onUpdate( toHTMLString( { value: newValue } ) );
-			setSelection( {
-				start: newValue.start,
-				end: newValue.end,
-			} );
+			onChange( insert( value, create( { html: contentNoHTML } ) ) );
 		}
 	}
 
-	const decodedPlaceholder =
-		decodeEntities( placeholder ) || __( 'Add title' );
-
-	const { ref: richTextRef } = useRichText( {
-		value: title,
-		onChange,
-		placeholder: decodedPlaceholder,
-		selectionStart: selection.start,
-		selectionEnd: selection.end,
-		onSelectionChange( newStart, newEnd ) {
-			setSelection( ( sel ) => {
-				const { start, end } = sel;
-				if ( start === newStart && end === newEnd ) {
-					return sel;
-				}
-				return {
-					start: newStart,
-					end: newEnd,
-				};
-			} );
-		},
-		__unstableDisableFormats: false,
-	} );
-
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
 	const className = clsx( DEFAULT_CLASSNAMES, {
@@ -192,7 +182,6 @@ function PostTitle( _, forwardedRef ) {
 				onFocus={ onSelect }
 				onBlur={ onUnselect }
 				onKeyDown={ onKeyDown }
-				onKeyPress={ onUnselect }
 				onPaste={ onPaste }
 			/>
 		</PostTypeSupportCheck>

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

@@ -3,7 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
-import { useState } from '@wordpress/element';
+import { useState, createInterpolateElement } from '@wordpress/element';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -83,14 +83,20 @@ export default function PostURL( { onClose } ) {
 			<VStack spacing={ 3 }>
 				{ isEditable && (
 					<div>
-						{ __( 'Customize the last part of the URL. ' ) }
-						<ExternalLink
-							href={ __(
-								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
-							) }
-						>
-							{ __( 'Learn more.' ) }
-						</ExternalLink>
+						{ createInterpolateElement(
+							__(
+								'Customize the last part of the URL. <a>Learn more.</a>'
+							),
+							{
+								a: (
+									<ExternalLink
+										href={ __(
+											'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
+										) }
+									/>
+								),
+							}
+						) }
 					</div>
 				) }
 				<div>
@@ -104,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/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>

package/src/components/provider/use-block-editor-settings.js

@@ -23,7 +23,7 @@ import {
 import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
-import { lock, unlock } from '../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
 
 const EMPTY_BLOCKS_LIST = [];
@@ -47,6 +47,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'allowedMimeTypes',
 	'bodyPlaceholder',
 	'canLockBlocks',
+	'canUpdateBlockBindings',
 	'capabilities',
 	'clearBlockSelection',
 	'codeEditingEnabled',
@@ -74,7 +75,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'postContentAttributes',
 	'postsPerPage',
 	'readOnly',
-	'sectionRootClientId',
 	'styles',
 	'titlePlaceholder',
 	'supportsLayout',
@@ -90,6 +90,7 @@ const {
 	globalStylesLinksDataKey,
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	sectionRootClientIdKey,
 } = unlock( privateApis );
 
 /**
@@ -325,10 +326,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
+			[ sectionRootClientIdKey ]: sectionRootClientId,
 		};
-		lock( blockEditorSettings, {
-			sectionRootClientId,
-		} );
+
 		return blockEditorSettings;
 	}, [
 		allowedBlockTypes,

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

@@ -16,7 +16,7 @@
 	cursor: ew-resize;
 	outline: none;
 	background: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-full;
 	border: 0;
 	height: 100px;
 
@@ -29,7 +29,7 @@
 		content: "";
 		width: $grid-unit-05;
 		background-color: rgba($gray-700, 0.4);
-		border-radius: $radius-block-ui;
+		border-radius: $radius-full;
 	}
 
 	&.is-left {

package/src/components/save-publish-panels/index.js

@@ -71,6 +71,8 @@ export default function SavePublishPanels( {
 		unmountableContent = (
 			<div className="editor-layout__toggle-publish-panel">
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					variant="secondary"
 					className="editor-layout__toggle-publish-panel-button"
 					onClick={ togglePublishSidebar }
@@ -84,6 +86,8 @@ export default function SavePublishPanels( {
 		unmountableContent = (
 			<div className="editor-layout__toggle-entities-saved-states-panel">
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					variant="secondary"
 					className="editor-layout__toggle-entities-saved-states-panel-button"
 					onClick={ openEntitiesSavedStates }

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/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/start-template-options/index.js

@@ -155,7 +155,12 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 				expanded={ false }
 			>
 				<FlexItem>
-					<Button variant="tertiary" onClick={ onClose }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="tertiary"
+						onClick={ onClose }
+					>
 						{ __( 'Skip' ) }
 					</Button>
 				</FlexItem>

package/src/components/table-of-contents/index.js

@@ -30,6 +30,8 @@ function TableOfContents(
 			contentClassName="table-of-contents__popover"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					{ ...props }
 					ref={ ref }
 					onClick={ hasBlocks ? onToggle : undefined }

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

@@ -59,7 +59,10 @@ export default function TemplateContentPanel() {
 
 	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/text-editor/index.js

@@ -40,6 +40,8 @@ export default function TextEditor( { autoFocus = false } ) {
 				<div className="editor-text-editor__toolbar">
 					<h2>{ __( 'Editing code' ) }</h2>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="tertiary"
 						onClick={ () => switchEditorMode( 'visual' ) }
 						shortcut={ shortcut }

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

@@ -128,8 +128,7 @@ function VisualEditor( {
 			getRenderingMode,
 			getDeviceType,
 		} = select( editorStore );
-		const { getPostType, canUser, getEditedEntityRecord } =
-			select( coreStore );
+		const { getPostType, getEditedEntityRecord } = select( coreStore );
 		const postTypeSlug = getCurrentPostType();
 		const _renderingMode = getRenderingMode();
 		let _wrapperBlockName;
@@ -143,10 +142,6 @@ function VisualEditor( {
 		const editorSettings = getEditorSettings();
 		const supportsTemplateMode = editorSettings.supportsTemplateMode;
 		const postTypeObject = getPostType( postTypeSlug );
-		const canEditTemplate = canUser( 'create', {
-			kind: 'postType',
-			name: 'wp_template',
-		} );
 		const currentTemplateId = getCurrentTemplateId();
 		const template = currentTemplateId
 			? getEditedEntityRecord(
@@ -163,9 +158,7 @@ function VisualEditor( {
 			// Post template fetch returns a 404 on classic themes, which
 			// messes with e2e tests, so check it's a block theme first.
 			editedPostTemplate:
-				postTypeObject?.viewable &&
-				supportsTemplateMode &&
-				canEditTemplate
+				postTypeObject?.viewable && supportsTemplateMode
 					? template
 					: undefined,
 			wrapperBlockName: _wrapperBlockName,