@wordpress/edit-site 4.19.0 → 5.0.0

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';
@@ -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/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 {

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

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexBlock,
+} from '@wordpress/components';
+import { chevronRight, Icon } from '@wordpress/icons';
+
+export default function SidebarNavigationItem( {
+	className,
+	icon,
+	withChevron = false,
+	children,
+	...props
+} ) {
+	return (
+		<Item
+			className={ classnames(
+				'edit-site-sidebar-navigation-item',
+				className
+			) }
+			{ ...props }
+		>
+			{ icon && (
+				<HStack justify="flex-start">
+					<Icon
+						style={ { fill: 'currentcolor' } }
+						icon={ icon }
+						size={ 24 }
+					/>
+					<FlexBlock>{ children }</FlexBlock>
+					{ withChevron && (
+						<Icon
+							style={ { fill: 'currentcolor' } }
+							icon={ chevronRight }
+							size={ 24 }
+						/>
+					) }
+				</HStack>
+			) }
+			{ ! icon && children }
+		</Item>
+	);
+}

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

@@ -0,0 +1,17 @@
+.edit-site-sidebar-navigation-item.components-item {
+	color: $gray-600;
+	border-width: $border-width-tab;
+
+	&:hover,
+	&:focus {
+		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;
+	}
+}

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

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+	__experimentalNavigatorScreen as NavigatorScreen,
+} from '@wordpress/components';
+import { isRTL, __, sprintf } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
+
+export default function SidebarNavigationScreen( {
+	path,
+	parentTitle,
+	title,
+	content,
+} ) {
+	return (
+		<NavigatorScreen
+			className="edit-site-sidebar-navigation-screen"
+			path={ path }
+		>
+			<VStack spacing={ 2 }>
+				<HStack
+					spacing={ 4 }
+					justify="flex-start"
+					className="edit-site-sidebar-navigation-screen__title-icon"
+				>
+					{ parentTitle ? (
+						<NavigatorBackButton
+							className="edit-site-sidebar-navigation-screen__back"
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							aria-label={ sprintf(
+								/* translators: %s: previous page. */
+								__( 'Navigate to the previous view: %s' ),
+								parentTitle
+							) }
+						/>
+					) : (
+						<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
+					) }
+
+					<div className="edit-site-sidebar-navigation-screen__title">
+						{ title }
+					</div>
+				</HStack>
+
+				<nav className="edit-site-sidebar-navigation-screen__content">
+					{ content }
+				</nav>
+			</VStack>
+		</NavigatorScreen>
+	);
+}

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

@@ -0,0 +1,41 @@
+.edit-site-sidebar-navigation-screen {
+	display: flex;
+	flex-direction: column;
+	overflow-x: unset !important;
+	position: relative;
+}
+
+.edit-site-sidebar-navigation-screen__content {
+	margin: 0 $grid-unit-20 0 $button-size;
+	flex-grow: 1;
+	overflow-y: auto;
+}
+
+.edit-site-sidebar-navigation-screen__title-icon {
+	position: sticky;
+	top: 0;
+	background: $gray-900;
+	padding-top: $grid-unit-80;
+	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
+	margin-bottom: $grid-unit-10;
+	padding-bottom: $grid-unit-10;
+	padding-right: $grid-unit-20;
+}
+
+.edit-site-sidebar-navigation-screen__title {
+	font-size: calc(1.56 * 13px);
+	font-weight: 500;
+	flex-grow: 1;
+}
+
+.edit-site-sidebar-navigation-screen__back {
+	color: $gray-200;
+
+	&:hover {
+		color: $white;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__icon-placeholder {
+	width: $button-size;
+}

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

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalNavigatorButton as NavigatorButton,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { layout, symbolFilled } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLocation } from '../routes';
+import { store as editSiteStore } from '../../store';
+import getIsListPage from '../../utils/get-is-list-page';
+
+export default function SidebarNavigationScreenMain() {
+	const { params } = useLocation();
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	return (
+		<SidebarNavigationScreen
+			path="/"
+			title={
+				<HStack justify="space-between" style={ { minHeight: 36 } }>
+					<div>{ __( 'Design' ) }</div>
+					{ ! isMobileViewport && isEditorPage && (
+						<Button
+							className="edit-site-layout__edit-button"
+							label={ __( 'Open the editor' ) }
+							onClick={ () => {
+								__unstableSetCanvasMode( 'edit' );
+							} }
+						>
+							{ __( 'Edit' ) }
+						</Button>
+					) }
+				</HStack>
+			}
+			content={
+				<ItemGroup>
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/templates"
+						withChevron
+						icon={ layout }
+					>
+						{ __( 'Templates' ) }
+					</NavigatorButton>
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/template-parts"
+						withChevron
+						icon={ symbolFilled }
+					>
+						{ __( 'Template Parts' ) }
+					</NavigatorButton>
+				</ItemGroup>
+			}
+		/>
+	);
+}

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

@@ -0,0 +1,181 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLocation } from '../routes';
+import { store as editSiteStore } from '../../store';
+import getIsListPage from '../../utils/get-is-list-page';
+import AddNewTemplate from '../add-new-template';
+
+function omit( object, keys ) {
+	return Object.fromEntries(
+		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
+	);
+}
+
+const Item = ( { item } ) => {
+	const linkInfo = useLink( item.params );
+	const props = item.params
+		? { ...omit( item, 'params' ), ...linkInfo }
+		: item;
+	return <SidebarNavigationItem { ...props } />;
+};
+
+const config = {
+	wp_template: {
+		path: '/templates',
+		labels: {
+			title: __( 'Templates' ),
+			loading: __( 'Loading templates' ),
+			notFound: __( 'No templates found' ),
+			manage: __( 'Manage all templates' ),
+		},
+	},
+	wp_template_part: {
+		path: '/template-parts',
+		labels: {
+			title: __( 'Template parts' ),
+			loading: __( 'Loading template parts' ),
+			notFound: __( 'No template parts found' ),
+			manage: __( 'Manage all template parts' ),
+		},
+	},
+};
+
+export default function SidebarNavigationScreenTemplates( {
+	postType = 'wp_template',
+} ) {
+	const { params } = useLocation();
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+
+	// Ideally the URL params would be enough.
+	// Loading the editor should ideally redirect to the home page
+	// instead of fetching the edited entity here.
+	const { editedPostId, editedPostType } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		return {
+			editedPostId: getEditedPostId(),
+			editedPostType: getEditedPostType(),
+		};
+	}, [] );
+
+	const { records: templates, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		postType,
+		{
+			per_page: -1,
+		}
+	);
+
+	let items = [];
+	if ( isLoading ) {
+		items = [
+			{
+				children: config[ postType ].labels.loading,
+			},
+		];
+	} else if ( ! templates && ! isLoading ) {
+		items = [
+			{
+				children: config[ postType ].labels.notFound,
+			},
+		];
+	} else {
+		items = templates?.map( ( template ) => ( {
+			params: {
+				postType,
+				postId: template.id,
+			},
+			children: decodeEntities(
+				template.title?.rendered || template.slug
+			),
+			'aria-current':
+				( params.postType === postType &&
+					params.postId === template.id ) ||
+				// This is a special case for the home page.
+				( editedPostId === template.id &&
+					editedPostType === postType &&
+					!! params.postId )
+					? 'page'
+					: undefined,
+		} ) );
+	}
+
+	return (
+		<SidebarNavigationScreen
+			path={ config[ postType ].path }
+			parentTitle={ __( 'Design' ) }
+			title={
+				<HStack style={ { minHeight: 36 } } justify="space-between">
+					<div style={ { flexShrink: 0 } }>
+						{ config[ postType ].labels.title }
+					</div>
+					{ ! isMobileViewport && (
+						<HStack spacing={ 2 } justify="right">
+							<AddNewTemplate
+								templateType={ postType }
+								toggleProps={ {
+									className:
+										'edit-site-sidebar-navigation-screen-templates__add-button',
+								} }
+							/>
+							{ isEditorPage && (
+								<Button
+									className="edit-site-layout__edit-button"
+									label={ __( 'Open the editor' ) }
+									onClick={ () => {
+										__unstableSetCanvasMode( 'edit' );
+									} }
+								>
+									{ __( 'Edit' ) }
+								</Button>
+							) }
+						</HStack>
+					) }
+				</HStack>
+			}
+			content={
+				<>
+					<ItemGroup>
+						{ items.map( ( item, index ) => (
+							<Item item={ item } key={ index } />
+						) ) }
+
+						<SidebarNavigationItem
+							className="edit-site-sidebar-navigation-screen-templates__see-all"
+							{ ...useLink( {
+								postType,
+								postId: undefined,
+							} ) }
+							aria-current={
+								params.postType === postType && ! params.postId
+									? 'page'
+									: undefined
+							}
+							children={ config[ postType ].labels.manage }
+						/>
+					</ItemGroup>
+				</>
+			}
+		/>
+	);
+}