@wordpress/edit-site 4.19.0 → 5.1.0

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,39 @@
+.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 $grid-unit-20 $button-size;
+}
+
+.edit-site-sidebar-navigation-screen__title-icon {
+	position: sticky;
+	top: 0;
+	background: $gray-900;
+	padding-top: $grid-unit-60 + $hub-height + $canvas-padding * 2;
+	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,44 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalNavigatorButton as NavigatorButton,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { layout, symbolFilled } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+
+export default function SidebarNavigationScreenMain() {
+	return (
+		<SidebarNavigationScreen
+			path="/"
+			title={ __( 'Design' ) }
+			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,163 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { 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 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 isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	// 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 justify="space-between">
+					<div style={ { flexShrink: 0 } }>
+						{ config[ postType ].labels.title }
+					</div>
+					{ ! isMobileViewport && (
+						<AddNewTemplate
+							templateType={ postType }
+							toggleProps={ {
+								className:
+									'edit-site-sidebar-navigation-screen-templates__add-button',
+							} }
+						/>
+					) }
+				</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>
+				</>
+			}
+		/>
+	);
+}

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

@@ -0,0 +1,9 @@
+.edit-site-sidebar-navigation-screen-templates__see-all {
+	/* Overrides the margin that comes from the Item component */
+	margin-top: $grid-unit-20 !important;
+}
+
+.edit-site-sidebar-navigation-screen-templates__add-button {
+	/* Overrides the color for all states of the button */
+	color: inherit !important;
+}

package/src/components/site-hub/index.js

@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__unstableMotion as motion,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import getIsListPage from '../../utils/get-is-list-page';
+import SiteIcon from '../site-icon';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+const HUB_ANIMATION_DURATION = 0.3;
+
+function SiteHub( {
+	className,
+	isMobileCanvasVisible,
+	setIsMobileCanvasVisible,
+} ) {
+	const { params } = useLocation();
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+	const { canvasMode, dashboardLink, entityConfig } = useSelect(
+		( select ) => {
+			select( editSiteStore ).getEditedPostType();
+			const { __unstableGetCanvasMode, getSettings, getEditedPostType } =
+				select( editSiteStore );
+			return {
+				canvasMode: __unstableGetCanvasMode(),
+				dashboardLink: getSettings().__experimentalDashboardLink,
+				entityConfig: select( coreStore ).getEntityConfig(
+					'postType',
+					getEditedPostType()
+				),
+			};
+		},
+		[]
+	);
+	const disableMotion = useReducedMotion();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const showEditButton =
+		( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
+		( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
+	const isBackToDashboardButton =
+		( ! isMobileViewport && canvasMode === 'view' ) ||
+		( isMobileViewport && ! isMobileCanvasVisible );
+	const showLabels = canvasMode !== 'edit';
+	const siteIconButtonProps = isBackToDashboardButton
+		? {
+				href: dashboardLink || 'index.php',
+				'aria-label': __( 'Go back to the dashboard' ),
+		  }
+		: {
+				label: __( 'Open Navigation Sidebar' ),
+				onClick: () => {
+					clearSelectedBlock();
+					setIsMobileCanvasVisible( false );
+					__unstableSetCanvasMode( 'view' );
+				},
+		  };
+	const { getTitle } = useEditedEntityRecord();
+
+	return (
+		<motion.div
+			className={ classnames( 'edit-site-site-hub', className ) }
+			layout
+			transition={ {
+				type: 'tween',
+				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+				ease: 'easeOut',
+			} }
+		>
+			<HStack
+				justify="flex-start"
+				className="edit-site-site-hub__text-content"
+			>
+				<motion.div
+					className="edit-site-site-hub__view-mode-toggle-container"
+					layout
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+						ease: 'easeOut',
+					} }
+				>
+					<Button
+						{ ...siteIconButtonProps }
+						className="edit-site-layout__view-mode-toggle"
+					>
+						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+					</Button>
+				</motion.div>
+
+				{ showLabels && (
+					<VStack spacing={ 0 }>
+						<div className="edit-site-site-hub__title">
+							{ getTitle() }
+						</div>
+						<div className="edit-site-site-hub__post-type">
+							{ entityConfig?.label }
+						</div>
+					</VStack>
+				) }
+			</HStack>
+
+			{ showEditButton && (
+				<Button
+					className="edit-site-site-hub__edit-button"
+					label={ __( 'Open the editor' ) }
+					onClick={ () => {
+						__unstableSetCanvasMode( 'edit' );
+					} }
+					variant="primary"
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			) }
+
+			{ isMobileViewport && ! isMobileCanvasVisible && (
+				<Button
+					onClick={ () => setIsMobileCanvasVisible( true ) }
+					variant="primary"
+				>
+					{ __( 'View Editor' ) }
+				</Button>
+			) }
+		</motion.div>
+	);
+}
+
+export default SiteHub;

package/src/components/site-hub/style.scss

@@ -0,0 +1,31 @@
+.edit-site-site-hub {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+}
+
+.edit-site-site-hub__edit-button {
+	height: $grid-unit-40;
+}
+
+.edit-site-site-hub__post-type {
+	opacity: 0.6;
+}
+
+.edit-site-site-hub__view-mode-toggle-container {
+	height: $header-height;
+	width: $header-height;
+	flex-shrink: 0;
+}
+
+.edit-site-site-hub__text-content {
+	// Necessary for the ellipsis to work.
+	overflow: hidden;
+}
+
+.edit-site-site-hub__title {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}

package/src/components/site-icon/index.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { wordpress } from '@wordpress/icons';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+function SiteIcon( { className } ) {
+	const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
+		const { getEntityRecord, isResolving } = select( coreDataStore );
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+
+		return {
+			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
+				'root',
+				'__unstableBase',
+				undefined,
+			] ),
+			siteIconUrl: siteData.site_icon_url,
+		};
+	}, [] );
+
+	if ( isRequestingSite && ! siteIconUrl ) {
+		return null;
+	}
+
+	const icon = siteIconUrl ? (
+		<img
+			className="edit-site-site-icon__image"
+			alt={ __( 'Site Icon' ) }
+			src={ siteIconUrl }
+		/>
+	) : (
+		<Icon
+			className="edit-site-site-icon__icon"
+			size="36px"
+			icon={ wordpress }
+		/>
+	);
+
+	return (
+		<div className={ classnames( className, 'edit-site-site-icon' ) }>
+			{ icon }
+		</div>
+	);
+}
+
+export default SiteIcon;

package/src/components/site-icon/style.scss

@@ -0,0 +1,10 @@
+.edit-site-site-icon__icon {
+	fill: currentColor;
+}
+
+.edit-site-site-icon__image {
+	width: $button-size;
+	height: $button-size;
+	border-radius: $radius-block-ui;
+	object-fit: cover;
+}