@wordpress/edit-post 7.11.0 → 7.12.1

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' );
@@ -27,7 +27,6 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		isPublishSidebarOpened,
 		isSaving,
 		showIconLabels,
-		isDistractionFreeMode,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -36,21 +35,17 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			isDistractionFreeMode:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 		} ),
 		[]
 	);
 
-	const isDistractionFree = isDistractionFreeMode && isLargeViewport;
-
 	const slideY = {
-		hidden: isDistractionFree ? { y: '-50' } : { y: 0 },
+		hidden: { y: '-50px' },
 		hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
 	};
 
 	const slideX = {
-		hidden: isDistractionFree ? { x: '-100%' } : { x: 0 },
+		hidden: { x: '-100%' },
 		hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
 	};
 
@@ -70,7 +65,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 }
@@ -89,12 +86,12 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 						showIconLabels={ showIconLabels }
 					/>
 				) }
-				<ViewLink />
 				<DevicePreview />
 				<PostPreviewButton
 					forceIsAutosaveable={ hasActiveMetaboxes }
 					forcePreviewLink={ isSaving ? null : undefined }
 				/>
+				<ViewLink />
 				<PostPublishButtonOrToggle
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }

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/header/writing-menu/index.js

@@ -25,26 +25,16 @@ function WritingMenu() {
 		[]
 	);
 
-	const blocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks(),
-		[]
-	);
-
 	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
 		useDispatch( postEditorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
-	const { selectBlock } = useDispatch( blockEditorStore );
-
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
 			setPreference( 'core/edit-post', 'fixedToolbar', false );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();
-			if ( ! isDistractionFree && !! blocks.length ) {
-				selectBlock( blocks[ 0 ].clientId );
-			}
 		} );
 	};
 

package/src/components/keyboard-shortcuts/index.js

@@ -184,7 +184,7 @@ function KeyboardShortcuts() {
 		} );
 
 		registerShortcut( {
-			name: `core/edit-post/transform-heading-to-paragraph`,
+			name: 'core/edit-post/transform-heading-to-paragraph',
 			category: 'block-library',
 			description: __( 'Transform heading to paragraph.' ),
 			keyCombination: {

package/src/components/preferences-modal/options/enable-custom-fields.js

@@ -31,8 +31,8 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 				} }
 			>
 				{ willEnable
-					? __( 'Enable & Reload' )
-					: __( 'Disable & Reload' ) }
+					? __( 'Show & Reload Page' )
+					: __( 'Hide & Reload Page' ) }
 			</Button>
 		</>
 	);

package/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap

@@ -100,7 +100,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
       class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
       type="button"
     >
-      Enable & Reload
+      Show & Reload Page
     </button>
   </div>
 </div>
@@ -303,7 +303,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
       class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
       type="button"
     >
-      Disable & Reload
+      Hide & Reload Page
     </button>
   </div>
 </div>

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

@@ -607,15 +607,21 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   border-radius: 2px;
 }
 
+.emotion-13 svg,
+.emotion-13 path {
+  fill: currentColor;
+}
+
 .emotion-13:hover {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
 .emotion-13:focus {
-  background-color: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: 3px solid transparent;
+  box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var(
+  				--wp-components-color-accent,
+  				var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) )
+  			);
+  outline: 2px solid transparent;
 }
 
 .emotion-15 {

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/sidebar/post-status/index.js

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
-import { PostSwitchToDraftButton } from '@wordpress/editor';
+import { PostSwitchToDraftButton, PostSyncStatus } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -51,6 +51,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 						<PostFormat />
 						<PostSlug />
 						<PostAuthor />
+						<PostSyncStatus />
 						{ fills }
 						<HStack
 							style={ {

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

@@ -23,26 +23,27 @@ import {
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	__unstableEditorStyles as EditorStyles,
 	useSetting,
-	__experimentalLayoutStyle as LayoutStyle,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	__unstableIframe as Iframe,
 	__experimentalRecursionProvider as RecursionProvider,
-	__experimentaluseLayoutClasses as useLayoutClasses,
-	__experimentaluseLayoutStyles as useLayoutStyles,
+	privateApis as blockEditorPrivateApis,
 } 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';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { LayoutStyle, useLayoutClasses, useLayoutStyles } = unlock(
+	blockEditorPrivateApis
+);
 
 const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
 
@@ -114,6 +115,7 @@ export default function VisualEditor( { styles } ) {
 		wrapperBlockName,
 		wrapperUniqueId,
 		isBlockBasedTheme,
+		hasV3BlocksOnly,
 	} = useSelect( ( select ) => {
 		const {
 			isFeatureActive,
@@ -123,6 +125,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 +156,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 +181,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 +353,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 +360,8 @@ export default function VisualEditor( { styles } ) {
 				>
 					<MaybeIframe
 						shouldIframe={
-							( isGutenbergPlugin &&
-								isBlockBasedTheme &&
+							( ( hasV3BlocksOnly ||
+								( isGutenbergPlugin && isBlockBasedTheme ) ) &&
 								! hasMetaBoxes ) ||
 							isTemplateMode ||
 							deviceType === 'Tablet' ||
@@ -383,11 +375,12 @@ export default function VisualEditor( { styles } ) {
 							! isTemplateMode && (
 								<>
 									<LayoutStyle
-										selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
+										selector=".edit-post-visual-editor__post-title-wrapper"
 										layout={ fallbackLayout }
-										layoutDefinitions={
-											globalLayoutSettings?.definitions
-										}
+									/>
+									<LayoutStyle
+										selector=".block-editor-block-list__layout.is-root-container"
+										layout={ blockListLayout }
 									/>
 									{ align && (
 										<LayoutStyle css={ alignCSS } />
@@ -396,9 +389,6 @@ export default function VisualEditor( { styles } ) {
 										<LayoutStyle
 											layout={ postContentLayout }
 											css={ postContentLayoutStyles }
-											layoutDefinitions={
-												globalLayoutSettings?.definitions
-											}
 										/>
 									) }
 								</>
@@ -428,7 +418,7 @@ export default function VisualEditor( { styles } ) {
 										? 'wp-site-blocks'
 										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
-								__experimentalLayout={ blockListLayout }
+								layout={ blockListLayout }
 							/>
 						</RecursionProvider>
 					</MaybeIframe>

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

@@ -50,19 +50,6 @@
 	margin-bottom: var(--wp--style--block-gap);
 }
 
-.edit-post-visual-editor__exit-template-mode {
-	position: absolute;
-	top: $grid-unit-10;
-	left: $grid-unit-10;
-	color: $white;
-
-	&:active:not([aria-disabled="true"]),
-	&:focus:not([aria-disabled="true"]),
-	&:hover {
-		color: $gray-100;
-	}
-}
-
 .edit-post-visual-editor__content-area {
 	width: 100%;
 	height: 100%;

package/src/editor.js

@@ -9,6 +9,7 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -23,9 +24,10 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 import Layout from './components/layout';
 import EditorInitialization from './components/editor-initialization';
 import { store as editPostStore } from './store';
-import { unlock } from './private-apis';
+import { unlock } from './lock-unlock';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
+const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
@@ -164,10 +166,29 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				presetStyles.push( style );
 			}
 		} );
+
 		const defaultEditorStyles = [
 			...settings.defaultEditorStyles,
 			...presetStyles,
 		];
+
+		// If theme styles are not present or displayed, ensure that
+		// base layout styles are still present in the editor.
+		if (
+			! settings.disableLayoutStyles &&
+			! ( hasThemeStyles && themeStyles.length )
+		) {
+			defaultEditorStyles.push( {
+				css: getLayoutStyles( {
+					style: {},
+					selector: 'body',
+					hasBlockGapSupport: false,
+					hasFallbackGapSupport: true,
+					fallbackGapValue: '0.5em',
+				} ),
+			} );
+		}
+
 		return hasThemeStyles && themeStyles.length
 			? settings.styles
 			: defaultEditorStyles;