@wordpress/edit-site 5.4.0 → 5.6.0

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

@@ -1,8 +1,115 @@
-.edit-site-sidebar-navigation-screen-navigation-menus {
+.edit-site-sidebar-navigation-screen__description {
+	margin: 0 0 $grid-unit-40 $grid-unit-20;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__placeholder {
+	padding: $grid-unit-10;
+	margin: $grid-unit-10;
+	background-color: $gray-100;
+	animation: loadingpulse 1s linear infinite;
+	animation-delay: 0.5s; // avoid animating for fast network responses
+}
+
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content {
 	.offcanvas-editor-list-view-leaf {
 		max-width: calc(100% - #{ $grid-unit-05 });
+		border-radius: $radius-block-ui;
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			background: $gray-800;
+		}
+		.block-editor-list-view-block__menu {
+			margin-left: -$grid-unit-10;
+		}
+		&.is-selected {
+			> td {
+				background: transparent;
+			}
+
+			.block-editor-list-view-block-contents {
+				color: inherit;
+			}
+
+			&:not(:hover) {
+				.block-editor-list-view-block__menu {
+					opacity: 0;
+				}
+			}
+
+			&:hover,
+			&:focus {
+				color: $white;
+
+				.block-editor-list-view-block__menu-cell {
+					opacity: 1;
+				}
+			}
+
+			.block-editor-list-view-block__menu {
+				opacity: 1;
+
+				&:focus {
+					box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				}
+			}
+		}
+
+		.block-editor-list-view-block-contents {
+			&:focus {
+				&::after {
+					box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				}
+			}
+		}
+
+		&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
+			background: transparent;
+
+			&:hover {
+				background: $gray-800;
+			}
+		}
 	}
+
 	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
 		width: 100%;
 	}
+
+	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
+		white-space: normal;
+	}
+
+	.block-editor-list-view-block__title {
+		margin-top: 3px;
+	}
+
+	.block-editor-list-view-block__menu-cell {
+		padding-right: 0;
+	}
+
+	.components-button {
+		color: $gray-600;
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			color: $white;
+		}
+	}
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
+	display: none;
 }

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

@@ -1,9 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { pencil } from '@wordpress/icons';
+import {
+	__experimentalUseNavigator as useNavigator,
+	Icon,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -12,41 +17,95 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+import { useAddedBy } from '../list/added-by';
 
-const config = {
-	wp_template: {
-		path: '/templates/single',
-	},
-	wp_template_part: {
-		path: '/template-parts/single',
-	},
-};
-
-export default function SidebarNavigationScreenTemplate( {
-	postType = 'wp_template',
-} ) {
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { getDescription, getTitle, record } = useEditedEntityRecord();
-	let description = getDescription();
-	if ( ! description && record.is_custom ) {
-		description = __(
-			'This is a custom template that can be applied manually to any Post or Page.'
-		);
+function useTemplateTitleAndDescription( postType, postId ) {
+	const { getDescription, getTitle, record } = useEditedEntityRecord(
+		postType,
+		postId
+	);
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
+	const addedBy = useAddedBy( postType, postId );
+	const isAddedByActiveTheme =
+		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
+	const title = getTitle();
+	let descriptionText = getDescription();
+
+	if ( ! descriptionText && addedBy.text ) {
+		if ( record.type === 'wp_template' && record.is_custom ) {
+			descriptionText = __(
+				'This is a custom template that can be applied manually to any Post or Page.'
+			);
+		} else if ( record.type === 'wp_template_part' ) {
+			descriptionText = sprintf(
+				// translators: %s: template part title e.g: "Header".
+				__( 'This is your %s template part.' ),
+				getTitle()
+			);
+		}
 	}
 
+	const description = (
+		<>
+			{ descriptionText }
+
+			{ addedBy.text && ! isAddedByActiveTheme && (
+				<span className="edit-site-sidebar-navigation-screen-template__added-by-description">
+					<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author">
+						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon">
+							{ addedBy.imageUrl ? (
+								<img
+									src={ addedBy.imageUrl }
+									alt=""
+									width="24"
+									height="24"
+								/>
+							) : (
+								<Icon icon={ addedBy.icon } />
+							) }
+						</span>
+						{ addedBy.text }
+					</span>
+
+					{ addedBy.isCustomized && (
+						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
+							{ postType === 'wp_template'
+								? _x( '(Customized)', 'template' )
+								: _x( '(Customized)', 'template part' ) }
+						</span>
+					) }
+				</span>
+			) }
+		</>
+	);
+
+	return { title, description };
+}
+
+export default function SidebarNavigationScreenTemplate() {
+	const { params } = useNavigator();
+	const { postType, postId } = params;
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { title, description } = useTemplateTitleAndDescription(
+		postType,
+		postId
+	);
+
 	return (
 		<SidebarNavigationScreen
-			path={ config[ postType ].path }
-			title={ getTitle() }
+			title={ title }
 			actions={
-				<Button
-					variant="primary"
+				<SidebarButton
 					onClick={ () => setCanvasMode( 'edit' ) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
 			}
-			content={ description ? <p>{ description }</p> : undefined }
+			description={ description }
 		/>
 	);
 }

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

@@ -0,0 +1,25 @@
+.edit-site-sidebar-navigation-screen-template__added-by-description {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: $grid-unit-30;
+
+	&-author {
+		display: inline-flex;
+		align-items: center;
+
+		img {
+			border-radius: $grid-unit-15;
+		}
+
+		svg {
+			fill: $gray-600;
+		}
+
+		&-icon {
+			width: 24px;
+			height: 24px;
+			margin-right: $grid-unit-10;
+		}
+	}
+}

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

@@ -4,9 +4,11 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -17,24 +19,30 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
 
 const config = {
 	wp_template: {
-		path: '/templates',
 		labels: {
 			title: __( 'Templates' ),
 			loading: __( 'Loading templates' ),
 			notFound: __( 'No templates found' ),
 			manage: __( 'Manage all templates' ),
+			description: __(
+				'Express the layout of your site with 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' ),
+			description: __(
+				'Template Parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer, or sidebar.'
+			),
 		},
 	},
 };
@@ -43,15 +51,20 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 	const linkInfo = useLink( {
 		postType,
 		postId,
-		path: config[ postType ].path + '/single',
 	} );
 	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 
-export default function SidebarNavigationScreenTemplates( {
-	postType = 'wp_template',
-} ) {
+export default function SidebarNavigationScreenTemplates() {
+	const {
+		params: { postType },
+	} = useNavigator();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
 
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
@@ -60,24 +73,26 @@ export default function SidebarNavigationScreenTemplates( {
 			per_page: -1,
 		}
 	);
+	const sortedTemplates = templates ? [ ...templates ] : [];
+	sortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
 
 	const browseAllLink = useLink( {
-		postType,
-		postId: undefined,
-		path: config[ postType ].path + '/all',
+		path: '/' + postType + '/all',
 	} );
 
+	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
+
 	return (
 		<SidebarNavigationScreen
-			path={ config[ postType ].path }
+			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].labels.title }
+			description={ config[ postType ].labels.description }
 			actions={
-				! isMobileViewport && (
+				canCreate && (
 					<AddNewTemplate
 						templateType={ postType }
 						toggleProps={ {
-							className:
-								'edit-site-sidebar-navigation-screen-templates__add-button',
+							as: SidebarButton,
 						} }
 					/>
 				)
@@ -92,7 +107,7 @@ export default function SidebarNavigationScreenTemplates( {
 									{ config[ postType ].labels.notFound }
 								</Item>
 							) }
-							{ ( templates ?? [] ).map( ( template ) => (
+							{ sortedTemplates.map( ( template ) => (
 								<TemplateItem
 									postType={ postType }
 									postId={ template.id }

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

@@ -2,8 +2,3 @@
 	/* 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/sidebar-navigation-screen-templates-browse/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,22 +11,27 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 
 const config = {
 	wp_template: {
-		path: '/templates/all',
 		title: __( 'All templates' ),
+		description: __(
+			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
+		),
 	},
 	wp_template_part: {
-		path: '/template-parts/all',
 		title: __( 'All template parts' ),
+		description: __(
+			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
+		),
 	},
 };
 
-export default function SidebarNavigationScreenTemplatesBrowse( {
-	postType = 'wp_template',
-} ) {
+export default function SidebarNavigationScreenTemplatesBrowse() {
+	const {
+		params: { postType },
+	} = useNavigator();
 	return (
 		<SidebarNavigationScreen
-			path={ config[ postType ].path }
 			title={ config[ postType ].title }
+			description={ config[ postType ].description }
 		/>
 	);
 }

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

@@ -95,7 +95,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 					</Button>
 				</motion.div>
 
-				{ showLabels && <div>{ siteTitle }</div> }
+				{ showLabels && (
+					<div className="edit-site-site-hub__site-title">
+						{ siteTitle }
+					</div>
+				) }
 			</HStack>
 		</motion.div>
 	);

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

@@ -11,7 +11,7 @@
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
-	width: $header-height + 4px;
+	width: $header-height;
 	flex-shrink: 0;
 	background: $gray-900;
 }
@@ -26,3 +26,7 @@
 	white-space: nowrap;
 	overflow: hidden;
 }
+
+.edit-site-site-hub__site-title {
+	margin-left: $grid-unit-05;
+}