@wordpress/edit-post 7.10.0 → 7.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.10.0",
+	"version": "7.12.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,38 +27,38 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.33.0",
-		"@wordpress/api-fetch": "^6.30.0",
-		"@wordpress/block-editor": "^12.1.0",
-		"@wordpress/block-library": "^8.10.0",
-		"@wordpress/blocks": "^12.10.0",
-		"@wordpress/commands": "^0.4.0",
-		"@wordpress/components": "^24.0.0",
-		"@wordpress/compose": "^6.10.0",
-		"@wordpress/core-commands": "^0.2.0",
-		"@wordpress/core-data": "^6.10.0",
-		"@wordpress/data": "^9.3.0",
-		"@wordpress/deprecated": "^3.33.0",
-		"@wordpress/dom": "^3.33.0",
-		"@wordpress/editor": "^13.10.0",
-		"@wordpress/element": "^5.10.0",
-		"@wordpress/hooks": "^3.33.0",
-		"@wordpress/i18n": "^4.33.0",
-		"@wordpress/icons": "^9.24.0",
-		"@wordpress/interface": "^5.10.0",
-		"@wordpress/keyboard-shortcuts": "^4.10.0",
-		"@wordpress/keycodes": "^3.33.0",
-		"@wordpress/media-utils": "^4.24.0",
-		"@wordpress/notices": "^4.1.0",
-		"@wordpress/plugins": "^6.1.0",
-		"@wordpress/preferences": "^3.10.0",
-		"@wordpress/private-apis": "^0.15.0",
-		"@wordpress/url": "^3.34.0",
-		"@wordpress/viewport": "^5.10.0",
-		"@wordpress/warning": "^2.33.0",
-		"@wordpress/widgets": "^3.10.0",
+		"@wordpress/a11y": "^3.35.0",
+		"@wordpress/api-fetch": "^6.32.0",
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/block-library": "^8.12.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/commands": "^0.6.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/compose": "^6.12.0",
+		"@wordpress/core-commands": "^0.4.0",
+		"@wordpress/core-data": "^6.12.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/deprecated": "^3.35.0",
+		"@wordpress/dom": "^3.35.0",
+		"@wordpress/editor": "^13.12.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/hooks": "^3.35.0",
+		"@wordpress/i18n": "^4.35.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/interface": "^5.12.0",
+		"@wordpress/keyboard-shortcuts": "^4.12.0",
+		"@wordpress/keycodes": "^3.35.0",
+		"@wordpress/media-utils": "^4.26.0",
+		"@wordpress/notices": "^4.3.0",
+		"@wordpress/plugins": "^6.3.0",
+		"@wordpress/preferences": "^3.12.0",
+		"@wordpress/private-apis": "^0.17.0",
+		"@wordpress/url": "^3.36.0",
+		"@wordpress/viewport": "^5.12.0",
+		"@wordpress/warning": "^2.35.0",
+		"@wordpress/widgets": "^3.12.0",
 		"classnames": "^2.3.1",
-		"memize": "^1.1.0",
+		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

package/src/components/header/document-title/index.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { BlockIcon, store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	Button,
+	VisuallyHidden,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { layout, chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
+import { store as commandsStore } from '@wordpress/commands';
+import { displayShortcut } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+function DocumentTitle() {
+	const { template, isEditing } = useSelect( ( select ) => {
+		const { isEditingTemplate, getEditedPostTemplate } =
+			select( editPostStore );
+		const _isEditing = isEditingTemplate();
+
+		return {
+			template: _isEditing ? getEditedPostTemplate() : null,
+			isEditing: _isEditing,
+		};
+	}, [] );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const { setIsEditingTemplate } = useDispatch( editPostStore );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+
+	if ( ! isEditing || ! template ) {
+		return null;
+	}
+
+	let templateTitle = __( 'Default' );
+	if ( template?.title ) {
+		templateTitle = template.title;
+	} else if ( !! template ) {
+		templateTitle = template.slug;
+	}
+
+	return (
+		<div className="edit-post-document-title">
+			<span className="edit-post-document-title__left">
+				<Button
+					onClick={ () => {
+						clearSelectedBlock();
+						setIsEditingTemplate( false );
+					} }
+					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+				>
+					{ __( 'Back' ) }
+				</Button>
+			</span>
+
+			<Button
+				className="edit-post-document-title__title"
+				onClick={ () => openCommandCenter() }
+			>
+				<HStack spacing={ 1 } justify="center">
+					<BlockIcon icon={ layout } />
+					<Text size="body" as="h1">
+						<VisuallyHidden as="span">
+							{ __( 'Editing template: ' ) }
+						</VisuallyHidden>
+						{ templateTitle }
+					</Text>
+				</HStack>
+			</Button>
+			<Button
+				className="edit-post-document-title__shortcut"
+				onClick={ () => openCommandCenter() }
+			>
+				{ displayShortcut.primary( 'k' ) }
+			</Button>
+		</div>
+	);
+}
+
+export default DocumentTitle;

package/src/components/header/document-title/style.scss

@@ -0,0 +1,61 @@
+.edit-post-document-title {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit;
+	height: $button-size;
+	justify-content: space-between;
+	// Flex items will, by default, refuse to shrink below a minimum
+	// intrinsic width. In order to shrink this flexbox item, and
+	// subsequently truncate child text, we set an explicit min-width.
+	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+	min-width: 0;
+	background: $gray-100;
+	border-radius: 4px;
+	width: min(100%, 450px);
+
+	&:hover {
+		color: currentColor;
+		background: $gray-200;
+	}
+}
+
+.edit-post-document-title__title.components-button {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+	}
+
+	h1 {
+		color: var(--wp-block-synced-color);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.edit-post-document-title__shortcut {
+	flex-shrink: 0;
+	color: $gray-700;
+	padding: 0 $grid-unit-15;
+
+	&:hover {
+		color: $gray-700;
+	}
+}
+
+.edit-post-document-title__left {
+	min-width: $button-size;
+	flex-shrink: 0;
+
+	.components-button.has-icon.has-text {
+		color: $gray-700;
+		gap: 0;
+
+		&:hover {
+			color: currentColor;
+		}
+	}
+}

package/src/components/header/header-toolbar/index.js

@@ -26,6 +26,8 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editPostStore } from '../../../store';
 import { unlock } from '../../../private-apis';
 
+const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
@@ -67,8 +69,6 @@ function HeaderToolbar() {
 		};
 	}, [] );
 
-	const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
-
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
 	const {

package/src/components/header/header-toolbar/style.scss

@@ -1,6 +1,5 @@
 .edit-post-header-toolbar {
 	display: inline-flex;
-	flex-grow: 1;
 	align-items: center;
 	border: none;
 

package/src/components/header/index.js

@@ -18,7 +18,7 @@ import { default as DevicePreview } from '../device-preview';
 import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
-import TemplateTitle from './template-title';
+import DocumentTitle from './document-title';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
 	const isLargeViewport = useViewportMatch( 'large' );
@@ -70,7 +70,9 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				className="edit-post-header__toolbar"
 			>
 				<HeaderToolbar />
-				<TemplateTitle />
+				<div className="edit-post-header__document-title">
+					<DocumentTitle />
+				</div>
 			</motion.div>
 			<motion.div
 				variants={ slideY }

package/src/components/header/style.scss

@@ -44,6 +44,12 @@
 	}
 }
 
+.edit-post-header__document-title {
+	flex-grow: 1;
+	display: flex;
+	justify-content: center;
+}
+
 /**
  * Buttons on the right side
  */

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -43,9 +43,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
         </svg>
       </button>
     </div>
-    <div
-      class="components-modal__children-container"
-    >
+    <div>
       <section
         class="edit-post-keyboard-shortcut-help-modal__section edit-post-keyboard-shortcut-help-modal__main-shortcuts"
       >

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -102,9 +102,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
         </svg>
       </button>
     </div>
-    <div
-      class="components-modal__children-container"
-    >
+    <div>
       <div
         class="interface-preferences__tabs"
       >
@@ -725,9 +723,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
         </svg>
       </button>
     </div>
-    <div
-      class="components-modal__children-container"
-    >
+    <div>
       <div
         class="components-navigator-provider interface-preferences__provider emotion-0 emotion-1"
         data-wp-c16t="true"

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import { Button, TabPanel } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
@@ -30,7 +25,9 @@ import ListViewOutline from './list-view-outline';
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editPostStore );
 
+	// This hook handles focus when the sidebar first renders.
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	// The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
 
@@ -41,17 +38,27 @@ export default function ListViewSidebar() {
 		}
 	}
 
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the dropZoneElement updates.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+	// Tracks our current tab.
 	const [ tab, setTab ] = useState( 'list-view' );
 
 	// This ref refers to the sidebar as a whole.
 	const sidebarRef = useRef();
-	// This ref refers to the list view tab button.
-	const listViewTabRef = useRef();
-	// This ref refers to the outline tab button.
-	const outlineTabRef = useRef();
+	// This ref refers to the tab panel.
+	const tabPanelRef = useRef();
 	// This ref refers to the list view application area.
 	const listViewRef = useRef();
 
+	// Must merge the refs together so focus can be handled properly in the next function.
+	const listViewContainerRef = useMergeRefs( [
+		contentFocusReturnRef,
+		focusOnMountRef,
+		listViewRef,
+		setDropZoneElement,
+	] );
+
 	/*
 	 * Callback function to handle list view or outline focus.
 	 *
@@ -60,9 +67,11 @@ export default function ListViewSidebar() {
 	 * @return void
 	 */
 	function handleSidebarFocus( currentTab ) {
+		// Tab panel focus.
+		const tabPanelFocus = focus.tabbable.find( tabPanelRef.current )[ 0 ];
 		// List view tab is selected.
 		if ( currentTab === 'list-view' ) {
-			// Either focus the list view or the list view tab button. Must have a fallback because the list view does not render when there are no blocks.
+			// Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
 			const listViewApplicationFocus = focus.tabbable.find(
 				listViewRef.current
 			)[ 0 ];
@@ -70,11 +79,11 @@ export default function ListViewSidebar() {
 				listViewApplicationFocus
 			)
 				? listViewApplicationFocus
-				: listViewTabRef.current;
+				: tabPanelFocus;
 			listViewFocusArea.focus();
 			// Outline tab is selected.
 		} else {
-			outlineTabRef.current.focus();
+			tabPanelFocus.focus();
 		}
 	}
 
@@ -93,6 +102,22 @@ export default function ListViewSidebar() {
 		}
 	} );
 
+	/**
+	 * Render tab content for a given tab name.
+	 *
+	 * @param {string} tabName The name of the tab to render.
+	 */
+	function renderTabContent( tabName ) {
+		if ( tabName === 'list-view' ) {
+			return (
+				<div className="edit-post-editor__list-view-panel-content">
+					<ListView dropZoneElement={ dropZoneElement } />
+				</div>
+			);
+		}
+		return <ListViewOutline />;
+	}
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -100,63 +125,40 @@ export default function ListViewSidebar() {
 			onKeyDown={ closeOnEscape }
 			ref={ sidebarRef }
 		>
-			<div
-				className="edit-post-editor__document-overview-panel-header components-panel__header edit-post-sidebar__panel-tabs"
+			<Button
+				className="edit-post-editor__document-overview-panel__close-button"
 				ref={ headerFocusReturnRef }
+				icon={ closeSmall }
+				label={ __( 'Close' ) }
+				onClick={ () => setIsListViewOpened( false ) }
+			/>
+			<TabPanel
+				className="edit-post-editor__document-overview-panel__tab-panel"
+				ref={ tabPanelRef }
+				onSelect={ ( tabName ) => setTab( tabName ) }
+				selectOnMove={ false }
+				tabs={ [
+					{
+						name: 'list-view',
+						title: 'List View',
+						className: 'edit-post-sidebar__panel-tab',
+					},
+					{
+						name: 'outline',
+						title: 'Outline',
+						className: 'edit-post-sidebar__panel-tab',
+					},
+				] }
 			>
-				<Button
-					icon={ closeSmall }
-					label={ __( 'Close' ) }
-					onClick={ () => setIsListViewOpened( false ) }
-				/>
-				<ul>
-					<li>
-						<Button
-							ref={ listViewTabRef }
-							onClick={ () => {
-								setTab( 'list-view' );
-							} }
-							className={ classnames(
-								'edit-post-sidebar__panel-tab',
-								{ 'is-active': tab === 'list-view' }
-							) }
-							aria-current={ tab === 'list-view' }
-						>
-							{ __( 'List View' ) }
-						</Button>
-					</li>
-					<li>
-						<Button
-							ref={ outlineTabRef }
-							onClick={ () => {
-								setTab( 'outline' );
-							} }
-							className={ classnames(
-								'edit-post-sidebar__panel-tab',
-								{ 'is-active': tab === 'outline' }
-							) }
-							aria-current={ tab === 'outline' }
-						>
-							{ __( 'Outline' ) }
-						</Button>
-					</li>
-				</ul>
-			</div>
-			<div
-				ref={ useMergeRefs( [
-					contentFocusReturnRef,
-					focusOnMountRef,
-					listViewRef,
-				] ) }
-				className="edit-post-editor__list-view-container"
-			>
-				{ tab === 'list-view' && (
-					<div className="edit-post-editor__list-view-panel-content">
-						<ListView />
+				{ ( currentTab ) => (
+					<div
+						className="edit-post-editor__list-view-container"
+						ref={ listViewContainerRef }
+					>
+						{ renderTabContent( currentTab.name ) }
 					</div>
 				) }
-				{ tab === 'outline' && <ListViewOutline /> }
-			</div>
+			</TabPanel>
 		</div>
 	);
 }

package/src/components/secondary-sidebar/style.scss

@@ -17,8 +17,29 @@
 		width: 350px;
 	}
 
-	.edit-post-sidebar__panel-tabs {
-		flex-direction: row-reverse;
+	.edit-post-editor__document-overview-panel__close-button {
+		position: absolute;
+		right: $grid-unit-10;
+		top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
+		z-index: 1;
+		background: $white;
+	}
+
+	// The TabPanel style overrides in the following blocks should be removed when the new TabPanel is available.
+	.components-tab-panel__tabs {
+		border-bottom: $border-width solid $gray-300;
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		padding-right: $grid-unit-70;
+
+		.edit-post-sidebar__panel-tab {
+			width: 50%;
+		}
+	}
+
+	.components-tab-panel__tab-content {
+		height: calc(100% - #{$grid-unit-60});
 	}
 }
 
@@ -37,34 +58,6 @@
 	}
 }
 
-.edit-post-editor__document-overview-panel-header {
-	border-bottom: $border-width solid $gray-300;
-	display: flex;
-	justify-content: space-between;
-	height: $grid-unit-60;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-05;
-	ul {
-		width: calc(100% - #{ $grid-unit-50 });
-	}
-	li {
-		width: 50%;
-		button {
-			width: 100%;
-			text-align: initial;
-		}
-	}
-	li:only-child {
-		width: 100%;
-	}
-
-	&.components-panel__header.edit-post-sidebar__panel-tabs {
-		.components-button.has-icon {
-			display: flex;
-		}
-	}
-}
-
 .edit-post-editor__list-view-panel-content,
 .edit-post-editor__list-view-container > .document-outline,
 .edit-post-editor__list-view-empty-headings {
@@ -118,5 +111,9 @@
 .edit-post-editor__list-view-container {
 	display: flex;
 	flex-direction: column;
-	height: calc(100% - #{$grid-unit-60});
+	height: 100%;
+}
+
+.edit-post-editor__document-overview-panel__tab-panel {
+	height: 100%;
 }

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

@@ -31,12 +31,10 @@ import {
 	__experimentaluseLayoutStyles as useLayoutStyles,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useMemo } from '@wordpress/element';
-import { Button, __unstableMotion as motion } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
-import { arrowLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { parse } from '@wordpress/blocks';
+import { parse, store as blocksStore } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -114,6 +112,7 @@ export default function VisualEditor( { styles } ) {
 		wrapperBlockName,
 		wrapperUniqueId,
 		isBlockBasedTheme,
+		hasV3BlocksOnly,
 	} = useSelect( ( select ) => {
 		const {
 			isFeatureActive,
@@ -123,6 +122,7 @@ export default function VisualEditor( { styles } ) {
 		} = select( editPostStore );
 		const { getCurrentPostId, getCurrentPostType, getEditorSettings } =
 			select( editorStore );
+		const { getBlockTypes } = select( blocksStore );
 		const _isTemplateMode = isEditingTemplate();
 		let _wrapperBlockName;
 
@@ -153,6 +153,9 @@ export default function VisualEditor( { styles } ) {
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
+			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
+				return type.apiVersion >= 3;
+			} ),
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -175,8 +178,6 @@ export default function VisualEditor( { styles } ) {
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
 		};
 	}, [] );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const desktopCanvasStyles = {
 		height: '100%',
 		width: '100%',
@@ -349,18 +350,6 @@ export default function VisualEditor( { styles } ) {
 				} }
 				ref={ blockSelectionClearerRef }
 			>
-				{ isTemplateMode && (
-					<Button
-						className="edit-post-visual-editor__exit-template-mode"
-						icon={ arrowLeft }
-						onClick={ () => {
-							clearSelectedBlock();
-							setIsEditingTemplate( false );
-						} }
-					>
-						{ __( 'Back' ) }
-					</Button>
-				) }
 				<motion.div
 					animate={ animatedStyles }
 					initial={ desktopCanvasStyles }
@@ -368,8 +357,8 @@ export default function VisualEditor( { styles } ) {
 				>
 					<MaybeIframe
 						shouldIframe={
-							( isGutenbergPlugin &&
-								isBlockBasedTheme &&
+							( ( hasV3BlocksOnly ||
+								( isGutenbergPlugin && isBlockBasedTheme ) ) &&
 								! hasMetaBoxes ) ||
 							isTemplateMode ||
 							deviceType === 'Tablet' ||