@wordpress/edit-post 6.3.10 → 6.6.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;
-	}
-
-	/**
-	 * 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;
-
-		@include break-small() {
-			margin-right: $grid-unit-15;
-		}
+		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
 	}
 
-	.editor-post-saved-state,
-	.components-button.is-tertiary {
-		padding: 0 #{ $grid-unit-15 * 0.5 };
-	}
+	gap: $grid-unit-05;
 
-	.interface-more-menu-dropdown .components-button,
-	.interface-pinned-items .components-button {
-		margin-right: 0;
+	@include break-small() {
+		gap: $grid-unit-10;
 	}
 }
 
@@ -98,12 +84,14 @@
 	}
 }
 
-.edit-post-post-preview-dropdown {
-	.components-popover__content > div {
-		padding-bottom: 0;
-	}
+.edit-post-post-preview-dropdown .components-popover__content {
+	padding-bottom: 0;
 }
 
+/**
+ * Show icon labels.
+ */
+
 .show-icon-labels.interface-pinned-items,
 .show-icon-labels .edit-post-header,
 .edit-post-header__dropdown {
@@ -157,17 +145,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/header/template-title/delete-template.js

@@ -48,6 +48,8 @@ export default function DeleteTemplate() {
 		templateTitle = template.title;
 	}
 
+	const isRevertable = template?.has_theme_file;
+
 	const onDelete = () => {
 		clearSelectedBlock();
 		setIsEditingTemplate( false );
@@ -77,14 +79,19 @@ export default function DeleteTemplate() {
 			<>
 				<MenuItem
 					className="edit-post-template-top-area__delete-template-button"
-					isDestructive
-					variant="secondary"
-					aria-label={ __( 'Delete template' ) }
+					isDestructive={ ! isRevertable }
 					onClick={ () => {
 						setShowConfirmDialog( true );
 					} }
+					info={
+						isRevertable
+							? __( 'Restore template to default state' )
+							: undefined
+					}
 				>
-					{ __( 'Delete template' ) }
+					{ isRevertable
+						? __( 'Clear customizations' )
+						: __( 'Delete template' ) }
 				</MenuItem>
 				<ConfirmDialog
 					isOpen={ showConfirmDialog }

package/src/components/header/template-title/edit-template-title.js

@@ -42,31 +42,33 @@ export default function EditTemplateTitle() {
 	}
 
 	return (
-		<TextControl
-			label={ __( 'Title' ) }
-			value={ templateTitle }
-			help={ __(
-				'Give the template a title that indicates its purpose, e.g. "Full Width".'
-			) }
-			onChange={ ( newTitle ) => {
-				const settings = getEditorSettings();
-				const newAvailableTemplates = mapValues(
-					settings.availableTemplates,
-					( existingTitle, id ) => {
-						if ( id !== template.slug ) {
-							return existingTitle;
+		<div className="edit-site-template-details__group">
+			<TextControl
+				label={ __( 'Title' ) }
+				value={ templateTitle }
+				help={ __(
+					'Give the template a title that indicates its purpose, e.g. "Full Width".'
+				) }
+				onChange={ ( newTitle ) => {
+					const settings = getEditorSettings();
+					const newAvailableTemplates = mapValues(
+						settings.availableTemplates,
+						( existingTitle, id ) => {
+							if ( id !== template.slug ) {
+								return existingTitle;
+							}
+							return newTitle;
 						}
-						return newTitle;
-					}
-				);
-				updateEditorSettings( {
-					...settings,
-					availableTemplates: newAvailableTemplates,
-				} );
-				editEntityRecord( 'postType', 'wp_template', template.id, {
-					title: newTitle,
-				} );
-			} }
-		/>
+					);
+					updateEditorSettings( {
+						...settings,
+						availableTemplates: newAvailableTemplates,
+					} );
+					editEntityRecord( 'postType', 'wp_template', template.id, {
+						title: newTitle,
+					} );
+				} }
+			/>
+		</div>
 	);
 }

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

@@ -49,7 +49,18 @@
 .edit-post-template-top-area__popover {
 	.components-popover__content {
 		min-width: 280px;
-		padding: $grid-unit-10;
+
+		> div {
+			padding: 0;
+		}
+	}
+
+	.edit-site-template-details__group {
+		padding: $grid-unit-20;
+
+		.components-base-control__help {
+			margin-bottom: 0;
+		}
 	}
 
 	.edit-post-template-details__description {
@@ -58,19 +69,29 @@
 }
 
 .edit-post-template-top-area__second-menu-group {
-	margin-left: -$grid-unit-20;
-	margin-right: -$grid-unit-20;
-	padding: $grid-unit-20;
-	padding-bottom: 0;
 	border-top: $border-width solid $gray-300;
+	padding: $grid-unit-20 $grid-unit-10;
 
 	.edit-post-template-top-area__delete-template-button {
 		display: flex;
 		justify-content: center;
+		padding: $grid-unit-05 $grid-unit;
+
+		&.is-destructive {
+			padding: inherit;
+			margin-left: $grid-unit-10;
+			margin-right: $grid-unit-10;
+			width: calc(100% - #{($grid-unit * 2)});
+
+			.components-menu-item__item {
+				width: auto;
+			}
+		}
 
 		.components-menu-item__item {
 			margin-right: 0;
 			min-width: 0;
+			width: 100%;
 		}
 	}
 }

package/src/components/header/template-title/template-description.js

@@ -23,8 +23,9 @@ export default function TemplateDescription() {
 	if ( ! description ) {
 		return null;
 	}
+
 	return (
-		<>
+		<div className="edit-site-template-details__group">
 			<Heading level={ 4 } weight={ 600 }>
 				{ title }
 			</Heading>
@@ -36,6 +37,6 @@ export default function TemplateDescription() {
 			>
 				{ description }
 			</Text>
-		</>
+		</div>
 	);
 }

package/src/components/layout/index.js

@@ -181,6 +181,7 @@ function Layout( { styles } ) {
 		if ( mode === 'visual' && isListViewOpened ) {
 			return <ListViewSidebar />;
 		}
+
 		return null;
 	};
 

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/preferences-modal/index.js

@@ -101,13 +101,6 @@ export default function EditPostPreferencesModal() {
 								'Customize options related to the block editor interface and editing flow.'
 							) }
 						>
-							<EnableFeature
-								featureName="reducedUI"
-								help={ __(
-									'Compacts options and outlines in the toolbar.'
-								) }
-								label={ __( 'Reduce the interface' ) }
-							/>
 							<EnableFeature
 								featureName="focusMode"
 								help={ __(
@@ -117,8 +110,24 @@ export default function EditPostPreferencesModal() {
 							/>
 							<EnableFeature
 								featureName="showIconLabels"
-								help={ __( 'Shows text instead of icons.' ) }
-								label={ __( 'Display button labels' ) }
+								label={ __( 'Show button text labels' ) }
+								help={ __(
+									'Show text instead of icons on buttons.'
+								) }
+							/>
+							<EnableFeature
+								featureName="showListViewByDefault"
+								help={ __(
+									'Opens the block list view sidebar by default.'
+								) }
+								label={ __( 'Always open list view' ) }
+							/>
+							<EnableFeature
+								featureName="reducedUI"
+								help={ __(
+									'Compacts options and outlines in the toolbar.'
+								) }
+								label={ __( 'Reduce the interface' ) }
 							/>
 							<EnableFeature
 								featureName="themeStyles"

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

@@ -22,11 +22,6 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
               description="Customize options related to the block editor interface and editing flow."
               title="Appearance"
             >
-              <WithSelect(WithDispatch(BaseOption))
-                featureName="reducedUI"
-                help="Compacts options and outlines in the toolbar."
-                label="Reduce the interface"
-              />
               <WithSelect(WithDispatch(BaseOption))
                 featureName="focusMode"
                 help="Highlights the current block and fades other content."
@@ -34,8 +29,18 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
               />
               <WithSelect(WithDispatch(BaseOption))
                 featureName="showIconLabels"
-                help="Shows text instead of icons."
-                label="Display button labels"
+                help="Show text instead of icons on buttons."
+                label="Show button text labels"
+              />
+              <WithSelect(WithDispatch(BaseOption))
+                featureName="showListViewByDefault"
+                help="Opens the block list view sidebar by default."
+                label="Always open list view"
+              />
+              <WithSelect(WithDispatch(BaseOption))
+                featureName="reducedUI"
+                help="Compacts options and outlines in the toolbar."
+                label="Reduce the interface"
               />
               <WithSelect(WithDispatch(BaseOption))
                 featureName="themeStyles"
@@ -148,11 +153,6 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
               description="Customize options related to the block editor interface and editing flow."
               title="Appearance"
             >
-              <WithSelect(WithDispatch(BaseOption))
-                featureName="reducedUI"
-                help="Compacts options and outlines in the toolbar."
-                label="Reduce the interface"
-              />
               <WithSelect(WithDispatch(BaseOption))
                 featureName="focusMode"
                 help="Highlights the current block and fades other content."
@@ -160,8 +160,18 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
               />
               <WithSelect(WithDispatch(BaseOption))
                 featureName="showIconLabels"
-                help="Shows text instead of icons."
-                label="Display button labels"
+                help="Show text instead of icons on buttons."
+                label="Show button text labels"
+              />
+              <WithSelect(WithDispatch(BaseOption))
+                featureName="showListViewByDefault"
+                help="Opens the block list view sidebar by default."
+                label="Always open list view"
+              />
+              <WithSelect(WithDispatch(BaseOption))
+                featureName="reducedUI"
+                help="Compacts options and outlines in the toolbar."
+                label="Reduce the interface"
               />
               <WithSelect(WithDispatch(BaseOption))
                 featureName="themeStyles"

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-schedule/index.js

@@ -18,7 +18,7 @@ export function PostSchedule() {
 			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
-					popoverProps={ { anchorRef: anchorRef.current } }
+					popoverProps={ { anchorRef } }
 					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
 					renderToggle={ ( { onToggle, isOpen } ) => (

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

@@ -13,8 +13,8 @@
 	text-align: right;
 }
 
-// Zero out a blanket padding that is set on the popover component.
+// Zero out a blanket padding that is set on the dropdown component.
 // The datetime component has its own padding.
-.edit-post-post-schedule__dialog .components-popover__content > div {
+.edit-post-post-schedule__dialog .components-popover__content {
 	padding: 0;
 }

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/sidebar/settings-header/style.scss

@@ -48,6 +48,6 @@
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
 	}
 }