@wordpress/edit-post 6.5.0 → 6.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.5.0",
+	"version": "6.6.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.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",
+		"@wordpress/a11y": "^3.9.0",
+		"@wordpress/api-fetch": "^6.6.0",
+		"@wordpress/block-editor": "^9.1.0",
+		"@wordpress/block-library": "^7.6.0",
+		"@wordpress/blocks": "^11.8.0",
+		"@wordpress/components": "^19.11.0",
+		"@wordpress/compose": "^5.7.0",
+		"@wordpress/core-data": "^4.7.0",
+		"@wordpress/data": "^6.9.0",
+		"@wordpress/deprecated": "^3.9.0",
+		"@wordpress/editor": "^12.8.0",
+		"@wordpress/element": "^4.7.0",
+		"@wordpress/hooks": "^3.9.0",
+		"@wordpress/i18n": "^4.9.0",
+		"@wordpress/icons": "^9.0.0",
+		"@wordpress/interface": "^4.8.0",
+		"@wordpress/keyboard-shortcuts": "^3.7.0",
+		"@wordpress/keycodes": "^3.9.0",
+		"@wordpress/media-utils": "^4.0.0",
+		"@wordpress/notices": "^3.9.0",
+		"@wordpress/plugins": "^4.7.0",
+		"@wordpress/preferences": "^2.1.0",
+		"@wordpress/url": "^3.10.0",
+		"@wordpress/viewport": "^4.7.0",
+		"@wordpress/warning": "^2.9.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
+	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
 }

package/src/components/device-preview/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -7,6 +12,7 @@ import { external } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -18,18 +24,23 @@ export default function DevicePreview() {
 		hasActiveMetaboxes,
 		isPostSaveable,
 		isSaving,
+		isViewable,
 		deviceType,
-	} = useSelect(
-		( select ) => ( {
+	} = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
+
+		return {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
 			isPostSaveable: select( editorStore ).isEditedPostSaveable(),
+			isViewable: get( postType, [ 'viewable' ], false ),
 			deviceType: select(
 				editPostStore
 			).__experimentalGetPreviewDeviceType(),
-		} ),
-		[]
-	);
+		};
+	}, [] );
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 	} = useDispatch( editPostStore );
@@ -41,24 +52,26 @@ export default function DevicePreview() {
 			deviceType={ deviceType }
 			setDeviceType={ setPreviewDeviceType }
 		>
-			<MenuGroup>
-				<div className="edit-post-header-preview__grouping-external">
-					<PostPreviewButton
-						className={
-							'edit-post-header-preview__button-external'
-						}
-						role="menuitem"
-						forceIsAutosaveable={ hasActiveMetaboxes }
-						forcePreviewLink={ isSaving ? null : undefined }
-						textContent={
-							<>
-								{ __( 'Preview in new tab' ) }
-								<Icon icon={ external } />
-							</>
-						}
-					/>
-				</div>
-			</MenuGroup>
+			{ isViewable && (
+				<MenuGroup>
+					<div className="edit-post-header-preview__grouping-external">
+						<PostPreviewButton
+							className={
+								'edit-post-header-preview__button-external'
+							}
+							role="menuitem"
+							forceIsAutosaveable={ hasActiveMetaboxes }
+							forcePreviewLink={ isSaving ? null : undefined }
+							textContent={
+								<>
+									{ __( 'Preview in new tab' ) }
+									<Icon icon={ external } />
+								</>
+							}
+						/>
+					</div>
+				</MenuGroup>
+			) }
 		</PreviewOptions>
 	);
 }

package/src/components/header/style.scss

@@ -84,10 +84,8 @@
 	}
 }
 
-.edit-post-post-preview-dropdown {
-	.components-popover__content > div {
-		padding-bottom: 0;
-	}
+.edit-post-post-preview-dropdown .components-popover__content {
+	padding-bottom: 0;
 }
 
 /**

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

@@ -29,7 +29,8 @@ export default function EditTemplateTitle() {
 	const { getEditorSettings } = useSelect( editorStore );
 	const { updateEditorSettings } = useDispatch( editorStore );
 
-	if ( template.has_theme_file ) {
+	// Only user-created and non-default templates can change the name.
+	if ( ! template.is_custom || template.has_theme_file ) {
 		return null;
 	}
 
@@ -41,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/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/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/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);
 	}
 }

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

@@ -8,30 +8,34 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { Button } from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
-import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
 
-function TextEditor( { onExit, isRichEditingEnabled } ) {
+export default function TextEditor() {
+	const isRichEditingEnabled = useSelect( ( select ) => {
+		return select( editorStore ).getEditorSettings().richEditingEnabled;
+	}, [] );
+	const { switchEditorMode } = useDispatch( editPostStore );
+
 	return (
 		<div className="edit-post-text-editor">
+			<TextEditorGlobalKeyboardShortcuts />
 			{ isRichEditingEnabled && (
 				<div className="edit-post-text-editor__toolbar">
 					<h2>{ __( 'Editing code' ) }</h2>
 					<Button
 						variant="tertiary"
-						onClick={ onExit }
+						onClick={ () => switchEditorMode( 'visual' ) }
 						shortcut={ displayShortcut.secondary( 'm' ) }
 					>
 						{ __( 'Exit code editor' ) }
 					</Button>
-					<TextEditorGlobalKeyboardShortcuts />
 				</div>
 			) }
 			<div className="edit-post-text-editor__body">
@@ -41,17 +45,3 @@ function TextEditor( { onExit, isRichEditingEnabled } ) {
 		</div>
 	);
 }
-
-export default compose(
-	withSelect( ( select ) => ( {
-		isRichEditingEnabled: select( editorStore ).getEditorSettings()
-			.richEditingEnabled,
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		return {
-			onExit() {
-				dispatch( editPostStore ).switchEditorMode( 'visual' );
-			},
-		};
-	} )
-)( TextEditor );

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

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { initializeEditor, fireEvent } from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+const initialHtml = `
+<!-- wp:paragraph -->
+<p>First example paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second example paragraph.</p>
+<!-- /wp:paragraph -->
+`;
+
+describe( 'when title is focused', () => {
+	it( 'new blocks are inserted after the title', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Focus first block
+		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 1/ ) );
+
+		// Focus title
+		fireEvent(
+			screen.getAllByA11yLabel( 'Post title. test' )[ 0 ],
+			'select'
+		);
+
+		// Add new Heading block
+		fireEvent.press( screen.getByA11yLabel( 'Add block' ) );
+		fireEvent.press( screen.getByText( 'Heading' ) );
+
+		expect( screen.getByA11yLabel( /Heading Block. Row 1/ ) ).toBeDefined();
+		expect(
+			screen.getByA11yLabel( /Paragraph Block. Row 2/ )
+		).toBeDefined();
+		expect(
+			screen.getByA11yLabel( /Paragraph Block. Row 3/ )
+		).toBeDefined();
+	} );
+} );
+
+describe( 'when title is no longer focused', () => {
+	it( 'new blocks are inserted after the currently focused block', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Focus first block
+		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 1/ ) );
+
+		// Focus title
+		fireEvent(
+			screen.getAllByA11yLabel( 'Post title. test' )[ 0 ],
+			'select'
+		);
+
+		// Focus last block
+		fireEvent.press( screen.getByA11yLabel( /Paragraph Block. Row 2/ ) );
+
+		// Add new Heading block
+		fireEvent.press( screen.getByA11yLabel( 'Add block' ) );
+		fireEvent.press( screen.getByText( 'Heading' ) );
+
+		expect(
+			screen.getByA11yLabel( /Paragraph Block. Row 1/ )
+		).toBeDefined();
+		expect(
+			screen.getByA11yLabel( /Paragraph Block. Row 2/ )
+		).toBeDefined();
+		expect( screen.getByA11yLabel( /Heading Block. Row 3/ ) ).toBeDefined();
+	} );
+} );

package/src/index.js

@@ -117,12 +117,19 @@ export function initializeEditor(
 		preferredStyleVariations: {},
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
+		showListViewByDefault: false,
 		themeStyles: true,
 		welcomeGuide: true,
 		welcomeGuideTemplate: true,
 	} );
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+
+	// Check if the block list view should be open by default.
+	if ( select( editPostStore ).isFeatureActive( 'showListViewByDefault' ) ) {
+		dispatch( editPostStore ).setIsListViewOpened( true );
+	}
+
 	registerCoreBlocks();
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {