@wordpress/editor 14.6.0 → 14.7.0

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -14,11 +14,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
 
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-
 function flattenBlocks( blocks ) {
 	const result = [];
 
@@ -65,9 +60,11 @@ function Image( block ) {
 
 export default function PostFormatPanel() {
 	const [ isUploading, setIsUploading ] = useState( false );
+	const [ isAnimating, setIsAnimating ] = useState( false );
+	const [ hadUploadError, setHadUploadError ] = useState( false );
 	const { editorBlocks, mediaUpload } = useSelect(
 		( select ) => ( {
-			editorBlocks: select( editorStore ).getEditorBlocks(),
+			editorBlocks: select( blockEditorStore ).getBlocks(),
 			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
 		} ),
 		[]
@@ -93,6 +90,7 @@ export default function PostFormatPanel() {
 
 	function uploadImages() {
 		setIsUploading( true );
+		setHadUploadError( false );
 		Promise.all(
 			externalImages.map( ( image ) =>
 				window
@@ -102,28 +100,30 @@ export default function PostFormatPanel() {
 							: image.attributes.url + '?'
 					)
 					.then( ( response ) => response.blob() )
-					.then(
-						( blob ) =>
-							new Promise( ( resolve, reject ) => {
-								mediaUpload( {
-									filesList: [ blob ],
-									onFileChange: ( [ media ] ) => {
-										if ( isBlobURL( media.url ) ) {
-											return;
-										}
+					.then( ( blob ) =>
+						new Promise( ( resolve, reject ) => {
+							mediaUpload( {
+								filesList: [ blob ],
+								onFileChange: ( [ media ] ) => {
+									if ( isBlobURL( media.url ) ) {
+										return;
+									}
 
-										updateBlockAttributes( image.clientId, {
-											id: media.id,
-											url: media.url,
-										} );
-										resolve();
-									},
-									onError() {
-										reject();
-									},
-								} );
-							} )
+									updateBlockAttributes( image.clientId, {
+										id: media.id,
+										url: media.url,
+									} );
+									resolve();
+								},
+								onError() {
+									reject();
+								},
+							} );
+						} ).then( () => setIsAnimating( true ) )
 					)
+					.catch( () => {
+						setHadUploadError( true );
+					} )
 			)
 		).finally( () => {
 			setIsUploading( false );
@@ -144,19 +144,27 @@ export default function PostFormatPanel() {
 					gap: '8px',
 				} }
 			>
-				<AnimatePresence>
+				<AnimatePresence
+					onExitComplete={ () => setIsAnimating( false ) }
+				>
 					{ externalImages.map( ( image ) => {
 						return <Image key={ image.clientId } { ...image } />;
 					} ) }
 				</AnimatePresence>
-				{ isUploading ? (
+				{ isUploading || isAnimating ? (
 					<Spinner />
 				) : (
-					<Button variant="primary" onClick={ uploadImages }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="primary"
+						onClick={ uploadImages }
+					>
 						{ __( 'Upload' ) }
 					</Button>
 				) }
 			</div>
+			{ hadUploadError && <p>{ __( 'Upload failed, try again.' ) }</p> }
 		</PanelBody>
 	);
 }

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

@@ -37,8 +37,9 @@
 
 .components-site-icon {
 	border: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	margin-right: $grid-unit-15;
+	flex-shrink: 0;
 
 	// Same size as in the Site menu.
 	height: 36px;
@@ -54,6 +55,7 @@
 	display: block;
 	color: $gray-700;
 	font-size: $helptext-font-size;
+	word-break: break-word;
 }
 
 .editor-post-publish-panel__header-publish-button,

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

@@ -171,7 +171,7 @@ export default function PostStatus() {
 					contentClassName="editor-change-status__content"
 					popoverProps={ popoverProps }
 					focusOnMount
-					renderToggle={ ( { onToggle } ) => (
+					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
 							variant="tertiary"
 							size="compact"
@@ -179,9 +179,10 @@ export default function PostStatus() {
 							icon={ postStatusesInfo[ status ]?.icon }
 							aria-label={ sprintf(
 								// translators: %s: Current post status.
-								__( 'Change post status: %s' ),
+								__( 'Change status: %s' ),
 								postStatusesInfo[ status ]?.label
 							) }
+							aria-expanded={ isOpen }
 						>
 							{ postStatusesInfo[ status ]?.label }
 						</Button>

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

@@ -428,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

@@ -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/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/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/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,

package/src/dataviews/actions/export-pattern.tsx

@@ -9,6 +9,7 @@ import { downloadZip } from 'client-zip';
  */
 import { downloadBlob } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
+import { download } from '@wordpress/icons';
 import type { Action } from '@wordpress/dataviews';
 
 /**
@@ -36,6 +37,7 @@ function getJsonFromItem( item: Pattern ) {
 const exportPattern: Action< Pattern > = {
 	id: 'export-pattern',
 	label: __( 'Export as JSON' ),
+	icon: download,
 	supportsBulk: true,
 	isEligible: ( item ) => item.type === 'wp_block',
 	callback: async ( items ) => {

package/src/dataviews/actions/permanently-delete-post.tsx

@@ -5,6 +5,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import type { Action } from '@wordpress/dataviews';
+import { trash } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,6 +17,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = {
 	id: 'permanently-delete',
 	label: __( 'Permanently delete' ),
 	supportsBulk: true,
+	icon: trash,
 	isEligible( item ) {
 		if ( isTemplateOrTemplatePart( item ) || item.type === 'wp_block' ) {
 			return false;

package/src/dataviews/actions/reset-post.tsx

@@ -114,6 +114,8 @@ const resetPost: Action< Post > = {
 				</Text>
 				<HStack justify="right">
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="tertiary"
 						onClick={ closeModal }
 						disabled={ isBusy }
@@ -122,6 +124,8 @@ const resetPost: Action< Post > = {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="primary"
 						onClick={ async () => {
 							setIsBusy( true );

package/src/dataviews/actions/trash-post.tsx

@@ -67,6 +67,8 @@ const trashPost: Action< PostWithPermissions > = {
 				</Text>
 				<HStack justify="right">
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="tertiary"
 						onClick={ closeModal }
 						disabled={ isBusy }
@@ -75,6 +77,8 @@ const trashPost: Action< PostWithPermissions > = {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="primary"
 						onClick={ async () => {
 							setIsBusy( true );