@wordpress/edit-site 5.3.5 → 5.3.7

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

@@ -8,6 +8,7 @@ import {
 } 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';
 
@@ -18,6 +19,8 @@ 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: {
@@ -26,6 +29,9 @@ const config = {
 			loading: __( 'Loading templates' ),
 			notFound: __( 'No templates found' ),
 			manage: __( 'Manage all templates' ),
+			description: __(
+				'Express the layout of your site with templates.'
+			),
 		},
 	},
 	wp_template_part: {
@@ -34,6 +40,9 @@ const config = {
 			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.'
+			),
 		},
 	},
 };
@@ -51,6 +60,11 @@ export default function SidebarNavigationScreenTemplates() {
 		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',
@@ -59,21 +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( {
 		path: '/' + postType + '/all',
 	} );
 
+	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
+
 	return (
 		<SidebarNavigationScreen
+			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,
 						} }
 					/>
 				)
@@ -88,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

@@ -12,9 +12,15 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 const config = {
 	wp_template: {
 		title: __( 'All templates' ),
+		description: __(
+			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
+		),
 	},
 	wp_template_part: {
 		title: __( 'All template parts' ),
+		description: __(
+			'Create new template parts, or reset any customisations made to the template parts supplied by your theme.'
+		),
 	},
 };
 
@@ -22,5 +28,10 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
-	return <SidebarNavigationScreen title={ config[ postType ].title } />;
+	return (
+		<SidebarNavigationScreen
+			title={ config[ postType ].title }
+			description={ config[ postType ].description }
+		/>
+	);
 }

package/src/components/style-book/index.js

@@ -24,8 +24,14 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { closeSmall } from '@wordpress/icons';
-import { useResizeObserver } from '@wordpress/compose';
+import {
+	useResizeObserver,
+	useFocusOnMount,
+	useFocusReturn,
+	useMergeRefs,
+} from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -90,6 +96,9 @@ function getExamples() {
 
 function StyleBook( { isSelected, onSelect, onClose } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const sectionFocusReturnRef = useFocusReturn();
+
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const examples = useMemo( getExamples, [] );
@@ -108,8 +117,17 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 				} ) ),
 		[ examples ]
 	);
+
+	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onClose();
+		}
+	}
+
 	return (
 		<StyleBookFill>
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<section
 				className={ classnames( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
@@ -119,6 +137,11 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					background: backgroundColor,
 				} }
 				aria-label={ __( 'Style Book' ) }
+				onKeyDown={ closeOnEscape }
+				ref={ useMergeRefs( [
+					sectionFocusReturnRef,
+					focusOnMountRef,
+				] ) }
 			>
 				{ resizeObserver }
 				<Button
@@ -126,6 +149,7 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					icon={ closeSmall }
 					label={ __( 'Close Style Book' ) }
 					onClick={ onClose }
+					showTooltip={ false }
 				/>
 				<TabPanel
 					className="edit-site-style-book__tab-panel"

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

@@ -13,7 +13,7 @@ import { store as editSiteStore } from '../../store';
 
 export default function useInitEditedEntityFromURL() {
 	const { params: { postId, postType } = {} } = useLocation();
-	const { isRequestingSite, homepageId } = useSelect( ( select ) => {
+	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
 		const { getSite } = select( coreDataStore );
 		const siteData = getSite();
 
@@ -23,6 +23,7 @@ export default function useInitEditedEntityFromURL() {
 				siteData?.show_on_front === 'page'
 					? siteData.page_on_front
 					: null,
+			url: siteData?.url,
 		};
 	}, [] );
 
@@ -30,13 +31,7 @@ export default function useInitEditedEntityFromURL() {
 		useDispatch( editSiteStore );
 
 	useEffect( () => {
-		if (
-			postType &&
-			postId &&
-			// This is just a special case to support old WP versions that perform redirects.
-			// This code should be removed when we minimum WP version becomes 6.2.
-			postId !== 'none'
-		) {
+		if ( postType && postId ) {
 			switch ( postType ) {
 				case 'wp_template':
 					setTemplate( postId );
@@ -60,10 +55,11 @@ export default function useInitEditedEntityFromURL() {
 			} );
 		} else if ( ! isRequestingSite ) {
 			setPage( {
-				path: '/',
+				path: url,
 			} );
 		}
 	}, [
+		url,
 		postId,
 		postType,
 		homepageId,

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

@@ -20,22 +20,52 @@ export default function useSyncCanvasModeWithURL() {
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const currentCanvasMode = useRef( canvasMode );
-	const { canvas: canvasInUrl = 'view' } = params;
+	const { canvas: canvasInUrl } = params;
 	const currentCanvasInUrl = useRef( canvasInUrl );
+	const currentUrlParams = useRef( params );
+	useEffect( () => {
+		currentUrlParams.current = params;
+	}, [ params ] );
+
 	useEffect( () => {
 		currentCanvasMode.current = canvasMode;
-		if ( currentCanvasMode !== currentCanvasInUrl ) {
+		if ( canvasMode === 'init' ) {
+			return;
+		}
+
+		if (
+			canvasMode === 'edit' &&
+			currentCanvasInUrl.current !== canvasMode
+		) {
+			history.push( {
+				...currentUrlParams.current,
+				canvas: 'edit',
+			} );
+		}
+
+		if (
+			canvasMode === 'view' &&
+			currentCanvasInUrl.current !== undefined
+		) {
 			history.push( {
-				...params,
-				canvas: canvasMode,
+				...currentUrlParams.current,
+				canvas: undefined,
 			} );
 		}
-	}, [ canvasMode ] );
+	}, [ canvasMode, history ] );
 
 	useEffect( () => {
 		currentCanvasInUrl.current = canvasInUrl;
-		if ( canvasInUrl !== currentCanvasMode.current ) {
-			setCanvasMode( canvasInUrl );
+		if (
+			canvasInUrl === undefined &&
+			currentCanvasMode.current !== 'view'
+		) {
+			setCanvasMode( 'view' );
+		} else if (
+			canvasInUrl === 'edit' &&
+			currentCanvasMode.current !== 'edit'
+		) {
+			setCanvasMode( 'edit' );
 		}
-	}, [ canvasInUrl ] );
+	}, [ canvasInUrl, setCanvasMode ] );
 }

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

@@ -9,6 +9,28 @@ import { useEffect, useRef } from '@wordpress/element';
  */
 import { useLocation, useHistory } from '../routes';
 
+export function getPathFromURL( urlParams ) {
+	let path = urlParams?.path ?? '/';
+
+	// Compute the navigator path based on the URL params.
+	if ( urlParams?.postType && urlParams?.postId ) {
+		switch ( urlParams.postType ) {
+			case 'wp_template':
+			case 'wp_template_part':
+				path = `/${ encodeURIComponent(
+					urlParams.postType
+				) }/${ encodeURIComponent( urlParams.postId ) }`;
+				break;
+			default:
+				path = `/navigation/${ encodeURIComponent(
+					urlParams.postType
+				) }/${ encodeURIComponent( urlParams.postId ) }`;
+		}
+	}
+
+	return path;
+}
+
 export default function useSyncPathWithURL() {
 	const history = useHistory();
 	const { params: urlParams } = useLocation();
@@ -18,13 +40,17 @@ export default function useSyncPathWithURL() {
 		goTo,
 	} = useNavigator();
 	const currentUrlParams = useRef( urlParams );
-	const currentPath = useRef();
+	const currentPath = useRef( navigatorLocation.path );
+	const isMounting = useRef( true );
 
 	useEffect( () => {
-		// Don't trust the navigator path on initial render.
-		if ( currentPath.current === null ) {
+		// The navigatorParams are only initially filled properly when the
+		// navigator screens mount. so we ignore the first synchronisation.
+		if ( isMounting.current ) {
+			isMounting.current = false;
 			return;
 		}
+
 		function updateUrlParams( newUrlParams ) {
 			if (
 				Object.entries( newUrlParams ).every( ( [ key, value ] ) => {
@@ -47,51 +73,24 @@ export default function useSyncPathWithURL() {
 				postId: navigatorParams?.postId,
 				path: undefined,
 			} );
-		} else if ( navigatorParams?.postType && ! navigatorParams?.postId ) {
-			updateUrlParams( {
-				postType: navigatorParams?.postType,
-				path: navigatorLocation.path,
-				postId: undefined,
-			} );
 		} else {
 			updateUrlParams( {
 				postType: undefined,
 				postId: undefined,
-				path: navigatorLocation.path,
+				path:
+					navigatorLocation.path === '/'
+						? undefined
+						: navigatorLocation.path,
 			} );
 		}
 	}, [ navigatorLocation?.path, navigatorParams, history ] );
 
 	useEffect( () => {
 		currentUrlParams.current = urlParams;
-		let path = urlParams?.path ?? '/';
-
-		// Compute the navigator path based on the URL params.
-		if (
-			urlParams?.postType &&
-			urlParams?.postId &&
-			// This is just a special case to support old WP versions that perform redirects.
-			// This code should be removed when we minimum WP version becomes 6.2.
-			urlParams?.postId !== 'none'
-		) {
-			switch ( urlParams.postType ) {
-				case 'wp_template':
-				case 'wp_template_part':
-					path = `/${ encodeURIComponent(
-						urlParams.postType
-					) }/${ encodeURIComponent( urlParams.postId ) }`;
-					break;
-				default:
-					path = `/navigation/${ encodeURIComponent(
-						urlParams.postType
-					) }/${ encodeURIComponent( urlParams.postId ) }`;
-			}
-		}
-
+		const path = getPathFromURL( urlParams );
 		if ( currentPath.current !== path ) {
 			currentPath.current = path;
 			goTo( path );
 		}
-		goTo( path );
 	}, [ urlParams, goTo ] );
 }

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

@@ -18,7 +18,6 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import isTemplateRevertable from '../../utils/is-template-revertable';
 import { store as editSiteStore } from '../../store';
-import TemplateAreas from './template-areas';
 import EditTemplateTitle from './edit-template-title';
 import { useLink } from '../routes/link';
 import TemplatePartAreaSelector from './template-part-area-selector';
@@ -31,10 +30,9 @@ export default function TemplateDetails( { template, onClose } ) {
 	);
 	const { revertTemplate } = useDispatch( editSiteStore );
 
+	// TODO: We should update this to filter by template part's areas as well.
 	const browseAllLinkProps = useLink( {
-		// TODO: We should update this to filter by template part's areas as well.
-		postType: template.type,
-		postId: undefined,
+		path: '/' + template.type + '/all',
 	} );
 
 	const isTemplatePart = template.type === 'wp_template_part';
@@ -87,8 +85,6 @@ export default function TemplateDetails( { template, onClose } ) {
 				</div>
 			) }
 
-			<TemplateAreas closeTemplateDetailsDropdown={ onClose } />
-
 			{ isTemplateRevertable( template ) && (
 				<MenuGroup className="edit-site-template-details__group edit-site-template-details__revert">
 					<MenuItem
@@ -108,8 +104,8 @@ export default function TemplateDetails( { template, onClose } ) {
 				{ ...browseAllLinkProps }
 			>
 				{ template?.type === 'wp_template'
-					? __( 'Browse all templates' )
-					: __( 'Browse all template parts' ) }
+					? __( 'Manage all templates' )
+					: __( 'Manage all template parts' ) }
 			</Button>
 		</div>
 	);

package/src/components/use-edited-entity-record/index.js

@@ -11,25 +11,33 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { store as editSiteStore } from '../../store';
 
-export default function useEditedEntityRecord() {
-	const { record, title, description, isLoaded } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
-		const postType = getEditedPostType();
-		const postId = getEditedPostId();
-		const _record = getEditedEntityRecord( 'postType', postType, postId );
-		const _isLoaded = !! postId;
-		const templateInfo = getTemplateInfo( _record );
+export default function useEditedEntityRecord( postType, postId ) {
+	const { record, title, description, isLoaded } = useSelect(
+		( select ) => {
+			const { getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const { __experimentalGetTemplateInfo: getTemplateInfo } =
+				select( editorStore );
+			const usedPostType = postType ?? getEditedPostType();
+			const usedPostId = postId ?? getEditedPostId();
+			const _record = getEditedEntityRecord(
+				'postType',
+				usedPostType,
+				usedPostId
+			);
+			const _isLoaded = !! usedPostId;
+			const templateInfo = getTemplateInfo( _record );
 
-		return {
-			record: _record,
-			title: templateInfo.title,
-			description: templateInfo.description,
-			isLoaded: _isLoaded,
-		};
-	}, [] );
+			return {
+				record: _record,
+				title: templateInfo.title,
+				description: templateInfo.description,
+				isLoaded: _isLoaded,
+			};
+		},
+		[ postType, postId ]
+	);
 
 	return {
 		isLoaded,

package/src/index.js

@@ -4,6 +4,7 @@
 import { store as blocksStore } from '@wordpress/blocks';
 import {
 	registerCoreBlocks,
+	__experimentalGetCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import { dispatch } from '@wordpress/data';
@@ -16,8 +17,10 @@ import {
 import { store as editorStore } from '@wordpress/editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { addFilter } from '@wordpress/hooks';
-import { registerLegacyWidgetBlock } from '@wordpress/widgets';
+import {
+	registerLegacyWidgetBlock,
+	registerWidgetGroupBlock,
+} from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -41,32 +44,18 @@ export function initializeEditor( id, settings ) {
 	settings.__experimentalFetchRichUrlData = fetchUrlData;
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
-	registerCoreBlocks();
+	const coreBlocks = __experimentalGetCoreBlocks().filter(
+		( { name } ) => name !== 'core/freeform'
+	);
+	registerCoreBlocks( coreBlocks );
+	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
 	registerLegacyWidgetBlock( { inserter: false } );
+	registerWidgetGroupBlock( { inserter: false } );
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: true,
 		} );
 	}
-	/*
-	 * Prevent adding the Clasic block in the site editor.
-	 * Only add the filter when the site editor is initialized, not imported.
-	 * Also only add the filter(s) after registerCoreBlocks()
-	 * so that common filters in the block library are not overwritten.
-	 *
-	 * This usage here is inspired by previous usage of the filter in the post editor:
-	 * https://github.com/WordPress/gutenberg/pull/37157
-	 */
-	addFilter(
-		'blockEditor.__unstableCanInsertBlockType',
-		'removeClassicBlockFromInserter',
-		( canInsert, blockType ) => {
-			if ( blockType.name === 'core/freeform' ) {
-				return false;
-			}
-			return canInsert;
-		}
-	);
 
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.

package/src/style.scss

@@ -8,7 +8,6 @@
 @import "./components/header-edit-mode/style.scss";
 @import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
-@import "./components/navigation-inspector/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/settings-header/style.scss";
 @import "./components/sidebar-edit-mode/template-card/style.scss";
@@ -19,8 +18,10 @@
 @import "./components/welcome-guide/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
+@import "./components/save-hub/style.scss";
 @import "./components/save-panel/style.scss";
 @import "./components/sidebar/style.scss";
+@import "./components/sidebar-button/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";

package/src/utils/history.js

@@ -6,7 +6,7 @@ import { createBrowserHistory } from 'history';
 /**
  * WordPress dependencies
  */
-import { addQueryArgs } from '@wordpress/url';
+import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
 
 const history = createBrowserHistory();
 
@@ -14,19 +14,23 @@ const originalHistoryPush = history.push;
 const originalHistoryReplace = history.replace;
 
 function push( params, state ) {
-	return originalHistoryPush.call(
-		history,
-		addQueryArgs( window.location.href, params ),
-		state
+	const currentArgs = getQueryArgs( window.location.href );
+	const currentUrlWithoutArgs = removeQueryArgs(
+		window.location.href,
+		...Object.keys( currentArgs )
 	);
+	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
+	return originalHistoryPush.call( history, newUrl, state );
 }
 
 function replace( params, state ) {
-	return originalHistoryReplace.call(
-		history,
-		addQueryArgs( window.location.href, params ),
-		state
+	const currentArgs = getQueryArgs( window.location.href );
+	const currentUrlWithoutArgs = removeQueryArgs(
+		window.location.href,
+		...Object.keys( currentArgs )
 	);
+	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
+	return originalHistoryReplace.call( history, newUrl, state );
 }
 
 history.push = push;