@wordpress/edit-site 4.19.0 → 5.1.0

package/src/components/layout/style.scss

@@ -0,0 +1,183 @@
+$hub-height: $grid-unit-20 * 2 + $button-size;
+
+.edit-site-layout {
+	height: 100%;
+	background: $gray-900;
+	color: $white;
+	display: flex;
+	flex-direction: column;
+}
+
+.edit-site-layout__hub {
+	position: fixed;
+	top: $canvas-padding;
+	left: $canvas-padding;
+	width: calc(100vw - #{$canvas-padding * 2});
+	height: $hub-height;
+	z-index: z-index(".edit-site-layout__hub");
+
+	background: $black;
+	padding: $grid-unit-20;
+	padding-left: 0;
+	border-radius: $radius-block-ui * 4;
+	box-shadow: $shadow-modal;
+
+	.edit-site-layout.is-full-canvas & {
+		top: 0;
+		left: 0;
+		padding: 0;
+		padding-right: $grid-unit-20;
+		height: $header-height;
+		border-radius: 0;
+		width: 100vw;
+		box-shadow: none;
+
+		@include break-medium {
+			width: auto;
+			padding-right: 0;
+		}
+	}
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		width: auto;
+		padding-right: 0;
+	}
+
+	@include break-medium {
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+	}
+}
+
+.edit-site-layout__header {
+	height: $header-height;
+	display: flex;
+	z-index: z-index(".edit-site-layout__header");
+
+	// This is only necessary for the exit animation
+	.edit-site-layout:not(.is-full-canvas) & {
+		position: fixed;
+		width: 100vw;
+	}
+}
+
+.edit-site-layout__content {
+	flex-grow: 1;
+	display: flex;
+
+	// Hide scrollbars during the edit/view animation.
+	overflow: hidden;
+}
+
+.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;
+	}
+
+	// This is only necessary for the exit animation
+	.edit-site-layout.is-full-canvas & {
+		position: fixed;
+		height: 100vh;
+		left: 0;
+		top: 0;
+	}
+}
+
+.edit-site-layout__canvas-container {
+	position: relative;
+	flex-grow: 1;
+	z-index: z-index(".edit-site-layout__canvas-container");
+}
+
+.edit-site-layout__canvas {
+	position: absolute;
+	top: 0;
+	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;
+	}
+	@include break-medium {
+		top: $canvas-padding;
+		bottom: $canvas-padding;
+		width: calc(100% - #{$canvas-padding});
+
+		& > div {
+			border-radius: $radius-block-ui * 4;
+			// Not sure why this is necessary.
+			.edit-site-layout:not(.is-full-canvas) & .edit-site-visual-editor__editor-canvas,
+			.edit-site-layout:not(.is-full-canvas) & .interface-interface-skeleton__content {
+				border-radius: $radius-block-ui * 4;
+			}
+		}
+
+	}
+
+	.edit-site-layout.is-full-canvas & {
+		top: 0;
+		bottom: 0;
+		width: 100%;
+		border-radius: 0;
+	}
+}
+
+// This shouldn't be necessary (we should have a way to say that a skeletton is relative
+.edit-site-layout__canvas .interface-interface-skeleton {
+	position: relative !important;
+	min-height: 100% !important;
+}
+
+.edit-site-layout__view-mode-toggle.components-button {
+	position: relative;
+	color: $white;
+	height: 100%;
+	width: 100%;
+	border-radius: $radius-block-ui;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&:hover,
+	&:active {
+		color: $white;
+	}
+
+	&:focus {
+		box-shadow: none;
+	}
+
+	&::before {
+		transition: box-shadow 0.1s ease;
+		@include reduce-motion("transition");
+		content: "";
+		display: block;
+		position: absolute;
+		top: 9px;
+		right: 9px;
+		bottom: 9px;
+		left: 9px;
+		border-radius: $radius-block-ui + $border-width + $border-width;
+		box-shadow: none;
+	}
+
+	// Lightened spot color focus.
+	&:focus::before {
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
+			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	.edit-site-layout__view-mode-toggle-icon {
+		display: flex;
+		border-radius: $radius-block-ui;
+	}
+}

package/src/components/list/header.js

@@ -36,7 +36,11 @@ export default function Header( { templateType } ) {
 
 			{ canCreate && (
 				<div className="edit-site-list-header__right">
-					<AddNewTemplate templateType={ templateType } />
+					<AddNewTemplate
+						templateType={ templateType }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
 				</div>
 			) }
 		</header>

package/src/components/list/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -18,9 +13,7 @@ import { EditorSnackbars } from '@wordpress/editor';
  */
 import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
-import NavigationSidebar from '../navigation-sidebar';
 import Table from './table';
-import { store as editSiteStore } from '../../store';
 import { useLocation } from '../routes';
 import useTitle from '../routes/use-title';
 
@@ -31,22 +24,16 @@ export default function List() {
 
 	useRegisterShortcuts();
 
-	const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
-		( select ) => {
-			return {
-				previousShortcut: select(
-					keyboardShortcutsStore
-				).getAllShortcutKeyCombinations(
-					'core/edit-site/previous-region'
-				),
-				nextShortcut: select(
-					keyboardShortcutsStore
-				).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
-				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-			};
-		},
-		[]
-	);
+	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
+		return {
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+		};
+	}, [] );
 
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
@@ -75,15 +62,9 @@ export default function List() {
 
 	return (
 		<InterfaceSkeleton
-			className={ classnames( 'edit-site-list', {
-				'is-navigation-open': isNavigationOpen,
-			} ) }
-			labels={ {
-				drawer: __( 'Navigation Sidebar' ),
-				...detailedRegionLabels,
-			} }
+			className="edit-site-list"
+			labels={ detailedRegionLabels }
 			header={ <Header templateType={ templateType } /> }
-			drawer={ <NavigationSidebar.Slot /> }
 			notices={ <EditorSnackbars /> }
 			content={ <Table templateType={ templateType } /> }
 			shortcuts={ {

package/src/components/list/style.scss

@@ -1,7 +1,6 @@
 .edit-site-list-header {
 	position: relative;
 	align-items: center;
-	background-color: $white;
 	display: flex;
 	height: $header-height;
 	box-sizing: border-box;
@@ -44,8 +43,8 @@
 
 		.interface-interface-skeleton__content {
 			background: $white;
-			align-items: center;
 			padding: $grid-unit-20;
+			align-items: center;
 
 			@include break-medium() {
 				padding: $grid-unit * 9;
@@ -55,10 +54,10 @@
 }
 
 .edit-site-list-table {
-	width: 100%;
+	min-width: 100%;
 	border: $border-width solid $gray-300;
 	border-radius: 2px;
-	margin: 0;
+	margin: 0 auto;
 	overflow: hidden;
 	border-spacing: 0;
 	max-width: 960px;

package/src/components/navigate-to-link/index.js

@@ -9,12 +9,7 @@ import { edit } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-export default function NavigateToLink( {
-	type,
-	id,
-	activePage,
-	onActivePageChange,
-} ) {
+export default function NavigateToLink( { type, id, onActivePageChange } ) {
 	const post = useSelect(
 		( select ) =>
 			type &&
@@ -27,7 +22,6 @@ export default function NavigateToLink( {
 	const onClick = useMemo( () => {
 		if ( ! post?.link ) return null;
 		const path = getPathAndQueryString( post.link );
-		if ( path === activePage?.path ) return null;
 		return () =>
 			onActivePageChange( {
 				type,
@@ -38,7 +32,7 @@ export default function NavigateToLink( {
 					postId: post.id,
 				},
 			} );
-	}, [ post, activePage?.path, onActivePageChange ] );
+	}, [ post, onActivePageChange ] );
 
 	return (
 		onClick && (

package/src/components/routes/index.js

@@ -46,7 +46,7 @@ export function Routes( { children } ) {
 	return (
 		<HistoryContext.Provider value={ history }>
 			<RoutesContext.Provider value={ location }>
-				{ children( location ) }
+				{ children }
 			</RoutesContext.Provider>
 		</HistoryContext.Provider>
 	);

package/src/components/sidebar/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
+import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+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';
+
+function SidebarScreens() {
+	useSyncSidebarPathWithURL();
+
+	return (
+		<>
+			<SidebarNavigationScreenMain />
+			<SidebarNavigationScreenTemplates postType="wp_template" />
+			<SidebarNavigationScreenTemplates postType="wp_template_part" />
+		</>
+	);
+}
+
+function Sidebar() {
+	return (
+		<NavigatorProvider
+			className="edit-site-sidebar__content"
+			initialPath="/"
+		>
+			<SidebarScreens />
+		</NavigatorProvider>
+	);
+}
+
+export default memo( Sidebar );

package/src/components/sidebar/style.scss

@@ -0,0 +1,8 @@
+.edit-site-sidebar__content.edit-site-sidebar__content {
+	overflow-x: unset;
+}
+
+.edit-site-sidebar__content > div {
+	// This matches the logo padding
+	padding: 0 $grid-unit-15;
+}

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

@@ -1,39 +1,71 @@
 /**
  * WordPress dependencies
  */
-import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
+import {
+	DropdownMenu,
+	FlexItem,
+	FlexBlock,
+	Flex,
+	Button,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles, moreVertical } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { styles, moreVertical, seen } from '@wordpress/icons';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
+import { store as editSiteStore } from '../../store';
 
 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 );
+		}
+	}, [ editorMode ] );
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
 			identifier="edit-site/global-styles"
 			title={ __( 'Styles' ) }
 			icon={ styles }
-			closeLabel={ __( 'Close global styles sidebar' ) }
+			closeLabel={ __( 'Close Styles sidebar' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
 				<Flex>
 					<FlexBlock>
 						<strong>{ __( 'Styles' ) }</strong>
 					</FlexBlock>
+					<FlexItem>
+						<Button
+							icon={ seen }
+							label={
+								isStyleBookOpened
+									? __( 'Close Style Book' )
+									: __( 'Open Style Book' )
+							}
+							isPressed={ isStyleBookOpened }
+							disabled={ editorMode !== 'visual' }
+							onClick={ () => {
+								setIsStyleBookOpened( ! isStyleBookOpened );
+							} }
+						/>
+					</FlexItem>
 					<FlexItem>
 						<DropdownMenu
 							icon={ moreVertical }
-							label={ __( 'More Global Styles Actions' ) }
+							label={ __( 'More Styles actions' ) }
 							controls={ [
 								{
 									title: __( 'Reset to defaults' ),
@@ -54,7 +86,10 @@ export default function GlobalStylesSidebar() {
 				</Flex>
 			}
 		>
-			<GlobalStylesUI />
+			<GlobalStylesUI
+				isStyleBookOpened={ isStyleBookOpened }
+				onCloseStyleBook={ () => setIsStyleBookOpened( false ) }
+			/>
 		</DefaultSidebar>
 	);
 }

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

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { createSlotFill, PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { cog } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { useEffect, Fragment } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
 	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
 	let MaybeNavigationMenuSidebar = Fragment;
 
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) {
 		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
 	}
 
@@ -78,7 +78,7 @@ export function SidebarComplementaryAreaFills() {
 			<DefaultSidebar
 				identifier={ sidebarName }
 				title={ __( 'Settings' ) }
-				icon={ cog }
+				icon={ isRTL() ? drawerLeft : drawerRight }
 				closeLabel={ __( 'Close settings sidebar' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"

package/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js

@@ -3,6 +3,7 @@
  */
 import {
 	__experimentalListView as ListView,
+	__experimentalOffCanvasEditor as OffCanvasEditor,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
@@ -48,5 +49,14 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 			}
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
+
+	if ( window?.__experimentalEnableOffCanvasNavigationEditor ) {
+		return (
+			<OffCanvasEditor
+				blocks={ innerBlocks }
+				selectBlockInCanvas={ false }
+			/>
+		);
+	}
 	return <ListView id={ id } />;
 }

package/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss

@@ -11,8 +11,6 @@
 }
 
 .edit-site-navigation-inspector {
-	padding: $grid-unit-20;
-
 	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
 		white-space: normal;
 	}
@@ -26,7 +24,6 @@
 	}
 }
 
-
 .edit-site-navigation-inspector__placeholder {
 	padding: $grid-unit-10;
 	margin: $grid-unit-10;
@@ -39,3 +36,24 @@
 		width: 50%;
 	}
 }
+
+.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-edit-mode/settings-header/style.scss

@@ -25,56 +25,69 @@
 	}
 }
 
+// This tab style CSS is duplicated verbatim in
+// /packages/components/src/tab-panel/style.scss
 .components-button.edit-site-sidebar-edit-mode__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
-	&::after {
-		content: attr(data-label);
-		display: block;
-		font-weight: 600;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
+	&:focus:not(:disabled) {
+		position: relative;
+		box-shadow: none;
 	}
 
-	&.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");
+	// Tab indicator
+	&::after {
+		content: "";
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		pointer-events: none;
 
-		// 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;
-		}
+		// 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");
 	}
 
-	&: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");
+	// Active.
+	&.is-active::after {
+		height: calc(1 * var(--wp-admin-border-width-focus));
+	}
+
+	// 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 0 -$border-width-tab 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-edit-mode/style.scss

@@ -78,19 +78,6 @@
 	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;
-}
-
 // Override the `hr` styles defined in the `ComplementaryArea` component
 // from the `@wordpress/interface` package.
 .edit-site-global-styles-sidebar hr {