@wordpress/edit-site 5.4.0 → 5.5.0

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,16 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 
 const config = {
 	wp_template: {
-		path: '/templates/all',
 		title: __( 'All templates' ),
 	},
 	wp_template_part: {
-		path: '/template-parts/all',
 		title: __( 'All template parts' ),
 	},
 };
 
-export default function SidebarNavigationScreenTemplatesBrowse( {
-	postType = 'wp_template',
-} ) {
-	return (
-		<SidebarNavigationScreen
-			path={ config[ postType ].path }
-			title={ config[ postType ].title }
-		/>
-	);
+export default function SidebarNavigationScreenTemplatesBrowse() {
+	const {
+		params: { postType },
+	} = useNavigator();
+	return <SidebarNavigationScreen title={ config[ postType ].title } />;
 }

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

@@ -12,8 +12,8 @@ import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 
 export default function useInitEditedEntityFromURL() {
-	const { params: { postId, postType, path = '/' } = {} } = useLocation();
-	const { isRequestingSite, homepageId } = useSelect( ( select ) => {
+	const { params: { postId, postType } = {} } = useLocation();
+	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,33 +31,37 @@ export default function useInitEditedEntityFromURL() {
 		useDispatch( editSiteStore );
 
 	useEffect( () => {
-		switch ( path ) {
-			case '/templates/single':
-				setTemplate( postId );
-				break;
-			case '/template-parts/single':
-				setTemplatePart( postId );
-				break;
-			case '/navigation/single':
-				setPage( {
-					context: { postType, postId },
-				} );
-				break;
-			default: {
-				if ( homepageId ) {
+		if ( postType && postId ) {
+			switch ( postType ) {
+				case 'wp_template':
+					setTemplate( postId );
+					break;
+				case 'wp_template_part':
+					setTemplatePart( postId );
+					break;
+				default:
 					setPage( {
-						context: { postType: 'page', postId: homepageId },
+						context: { postType, postId },
 					} );
-				} else if ( ! isRequestingSite ) {
-					setPage( {
-						path: '/',
-					} );
-				}
 			}
+
+			return;
+		}
+
+		// In all other cases, we need to set the home page in the site editor view.
+		if ( homepageId ) {
+			setPage( {
+				context: { postType: 'page', postId: homepageId },
+			} );
+		} else if ( ! isRequestingSite ) {
+			setPage( {
+				path: url,
+			} );
 		}
 	}, [
-		path,
+		url,
 		postId,
+		postType,
 		homepageId,
 		isRequestingSite,
 		setPage,

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

@@ -9,28 +9,83 @@ 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 } = useLocation();
-	const { path = '/' } = params;
-	const { location, goTo } = useNavigator();
-	const currentPath = useRef( path );
-	const currentNavigatorLocation = useRef( location.path );
+	const { params: urlParams } = useLocation();
+	const {
+		location: navigatorLocation,
+		params: navigatorParams,
+		goTo,
+	} = useNavigator();
+	const currentUrlParams = useRef( urlParams );
+	const currentPath = useRef( navigatorLocation.path );
+
 	useEffect( () => {
-		currentPath.current = path;
-		if ( path !== currentNavigatorLocation.current ) {
-			goTo( path );
+		function updateUrlParams( newUrlParams ) {
+			if (
+				Object.entries( newUrlParams ).every( ( [ key, value ] ) => {
+					return currentUrlParams.current[ key ] === value;
+				} )
+			) {
+				return;
+			}
+			const updatedParams = {
+				...currentUrlParams.current,
+				...newUrlParams,
+			};
+			currentUrlParams.current = updatedParams;
+			history.push( updatedParams );
 		}
-	}, [ path ] );
-	useEffect( () => {
-		currentNavigatorLocation.current = location.path;
-		if ( location.path !== currentPath.current ) {
-			history.push( {
-				...params,
-				path: location.path,
+
+		if ( navigatorParams?.postType && navigatorParams?.postId ) {
+			updateUrlParams( {
+				postType: navigatorParams?.postType,
+				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,
 			} );
 		}
-	}, [ location.path, history ] );
+	}, [ navigatorLocation?.path, navigatorParams, history ] );
 
-	return path;
+	useEffect( () => {
+		currentUrlParams.current = urlParams;
+		const path = getPathFromURL( urlParams );
+		if ( currentPath.current !== path ) {
+			currentPath.current = 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,12 @@ 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.
+		canvas: 'view',
 		postType: template.type,
 		postId: undefined,
+		path: '/' + template.type + '/all',
 	} );
 
 	const isTemplatePart = template.type === 'wp_template_part';
@@ -87,8 +88,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 +107,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/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,7 +17,6 @@ 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';
 
 /**
@@ -41,32 +41,17 @@ 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 } );
 	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/store/actions.js

@@ -526,7 +526,7 @@ export const switchEditorMode =
 
 		if ( mode === 'visual' ) {
 			speak( __( 'Visual editor selected' ), 'assertive' );
-		} else if ( mode === 'mosaic' ) {
-			speak( __( 'Mosaic view selected' ), 'assertive' );
+		} else if ( mode === 'text' ) {
+			speak( __( 'Code editor selected' ), 'assertive' );
 		}
 	};

package/src/style.scss

@@ -22,6 +22,7 @@
 @import "./components/layout/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/get-is-list-page.js

@@ -7,5 +7,5 @@
  * @return {boolean} Is list page or not.
  */
 export default function getIsListPage( { path } ) {
-	return path === '/templates/all' || path === '/template-parts/all';
+	return path === '/wp_template/all' || path === '/wp_template_part/all';
 }