@wordpress/edit-post 6.19.0 → 7.0.0

package/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap

@@ -41,6 +41,17 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -83,7 +94,9 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-0"
           >
             Custom fields
@@ -136,6 +149,17 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -178,7 +202,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-3"
           >
             Custom fields
@@ -218,7 +244,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-4"
           >
             Meta Box 1
@@ -258,7 +286,9 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-5"
           >
             Meta Box 2
@@ -311,6 +341,17 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
   class="interface-preferences-modal__section"
 >
@@ -354,7 +395,9 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-1"
           >
             Meta Box 1
@@ -394,7 +437,9 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-2"
           >
             Meta Box 2

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

@@ -7,13 +7,14 @@
 		display: block;
 		width: 45%;
 		flex-shrink: 0;
+		// Match padding on tertiary buttons for alignment.
+		padding: $grid-unit-15 * 0.5 0;
 	}
 }
 
 .components-button.edit-post-post-schedule__toggle {
 	text-align: left;
 	white-space: normal;
-	height: auto;
 
 	// This span is added by the Popover in Tooltip when no anchor is
 	// provided. We set its width to 0 so that it does not cause the button text

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

@@ -40,8 +40,8 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 					<>
 						<PostVisibility />
 						<PostSchedule />
-						<PostURL />
 						<PostTemplate />
+						<PostURL />
 						<PostSticky />
 						<PostPendingStatus />
 						<PostFormat />

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

@@ -85,9 +85,14 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 		if ( ! supportsTemplateMode && availableTemplates[ templateSlug ] ) {
 			return availableTemplates[ templateSlug ];
 		}
-
-		const template = select( editPostStore ).getEditedPostTemplate();
-		return template?.title ?? template?.slug;
+		const template =
+			select( coreStore ).canUser( 'create', 'templates' ) &&
+			select( editPostStore ).getEditedPostTemplate();
+		return (
+			template?.title ||
+			template?.slug ||
+			availableTemplates?.[ templateSlug ]
+		);
 	}, [] );
 
 	return (

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

@@ -5,6 +5,8 @@
 	span {
 		display: block;
 		width: 45%;
+		// Match padding on tertiary buttons for alignment.
+		padding: $grid-unit-15 * 0.5 0;
 	}
 }
 

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

@@ -1,11 +1,14 @@
 .edit-post-post-url {
 	width: 100%;
 	justify-content: flex-start;
+	align-items: flex-start;
 
 	span {
 		display: block;
 		width: 45%;
 		flex-shrink: 0;
+		// Match padding on tertiary buttons for alignment.
+		padding: $grid-unit-15 * 0.5 0;
 	}
 }
 

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

@@ -5,6 +5,8 @@
 	span {
 		display: block;
 		width: 45%;
+		// Match padding on tertiary buttons for alignment.
+		padding: $grid-unit-15 * 0.5 0;
 	}
 }
 

package/src/components/sidebar/settings-header/style.scss

@@ -1,53 +1,66 @@
+// This tab style CSS is duplicated verbatim in
+// /packages/components/src/tab-panel/style.scss
 .components-button.edit-post-sidebar__panel-tab {
+	position: relative;
 	border-radius: 0;
 	height: $grid-unit-60;
 	background: transparent;
 	border: none;
 	box-shadow: none;
 	cursor: pointer;
-	display: inline-block;
-	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
+	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 500;
 
-	// This pseudo-element "duplicates" the tab label and sets the text to bold.
-	// This ensures that the tab doesn't change width when selected.
-	// See: https://github.com/WordPress/gutenberg/pull/9793
+	&:focus:not(:disabled) {
+		position: relative;
+		box-shadow: none;
+	}
+
+	// Tab indicator
 	&::after {
-		content: attr(data-label);
-		display: block;
-		font-weight: 600;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
+		content: "";
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		pointer-events: none;
+
+		// Draw the indicator.
+		background: var(--wp-admin-theme-color);
+		height: calc(0 * var(--wp-admin-border-width-focus));
+		border-radius: 0;
+
+		// Animation
+		transition: all 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	&.is-active {
-		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
-
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: $border-width-tab solid transparent;
-		}
+	// Active.
+	&.is-active::after {
+		height: calc(1 * var(--wp-admin-border-width-focus));
 	}
 
-	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
+	// Focus.
+	&::before {
+		content: "";
+		position: absolute;
+		top: $grid-unit-15;
+		right: $grid-unit-15;
+		bottom: $grid-unit-15;
+		left: $grid-unit-15;
+		pointer-events: none;
+
+		// Draw the indicator.
+		box-shadow: 0 0 0 0 transparent;
+		border-radius: $radius-block-ui;
+
+		// Animation
+		transition: all 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	&.is-active:focus {
-		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);
+	&:focus-visible::before {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 }

package/src/components/sidebar/settings-sidebar/index.js

@@ -5,10 +5,12 @@ import {
 	BlockInspector,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { cog } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 import { Platform } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { isRTL, __ } from '@wordpress/i18n';
+import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -25,8 +27,6 @@ import MetaBoxes from '../../meta-boxes';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebarEditPost from '../plugin-sidebar';
 import TemplateSummary from '../template-summary';
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { store as editPostStore } from '../../../store';
 
 const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
@@ -78,7 +78,7 @@ const SettingsSidebar = () => {
 			/* translators: button label text should, if possible, be under 16 characters. */
 			title={ __( 'Settings' ) }
 			toggleShortcut={ keyboardShortcut }
-			icon={ cog }
+			icon={ isRTL() ? drawerLeft : drawerRight }
 			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
 		>
 			{ ! isTemplateMode && sidebarName === 'edit-post/document' && (

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

@@ -38,7 +38,9 @@ describe( 'when title is focused', () => {
 		} );
 
 		// Focus first block
-		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 1/ ) );
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		);
 
 		// Focus title
 		fireEvent(
@@ -50,12 +52,15 @@ describe( 'when title is focused', () => {
 		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 		fireEvent.press( screen.getByText( 'Heading' ) );
 
-		expect( screen.getByLabelText( /Heading Block. Row 1/ ) ).toBeDefined();
 		expect(
-			screen.getByLabelText( /Paragraph Block. Row 2/ )
+			screen.getAllByLabelText( /Heading Block. Row 1/ )[ 0 ]
+		).toBeDefined();
+		expect(
+			screen.getAllByLabelText( /Paragraph Block. Row 2/ )[ 0 ]
 		).toBeDefined();
+
 		expect(
-			screen.getByLabelText( /Paragraph Block. Row 3/ )
+			screen.getAllByLabelText( /Paragraph Block. Row 3/ )[ 0 ]
 		).toBeDefined();
 	} );
 } );
@@ -67,7 +72,9 @@ describe( 'when title is no longer focused', () => {
 		} );
 
 		// Focus first block
-		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 1/ ) );
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		);
 
 		// Focus title
 		fireEvent(
@@ -76,18 +83,22 @@ describe( 'when title is no longer focused', () => {
 		);
 
 		// Focus last block
-		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 2/ ) );
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 2/ )[ 0 ]
+		);
 
 		// Add new Heading block
 		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 		fireEvent.press( screen.getByText( 'Heading' ) );
 
 		expect(
-			screen.getByLabelText( /Paragraph Block. Row 1/ )
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		).toBeDefined();
+		expect(
+			screen.getAllByLabelText( /Paragraph Block. Row 2/ )[ 0 ]
 		).toBeDefined();
 		expect(
-			screen.getByLabelText( /Paragraph Block. Row 2/ )
+			screen.getAllByLabelText( /Heading Block. Row 3/ )[ 0 ]
 		).toBeDefined();
-		expect( screen.getByLabelText( /Heading Block. Row 3/ ) ).toBeDefined();
 	} );
 } );

package/src/editor.native.js

@@ -4,6 +4,7 @@
 import memize from 'memize';
 import { map } from 'lodash';
 import { I18nManager } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 /**
  * WordPress dependencies
@@ -173,17 +174,19 @@ class Editor extends Component {
 		};
 
 		return (
-			<SlotFillProvider>
-				<EditorProvider
-					settings={ editorSettings }
-					post={ normalizedPost }
-					initialEdits={ initialEdits }
-					useSubRegistry={ false }
-					{ ...props }
-				>
-					<Layout setTitleRef={ this.setTitleRef } />
-				</EditorProvider>
-			</SlotFillProvider>
+			<GestureHandlerRootView style={ { flex: 1 } }>
+				<SlotFillProvider>
+					<EditorProvider
+						settings={ editorSettings }
+						post={ normalizedPost }
+						initialEdits={ initialEdits }
+						useSubRegistry={ false }
+						{ ...props }
+					>
+						<Layout setTitleRef={ this.setTitleRef } />
+					</EditorProvider>
+				</SlotFillProvider>
+			</GestureHandlerRootView>
 		);
 	}
 }

package/src/hooks/validate-multiple-use/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -44,8 +39,7 @@ const enhance = compose(
 		// Otherwise, only pass `originalBlockClientId` if it refers to a different
 		// block from the current one.
 		const blocks = select( blockEditorStore ).getBlocks();
-		const firstOfSameType = find(
-			blocks,
+		const firstOfSameType = blocks.find(
 			( { name } ) => block.name === name
 		);
 		const isInvalid =

package/src/plugins/index.js

@@ -14,6 +14,7 @@ import CopyContentMenuItem from './copy-content-menu-item';
 import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import NavigationListViewMenuItem from './navigation-list-view-menu-item';
 
 registerPlugin( 'edit-post', {
 	render() {
@@ -55,6 +56,7 @@ registerPlugin( 'edit-post', {
 						</>
 					) }
 				</ToolsMoreMenuGroup>
+				<NavigationListViewMenuItem />
 			</>
 		);
 	},

package/src/plugins/navigation-list-view-menu-item.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockEditorProvider,
+	__unstableBlockToolbarLastItem,
+	__unstableBlockNameContext,
+} from '@wordpress/block-editor';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { listView } from '@wordpress/icons';
+
+const NavMenuSidebarToggle = () => {
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				className="components-toolbar__control"
+				label={ __( 'Open navigation list view' ) }
+				onClick={ () => openGeneralSidebar( 'edit-post/block' ) }
+				icon={ listView }
+			/>
+		</ToolbarGroup>
+	);
+};
+
+let MaybeNavMenuSidebarToggle = Fragment;
+
+const isOffCanvasNavigationEditorEnabled =
+	window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+if ( isOffCanvasNavigationEditorEnabled ) {
+	MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
+}
+
+const NavigationEditMenuItem = () => {
+	return (
+		<BlockEditorProvider>
+			<__unstableBlockToolbarLastItem>
+				<__unstableBlockNameContext.Consumer>
+					{ ( blockName ) =>
+						blockName === 'core/navigation' && (
+							<MaybeNavMenuSidebarToggle />
+						)
+					}
+				</__unstableBlockNameContext.Consumer>
+			</__unstableBlockToolbarLastItem>
+		</BlockEditorProvider>
+	);
+};
+
+export default NavigationEditMenuItem;