@wordpress/edit-site 3.0.10 → 3.0.14

package/src/components/list/table.js

@@ -1,43 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	VisuallyHidden,
-	FlexItem,
-	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 } from '@wordpress/components';
-import { moreVertical } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
-import isTemplateRemovable from '../../utils/is-template-removable';
-
-function Actions( { template, onClose } ) {
-	const { removeTemplate } = useDispatch( editSiteStore );
-
-	return (
-		<MenuGroup>
-			<MenuItem
-				onClick={ () => {
-					removeTemplate( template );
-					onClose();
-				} }
-			>
-				{ __( 'Remove template' ) }
-			</MenuItem>
-		</MenuGroup>
-	);
-}
+import Actions from './actions';
+import AddedBy from './added-by';
 
 export default function Table( { templateType } ) {
 	const { templates, isLoading, postType } = useSelect(
@@ -49,10 +26,13 @@ export default function Table( { templateType } ) {
 			} = select( coreStore );
 
 			return {
-				templates: getEntityRecords( 'postType', templateType ),
+				templates: getEntityRecords( 'postType', templateType, {
+					per_page: -1,
+				} ),
 				isLoading: ! hasFinishedResolution( 'getEntityRecords', [
 					'postType',
 					templateType,
+					{ per_page: -1 },
 				] ),
 				postType: getPostType( templateType ),
 			};
@@ -77,57 +57,66 @@ export default function Table( { templateType } ) {
 	}
 
 	return (
-		<ul className="edit-site-list-table">
-			<HStack className="edit-site-list-table-head" as="li">
-				<FlexItem className="edit-site-list-table-column">
-					<Heading level={ 4 }>{ __( 'Template' ) }</Heading>
-				</FlexItem>
-				<FlexItem className="edit-site-list-table-column">
-					<Heading level={ 4 }>{ __( 'Added by' ) }</Heading>
-				</FlexItem>
-				<FlexItem className="edit-site-list-table-column">
-					<VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>
-				</FlexItem>
-			</HStack>
+		// These explicit aria roles are needed for Safari.
+		// See https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables
+		<table className="edit-site-list-table" role="table">
+			<thead>
+				<tr className="edit-site-list-table-head" role="row">
+					<th
+						className="edit-site-list-table-column"
+						role="columnheader"
+					>
+						{ __( 'Template' ) }
+					</th>
+					<th
+						className="edit-site-list-table-column"
+						role="columnheader"
+					>
+						{ __( 'Added by' ) }
+					</th>
+					<th
+						className="edit-site-list-table-column"
+						role="columnheader"
+					>
+						<VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>
+					</th>
+				</tr>
+			</thead>
 
-			{ templates.map( ( template ) => (
-				<li key={ template.id }>
-					<HStack className="edit-site-list-table-row">
-						<FlexItem className="edit-site-list-table-column">
-							<a
-								href={ addQueryArgs( '', {
-									page: 'gutenberg-edit-site',
-									postId: template.id,
-									postType: template.type,
-								} ) }
-							>
-								{ template.title.rendered }
-							</a>
+			<tbody>
+				{ templates.map( ( template ) => (
+					<tr
+						key={ template.id }
+						className="edit-site-list-table-row"
+						role="row"
+					>
+						<td className="edit-site-list-table-column" role="cell">
+							<Heading level={ 4 }>
+								<a
+									href={ addQueryArgs( window.location.href, {
+										postId: template.id,
+										postType: template.type,
+									} ) }
+								>
+									{ template.title?.rendered ||
+										template.slug }
+								</a>
+							</Heading>
 							{ template.description }
-						</FlexItem>
+						</td>
 
-						<FlexItem className="edit-site-list-table-column">
-							{ template.theme }
-						</FlexItem>
-						<FlexItem className="edit-site-list-table-column">
-							{ isTemplateRemovable( template ) && (
-								<DropdownMenu
-									icon={ moreVertical }
-									label={ __( 'Actions' ) }
-									className="edit-site-list-table__actions"
-								>
-									{ ( { onClose } ) => (
-										<Actions
-											template={ template }
-											onClose={ onClose }
-										/>
-									) }
-								</DropdownMenu>
-							) }
-						</FlexItem>
-					</HStack>
-				</li>
-			) ) }
-		</ul>
+						<td className="edit-site-list-table-column" role="cell">
+							<AddedBy
+								templateType={ templateType }
+								template={ template }
+							/>
+						</td>
+						<td className="edit-site-list-table-column" role="cell">
+							<Actions template={ template } />
+						</td>
+					</tr>
+				) ) }
+			</tbody>
+		</table>
 	);
 }

package/src/components/list/use-register-shortcuts.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+export default function useRegisterShortcuts() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/edit-site/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+			],
+		} );
+	}, [] );
+}

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

@@ -1,12 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { createSlotFill } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { store as editSiteStore } from '../../store';
 import NavigationPanel from './navigation-panel';
 import NavigationToggle from './navigation-toggle';
 
@@ -16,22 +19,28 @@ export const {
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
 export default function NavigationSidebar( {
-	defaultIsOpen = false,
+	isDefaultOpen = false,
 	activeTemplateType,
 } ) {
-	const [ isNavigationOpen, setIsNavigationOpen ] = useState( defaultIsOpen );
+	const isDesktopViewport = useViewportMatch( 'medium' );
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
+		if ( isDefaultOpen && isDesktopViewport ) {
+			setIsNavigationPanelOpened( true );
+		}
+
+		// When transitioning to mobile/tablet, close the navigation.
+		if ( ! isDesktopViewport ) {
+			setIsNavigationPanelOpened( false );
+		}
+	}, [ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ] );
 
 	return (
 		<>
-			<NavigationToggle
-				isOpen={ isNavigationOpen }
-				setIsOpen={ setIsNavigationOpen }
-			/>
-			<NavigationPanel
-				isOpen={ isNavigationOpen }
-				setIsOpen={ setIsNavigationOpen }
-				activeTemplateType={ activeTemplateType }
-			/>
+			<NavigationToggle />
+			<NavigationPanel activeItem={ activeTemplateType } />
 			<NavigationPanelPreviewSlot />
 		</>
 	);

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

@@ -14,41 +14,53 @@ import {
 	__experimentalNavigationMenu as NavigationMenu,
 } from '@wordpress/components';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
+import {
+	home as siteIcon,
+	layout as templateIcon,
+	symbolFilled as templatePartIcon,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import MainDashboardButton from '../../main-dashboard-button';
+import { store as editSiteStore } from '../../../store';
+
+const SITE_EDITOR_KEY = 'site-editor';
 
-const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
-	const siteTitle = useSelect( ( select ) => {
+const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
+	const { isNavigationOpen, siteTitle } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreDataStore );
 
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
-		return siteData.name;
+		return {
+			siteTitle: siteData.name,
+			isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
+		};
 	}, [] );
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	// Ensures focus is moved to the panel area when it is activated
 	// from a separate component (such as document actions in the header).
 	const panelRef = useRef();
 	useEffect( () => {
-		if ( isOpen ) {
+		if ( isNavigationOpen ) {
 			panelRef.current.focus();
 		}
-	}, [ activeTemplateType, isOpen ] );
+	}, [ activeItem, isNavigationOpen ] );
 
 	const closeOnEscape = ( event ) => {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
-			setIsOpen( false );
+			setIsNavigationPanelOpened( false );
 		}
 	};
 
@@ -56,7 +68,7 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			className={ classnames( `edit-site-navigation-panel`, {
-				'is-open': isOpen,
+				'is-open': isNavigationOpen,
 			} ) }
 			ref={ panelRef }
 			tabIndex="-1"
@@ -69,7 +81,7 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
 					</div>
 				</div>
 				<div className="edit-site-navigation-panel__scroll-container">
-					<Navigation activeItem={ activeTemplateType }>
+					<Navigation activeItem={ activeItem }>
 						<MainDashboardButton.Slot>
 							<NavigationBackButton
 								backButtonLabel={ __( 'Dashboard' ) }
@@ -81,24 +93,29 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>
 								<NavigationItem
+									icon={ siteIcon }
 									title={ __( 'Site' ) }
-									href={ addQueryArgs( '', {
-										page: 'gutenberg-edit-site',
+									item={ SITE_EDITOR_KEY }
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
+										postType: undefined,
 									} ) }
 								/>
 								<NavigationItem
+									icon={ templateIcon }
 									title={ __( 'Templates' ) }
 									item="wp_template"
-									href={ addQueryArgs( '', {
-										page: 'gutenberg-edit-site',
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
 										postType: 'wp_template',
 									} ) }
 								/>
 								<NavigationItem
+									icon={ templatePartIcon }
 									title={ __( 'Template Parts' ) }
 									item="wp_template_part"
-									href={ addQueryArgs( '', {
-										page: 'gutenberg-edit-site',
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
 										postType: 'wp_template_part',
 									} ) }
 								/>

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	Icon,
@@ -12,25 +12,36 @@ import { wordpress } from '@wordpress/icons';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { useReducedMotion } from '@wordpress/compose';
 
-function NavigationToggle( { icon, isOpen, setIsOpen } ) {
-	const { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => {
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+function NavigationToggle( { icon } ) {
+	const { isNavigationOpen, isRequestingSiteIcon, siteIconUrl } = useSelect(
+		( select ) => {
+			const { getEntityRecord, isResolving } = select( coreDataStore );
+			const siteData =
+				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
-		return {
-			isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteIconUrl: siteData.site_icon_url,
-		};
-	}, [] );
+			return {
+				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
+				isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
+					'root',
+					'__unstableBase',
+					undefined,
+				] ),
+				siteIconUrl: siteData.site_icon_url,
+			};
+		},
+		[]
+	);
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const disableMotion = useReducedMotion();
 
-	const toggleNavigationPanel = () => setIsOpen( ( open ) => ! open );
+	const toggleNavigationPanel = () =>
+		setIsNavigationPanelOpened( ! isNavigationOpen );
 
 	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 
@@ -60,7 +71,8 @@ function NavigationToggle( { icon, isOpen, setIsOpen } ) {
 	return (
 		<motion.div
 			className={
-				'edit-site-navigation-toggle' + ( isOpen ? ' is-open' : '' )
+				'edit-site-navigation-toggle' +
+				( isNavigationOpen ? ' is-open' : '' )
 			}
 			whileHover="expand"
 		>

package/src/components/navigation-sidebar/navigation-toggle/test/index.js

@@ -34,6 +34,7 @@ describe( 'NavigationToggle', () => {
 						site_icon_url: 'https://fakeUrl.com',
 					} ),
 					isResolving: () => false,
+					isNavigationOpened: () => false,
 				} ) );
 			} );
 
@@ -53,6 +54,7 @@ describe( 'NavigationToggle', () => {
 						site_icon_url: '',
 					} ),
 					isResolving: () => false,
+					isNavigationOpened: () => false,
 				} ) );
 			} );
 

package/src/components/sidebar/style.scss

@@ -62,7 +62,8 @@
 	padding: 0 $grid-unit-20;
 }
 
-.edit-site-global-styles-color-palette-panel {
+.edit-site-global-styles-color-palette-panel,
+.edit-site-global-styles-gradient-palette-panel {
 	padding: $grid-unit-20;
 }
 

package/src/components/template-details/edit-template-title.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+
+export default function EditTemplateTitle( { template } ) {
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		template.type,
+		'title',
+		template.id
+	);
+
+	return (
+		<TextControl
+			label={ __( 'Title' ) }
+			value={ title }
+			help={ __(
+				'Give the template a title that indicates its purpose, e.g. "Full Width".'
+			) }
+			onChange={ ( newTitle ) => {
+				setTitle( newTitle || template.slug );
+			} }
+		/>
+	);
+}

package/src/components/template-details/index.js

@@ -24,6 +24,7 @@ import {
 } from '../navigation-sidebar/navigation-panel/constants';
 import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
+import EditTemplateTitle from './edit-template-title';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
@@ -55,13 +56,17 @@ export default function TemplateDetails( { template, onClose } ) {
 	return (
 		<div className="edit-site-template-details">
 			<div className="edit-site-template-details__group">
-				<Heading
-					level={ 4 }
-					weight={ 600 }
-					className="edit-site-template-details__title"
-				>
-					{ title }
-				</Heading>
+				{ template.is_custom ? (
+					<EditTemplateTitle template={ template } />
+				) : (
+					<Heading
+						level={ 4 }
+						weight={ 600 }
+						className="edit-site-template-details__title"
+					>
+						{ title }
+					</Heading>
+				) }
 
 				{ description && (
 					<Text
@@ -80,7 +85,7 @@ export default function TemplateDetails( { template, onClose } ) {
 				<MenuGroup className="edit-site-template-details__group edit-site-template-details__revert">
 					<MenuItem
 						className="edit-site-template-details__revert-button"
-						info={ __( 'Restore template to theme default' ) }
+						info={ __( 'Restore template to default state' ) }
 						onClick={ revert }
 					>
 						{ __( 'Clear customizations' ) }
@@ -90,9 +95,9 @@ export default function TemplateDetails( { template, onClose } ) {
 
 			<Button
 				className="edit-site-template-details__show-all-button"
-				href={ addQueryArgs( '', {
-					page: 'gutenberg-edit-site',
+				href={ addQueryArgs( window.location.href, {
 					// TODO: We should update this to filter by template part's areas as well.
+					postId: undefined,
 					postType: template.type,
 				} ) }
 			>

package/src/components/template-details/template-areas.js

@@ -48,7 +48,7 @@ function TemplatePartItemMore( {
 			{ isTemplateRevertable( templatePart ) && (
 				<MenuGroup>
 					<MenuItem
-						info={ __( 'Restore template to theme default' ) }
+						info={ __( 'Restore template to default state' ) }
 						onClick={ clearCustomizations }
 					>
 						{ __( 'Clear customizations' ) }

package/src/index.js

@@ -6,20 +6,21 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { dispatch } from '@wordpress/data';
+import { dispatch, select } from '@wordpress/data';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import {
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { store as viewportStore } from '@wordpress/viewport';
 
 /**
  * Internal dependencies
  */
 import './plugins';
 import './hooks';
-import './store';
+import { store as editSiteStore } from './store';
 import Editor from './components/editor';
 import List from './components/list';
 
@@ -84,6 +85,13 @@ export function initializeList( id, templateType, settings ) {
 		defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
 	} );
 
+	// Default the navigation panel to be opened when we're in a bigger screen.
+	// We update the store synchronously before rendering so that we won't
+	// trigger an unnecessary re-render with useEffect.
+	dispatch( editSiteStore ).setIsNavigationPanelOpened(
+		select( viewportStore ).isViewportMatch( 'medium' )
+	);
+
 	render( <List templateType={ templateType } />, target );
 }