@wordpress/edit-site 3.0.9 → 3.0.10

package/src/components/list/header.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AddNewTemplate from '../add-new-template';
+
+export default function Header( { templateType } ) {
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	if ( ! postType ) {
+		return null;
+	}
+
+	return (
+		<header className="edit-site-list-header">
+			<Heading level={ 1 } className="edit-site-list-header__title">
+				{ postType.labels?.name }
+			</Heading>
+
+			<div className="edit-site-list-header__right">
+				<AddNewTemplate templateType={ templateType } />
+			</div>
+		</header>
+	);
+}

package/src/components/list/index.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { InterfaceSkeleton } from '@wordpress/interface';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import Header from './header';
+import NavigationSidebar from '../navigation-sidebar';
+import Table from './table';
+
+export default function List( { templateType } ) {
+	const isDesktopViewport = useViewportMatch( 'medium' );
+
+	return (
+		<InterfaceSkeleton
+			className="edit-site-list"
+			labels={ {
+				drawer: __( 'Navigation Sidebar' ),
+			} }
+			header={ <Header templateType={ templateType } /> }
+			drawer={
+				<NavigationSidebar
+					defaultIsOpen={ isDesktopViewport }
+					activeTemplateType={ templateType }
+				/>
+			}
+			content={
+				<main className="edit-site-list-main">
+					<Table templateType={ templateType } />
+				</main>
+			}
+		/>
+	);
+}

package/src/components/list/style.scss

@@ -0,0 +1,113 @@
+.edit-site-list-header {
+	position: relative;
+	align-items: center;
+	background-color: $white;
+	display: flex;
+	height: $header-height;
+	box-sizing: border-box;
+	width: 100%;
+	justify-content: flex-end;
+	padding-right: $grid-unit-20;
+
+	body.is-fullscreen-mode & {
+		padding-left: 60px;
+		transition: padding-left 20ms linear;
+		transition-delay: 80ms;
+		@include reduce-motion("transition");
+	}
+
+	.edit-site-list-header__title {
+		position: absolute;
+		left: 0;
+		width: 100%;
+		text-align: center;
+		font-size: 20px;
+		padding: 0;
+		margin: 0;
+	}
+}
+
+.edit-site-list-header__right {
+	// Creating a stacking context so that it won't be covered by title.
+	position: relative;
+}
+
+.edit-site {
+	.edit-site-list {
+		.interface-interface-skeleton__editor {
+			min-width: 100%;
+
+			@include break-medium() {
+				min-width: 0;
+			}
+		}
+
+		.interface-interface-skeleton__content {
+			background: $white;
+		}
+	}
+}
+
+.edit-site-list-main {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: $grid-unit-20;
+
+	@include break-medium() {
+		padding: $grid-unit * 9;
+	}
+}
+
+.edit-site-list-table {
+	width: 100%;
+	border: $border-width solid $gray-200;
+	border-radius: 2px;
+	margin: 0;
+	overflow: hidden;
+
+	li {
+		display: flex;
+		align-items: center;
+		padding: $grid-unit-20;
+		box-sizing: border-box;
+		border-top: $border-width solid $gray-100;
+		margin: 0;
+
+		@include break-medium() {
+			padding: $grid-unit-30 $grid-unit-40;
+		}
+
+		.edit-site-list-table-column:nth-child(1) {
+			width: calc(60% - 36px);
+
+			a {
+				display: block;
+				text-decoration: none;
+				font-weight: 500;
+				margin-bottom: $grid-unit-05;
+			}
+		}
+
+		.edit-site-list-table-column:nth-child(2) {
+			width: calc(40% - 36px);
+		}
+
+		.edit-site-list-table-column:nth-child(3) {
+			min-width: $button-size;
+		}
+	}
+
+	li.edit-site-list-table-head {
+		border-bottom: $border-width solid $gray-200;
+		font-size: 16px;
+		font-weight: 500;
+		text-align: left;
+		color: $black;
+		border-top: none;
+
+		& + li {
+			border-top: 0;
+		}
+	}
+}

package/src/components/list/table.js

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } 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>
+	);
+}
+
+export default function Table( { templateType } ) {
+	const { templates, isLoading, postType } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecords,
+				hasFinishedResolution,
+				getPostType,
+			} = select( coreStore );
+
+			return {
+				templates: getEntityRecords( 'postType', templateType ),
+				isLoading: ! hasFinishedResolution( 'getEntityRecords', [
+					'postType',
+					templateType,
+				] ),
+				postType: getPostType( templateType ),
+			};
+		},
+		[ templateType ]
+	);
+
+	if ( ! templates || isLoading ) {
+		return null;
+	}
+
+	if ( ! templates.length ) {
+		return (
+			<div>
+				{ sprintf(
+					// translators: The template type name, should be either "templates" or "template parts".
+					__( 'No %s found.' ),
+					postType?.labels?.name?.toLowerCase()
+				) }
+			</div>
+		);
+	}
+
+	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>
+
+			{ 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>
+							{ template.description }
+						</FlexItem>
+
+						<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>
+	);
+}

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

@@ -1,30 +1,37 @@
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { createSlotFill } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import NavigationPanel from './navigation-panel';
 import NavigationToggle from './navigation-toggle';
-import { store as editSiteStore } from '../../store';
 
 export const {
 	Fill: NavigationPanelPreviewFill,
 	Slot: NavigationPanelPreviewSlot,
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
-export default function NavigationSidebar() {
-	const isNavigationOpen = useSelect( ( select ) => {
-		return select( editSiteStore ).isNavigationOpened();
-	}, [] );
+export default function NavigationSidebar( {
+	defaultIsOpen = false,
+	activeTemplateType,
+} ) {
+	const [ isNavigationOpen, setIsNavigationOpen ] = useState( defaultIsOpen );
 
 	return (
 		<>
-			<NavigationToggle isOpen={ isNavigationOpen } />
-			<NavigationPanel isOpen={ isNavigationOpen } />
+			<NavigationToggle
+				isOpen={ isNavigationOpen }
+				setIsOpen={ setIsNavigationOpen }
+			/>
+			<NavigationPanel
+				isOpen={ isNavigationOpen }
+				setIsOpen={ setIsNavigationOpen }
+				activeTemplateType={ activeTemplateType }
+			/>
 			<NavigationPanelPreviewSlot />
 		</>
 	);

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

@@ -9,64 +9,33 @@ import classnames from 'classnames';
 import {
 	__experimentalNavigation as Navigation,
 	__experimentalNavigationBackButton as NavigationBackButton,
+	__experimentalNavigationGroup as NavigationGroup,
+	__experimentalNavigationItem as NavigationItem,
+	__experimentalNavigationMenu as NavigationMenu,
 } from '@wordpress/components';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } 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';
 
 /**
  * Internal dependencies
  */
-import SiteMenu from './menus';
 import MainDashboardButton from '../../main-dashboard-button';
-import { store as editSiteStore } from '../../../store';
-import { MENU_ROOT } from './constants';
 
-const NavigationPanel = ( { isOpen } ) => {
-	const {
-		page: { context: { postType, postId } = {} } = {},
-		editedPostId,
-		editedPostType,
-		activeMenu,
-		siteTitle,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostType,
-			getEditedPostId,
-			getNavigationPanelActiveMenu,
-			getPage,
-		} = select( editSiteStore );
+const NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
+	const siteTitle = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreDataStore );
 
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
-		return {
-			page: getPage(),
-			editedPostId: getEditedPostId(),
-			editedPostType: getEditedPostType(),
-			activeMenu: getNavigationPanelActiveMenu(),
-			siteTitle: siteData.name,
-		};
+		return siteData.name;
 	}, [] );
 
-	const {
-		setNavigationPanelActiveMenu: setActive,
-		setIsNavigationPanelOpened,
-	} = useDispatch( editSiteStore );
-
-	let activeItem;
-	if ( activeMenu !== MENU_ROOT ) {
-		if ( activeMenu.startsWith( 'content' ) ) {
-			activeItem = `${ postType }-${ postId }`;
-		} else {
-			activeItem = `${ editedPostType }-${ editedPostId }`;
-		}
-	}
-
 	// 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();
@@ -74,12 +43,12 @@ const NavigationPanel = ( { isOpen } ) => {
 		if ( isOpen ) {
 			panelRef.current.focus();
 		}
-	}, [ activeMenu, isOpen ] );
+	}, [ activeTemplateType, isOpen ] );
 
 	const closeOnEscape = ( event ) => {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
-			setIsNavigationPanelOpened( false );
+			setIsOpen( false );
 		}
 	};
 
@@ -100,21 +69,41 @@ const NavigationPanel = ( { isOpen } ) => {
 					</div>
 				</div>
 				<div className="edit-site-navigation-panel__scroll-container">
-					<Navigation
-						activeItem={ activeItem }
-						activeMenu={ activeMenu }
-						onActivateMenu={ setActive }
-					>
-						{ activeMenu === MENU_ROOT && (
-							<MainDashboardButton.Slot>
-								<NavigationBackButton
-									backButtonLabel={ __( 'Dashboard' ) }
-									className="edit-site-navigation-panel__back-to-dashboard"
-									href="index.php"
+					<Navigation activeItem={ activeTemplateType }>
+						<MainDashboardButton.Slot>
+							<NavigationBackButton
+								backButtonLabel={ __( 'Dashboard' ) }
+								className="edit-site-navigation-panel__back-to-dashboard"
+								href="index.php"
+							/>
+						</MainDashboardButton.Slot>
+
+						<NavigationMenu>
+							<NavigationGroup title={ __( 'Editor' ) }>
+								<NavigationItem
+									title={ __( 'Site' ) }
+									href={ addQueryArgs( '', {
+										page: 'gutenberg-edit-site',
+									} ) }
+								/>
+								<NavigationItem
+									title={ __( 'Templates' ) }
+									item="wp_template"
+									href={ addQueryArgs( '', {
+										page: 'gutenberg-edit-site',
+										postType: 'wp_template',
+									} ) }
+								/>
+								<NavigationItem
+									title={ __( 'Template Parts' ) }
+									item="wp_template_part"
+									href={ addQueryArgs( '', {
+										page: 'gutenberg-edit-site',
+										postType: 'wp_template_part',
+									} ) }
 								/>
-							</MainDashboardButton.Slot>
-						) }
-						<SiteMenu />
+							</NavigationGroup>
+						</NavigationMenu>
 					</Navigation>
 				</div>
 			</div>

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

@@ -9,8 +9,10 @@
 	@include reduce-motion("transition");
 
 	// Footer is visible from medium so we subtract footer's height
-	@include break-medium() {
-		height: calc(100% - #{$button-size-small + $border-width});
+	.interface-interface-skeleton.has-footer & {
+		@include break-medium() {
+			height: calc(100% - #{$button-size-small + $border-width});
+		}
 	}
 }
 

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	Button,
 	Icon,
@@ -12,20 +12,8 @@ import { wordpress } from '@wordpress/icons';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { useReducedMotion } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-function NavigationToggle( { icon, isOpen } ) {
-	const {
-		isRequestingSiteIcon,
-		navigationPanelMenu,
-		siteIconUrl,
-	} = useSelect( ( select ) => {
-		const { getCurrentTemplateNavigationPanelSubMenu } = select(
-			editSiteStore
-		);
+function NavigationToggle( { icon, isOpen, setIsOpen } ) {
+	const { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => {
 		const { getEntityRecord, isResolving } = select( coreDataStore );
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
@@ -36,25 +24,13 @@ function NavigationToggle( { icon, isOpen } ) {
 				'__unstableBase',
 				undefined,
 			] ),
-			navigationPanelMenu: getCurrentTemplateNavigationPanelSubMenu(),
 			siteIconUrl: siteData.site_icon_url,
 		};
 	}, [] );
 
-	const {
-		openNavigationPanelToMenu,
-		setIsNavigationPanelOpened,
-	} = useDispatch( editSiteStore );
-
 	const disableMotion = useReducedMotion();
 
-	const toggleNavigationPanel = () => {
-		if ( isOpen ) {
-			setIsNavigationPanelOpened( false );
-			return;
-		}
-		openNavigationPanelToMenu( navigationPanelMenu );
-	};
+	const toggleNavigationPanel = () => setIsOpen( ( open ) => ! open );
 
 	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 

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

@@ -90,9 +90,10 @@ export default function TemplateDetails( { template, onClose } ) {
 
 			<Button
 				className="edit-site-template-details__show-all-button"
-				href={ addQueryArgs( 'edit.php', {
+				href={ addQueryArgs( '', {
+					page: 'gutenberg-edit-site',
 					// TODO: We should update this to filter by template part's areas as well.
-					post_type: template.type,
+					postType: template.type,
 				} ) }
 			>
 				{ sprintf(