@wordpress/edit-site 3.0.8 → 3.0.12

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,96 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { InterfaceSkeleton } from '@wordpress/interface';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { EditorSnackbars } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+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';
+
+export default function List( { templateType } ) {
+	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 postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	// `postType` could load in asynchronously. Only provide the detailed region labels if
+	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
+	const itemsListLabel = postType?.labels?.items_list;
+	const detailedRegionLabels = postType
+		? {
+				header: sprintf(
+					// translators: %s - the name of the page, 'Header' as in the header area of that page.
+					__( '%s - Header' ),
+					itemsListLabel
+				),
+				body: sprintf(
+					// translators: %s - the name of the page, 'Content' as in the content area of that page.
+					__( '%s - Content' ),
+					itemsListLabel
+				),
+		  }
+		: undefined;
+
+	return (
+		<InterfaceSkeleton
+			className={ classnames( 'edit-site-list', {
+				'is-navigation-open': isNavigationOpen,
+			} ) }
+			labels={ {
+				drawer: __( 'Navigation Sidebar' ),
+				...detailedRegionLabels,
+			} }
+			header={ <Header templateType={ templateType } /> }
+			drawer={
+				<NavigationSidebar
+					activeTemplateType={ templateType }
+					isDefaultOpen
+				/>
+			}
+			notices={ <EditorSnackbars /> }
+			content={
+				<main className="edit-site-list-main">
+					<Table templateType={ templateType } />
+				</main>
+			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
+		/>
+	);
+}

package/src/components/list/style.scss

@@ -0,0 +1,208 @@
+.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-300;
+	border-radius: 2px;
+	margin: 0;
+	overflow: hidden;
+	border-spacing: 0;
+	max-width: 960px;
+
+	tr {
+		display: flex;
+		align-items: center;
+		padding: $grid-unit-20;
+		box-sizing: border-box;
+		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% - 18px);
+			padding-right: $grid-unit-30;
+
+			a {
+				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% - 18px);
+		}
+
+		// Actions.
+		.edit-site-list-table-column:nth-child(3) {
+			min-width: $button-size;
+			flex-shrink: 0;
+		}
+	}
+
+	tr.edit-site-list-table-head {
+		font-size: 16px;
+		font-weight: 600;
+		text-align: left;
+		color: $gray-900;
+		border-top: none;
+		border-bottom: $border-width solid $gray-300;
+
+		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

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import Actions from './actions';
+import AddedBy from './added-by';
+
+export default function Table( { templateType } ) {
+	const { templates, isLoading, postType } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecords,
+				hasFinishedResolution,
+				getPostType,
+			} = select( coreStore );
+
+			return {
+				templates: getEntityRecords( 'postType', templateType, {
+					per_page: -1,
+				} ),
+				isLoading: ! hasFinishedResolution( 'getEntityRecords', [
+					'postType',
+					templateType,
+					{ per_page: -1 },
+				] ),
+				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 (
+		// 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>
+
+			<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 }
+						</td>
+
+						<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,30 +1,46 @@
 /**
  * WordPress dependencies
  */
+import { useEffect } from '@wordpress/element';
 import { createSlotFill } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+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';
-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( {
+	isDefaultOpen = false,
+	activeTemplateType,
+} ) {
+	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 } />
-			<NavigationPanel isOpen={ isNavigationOpen } />
+			<NavigationToggle />
+			<NavigationPanel activeItem={ activeTemplateType } />
 			<NavigationPanelPreviewSlot />
 		</>
 	);