@wordpress/edit-site 5.26.0 → 5.27.0

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

@@ -0,0 +1,9 @@
+.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
+	text-transform: uppercase;
+	color: $gray-200;
+	// 6px right padding to align with + button
+	padding: $grid-unit-30 6px $grid-unit-20 $grid-unit-20;
+	border-top: 1px solid $gray-800;
+	font-size: 11px;
+	font-weight: 500;
+}

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import DataViewItem from '../sidebar-dataviews/dataview-item';
+import { useAddedBy } from '../list/added-by';
+import { layout } from '@wordpress/icons';
+
+const EMPTY_ARRAY = [];
+
+function TemplateDataviewItem( { template, isActive } ) {
+	const { text, icon } = useAddedBy( template.type, template.id );
+	return (
+		<DataViewItem
+			key={ text }
+			slug={ text }
+			title={ text }
+			icon={ icon }
+			isActive={ isActive }
+			isCustom="false"
+		/>
+	);
+}
+
+export default function DataviewsTemplatesSidebarContent( {
+	activeView,
+	postType,
+	config,
+} ) {
+	const { records } = useEntityRecords( 'postType', postType, {
+		per_page: -1,
+	} );
+	const firstItemPerAuthorText = useMemo( () => {
+		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
+			const author = template.author_text;
+			if ( author && ! acc[ author ] ) {
+				acc[ author ] = template;
+			}
+			return acc;
+		}, {} );
+		return (
+			( firstItemPerAuthor && Object.values( firstItemPerAuthor ) ) ??
+			EMPTY_ARRAY
+		);
+	}, [ records ] );
+
+	return (
+		<ItemGroup>
+			<DataViewItem
+				slug={ 'all' }
+				title={ config[ postType ].title }
+				icon={ layout }
+				isActive={ activeView === 'all' }
+				isCustom="false"
+			/>
+			{ firstItemPerAuthorText.map( ( template ) => {
+				return (
+					<TemplateDataviewItem
+						key={ template.author_text }
+						template={ template }
+						isActive={ activeView === template.author_text }
+					/>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}

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

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -16,6 +17,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
+import DataviewsTemplatesSidebarContent from './content';
 
 const config = {
 	[ TEMPLATE_POST_TYPE ]: {
@@ -40,7 +42,7 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 		params: { postType },
 	} = useNavigator();
 	const {
-		params: { didAccessPatternsPage },
+		params: { didAccessPatternsPage, activeView = 'all' },
 	} = useLocation();
 
 	const isTemplatePartsMode = useSelect( ( select ) => {
@@ -56,6 +58,13 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }
+			content={
+				<DataviewsTemplatesSidebarContent
+					activeView={ activeView }
+					postType={ postType }
+					config={ config }
+				/>
+			}
 		/>
 	);
 }

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

@@ -180,7 +180,10 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 								'View site (opens in a new tab)'
 							) }
 							icon={ external }
-							className="edit-site-site-hub__site-view-link"
+							className={ classnames(
+								'edit-site-site-hub__site-view-link',
+								{ 'is-transparent': isTransparent }
+							) }
 						/>
 					) }
 				</HStack>

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

@@ -9,6 +9,7 @@
 	}
 
 	.edit-site-site-hub__site-title,
+	.edit-site-site-hub__site-view-link,
 	.edit-site-site-hub_toggle-command-center {
 		transition: opacity ease 0.1s;
 
@@ -20,22 +21,10 @@
 	.edit-site-site-hub__site-view-link {
 		flex-grow: 0;
 		margin-right: var(--wp-admin-border-width-focus);
-		@include break-mobile() {
-			opacity: 0;
-			transition: opacity 0.2s ease-in-out;
-		}
-		&:focus {
-			opacity: 1;
-		}
 		svg {
 			fill: $gray-200;
 		}
 	}
-	&:hover {
-		.edit-site-site-hub__site-view-link {
-			opacity: 1;
-		}
-	}
 }
 
 .edit-site-site-hub__post-type {

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

@@ -9,7 +9,7 @@
 	object-fit: cover;
 	background: #333;
 
-	.edit-site-layout.is-full-canvas.is-edit-mode & {
+	.edit-site-layout.is-full-canvas & {
 		border-radius: 0;
 	}
 }

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -27,7 +27,7 @@ const postTypesWithoutParentTemplate = [
 	PATTERN_TYPES.user,
 ];
 
-function useResolveEditedEntityAndContext( { postId, postType } ) {
+function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 	const { hasLoadedAllDependencies, homepageId, url, frontPageTemplateId } =
 		useSelect( ( select ) => {
 			const { getSite, getUnstableBase, getEntityRecords } =
@@ -128,10 +128,25 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 						return currentTemplate.id;
 					}
 				}
-
 				// If no template is assigned, use the default template.
+				let slugToCheck;
+				// In `draft` status we might not have a slug available, so we use the `single`
+				// post type templates slug(ex page, single-post, single-product etc..).
+				// Pages do not need the `single` prefix in the slug to be prioritized
+				// through template hierarchy.
+				if ( editedEntity.slug ) {
+					slugToCheck =
+						postTypeToResolve === 'page'
+							? `${ postTypeToResolve }-${ editedEntity.slug }`
+							: `single-${ postTypeToResolve }-${ editedEntity.slug }`;
+				} else {
+					slugToCheck =
+						postTypeToResolve === 'page'
+							? 'page'
+							: `single-${ postTypeToResolve }`;
+				}
 				return getDefaultTemplateId( {
-					slug: `${ postTypeToResolve }-${ editedEntity?.slug }`,
+					slug: slugToCheck,
 				} );
 			}
 
@@ -144,6 +159,11 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				return resolveTemplateForPostTypeAndId( postType, postId );
 			}
 
+			// Some URLs in list views are different
+			if ( path === '/pages' && postId ) {
+				return resolveTemplateForPostTypeAndId( 'page', postId );
+			}
+
 			// If we're rendering the home page, and we have a static home page, resolve its template.
 			if ( homepageId ) {
 				return resolveTemplateForPostTypeAndId( 'page', homepageId );
@@ -161,6 +181,7 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 			url,
 			postId,
 			postType,
+			path,
 			frontPageTemplateId,
 		]
 	);
@@ -174,12 +195,25 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 			return { postType, postId };
 		}
 
+		// Some URLs in list views are different
+		if ( path === '/pages' && postId ) {
+			return { postType: 'page', postId };
+		}
+
 		if ( homepageId ) {
 			return { postType: 'page', postId: homepageId };
 		}
 
 		return {};
-	}, [ homepageId, postType, postId ] );
+	}, [ homepageId, postType, postId, path ] );
+
+	if ( path === '/wp_template/all' && postId ) {
+		return { isReady: true, postType: 'wp_template', postId, context };
+	}
+
+	if ( path === '/wp_template_part/all' && postId ) {
+		return { isReady: true, postType: 'wp_template_part', postId, context };
+	}
 
 	if ( postTypesWithoutParentTemplate.includes( postType ) ) {
 		return { isReady: true, postType, postId, context };
@@ -197,7 +231,8 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 	return { isReady: false };
 }
 
-export function useInitEditedEntity( params ) {
+export default function useInitEditedEntityFromURL() {
+	const { params = {} } = useLocation();
 	const { postType, postId, context, isReady } =
 		useResolveEditedEntityAndContext( params );
 
@@ -209,8 +244,3 @@ export function useInitEditedEntity( params ) {
 		}
 	}, [ isReady, postType, postId, context, setEditedEntity ] );
 }
-
-export default function useInitEditedEntityFromURL() {
-	const { params = {} } = useLocation();
-	return useInitEditedEntity( params );
-}

package/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -82,6 +82,7 @@ export default function useSyncPathWithURL() {
 					postType: navigatorParams?.postType,
 					postId: navigatorParams?.postId,
 					path: undefined,
+					layout: undefined,
 				} );
 			} else if (
 				navigatorLocation.path.startsWith( '/page/' ) &&
@@ -91,6 +92,7 @@ export default function useSyncPathWithURL() {
 					postType: 'page',
 					postId: navigatorParams?.postId,
 					path: undefined,
+					layout: undefined,
 				} );
 			} else if ( navigatorLocation.path === '/patterns' ) {
 				updateUrlParams( {
@@ -99,12 +101,42 @@ export default function useSyncPathWithURL() {
 					canvas: undefined,
 					path: navigatorLocation.path,
 				} );
+			} else if (
+				navigatorLocation.path === '/wp_template/all' &&
+				! window?.__experimentalAdminViews
+			) {
+				// When the experiment is disabled, we only support table layout.
+				// Clear it out from the URL, so layouts other than table cannot be accessed.
+				updateUrlParams( {
+					postType: undefined,
+					categoryType: undefined,
+					categoryId: undefined,
+					path: navigatorLocation.path,
+					layout: undefined,
+				} );
+			} else if (
+				// These sidebar paths are special in the sense that the url in these pages may or may not have a postId and we need to retain it if it has.
+				// The "type" property should be kept as well.
+				( navigatorLocation.path === '/pages' &&
+					window?.__experimentalAdminViews ) ||
+				( navigatorLocation.path === '/wp_template/all' &&
+					window?.__experimentalAdminViews ) ||
+				( navigatorLocation.path === '/wp_template_part/all' &&
+					window?.__experimentalAdminViews )
+			) {
+				updateUrlParams( {
+					postType: undefined,
+					categoryType: undefined,
+					categoryId: undefined,
+					path: navigatorLocation.path,
+				} );
 			} else {
 				updateUrlParams( {
 					postType: undefined,
 					postId: undefined,
 					categoryType: undefined,
 					categoryId: undefined,
+					layout: undefined,
 					path:
 						navigatorLocation.path === '/'
 							? undefined

package/src/hooks/commands/use-edit-mode-commands.js

@@ -216,6 +216,8 @@ function useEditUICommands() {
 		showBlockBreadcrumbs,
 		isListViewOpen,
 		isDistractionFree,
+		isTopToolbar,
+		isFocusMode,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorMode } = select( editSiteStore );
@@ -229,6 +231,8 @@ function useEditUICommands() {
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			isListViewOpen: isListViewOpened(),
 			isDistractionFree: get( 'core', 'distractionFree' ),
+			isFocusMode: get( 'core', 'focusMode' ),
+			isTopToolbar: get( 'core', 'fixedToolbar' ),
 		};
 	}, [] );
 	const { openModal } = useDispatch( interfaceStore );
@@ -271,16 +275,33 @@ function useEditUICommands() {
 
 	commands.push( {
 		name: 'core/toggle-spotlight-mode',
-		label: __( 'Toggle spotlight mode' ),
+		label: __( 'Toggle spotlight' ),
 		callback: ( { close } ) => {
 			toggle( 'core', 'focusMode' );
 			close();
+			createInfoNotice(
+				isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ),
+				{
+					id: 'core/edit-site/toggle-spotlight-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core', 'focusMode' );
+							},
+						},
+					],
+				}
+			);
 		},
 	} );
 
 	commands.push( {
 		name: 'core/toggle-distraction-free',
-		label: __( 'Toggle distraction free' ),
+		label: isDistractionFree
+			? __( 'Exit Distraction Free' )
+			: __( 'Enter Distraction Free ' ),
 		callback: ( { close } ) => {
 			toggleDistractionFree();
 			close();
@@ -296,6 +317,23 @@ function useEditUICommands() {
 				toggleDistractionFree();
 			}
 			close();
+			createInfoNotice(
+				isTopToolbar
+					? __( 'Top toolbar off.' )
+					: __( 'Top toolbar on.' ),
+				{
+					id: 'core/edit-site/toggle-top-toolbar/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core', 'fixedToolbar' );
+							},
+						},
+					],
+				}
+			);
 		},
 	} );
 
@@ -350,11 +388,20 @@ function useEditUICommands() {
 
 	commands.push( {
 		name: 'core/toggle-list-view',
-		label: __( 'Toggle list view' ),
+		label: isListViewOpen
+			? __( 'Close List View' )
+			: __( 'Open List View' ),
 		icon: listView,
 		callback: ( { close } ) => {
 			setIsListViewOpened( ! isListViewOpen );
 			close();
+			createInfoNotice(
+				isListViewOpen ? __( 'List View off.' ) : __( 'List View on.' ),
+				{
+					id: 'core/edit-site/toggle-list-view/notice',
+					type: 'snackbar',
+				}
+			);
 		},
 	} );
 

package/src/hooks/push-changes-to-global-styles/index.js

@@ -389,30 +389,36 @@ function PushChangesToGlobalStylesControl( {
 	);
 }
 
-const withPushChangesToGlobalStyles = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const blockEditingMode = useBlockEditingMode();
-		const isBlockBasedTheme = useSelect(
-			( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
-			[]
-		);
-		const supportsStyles = SUPPORTED_STYLES.some( ( feature ) =>
-			hasBlockSupport( props.name, feature )
-		);
-
-		return (
-			<>
-				<BlockEdit { ...props } />
-				{ blockEditingMode === 'default' &&
-					supportsStyles &&
-					isBlockBasedTheme && (
-						<InspectorAdvancedControls>
-							<PushChangesToGlobalStylesControl { ...props } />
-						</InspectorAdvancedControls>
-					) }
-			</>
-		);
+function PushChangesToGlobalStyles( props ) {
+	const blockEditingMode = useBlockEditingMode();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+	const supportsStyles = SUPPORTED_STYLES.some( ( feature ) =>
+		hasBlockSupport( props.name, feature )
+	);
+	const isDisplayed =
+		blockEditingMode === 'default' && supportsStyles && isBlockBasedTheme;
+
+	if ( ! isDisplayed ) {
+		return null;
 	}
+
+	return (
+		<InspectorAdvancedControls>
+			<PushChangesToGlobalStylesControl { ...props } />
+		</InspectorAdvancedControls>
+	);
+}
+
+const withPushChangesToGlobalStyles = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => (
+		<>
+			<BlockEdit { ...props } />
+			{ props.isSelected && <PushChangesToGlobalStyles { ...props } /> }
+		</>
+	)
 );
 
 addFilter(

package/src/hooks/template-part-edit.js

@@ -52,16 +52,14 @@ function EditTemplatePartMenuItem( { attributes } ) {
 	}
 
 	return (
-		<BlockControls group="other">
-			<ToolbarButton
-				{ ...linkProps }
-				onClick={ ( event ) => {
-					linkProps.onClick( event );
-				} }
-			>
-				{ __( 'Edit' ) }
-			</ToolbarButton>
-		</BlockControls>
+		<ToolbarButton
+			{ ...linkProps }
+			onClick={ ( event ) => {
+				linkProps.onClick( event );
+			} }
+		>
+			{ __( 'Edit' ) }
+		</ToolbarButton>
 	);
 }
 
@@ -72,9 +70,11 @@ export const withEditBlockControls = createHigherOrderComponent(
 
 		return (
 			<>
-				<BlockEdit { ...props } />
+				<BlockEdit key="edit" { ...props } />
 				{ isDisplayed && (
-					<EditTemplatePartMenuItem attributes={ attributes } />
+					<BlockControls group="other">
+						<EditTemplatePartMenuItem attributes={ attributes } />
+					</BlockControls>
 				) }
 			</>
 		);

package/src/index.js

@@ -52,7 +52,6 @@ export function initializeEditor( id, settings ) {
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.
 	dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
-		editorMode: 'visual',
 		welcomeGuide: true,
 		welcomeGuideStyles: true,
 		welcomeGuidePage: true,
@@ -62,6 +61,7 @@ export function initializeEditor( id, settings ) {
 	dispatch( preferencesStore ).setDefaults( 'core', {
 		allowRightClickOverrides: true,
 		distractionFree: false,
+		editorMode: 'visual',
 		fixedToolbar: false,
 		focusMode: false,
 		inactivePanels: [],

package/src/store/actions.js

@@ -5,7 +5,7 @@ import apiFetch from '@wordpress/api-fetch';
 import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 import { addQueryArgs } from '@wordpress/url';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -13,7 +13,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import { speak } from '@wordpress/a11y';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -25,6 +24,8 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 } from '../utils/constants';
+import { removeTemplates } from './private-actions';
+
 /**
  * Dispatches an action that toggles a feature flag.
  *
@@ -133,54 +134,9 @@ export const addTemplate =
  *
  * @param {Object} template The template object.
  */
-export const removeTemplate =
-	( template ) =>
-	async ( { registry } ) => {
-		try {
-			await registry
-				.dispatch( coreStore )
-				.deleteEntityRecord( 'postType', template.type, template.id, {
-					force: true,
-				} );
-
-			const lastError = registry
-				.select( coreStore )
-				.getLastEntityDeleteError(
-					'postType',
-					template.type,
-					template.id
-				);
-
-			if ( lastError ) {
-				throw lastError;
-			}
-
-			// Depending on how the entity was retrieved it's title might be
-			// an object or simple string.
-			const templateTitle =
-				typeof template.title === 'string'
-					? template.title
-					: template.title?.rendered;
-
-			registry.dispatch( noticesStore ).createSuccessNotice(
-				sprintf(
-					/* translators: The template/part's name. */
-					__( '"%s" deleted.' ),
-					decodeEntities( templateTitle )
-				),
-				{ type: 'snackbar', id: 'site-editor-template-deleted-success' }
-			);
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while deleting the template.' );
-
-			registry
-				.dispatch( noticesStore )
-				.createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	};
+export const removeTemplate = ( template ) => {
+	return removeTemplates( [ template ] );
+};
 
 /**
  * Action that sets a template part.
@@ -549,7 +505,7 @@ export const switchEditorMode =
 	( { dispatch, registry } ) => {
 		registry
 			.dispatch( 'core/preferences' )
-			.set( 'core/edit-site', 'editorMode', mode );
+			.set( 'core', 'editorMode', mode );
 
 		// Unselect blocks when we switch to a non visual mode.
 		if ( mode !== 'visual' ) {
@@ -626,6 +582,16 @@ export const toggleDistractionFree =
 					{
 						id: 'core/edit-site/distraction-free-mode/notice',
 						type: 'snackbar',
+						actions: [
+							{
+								label: __( 'Undo' ),
+								onClick: () => {
+									registry
+										.dispatch( preferencesStore )
+										.toggle( 'core', 'distractionFree' );
+								},
+							},
+						],
 					}
 				);
 		} );