@wordpress/edit-site 5.1.0 → 5.3.0

package/src/components/layout/style.scss

@@ -70,9 +70,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 .edit-site-layout__sidebar {
 	z-index: z-index(".edit-site-layout__sidebar");
-	overflow-y: auto;
 	width: 100vw;
-	@include custom-scrollbars-on-hover;
 
 	@include break-medium {
 		width: $nav-sidebar-width;
@@ -80,17 +78,39 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
-		position: fixed;
+		position: fixed !important;
 		height: 100vh;
 		left: 0;
 		top: 0;
 	}
+
+	> div {
+		overflow-y: auto;
+		min-height: 100%;
+		@include custom-scrollbars-on-hover;
+	}
+
+	.resizable-editor__drag-handle {
+		right: 0;
+	}
 }
 
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;
 	z-index: z-index(".edit-site-layout__canvas-container");
+
+	&.is-resizing::after {
+		// This covers the whole content which ensures mouse up triggers
+		// even if the content is "inert".
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		z-index: z-index(".edit-site-layout__canvas-container.is-resizing::after");
+	}
 }
 
 .edit-site-layout__canvas {
@@ -99,12 +119,13 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	left: 0;
 	bottom: 0;
 	width: 100%;
-	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 
 	& > div {
 		color: $gray-900;
 		background: $white;
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 	}
+
 	@include break-medium {
 		top: $canvas-padding;
 		bottom: $canvas-padding;
@@ -125,7 +146,10 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		top: 0;
 		bottom: 0;
 		width: 100%;
-		border-radius: 0;
+
+		& > div {
+			border-radius: 0;
+		}
 	}
 }
 

package/src/components/list/actions/rename-menu-item.js

@@ -6,11 +6,11 @@ import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import {
 	Button,
-	Flex,
-	FlexItem,
 	MenuItem,
 	Modal,
 	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -75,30 +75,22 @@ export default function RenameMenuItem( { template, onClose } ) {
 			{ isModalOpen && (
 				<Modal
 					title={ __( 'Rename' ) }
-					closeLabel={ __( 'Close' ) }
 					onRequestClose={ () => {
 						setIsModalOpen( false );
 					} }
 					overlayClassName="edit-site-list__rename-modal"
 				>
 					<form onSubmit={ onTemplateRename }>
-						<Flex align="flex-start" gap={ 8 }>
-							<FlexItem>
-								<TextControl
-									label={ __( 'Name' ) }
-									value={ title }
-									onChange={ setTitle }
-									required
-								/>
-							</FlexItem>
-						</Flex>
+						<VStack spacing="5">
+							<TextControl
+								__nextHasNoMarginBottom
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								required
+							/>
 
-						<Flex
-							className="edit-site-list__rename-modal-actions"
-							justify="flex-end"
-							expanded={ false }
-						>
-							<FlexItem>
+							<HStack justify="right">
 								<Button
 									variant="tertiary"
 									onClick={ () => {
@@ -107,13 +99,12 @@ export default function RenameMenuItem( { template, onClose } ) {
 								>
 									{ __( 'Cancel' ) }
 								</Button>
-							</FlexItem>
-							<FlexItem>
+
 								<Button variant="primary" type="submit">
 									{ __( 'Save' ) }
 								</Button>
-							</FlexItem>
-						</Flex>
+							</HStack>
+						</VStack>
 					</form>
 				</Modal>
 			) }

package/src/components/list/style.scss

@@ -132,10 +132,6 @@
 	}
 }
 
-.edit-site-list__rename-modal-actions {
-	margin-top: $grid-unit-15;
-}
-
 .edit-site-template__actions {
 	button:not(:last-child) {
 		margin-right: $grid-unit-10;

package/src/components/{sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js → navigation-inspector/index.js}

@@ -180,6 +180,8 @@ export default function NavigationInspector() {
 			) }
 			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
 				<SelectControl
+					__nextHasNoMarginBottom
+					className="edit-site-navigation-inspector__select-menu"
 					aria-controls={
 						// aria-controls should only apply when referenced element is in DOM
 						hasLoadedInnerBlocks ? navMenuListId : undefined
@@ -204,10 +206,7 @@ export default function NavigationInspector() {
 					onChange={ onChange }
 					onInput={ onInput }
 				>
-					<NavigationMenu
-						id={ navMenuListId }
-						innerBlocks={ publishedInnerBlocks }
-					/>
+					<NavigationMenu innerBlocks={ publishedInnerBlocks } />
 				</BlockEditorProvider>
 			) }
 

package/src/components/{sidebar-edit-mode/navigation-menu-sidebar → navigation-inspector}/navigation-menu.js

@@ -2,13 +2,17 @@
  * WordPress dependencies
  */
 import {
-	__experimentalListView as ListView,
-	__experimentalOffCanvasEditor as OffCanvasEditor,
+	experiments as blockEditorExperiments,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../experiments';
+
 const ALLOWED_BLOCKS = {
 	'core/navigation': [
 		'core/navigation-link',
@@ -32,9 +36,11 @@ const ALLOWED_BLOCKS = {
 	],
 };
 
-export default function NavigationMenu( { innerBlocks, id } ) {
+export default function NavigationMenu( { innerBlocks } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
+	const { OffCanvasEditor } = unlock( blockEditorExperiments );
+
 	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
 	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
 	useEffect( () => {
@@ -50,13 +56,5 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	if ( window?.__experimentalEnableOffCanvasNavigationEditor ) {
-		return (
-			<OffCanvasEditor
-				blocks={ innerBlocks }
-				selectBlockInCanvas={ false }
-			/>
-		);
-	}
-	return <ListView id={ id } />;
+	return <OffCanvasEditor blocks={ innerBlocks } />;
 }

package/src/components/{sidebar-edit-mode/navigation-menu-sidebar → navigation-inspector}/style.scss

@@ -22,6 +22,10 @@
 	.block-editor-list-view-block__menu-cell {
 		padding-right: 0;
 	}
+
+	.edit-site-navigation-inspector__select-menu {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-navigation-inspector__placeholder {
@@ -40,20 +44,3 @@
 .edit-site-navigation-inspector__empty-msg {
 	padding: 0 $grid-unit-10;
 }
-
-.edit-site-navigation-menu-sidebar__panel {
-	padding: $grid-unit-20;
-}
-
-.edit-site-navigation-sidebar__beta {
-	display: inline-flex;
-	margin-left: $grid-unit-10;
-	padding: 0 $grid-unit-10;
-	height: $grid-unit-30;
-	border-radius: $radius-block-ui;
-	background-color: $gray-900;
-	color: $white;
-	align-items: center;
-	font-size: $helptext-font-size;
-	line-height: 1;
-}

package/src/components/sidebar/index.js

@@ -10,6 +10,7 @@ import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
 
 function SidebarScreens() {
 	useSyncSidebarPathWithURL();
@@ -17,6 +18,7 @@ function SidebarScreens() {
 	return (
 		<>
 			<SidebarNavigationScreenMain />
+			<SidebarNavigationScreenNavigationMenus />
 			<SidebarNavigationScreenTemplates postType="wp_template" />
 			<SidebarNavigationScreenTemplates postType="wp_template_part" />
 		</>

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -1,34 +1,28 @@
 /**
  * WordPress dependencies
  */
-import {
-	DropdownMenu,
-	FlexItem,
-	FlexBlock,
-	Flex,
-	Button,
-} from '@wordpress/components';
+import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles, moreVertical, seen } from '@wordpress/icons';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { styles, seen } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
 import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import DefaultSidebar from './default-sidebar';
-import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
+import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
+import { GlobalStylesMenuSlot } from '../global-styles/ui';
 
 export default function GlobalStylesSidebar() {
-	const [ canReset, onReset ] = useGlobalStylesReset();
-	const { toggle } = useDispatch( preferencesStore );
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
 	const editorMode = useSelect(
 		( select ) => select( editSiteStore ).getEditorMode(),
 		[]
 	);
+
 	useEffect( () => {
 		if ( editorMode !== 'visual' ) {
 			setIsStyleBookOpened( false );
@@ -63,25 +57,7 @@ export default function GlobalStylesSidebar() {
 						/>
 					</FlexItem>
 					<FlexItem>
-						<DropdownMenu
-							icon={ moreVertical }
-							label={ __( 'More Styles actions' ) }
-							controls={ [
-								{
-									title: __( 'Reset to defaults' ),
-									onClick: onReset,
-									isDisabled: ! canReset,
-								},
-								{
-									title: __( 'Welcome Guide' ),
-									onClick: () =>
-										toggle(
-											'core/edit-site',
-											'welcomeGuideStyles'
-										),
-								},
-							] }
-						/>
+						<GlobalStylesMenuSlot />
 					</FlexItem>
 				</Flex>
 			}

package/src/components/sidebar-edit-mode/index.js

@@ -14,7 +14,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
-import NavigationMenuSidebar from './navigation-menu-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
@@ -64,15 +63,6 @@ export function SidebarComplementaryAreaFills() {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
 	}
 
-	// Conditionally include NavMenu sidebar in Plugin only.
-	// Optimise for dead code elimination.
-	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
-	let MaybeNavigationMenuSidebar = Fragment;
-
-	if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) {
-		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
-	}
-
 	return (
 		<>
 			<DefaultSidebar
@@ -93,7 +83,6 @@ export function SidebarComplementaryAreaFills() {
 				) }
 			</DefaultSidebar>
 			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-			<MaybeNavigationMenuSidebar />
 		</>
 	);
 }

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

@@ -42,6 +42,7 @@
 	&:focus:not(:disabled) {
 		position: relative;
 		box-shadow: none;
+		outline: none;
 	}
 
 	// Tab indicator
@@ -66,6 +67,10 @@
 	// Active.
 	&.is-active::after {
 		height: calc(1 * var(--wp-admin-border-width-focus));
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
 	}
 
 	// Focus.
@@ -89,5 +94,8 @@
 
 	&:focus-visible::before {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
 	}
 }

package/src/components/sidebar-navigation-item/style.scss

@@ -3,15 +3,40 @@
 	border-width: $border-width-tab;
 
 	&:hover,
-	&:focus {
+	&:focus,
+	&[aria-current] {
 		color: $white;
 		background: $gray-800;
 		border-width: $border-width-tab;
 	}
 
 	&[aria-current] {
-		color: $white;
 		background: var(--wp-admin-theme-color);
-		border-width: $border-width-tab;
 	}
 }
+
+.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .components-button {
+	color: $gray-600;
+	&:hover,
+	&:focus,
+	&[aria-current] {
+		color: $white;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-navigation-inspector .offcanvas-editor-list-view-leaf {
+	&:hover,
+	&:focus,
+	&[aria-current] {
+		background: $gray-800;
+	}
+	.block-editor-list-view-block__menu {
+		margin-left: -$grid-unit-10;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
+	cursor: grab;
+	width: calc(100% - #{ $border-width-focus });
+	padding: $grid-unit-10;
+}

package/src/components/sidebar-navigation-screen/index.js

@@ -14,6 +14,7 @@ export default function SidebarNavigationScreen( {
 	path,
 	parentTitle,
 	title,
+	actions,
 	content,
 } ) {
 	return (
@@ -40,10 +41,10 @@ export default function SidebarNavigationScreen( {
 					) : (
 						<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
 					) }
-
-					<div className="edit-site-sidebar-navigation-screen__title">
+					<h2 className="edit-site-sidebar-navigation-screen__title">
 						{ title }
-					</div>
+					</h2>
+					{ actions }
 				</HStack>
 
 				<nav className="edit-site-sidebar-navigation-screen__content">

package/src/components/sidebar-navigation-screen/style.scss

@@ -24,6 +24,8 @@
 	font-size: calc(1.56 * 13px);
 	font-weight: 500;
 	flex-grow: 1;
+	color: $white;
+	margin: 0;
 }
 
 .edit-site-sidebar-navigation-screen__back {

package/src/components/sidebar-navigation-screen-main/index.js

@@ -6,7 +6,9 @@ import {
 	__experimentalNavigatorButton as NavigatorButton,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled } from '@wordpress/icons';
+import { layout, symbolFilled, navigation } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -15,12 +17,32 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenMain() {
+	const { navigationMenus } = useSelect( ( select ) => {
+		const { getEntityRecords } = select( coreStore );
+		return {
+			navigationMenus: getEntityRecords( 'postType', 'wp_navigation', {
+				per_page: -1,
+				status: 'publish',
+			} ),
+		};
+	} );
+
 	return (
 		<SidebarNavigationScreen
 			path="/"
 			title={ __( 'Design' ) }
 			content={
 				<ItemGroup>
+					{ !! navigationMenus && navigationMenus.length > 0 && (
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/navigation"
+							withChevron
+							icon={ navigation }
+						>
+							{ __( 'Navigation' ) }
+						</NavigatorButton>
+					) }
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/templates"

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import NavigationInspector from '../navigation-inspector';
+
+export default function SidebarNavigationScreenNavigationMenus() {
+	return (
+		<SidebarNavigationScreen
+			path="/navigation"
+			parentTitle={ __( 'Design' ) }
+			title={ __( 'Navigation' ) }
+			content={
+				<div className="edit-site-sidebar-navigation-screen-navigation-menus">
+					<NavigationInspector />
+				</div>
+			}
+		/>
+	);
+}

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -0,0 +1,12 @@
+.edit-site-sidebar-navigation-screen-navigation-menus {
+	.block-editor-list-view-block__menu-edit,
+	.edit-site-navigation-inspector__select-menu {
+		display: none;
+	}
+	.offcanvas-editor-list-view-leaf {
+		max-width: calc(100% - #{ $grid-unit-05 });
+	}
+	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
+		width: 100%;
+	}
+}

package/src/components/sidebar-navigation-screen-templates/index.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
@@ -119,21 +116,17 @@ export default function SidebarNavigationScreenTemplates( {
 		<SidebarNavigationScreen
 			path={ config[ postType ].path }
 			parentTitle={ __( 'Design' ) }
-			title={
-				<HStack justify="space-between">
-					<div style={ { flexShrink: 0 } }>
-						{ config[ postType ].labels.title }
-					</div>
-					{ ! isMobileViewport && (
-						<AddNewTemplate
-							templateType={ postType }
-							toggleProps={ {
-								className:
-									'edit-site-sidebar-navigation-screen-templates__add-button',
-							} }
-						/>
-					) }
-				</HStack>
+			title={ config[ postType ].labels.title }
+			actions={
+				! isMobileViewport && (
+					<AddNewTemplate
+						templateType={ postType }
+						toggleProps={ {
+							className:
+								'edit-site-sidebar-navigation-screen-templates__add-button',
+						} }
+					/>
+				)
 			}
 			content={
 				<>