@wordpress/edit-site 3.0.11 → 3.0.12

package/src/components/list/style.scss

@@ -61,12 +61,14 @@
 
 .edit-site-list-table {
 	width: 100%;
-	border: $border-width solid $gray-200;
+	border: $border-width solid $gray-300;
 	border-radius: 2px;
 	margin: 0;
 	overflow: hidden;
+	border-spacing: 0;
+	max-width: 960px;
 
-	li {
+	tr {
 		display: flex;
 		align-items: center;
 		padding: $grid-unit-20;
@@ -74,40 +76,133 @@
 		border-top: $border-width solid $gray-100;
 		margin: 0;
 
+		&:first-child {
+			border-top: 0;
+		}
+
 		@include break-medium() {
 			padding: $grid-unit-30 $grid-unit-40;
 		}
 
+		// Template.
 		.edit-site-list-table-column:nth-child(1) {
-			width: calc(60% - 36px);
+			width: calc(60% - 18px);
+			padding-right: $grid-unit-30;
 
 			a {
-				display: block;
+				display: inline-block;
 				text-decoration: none;
 				font-weight: 500;
 				margin-bottom: $grid-unit-05;
 			}
 		}
 
+		// Added by.
 		.edit-site-list-table-column:nth-child(2) {
-			width: calc(40% - 36px);
+			width: calc(40% - 18px);
 		}
 
+		// Actions.
 		.edit-site-list-table-column:nth-child(3) {
 			min-width: $button-size;
+			flex-shrink: 0;
 		}
 	}
 
-	li.edit-site-list-table-head {
-		border-bottom: $border-width solid $gray-200;
+	tr.edit-site-list-table-head {
 		font-size: 16px;
-		font-weight: 500;
+		font-weight: 600;
 		text-align: left;
-		color: $black;
+		color: $gray-900;
 		border-top: none;
+		border-bottom: $border-width solid $gray-300;
 
-		& + li {
-			border-top: 0;
+		th {
+			font-weight: inherit;
+		}
+	}
+}
+
+.edit-site-list.is-navigation-open .components-snackbar-list {
+	@include break-medium() {
+		margin-left: $nav-sidebar-width;
+	}
+}
+
+.edit-site-list__rename-modal {
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.edit-site-list__rename-modal-actions {
+	margin-top: $grid-unit-15;
+}
+
+.edit-site-template__actions {
+	button:not(:last-child) {
+		margin-right: $grid-unit-10;
+	}
+}
+
+.edit-site-list-added-by__icon {
+	display: flex;
+	flex-shrink: 0;
+	position: relative;
+	align-items: center;
+	justify-content: center;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
+	background: $gray-800;
+	border-radius: 100%;
+
+	svg {
+		fill: $white;
+	}
+
+	&.is-customized::after {
+		position: absolute;
+		content: "";
+		background: var(--wp-admin-theme-color);
+		height: $grid-unit-10;
+		width: $grid-unit-10;
+		outline: 2px solid $white;
+		border-radius: 100%;
+		top: -1px;
+		right: -1px;
+	}
+}
+
+.edit-site-list-added-by__avatar {
+	flex-shrink: 0;
+	overflow: hidden;
+	border-radius: 100%;
+	background: $gray-800;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
+
+	img {
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	&.is-loaded {
+		img {
+			opacity: 1;
 		}
 	}
 }

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,56 +57,65 @@ 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( window.location.href, {
-									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 }
+								</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/navigation-sidebar/index.js

@@ -1,13 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, 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';
 
@@ -21,33 +23,24 @@ export default function NavigationSidebar( {
 	activeTemplateType,
 } ) {
 	const isDesktopViewport = useViewportMatch( 'medium' );
-	const [ isNavigationOpen, setIsNavigationOpen ] = useState(
-		isDefaultOpen && isDesktopViewport
-	);
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	useEffect( () => {
 		// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
 		if ( isDefaultOpen && isDesktopViewport ) {
-			setIsNavigationOpen( true );
+			setIsNavigationPanelOpened( true );
 		}
 
 		// When transitioning to mobile/tablet, close the navigation.
 		if ( ! isDesktopViewport ) {
-			setIsNavigationOpen( false );
+			setIsNavigationPanelOpened( false );
 		}
-	}, [ isDefaultOpen, isDesktopViewport ] );
+	}, [ 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,13 +93,16 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>
 								<NavigationItem
+									icon={ siteIcon }
 									title={ __( 'Site' ) }
+									item={ SITE_EDITOR_KEY }
 									href={ addQueryArgs( window.location.href, {
 										postId: undefined,
 										postType: undefined,
 									} ) }
 								/>
 								<NavigationItem
+									icon={ templateIcon }
 									title={ __( 'Templates' ) }
 									item="wp_template"
 									href={ addQueryArgs( window.location.href, {
@@ -96,6 +111,7 @@ const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
 									} ) }
 								/>
 								<NavigationItem
+									icon={ templatePartIcon }
 									title={ __( 'Template Parts' ) }
 									item="wp_template_part"
 									href={ addQueryArgs( window.location.href, {

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/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 );
 }