@wordpress/edit-site 5.2.0 → 5.3.0

package/src/components/layout/index.js

@@ -52,7 +52,7 @@ const emptyResizeHandleStyles = {
 	left: undefined,
 };
 
-export default function Layout( { onError } ) {
+export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
 	useSyncCanvasModeWithURL();
@@ -236,6 +236,13 @@ export default function Layout( { onError } ) {
 										<ResizeHandle
 											direction="right"
 											variation="separator"
+											resizeWidthBy={ ( delta ) => {
+												setForcedWidth(
+													( forcedWidth ??
+														defaultSidebarWidth ) +
+														delta
+												);
+											} }
 										/>
 									),
 								} }
@@ -307,7 +314,7 @@ export default function Layout( { onError } ) {
 											ease: 'easeOut',
 										} }
 									>
-										<ErrorBoundary onError={ onError }>
+										<ErrorBoundary>
 											{ isEditorPage && <Editor /> }
 											{ isListPage && <ListPage /> }
 										</ErrorBoundary>

package/src/components/layout/style.scss

@@ -63,7 +63,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 .edit-site-layout__content {
 	flex-grow: 1;
 	display: flex;
-	gap: $canvas-padding;
 
 	// Hide scrollbars during the edit/view animation.
 	overflow: hidden;
@@ -85,15 +84,15 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		top: 0;
 	}
 
-	.resizable-editor__drag-handle.is-right {
-		right: math.div(-$grid-unit-15, 2);
-	}
-
 	> div {
 		overflow-y: auto;
 		min-height: 100%;
 		@include custom-scrollbars-on-hover;
 	}
+
+	.resizable-editor__drag-handle {
+		right: 0;
+	}
 }
 
 .edit-site-layout__canvas-container {

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}

@@ -206,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

@@ -44,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={
 				<>

package/src/components/site-hub/index.js

@@ -100,6 +100,7 @@ const SiteHub = forwardRef(
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"
+					spacing="0"
 				>
 					<motion.div
 						className="edit-site-site-hub__view-mode-toggle-container"
@@ -135,7 +136,6 @@ const SiteHub = forwardRef(
 				{ showEditButton && (
 					<Button
 						className="edit-site-site-hub__edit-button"
-						label={ __( 'Open the editor' ) }
 						onClick={ () => {
 							__unstableSetCanvasMode( 'edit' );
 						} }

package/src/components/site-hub/style.scss

@@ -15,10 +15,16 @@
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
-	width: $header-height;
+	width: $header-height + 4px;
 	flex-shrink: 0;
 }
 
+.edit-site-layout.is-edit-mode {
+	.edit-site-site-hub__view-mode-toggle-container {
+		width: $header-height;
+	}
+}
+
 .edit-site-site-hub__text-content {
 	// Necessary for the ellipsis to work.
 	overflow: hidden;

package/src/components/site-icon/index.js

@@ -41,7 +41,7 @@ function SiteIcon( { className } ) {
 	) : (
 		<Icon
 			className="edit-site-site-icon__icon"
-			size="36px"
+			size="32px"
 			icon={ wordpress }
 		/>
 	);

package/src/components/site-icon/style.scss

@@ -3,8 +3,8 @@
 }
 
 .edit-site-site-icon__image {
-	width: $button-size;
-	height: $button-size;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
 	border-radius: $radius-block-ui;
 	object-fit: cover;
 }

package/src/components/style-book/index.js

@@ -19,7 +19,10 @@ import {
 	getBlockFromExample,
 	createBlock,
 } from '@wordpress/blocks';
-import { BlockPreview } from '@wordpress/block-editor';
+import {
+	BlockPreview,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 import { closeSmall } from '@wordpress/icons';
 import { useResizeObserver } from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
@@ -27,7 +30,9 @@ import { useMemo, memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useStyle } from '../global-styles';
+import { unlock } from '../../experiments';
+
+const { useGlobalStyle } = unlock( blockEditorExperiments );
 
 const SLOT_FILL_NAME = 'EditSiteStyleBook';
 const { Slot: StyleBookSlot, Fill: StyleBookFill } =
@@ -81,8 +86,8 @@ function getExamples() {
 
 function StyleBook( { isSelected, onSelect, onClose } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
-	const [ textColor ] = useStyle( 'color.text' );
-	const [ backgroundColor ] = useStyle( 'color.background' );
+	const [ textColor ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const examples = useMemo( getExamples, [] );
 	const tabs = useMemo(
 		() =>
@@ -171,7 +176,7 @@ const Example = memo( ( { title, blocks, isSelected, onClick } ) => (
 			<BlockPreview
 				blocks={ blocks }
 				viewportWidth={ 0 }
-				__experimentalStyles={ [
+				additionalStyles={ [
 					{
 						css:
 							'.wp-block:first-child { margin-top: 0; }' +