@wordpress/editor 13.27.1 → 13.28.0

package/build-style/style.css

@@ -562,6 +562,11 @@
   font-size: 13px;
 }
 
+.entities-saved-states__change-summary {
+  color: #757575;
+  font-size: 12px;
+}
+
 .editor-error-boundary {
   margin: auto;
   max-width: 780px;
@@ -608,25 +613,28 @@
     width: 350px;
   }
 }
+.editor-list-view-sidebar .edit-post-editor__document-overview-panel__header {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+}
 .editor-list-view-sidebar .editor-list-view-sidebar__close-button {
-  position: absolute;
-  right: 8px;
-  top: 6px;
-  z-index: 1;
   background: #fff;
+  order: 1;
+  align-self: center;
+  margin-right: 8px;
 }
-.editor-list-view-sidebar .components-tab-panel__tabs {
-  border-bottom: 1px solid #ddd;
+
+.editor-list-view-sidebar__tabs-tablist {
   box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  padding-right: 56px;
+  flex-grow: 1;
 }
-.editor-list-view-sidebar .components-tab-panel__tabs .editor-list-view-sidebar__panel-tab {
+
+.editor-list-view-sidebar__tabs-tab {
   width: 50%;
   margin-bottom: -1px;
 }
-.editor-list-view-sidebar .components-tab-panel__tab-content {
+
+.editor-list-view-sidebar__tabs-tabpanel {
   height: calc(100% - 47px);
 }
 
@@ -806,19 +814,17 @@
 
 .editor-post-last-revision__title {
   width: 100%;
-  font-weight: 600;
-}
-.editor-post-last-revision__title .dashicon {
-  margin-right: 5px;
+  font-weight: 500;
 }
 
-.components-button.editor-post-last-revision__title {
+.editor-post-last-revision__title.components-button.has-icon {
   height: 100%;
+  justify-content: space-between;
 }
-.components-button.editor-post-last-revision__title:hover, .components-button.editor-post-last-revision__title:active {
+.editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active {
   background: #f0f0f0;
 }
-.components-button.editor-post-last-revision__title:focus {
+.editor-post-last-revision__title.components-button.has-icon:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 0;
 }
@@ -843,7 +849,7 @@
 
 .editor-post-panel__row {
   width: 100%;
-  min-height: 36px;
+  min-height: 40px;
   justify-content: flex-start !important;
   align-items: flex-start !important;
 }
@@ -851,14 +857,14 @@
 .editor-post-panel__row-label {
   width: 30%;
   flex-shrink: 0;
-  min-height: 36px;
+  min-height: 40px;
   display: flex;
   align-items: center;
 }
 
 .editor-post-panel__row-control {
   flex-grow: 1;
-  min-height: 36px;
+  min-height: 40px;
   display: flex;
   align-items: center;
 }
@@ -1014,7 +1020,7 @@
   flex: 1;
 }
 .post-publish-panel__postpublish-post-address-container input[readonly] {
-  padding: 16px;
+  padding: 12px;
   background: #f0f0f0;
   border-color: #ccc;
   overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.27.1",
+	"version": "13.28.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.50.0",
-		"@wordpress/api-fetch": "^6.47.0",
-		"@wordpress/blob": "^3.50.0",
-		"@wordpress/block-editor": "^12.18.1",
-		"@wordpress/blocks": "^12.27.1",
-		"@wordpress/commands": "^0.21.0",
-		"@wordpress/components": "^25.16.0",
-		"@wordpress/compose": "^6.27.0",
-		"@wordpress/core-data": "^6.27.1",
-		"@wordpress/data": "^9.20.0",
-		"@wordpress/date": "^4.50.0",
-		"@wordpress/deprecated": "^3.50.0",
-		"@wordpress/dom": "^3.50.0",
-		"@wordpress/element": "^5.27.0",
-		"@wordpress/hooks": "^3.50.0",
-		"@wordpress/html-entities": "^3.50.0",
-		"@wordpress/i18n": "^4.50.0",
-		"@wordpress/icons": "^9.41.0",
-		"@wordpress/keyboard-shortcuts": "^4.27.0",
-		"@wordpress/keycodes": "^3.50.0",
-		"@wordpress/media-utils": "^4.41.0",
-		"@wordpress/notices": "^4.18.0",
-		"@wordpress/patterns": "^1.11.1",
-		"@wordpress/preferences": "^3.27.0",
-		"@wordpress/private-apis": "^0.32.0",
-		"@wordpress/reusable-blocks": "^4.27.1",
-		"@wordpress/rich-text": "^6.27.0",
-		"@wordpress/server-side-render": "^4.27.1",
-		"@wordpress/url": "^3.51.0",
-		"@wordpress/wordcount": "^3.50.0",
+		"@wordpress/a11y": "^3.51.0",
+		"@wordpress/api-fetch": "^6.48.0",
+		"@wordpress/blob": "^3.51.0",
+		"@wordpress/block-editor": "^12.19.0",
+		"@wordpress/blocks": "^12.28.0",
+		"@wordpress/commands": "^0.22.0",
+		"@wordpress/components": "^26.0.0",
+		"@wordpress/compose": "^6.28.0",
+		"@wordpress/core-data": "^6.28.0",
+		"@wordpress/data": "^9.21.0",
+		"@wordpress/date": "^4.51.0",
+		"@wordpress/deprecated": "^3.51.0",
+		"@wordpress/dom": "^3.51.0",
+		"@wordpress/element": "^5.28.0",
+		"@wordpress/hooks": "^3.51.0",
+		"@wordpress/html-entities": "^3.51.0",
+		"@wordpress/i18n": "^4.51.0",
+		"@wordpress/icons": "^9.42.0",
+		"@wordpress/keyboard-shortcuts": "^4.28.0",
+		"@wordpress/keycodes": "^3.51.0",
+		"@wordpress/media-utils": "^4.42.0",
+		"@wordpress/notices": "^4.19.0",
+		"@wordpress/patterns": "^1.12.0",
+		"@wordpress/preferences": "^3.28.0",
+		"@wordpress/private-apis": "^0.33.0",
+		"@wordpress/reusable-blocks": "^4.28.0",
+		"@wordpress/rich-text": "^6.28.0",
+		"@wordpress/server-side-render": "^4.28.0",
+		"@wordpress/url": "^3.52.0",
+		"@wordpress/wordcount": "^3.51.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"memize": "^2.1.0",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c2f6d07ffab7d68b9ac3c423ce7e11af91f6e45e"
+	"gitHead": "eb796371e9630636a4a8837033807b0c4a06ed67"
 }

package/src/bindings/post-meta.js

@@ -10,12 +10,12 @@ import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '../store';
 
 export default {
-	name: 'post_meta',
+	name: 'core/post-meta',
 	label: __( 'Post Meta' ),
 	useSource( props, sourceAttributes ) {
 		const { getCurrentPostType } = useSelect( editorStore );
 		const { context } = props;
-		const { value: metaKey } = sourceAttributes;
+		const { key: metaKey } = sourceAttributes;
 		const postType = context.postType
 			? context.postType
 			: getCurrentPostType();

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

@@ -48,51 +48,37 @@ const icons = {
 };
 
 export default function DocumentBar() {
-	const {
-		isEditingTemplate,
-		templateId,
-		postType,
-		postId,
-		goBack,
-		getEditorSettings,
-	} = useSelect( ( select ) => {
-		const {
-			getRenderingMode,
-			getCurrentTemplateId,
-			getCurrentPostId,
-			getCurrentPostType,
-			getEditorSettings: getSettings,
-		} = select( editorStore );
-		const _templateId = getCurrentTemplateId();
-		const back = getSettings().goBack;
-		return {
-			isEditingTemplate:
-				!! _templateId && getRenderingMode() === 'template-only',
-			templateId: _templateId,
-			postType: getCurrentPostType(),
-			postId: getCurrentPostId(),
-			goBack: typeof back === 'function' ? back : undefined,
-			getEditorSettings: getSettings,
-		};
-	}, [] );
-
-	const { setRenderingMode } = useDispatch( editorStore );
+	const { postType, postId, onNavigateToPreviousEntityRecord } = useSelect(
+		( select ) => {
+			const {
+				getCurrentPostId,
+				getCurrentPostType,
+				getEditorSettings: getSettings,
+			} = select( editorStore );
+			return {
+				postType: getCurrentPostType(),
+				postId: getCurrentPostId(),
+				onNavigateToPreviousEntityRecord:
+					getSettings().onNavigateToPreviousEntityRecord,
+				getEditorSettings: getSettings,
+			};
+		},
+		[]
+	);
 
 	const handleOnBack = () => {
-		if ( isEditingTemplate ) {
-			setRenderingMode( getEditorSettings().defaultRenderingMode );
-			return;
-		}
-		if ( goBack ) {
-			goBack();
+		if ( onNavigateToPreviousEntityRecord ) {
+			onNavigateToPreviousEntityRecord();
 		}
 	};
 
 	return (
 		<BaseDocumentActions
-			postType={ isEditingTemplate ? 'wp_template' : postType }
-			postId={ isEditingTemplate ? templateId : postId }
-			onBack={ isEditingTemplate || goBack ? handleOnBack : undefined }
+			postType={ postType }
+			postId={ postId }
+			onBack={
+				onNavigateToPreviousEntityRecord ? handleOnBack : undefined
+			}
 		/>
 	);
 }

package/src/components/editor-canvas/edit-template-blocks-notification.js

@@ -27,14 +27,20 @@ import { store as editorStore } from '../../store';
  *                                                                  editor iframe canvas.
  */
 export default function EditTemplateBlocksNotification( { contentRef } ) {
-	const renderingMode = useSelect(
-		( select ) => select( editorStore ).getRenderingMode(),
-		[]
-	);
+	const { onNavigateToEntityRecord, templateId } = useSelect( ( select ) => {
+		const { getEditorSettings, getCurrentTemplateId } =
+			select( editorStore );
+
+		return {
+			onNavigateToEntityRecord:
+				getEditorSettings().onNavigateToEntityRecord,
+			templateId: getCurrentTemplateId(),
+		};
+	}, [] );
+
 	const { getNotices } = useSelect( noticesStore );
 
 	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
-	const { setRenderingMode } = useDispatch( editorStore );
 
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 
@@ -42,18 +48,17 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 
 	useEffect( () => {
 		const handleClick = async ( event ) => {
-			if ( renderingMode !== 'template-locked' ) {
-				return;
-			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
+
 			const isNoticeAlreadyShowing = getNotices().some(
 				( notice ) => notice.id === lastNoticeId.current
 			);
 			if ( isNoticeAlreadyShowing ) {
 				return;
 			}
+
 			const { notice } = await createInfoNotice(
 				__( 'Edit your template to edit this block.' ),
 				{
@@ -62,7 +67,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 					actions: [
 						{
 							label: __( 'Edit template' ),
-							onClick: () => setRenderingMode( 'template-only' ),
+							onClick: () =>
+								onNavigateToEntityRecord( {
+									postId: templateId,
+									postType: 'wp_template',
+								} ),
 						},
 					],
 				}
@@ -71,9 +80,6 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		};
 
 		const handleDblClick = ( event ) => {
-			if ( renderingMode !== 'template-locked' ) {
-				return;
-			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
@@ -90,7 +96,15 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			canvas?.removeEventListener( 'click', handleClick );
 			canvas?.removeEventListener( 'dblclick', handleDblClick );
 		};
-	}, [ lastNoticeId, renderingMode, contentRef.current ] );
+	}, [
+		lastNoticeId,
+		contentRef,
+		getNotices,
+		createInfoNotice,
+		onNavigateToEntityRecord,
+		templateId,
+		removeNotice,
+	] );
 
 	return (
 		<ConfirmDialog
@@ -98,7 +112,10 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			confirmButtonText={ __( 'Edit template' ) }
 			onConfirm={ () => {
 				setIsDialogOpen( false );
-				setRenderingMode( 'template-only' );
+				onNavigateToEntityRecord( {
+					postId: templateId,
+					postType: 'wp_template',
+				} );
 			} }
 			onCancel={ () => setIsDialogOpen( false ) }
 		>

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

@@ -35,6 +35,7 @@ const {
 	useLayoutClasses,
 	useLayoutStyles,
 	ExperimentalBlockCanvas: BlockCanvas,
+	useFlashEditableBlocks,
 } = unlock( blockEditorPrivateApis );
 
 const noop = () => {};
@@ -91,7 +92,7 @@ function EditorCanvas( {
 		wrapperBlockName,
 		wrapperUniqueId,
 		deviceType,
-		hasHistory,
+		showEditorPadding,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -138,7 +139,8 @@ function EditorCanvas( {
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 			deviceType: getDeviceType(),
-			hasHistory: !! editorSettings.goBack,
+			showEditorPadding:
+				!! editorSettings.onNavigateToPreviousEntityRecord,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -290,6 +292,9 @@ function EditorCanvas( {
 	const contentRef = useMergeRefs( [
 		localRef,
 		renderingMode === 'post-only' ? typewriterRef : noop,
+		useFlashEditableBlocks( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
 	] );
 
 	return (
@@ -302,7 +307,7 @@ function EditorCanvas( {
 			height="100%"
 			iframeProps={ {
 				className: classnames( 'editor-canvas__iframe', {
-					'has-history': hasHistory,
+					'has-editor-padding': showEditorPadding,
 				} ),
 				...iframeProps,
 				style: {
@@ -364,8 +369,7 @@ function EditorCanvas( {
 						'is-' + deviceType.toLowerCase() + '-preview',
 						renderingMode !== 'post-only'
 							? 'wp-site-blocks'
-							: `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules.
-						renderingMode !== 'all' && 'is-' + renderingMode
+							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 					) }
 					layout={ blockListLayout }
 					dropZoneElement={
@@ -376,8 +380,14 @@ function EditorCanvas( {
 							: localRef.current?.parentNode
 					}
 					renderAppender={ renderAppender }
+					__unstableDisableDropZone={
+						// In template preview mode, disable drop zones at the root of the template.
+						renderingMode === 'template-locked' ? true : false
+					}
 				/>
-				<EditTemplateBlocksNotification contentRef={ localRef } />
+				{ renderingMode === 'template-locked' && (
+					<EditTemplateBlocksNotification contentRef={ localRef } />
+				) }
 			</RecursionProvider>
 			{ children }
 		</BlockCanvas>

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

@@ -5,15 +5,18 @@ import { SnackbarList } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
+// Last three notices. Slices from the tail end of the list.
+const MAX_VISIBLE_NOTICES = -3;
+
 export default function EditorSnackbars() {
 	const notices = useSelect(
 		( select ) => select( noticesStore ).getNotices(),
 		[]
 	);
 	const { removeNotice } = useDispatch( noticesStore );
-	const snackbarNotices = notices.filter(
-		( { type } ) => type === 'snackbar'
-	);
+	const snackbarNotices = notices
+		.filter( ( { type } ) => type === 'snackbar' )
+		.slice( MAX_VISIBLE_NOTICES );
 
 	return (
 		<SnackbarList

package/src/components/entities-saved-states/entity-record-item.js

@@ -39,10 +39,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 			<CheckboxControl
 				__nextHasNoMarginBottom
 				label={
-					<strong>
-						{ decodeEntities( entityRecordTitle ) ||
-							__( 'Untitled' ) }
-					</strong>
+					decodeEntities( entityRecordTitle ) || __( 'Untitled' )
 				}
 				checked={ checked }
 				onChange={ onChange }

package/src/components/entities-saved-states/entity-type-list.js

@@ -30,7 +30,7 @@ function getEntityDescription( entity, count ) {
 			);
 		case 'page':
 		case 'post':
-			return __( 'The following content has been modified.' );
+			return __( 'The following has been modified.' );
 	}
 }
 
@@ -55,18 +55,15 @@ function GlobalStylesDescription( { record } ) {
 		}
 	);
 	return globalStylesChanges.length ? (
-		<>
-			<h3 className="entities-saved-states__description-heading">
-				{ __( 'Changes made to:' ) }
-			</h3>
-			<PanelRow>{ globalStylesChanges.join( ', ' ) }</PanelRow>
-		</>
+		<PanelRow className="entities-saved-states__change-summary">
+			{ globalStylesChanges.join( ', ' ) }.
+		</PanelRow>
 	) : null;
 }
 
 function EntityDescription( { record, count } ) {
 	if ( 'globalStyles' === record?.name ) {
-		return <GlobalStylesDescription record={ record } />;
+		return null;
 	}
 	const description = getEntityDescription( record?.name, count );
 	return description ? <PanelRow>{ description }</PanelRow> : null;
@@ -117,6 +114,9 @@ export default function EntityTypeList( {
 					/>
 				);
 			} ) }
+			{ 'globalStyles' === firstRecord?.name && (
+				<GlobalStylesDescription record={ firstRecord } />
+			) }
 		</PanelBody>
 	);
 }

package/src/components/entities-saved-states/index.js

@@ -2,9 +2,13 @@
  * WordPress dependencies
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useRef } from '@wordpress/element';
+import {
+	useCallback,
+	useRef,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
@@ -215,8 +219,17 @@ export function EntitiesSavedStatesExtensible( {
 				{ additionalPrompt }
 				<p>
 					{ isDirty
-						? __(
-								'The following changes have been made to your site, templates, and content.'
+						? createInterpolateElement(
+								sprintf(
+									/* translators: %d: number of site changes waiting to be saved. */
+									_n(
+										'There is <strong>%d site change</strong> waiting to be saved.',
+										'There are <strong>%d site changes</strong> waiting to be saved.',
+										sortedPartitionedSavables.length
+									),
+									sortedPartitionedSavables.length
+								),
+								{ strong: <strong /> }
 						  )
 						: __( 'Select the items you want to save.' ) }
 				</p>

package/src/components/entities-saved-states/style.scss

@@ -19,3 +19,8 @@
 .entities-saved-states__description-heading {
 	font-size: $default-font-size;
 }
+
+.entities-saved-states__change-summary {
+	color: $gray-700;
+	font-size: $helptext-font-size;
+}