@wordpress/edit-post 6.3.5 → 6.5.0

package/build-style/style.css

@@ -430,6 +430,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .interface-pinned-items {
   display: flex;
+  gap: 4px;
+  margin-right: -4px;
 }
 .interface-pinned-items .components-button:not(:first-child) {
   display: none;
@@ -440,7 +442,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .interface-pinned-items .components-button {
-  margin-left: 4px;
+  margin: 0;
 }
 .interface-pinned-items .components-button svg {
   max-width: 24px;
@@ -571,38 +573,26 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
+/**
+ * Buttons on the right side
+ */
 .edit-post-header__settings {
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
   padding-right: 4px;
-  /**
-   * Buttons in the Toolbar
-  	 */
+  gap: 4px;
 }
 @media (min-width: 600px) {
   .edit-post-header__settings {
-    padding-right: 16px;
+    padding-right: 10px;
   }
 }
-.edit-post-header__settings .editor-post-saved-state,
-.edit-post-header__settings .components-button.components-button {
-  margin-right: 4px;
-}
 @media (min-width: 600px) {
-  .edit-post-header__settings .editor-post-saved-state,
-.edit-post-header__settings .components-button.components-button {
-    margin-right: 12px;
+  .edit-post-header__settings {
+    gap: 8px;
   }
 }
-.edit-post-header__settings .editor-post-saved-state,
-.edit-post-header__settings .components-button.is-tertiary {
-  padding: 0 6px;
-}
-.edit-post-header__settings .interface-more-menu-dropdown .components-button,
-.edit-post-header__settings .interface-pinned-items .components-button {
-  margin-right: 0;
-}
 
 .edit-post-header-preview__grouping-external {
   display: flex;
@@ -625,6 +615,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding-bottom: 0;
 }
 
+/**
+ * Show icon labels.
+ */
 .show-icon-labels.interface-pinned-items .components-button.has-icon,
 .show-icon-labels .edit-post-header .components-button.has-icon,
 .edit-post-header__dropdown .components-button.has-icon {
@@ -697,22 +690,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     padding-right: 12px;
   }
 }
-.show-icon-labels.interface-pinned-items .components-dropdown-menu__toggle,
-.show-icon-labels .edit-post-header .components-dropdown-menu__toggle,
-.edit-post-header__dropdown .components-dropdown-menu__toggle {
-  margin-left: 8px;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-@media (min-width: 600px) {
-  .show-icon-labels.interface-pinned-items .components-dropdown-menu__toggle,
-.show-icon-labels .edit-post-header .components-dropdown-menu__toggle,
-.edit-post-header__dropdown .components-dropdown-menu__toggle {
-    margin-left: 12px;
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-}
 .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after,
 .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after,
 .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after {
@@ -1229,10 +1206,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   font-weight: 600;
 }
 
-.edit-post-block-manager__show-all {
-  margin-right: 8px;
-}
-
 .edit-post-block-manager__checklist {
   margin-top: 0;
 }
@@ -1512,36 +1485,8 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   width: 45%;
 }
 
-@media (min-width: 782px) {
-  .edit-post-post-visibility__dialog .components-popover__content {
-    width: 257px;
-  }
-}
-
-.edit-post-post-visibility__dialog-legend {
-  font-weight: 600;
-}
-
-.edit-post-post-visibility__choice {
-  margin: 10px 0;
-}
-
-.edit-post-post-visibility__dialog-radio,
-.edit-post-post-visibility__dialog-label {
-  vertical-align: top;
-}
-
-.edit-post-post-visibility__dialog-password-input {
-  width: calc(100% - 20px);
-  margin-left: 20px;
-}
-
-.edit-post-post-visibility__dialog-info {
-  color: #757575;
-  padding-left: 20px;
-  font-style: italic;
-  margin: 4px 0 0;
-  line-height: 1.4;
+.edit-post-post-visibility__dialog .components-popover__content {
+  width: 262px;
 }
 
 .components-button.edit-post-sidebar__panel-tab {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.3.5",
+	"version": "6.5.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.6.1",
-		"@wordpress/api-fetch": "^6.3.1",
-		"@wordpress/block-editor": "^8.5.4",
-		"@wordpress/block-library": "^7.3.5",
-		"@wordpress/blocks": "^11.5.3",
-		"@wordpress/components": "^19.8.3",
-		"@wordpress/compose": "^5.4.1",
-		"@wordpress/core-data": "^4.4.4",
-		"@wordpress/data": "^6.6.1",
-		"@wordpress/deprecated": "^3.6.1",
-		"@wordpress/editor": "^12.5.4",
-		"@wordpress/element": "^4.4.1",
-		"@wordpress/hooks": "^3.6.1",
-		"@wordpress/i18n": "^4.6.1",
-		"@wordpress/icons": "^8.2.2",
-		"@wordpress/interface": "^4.5.3",
-		"@wordpress/keyboard-shortcuts": "^3.4.1",
-		"@wordpress/keycodes": "^3.6.1",
-		"@wordpress/media-utils": "^3.4.1",
-		"@wordpress/notices": "^3.6.1",
-		"@wordpress/plugins": "^4.4.2",
-		"@wordpress/preferences": "^1.2.3",
-		"@wordpress/url": "^3.7.1",
-		"@wordpress/viewport": "^4.4.1",
-		"@wordpress/warning": "^2.6.1",
+		"@wordpress/a11y": "^3.8.0",
+		"@wordpress/api-fetch": "^6.5.0",
+		"@wordpress/block-editor": "^9.0.0",
+		"@wordpress/block-library": "^7.5.0",
+		"@wordpress/blocks": "^11.7.0",
+		"@wordpress/components": "^19.10.0",
+		"@wordpress/compose": "^5.6.0",
+		"@wordpress/core-data": "^4.6.0",
+		"@wordpress/data": "^6.8.0",
+		"@wordpress/deprecated": "^3.8.0",
+		"@wordpress/editor": "^12.7.0",
+		"@wordpress/element": "^4.6.0",
+		"@wordpress/hooks": "^3.8.0",
+		"@wordpress/i18n": "^4.8.0",
+		"@wordpress/icons": "^8.4.0",
+		"@wordpress/interface": "^4.7.0",
+		"@wordpress/keyboard-shortcuts": "^3.6.0",
+		"@wordpress/keycodes": "^3.8.0",
+		"@wordpress/media-utils": "^3.6.0",
+		"@wordpress/notices": "^3.8.0",
+		"@wordpress/plugins": "^4.6.0",
+		"@wordpress/preferences": "^2.0.0",
+		"@wordpress/url": "^3.9.0",
+		"@wordpress/viewport": "^4.6.0",
+		"@wordpress/warning": "^2.8.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7efc8349abd18322bd93f318269ed2eaba25bcd8"
+	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
 }

package/src/components/block-manager/style.scss

@@ -44,10 +44,6 @@
 	}
 }
 
-.edit-post-block-manager__show-all {
-	margin-right: $grid-unit-10;
-}
-
 .edit-post-block-manager__checklist {
 	margin-top: 0;
 }

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

@@ -6,7 +6,7 @@ import { Platform, ScrollView, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef, useState } from '@wordpress/element';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -40,7 +40,11 @@ function HeaderToolbar( {
 	getStylesFromColorScheme,
 	onHideKeyboard,
 	isRTL,
+	noContentSelected,
 } ) {
+	const wasNoContentSelected = useRef( noContentSelected );
+	const [ isInserterOpen, setIsInserterOpen ] = useState( false );
+
 	const scrollViewRef = useRef( null );
 	const scrollToStart = () => {
 		// scrollview doesn't seem to automatically adjust to RTL on Android so, scroll to end when Android
@@ -79,12 +83,32 @@ function HeaderToolbar( {
 		return isRTL ? buttons.reverse() : buttons;
 	};
 
+	const onToggleInserter = useCallback(
+		( isOpen ) => {
+			if ( isOpen ) {
+				wasNoContentSelected.current = noContentSelected;
+			}
+			setIsInserterOpen( isOpen );
+		},
+		[ noContentSelected ]
+	);
+
+	// Expanded mode should be preserved while the inserter is open.
+	// This way we prevent style updates during the opening transition.
+	const useExpandedMode = isInserterOpen
+		? wasNoContentSelected.current
+		: noContentSelected;
+
 	return (
 		<View
-			style={ getStylesFromColorScheme(
-				styles.container,
-				styles.containerDark
-			) }
+			style={ [
+				getStylesFromColorScheme(
+					styles[ 'header-toolbar__container' ],
+					styles[ 'header-toolbar__container--dark' ]
+				),
+				useExpandedMode &&
+					styles[ 'header-toolbar__container--expanded' ],
+			] }
 		>
 			<ScrollView
 				ref={ scrollViewRef }
@@ -93,14 +117,24 @@ function HeaderToolbar( {
 				showsHorizontalScrollIndicator={ false }
 				keyboardShouldPersistTaps="always"
 				alwaysBounceHorizontal={ false }
-				contentContainerStyle={ styles.scrollableContent }
+				contentContainerStyle={
+					styles[ 'header-toolbar__scrollable-content' ]
+				}
 			>
-				<Inserter disabled={ ! showInserter } />
+				<Inserter
+					disabled={ ! showInserter }
+					useExpandedMode={ useExpandedMode }
+					onToggle={ onToggleInserter }
+				/>
 				{ renderHistoryButtons() }
 				<BlockToolbar />
 			</ScrollView>
 			{ showKeyboardHideButton && (
-				<ToolbarGroup passedStyle={ styles.keyboardHideContainer }>
+				<ToolbarGroup
+					passedStyle={
+						styles[ 'header-toolbar__keyboard-hide-container' ]
+					}
+				>
 					<ToolbarButton
 						title={ __( 'Hide keyboard' ) }
 						icon={ keyboardClose }
@@ -121,8 +155,10 @@ export default compose( [
 			getBlockRootClientId,
 			getBlockSelectionEnd,
 			hasInserterItems,
+			hasSelectedBlock,
 		} = select( blockEditorStore );
 		const { getEditorSettings } = select( editorStore );
+		const isAnyBlockSelected = hasSelectedBlock();
 		return {
 			hasRedo: select( editorStore ).hasEditorRedo(),
 			hasUndo: select( editorStore ).hasEditorUndo(),
@@ -136,6 +172,7 @@ export default compose( [
 			isTextModeEnabled:
 				select( editPostStore ).getEditorMode() === 'text',
 			isRTL: select( blockEditorStore ).getSettings().isRTL,
+			noContentSelected: ! isAnyBlockSelected,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

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

@@ -1,5 +1,5 @@
 
-.container {
+.header-toolbar__container {
 	height: $mobile-header-toolbar-height;
 	flex-direction: row;
 	background-color: $app-background;
@@ -7,16 +7,20 @@
 	border-top-width: 1px;
 }
 
-.containerDark {
+.header-toolbar__container--dark {
 	background-color: $app-background-dark-alt;
 	border-top-color: $background-dark-elevated;
 }
 
-.scrollableContent {
+.header-toolbar__container--expanded {
+	height: $mobile-header-toolbar-expanded-height;
+}
+
+.header-toolbar__scrollable-content {
 	flex-grow: 1; // Fixes RTL issue on Android.
 }
 
-.keyboardHideContainer {
+.header-toolbar__keyboard-hide-container {
 	padding-right: 0;
 	padding-left: 0;
 	padding-top: 4px;

package/src/components/header/style.scss

@@ -44,6 +44,10 @@
 	}
 }
 
+/**
+ * Buttons on the right side
+ */
+
 .edit-post-header__settings {
 	display: inline-flex;
 	align-items: center;
@@ -51,31 +55,13 @@
 	padding-right: $grid-unit-05;
 
 	@include break-small () {
-		padding-right: $grid-unit-20;
+		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
 	}
 
-	/**
-	 * Buttons in the Toolbar
- 	 */
-
-	// Adjust button paddings to scale better to mobile.
-	.editor-post-saved-state,
-	.components-button.components-button {
-		margin-right: $grid-unit-05;
+	gap: $grid-unit-05;
 
-		@include break-small() {
-			margin-right: $grid-unit-15;
-		}
-	}
-
-	.editor-post-saved-state,
-	.components-button.is-tertiary {
-		padding: 0 #{ $grid-unit-15 * 0.5 };
-	}
-
-	.interface-more-menu-dropdown .components-button,
-	.interface-pinned-items .components-button {
-		margin-right: 0;
+	@include break-small() {
+		gap: $grid-unit-10;
 	}
 }
 
@@ -104,6 +90,10 @@
 	}
 }
 
+/**
+ * Show icon labels.
+ */
+
 .show-icon-labels.interface-pinned-items,
 .show-icon-labels .edit-post-header,
 .edit-post-header__dropdown {
@@ -157,17 +147,7 @@
 			padding-right: $grid-unit-15;
 		}
 	}
-	.components-dropdown-menu__toggle {
-		margin-left: $grid-unit;
-		padding-left: $grid-unit;
-		padding-right: $grid-unit;
 
-		@include break-small {
-			margin-left: $grid-unit-15;
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
-		}
-	}
 	// The inserter has a custom label, different from its aria-label, so we don't want to display both.
 	.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle {
 		&::after {

package/src/components/layout/index.native.js

@@ -115,14 +115,20 @@ class Layout extends Component {
 		// Add a margin view at the bottom for the header.
 		const marginBottom =
 			Platform.OS === 'android' && ! isHtmlView
-				? headerToolbarStyles.container.height
+				? headerToolbarStyles[ 'header-toolbar__container' ].height
 				: 0;
 
+		const containerStyles = getStylesFromColorScheme(
+			styles.container,
+			styles.containerDark
+		);
+
 		const toolbarKeyboardAvoidingViewStyle = {
 			...styles.toolbarKeyboardAvoidingView,
 			left: this.state.safeAreaInsets.left,
 			right: this.state.safeAreaInsets.right,
 			bottom: this.state.safeAreaInsets.bottom,
+			backgroundColor: containerStyles.backgroundColor,
 		};
 
 		const editorStyles = [
@@ -138,10 +144,7 @@ class Layout extends Component {
 		return (
 			<Tooltip.Slot>
 				<SafeAreaView
-					style={ getStylesFromColorScheme(
-						styles.container,
-						styles.containerDark
-					) }
+					style={ containerStyles }
 					onLayout={ this.onRootViewLayout }
 				>
 					<AutosaveMonitor disableIntervalChecks />

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

@@ -60,11 +60,7 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<ListView
-					showNestedBlocks
-					__experimentalFeatures
-					__experimentalPersistentListViewFeatures
-				/>
+				<ListView />
 			</div>
 		</div>
 	);

package/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -108,7 +108,6 @@ const PluginDocumentSettingPanel = compose(
 			warning( 'PluginDocumentSettingPanel requires a name property.' );
 		}
 		return {
-			icon: ownProps.icon || context.icon,
 			panelName: `${ context.name }/${ ownProps.name }`,
 		};
 	} ),

package/src/components/sidebar/post-visibility/index.js

@@ -8,12 +8,14 @@ import {
 	PostVisibilityLabel,
 	PostVisibilityCheck,
 } from '@wordpress/editor';
+import { useRef } from '@wordpress/element';
 
 export function PostVisibility() {
+	const rowRef = useRef();
 	return (
 		<PostVisibilityCheck
 			render={ ( { canEdit } ) => (
-				<PanelRow className="edit-post-post-visibility">
+				<PanelRow ref={ rowRef } className="edit-post-post-visibility">
 					<span>{ __( 'Visibility' ) }</span>
 					{ ! canEdit && (
 						<span>
@@ -24,6 +26,12 @@ export function PostVisibility() {
 						<Dropdown
 							position="bottom left"
 							contentClassName="edit-post-post-visibility__dialog"
+							popoverProps={ {
+								// Anchor the popover to the middle of the
+								// entire row so that it doesn't move around
+								// when the label changes.
+								anchorRef: rowRef.current,
+							} }
 							renderToggle={ ( { isOpen, onToggle } ) => (
 								<Button
 									aria-expanded={ isOpen }
@@ -34,7 +42,9 @@ export function PostVisibility() {
 									<PostVisibilityLabel />
 								</Button>
 							) }
-							renderContent={ () => <PostVisibilityForm /> }
+							renderContent={ ( { onClose } ) => (
+								<PostVisibilityForm onClose={ onClose } />
+							) }
 						/>
 					) }
 				</PanelRow>

package/src/components/sidebar/post-visibility/style.scss

@@ -9,34 +9,6 @@
 }
 
 .edit-post-post-visibility__dialog .components-popover__content {
-	@include break-medium {
-		// 279px (sidebar width) - 20px (padding) - 2px (horizontal borders)
-		width: 257px;
-	}
-}
-
-.edit-post-post-visibility__dialog-legend {
-	font-weight: 600;
-}
-
-.edit-post-post-visibility__choice {
-	margin: 10px 0;
-}
-
-.edit-post-post-visibility__dialog-radio,
-.edit-post-post-visibility__dialog-label {
-	vertical-align: top;
-}
-
-.edit-post-post-visibility__dialog-password-input {
-	width: calc(100% - 20px);
-	margin-left: 20px;
-}
-
-.edit-post-post-visibility__dialog-info {
-	color: $gray-700;
-	padding-left: 20px;
-	font-style: italic;
-	margin: 4px 0 0;
-	line-height: 1.4;
+	// sidebar width - padding - horizontal borders
+	width: $sidebar-width - $grid-unit-20 - $border-width * 2;
 }

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

@@ -29,7 +29,7 @@ import {
 	__unstableIframe as Iframe,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 } from '@wordpress/block-editor';
-import { useRef, useMemo } from '@wordpress/element';
+import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { Button, __unstableMotion as motion } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
@@ -85,11 +85,13 @@ function MaybeIframe( {
 export default function VisualEditor( { styles } ) {
 	const {
 		deviceType,
+		isWelcomeGuideVisible,
 		isTemplateMode,
 		wrapperBlockName,
 		wrapperUniqueId,
 	} = useSelect( ( select ) => {
 		const {
+			isFeatureActive,
 			isEditingTemplate,
 			__experimentalGetPreviewDeviceType,
 		} = select( editPostStore );
@@ -105,11 +107,13 @@ export default function VisualEditor( { styles } ) {
 
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
+			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 			isTemplateMode: _isTemplateMode,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 		};
 	}, [] );
+	const { isCleanNewPost } = useSelect( editorStore );
 	const hasMetaBoxes = useSelect(
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
@@ -186,6 +190,14 @@ export default function VisualEditor( { styles } ) {
 		return undefined;
 	}, [ isTemplateMode, themeSupportsLayout, defaultLayout ] );
 
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( isWelcomeGuideVisible || ! isCleanNewPost() ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ isWelcomeGuideVisible, isCleanNewPost ] );
+
 	return (
 		<BlockTools
 			__unstableContentRef={ ref }
@@ -240,7 +252,7 @@ export default function VisualEditor( { styles } ) {
 								className="edit-post-visual-editor__post-title-wrapper"
 								contentEditable={ false }
 							>
-								<PostTitle />
+								<PostTitle ref={ titleRef } />
 							</div>
 						) }
 						<RecursionProvider>

package/src/test/editor.native.js

@@ -25,10 +25,19 @@ const unsupportedBlock = `
 <!-- /wp:notablock -->
 `;
 
-jest.useFakeTimers( 'legacy' );
+beforeAll( () => {
+	jest.useFakeTimers( 'legacy' );
+} );
+
+afterAll( () => {
+	jest.runOnlyPendingTimers();
+	jest.useRealTimers();
+} );
 
 describe( 'Editor', () => {
-	beforeAll( registerCoreBlocks );
+	beforeAll( () => {
+		registerCoreBlocks();
+	} );
 
 	it( 'detects unsupported block and sends hasUnsupportedBlocks true to native', () => {
 		RNReactNativeGutenbergBridge.editorDidMount = jest.fn();