@wordpress/edit-site 5.12.0 → 5.12.2

package/src/components/page-templates/index.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Table from '../table';
+import Link from '../routes/link';
+import AddedBy from '../list/added-by';
+import TemplateActions from '../template-actions';
+import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
+
+export default function PageTemplates() {
+	const { records: templates } = useEntityRecords(
+		'postType',
+		'wp_template',
+		{
+			per_page: -1,
+		}
+	);
+
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			postType: select( coreStore ).getPostType( 'wp_template' ),
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	} );
+
+	const columns = [
+		{
+			header: __( 'Template' ),
+			cell: ( template ) => (
+				<VStack>
+					<Heading level={ 5 }>
+						<Link
+							params={ {
+								postId: template.id,
+								postType: template.type,
+								canvas: 'edit',
+							} }
+						>
+							{ decodeEntities(
+								template.title?.rendered || template.slug
+							) }
+						</Link>
+					</Heading>
+					{ template.description && (
+						<Text variant="muted">
+							{ decodeEntities( template.description ) }
+						</Text>
+					) }
+				</VStack>
+			),
+			maxWidth: 400,
+		},
+		{
+			header: __( 'Added by' ),
+			cell: ( template ) => (
+				<AddedBy postType={ template.type } postId={ template.id } />
+			),
+		},
+		{
+			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+			cell: ( template ) => (
+				<TemplateActions
+					postType={ template.type }
+					postId={ template.id }
+				/>
+			),
+		},
+	];
+
+	return (
+		<Page
+			title={ __( 'Templates' ) }
+			actions={
+				canCreate && (
+					<AddNewTemplate
+						templateType={ 'wp_template' }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
+				)
+			}
+		>
+			{ templates && <Table data={ templates } columns={ columns } /> }
+		</Page>
+	);
+}

package/src/components/preferences-modal/enable-feature.js

@@ -6,14 +6,17 @@ import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/
 import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function EnableFeature( props ) {
-	const { featureName, ...remainingProps } = props;
+	const { featureName, onToggle = () => {}, ...remainingProps } = props;
 	const isChecked = useSelect(
 		( select ) =>
 			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
 		[ featureName ]
 	);
 	const { toggle } = useDispatch( preferencesStore );
-	const onChange = () => toggle( 'core/edit-site', featureName );
+	const onChange = () => {
+		onToggle();
+		toggle( 'core/edit-site', featureName );
+	};
 	return (
 		<BaseOption
 			onChange={ onChange }

package/src/components/preferences-modal/index.js

@@ -8,16 +8,33 @@ import {
 } from '@wordpress/interface';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useDispatch, useRegistry } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import EnableFeature from './enable-feature';
+import { store as siteEditorStore } from '../../store';
 
 export default function EditSitePreferencesModal( {
 	isModalActive,
 	toggleModal,
 } ) {
+	const registry = useRegistry();
+	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( siteEditorStore );
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const toggleDistractionFree = () => {
+		registry.batch( () => {
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+		} );
+	};
+
 	const sections = useMemo( () => [
 		{
 			name: 'general',
@@ -29,6 +46,14 @@ export default function EditSitePreferencesModal( {
 						'Customize options related to the block editor interface and editing flow.'
 					) }
 				>
+					<EnableFeature
+						featureName="distractionFree"
+						onToggle={ toggleDistractionFree }
+						help={ __(
+							'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+						) }
+						label={ __( 'Distraction free' ) }
+					/>
 					<EnableFeature
 						featureName="focusMode"
 						help={ __(

package/src/components/resizable-frame/index.js

@@ -16,7 +16,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 // Removes the inline styles in the drag handles.
@@ -76,6 +76,7 @@ function ResizableFrame( {
 	isReady,
 	children,
 	oversizedClassName,
+	innerContentStyle,
 } ) {
 	const [ frameSize, setFrameSize ] = useState( {
 		width: '100%',
@@ -253,6 +254,7 @@ function ResizableFrame( {
 					borderRadius: isFullWidth ? 0 : 8,
 				} }
 				transition={ FRAME_TRANSITION }
+				style={ innerContentStyle }
 			>
 				{ children }
 			</motion.div>

package/src/components/revisions/index.js

@@ -18,7 +18,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 import EditorCanvasContainer from '../editor-canvas-container';
 

package/src/components/routes/link.js

@@ -7,7 +7,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import {
 	isPreviewingTheme,
 	currentlyPreviewingTheme,
@@ -37,7 +37,7 @@ export function useLink( params = {}, state, shouldReplace = false ) {
 	if ( isPreviewingTheme() ) {
 		params = {
 			...params,
-			theme_preview: currentlyPreviewingTheme(),
+			wp_theme_preview: currentlyPreviewingTheme(),
 		};
 	}
 

package/src/components/routes/use-title.js

@@ -12,7 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 

package/src/components/save-button/index.js

@@ -39,21 +39,24 @@ export default function SaveButton( {
 	const disabled = isSaving || ! activateSaveEnabled;
 
 	const getLabel = () => {
+		if ( isPreviewingTheme() ) {
+			if ( isSaving ) {
+				return __( 'Activating' );
+			} else if ( disabled ) {
+				return __( 'Saved' );
+			} else if ( isDirty ) {
+				return __( 'Activate & Save' );
+			}
+			return __( 'Activate' );
+		}
+
 		if ( isSaving ) {
 			return __( 'Saving' );
-		}
-		if ( disabled ) {
+		} else if ( disabled ) {
 			return __( 'Saved' );
+		} else if ( defaultLabel ) {
+			return defaultLabel;
 		}
-
-		if ( defaultLabel ) return defaultLabel;
-
-		if ( isPreviewingTheme() && isDirty ) {
-			return __( 'Activate & Save' );
-		} else if ( isPreviewingTheme() ) {
-			return __( 'Activate' );
-		}
-
 		return __( 'Save' );
 	};
 	const label = getLabel();

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

@@ -15,7 +15,7 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 

package/src/components/save-panel/index.js

@@ -21,7 +21,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { useActivateTheme } from '../../utils/use-activate-theme';
 import {
 	currentlyPreviewingTheme,

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -9,27 +9,27 @@ import {
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
+import { focus } from '@wordpress/dom';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { PrivateListView } = unlock( blockEditorPrivateApis );
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the dropZoneElement updates.
-	const [ dropZoneElement, setDropZoneElement ] = useState( null );
-
+	// This hook handles focus when the sidebar first renders.
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	// The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
 
@@ -39,11 +39,56 @@ export default function ListViewSidebar() {
 		}
 	}
 
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the dropZoneElement updates.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+
+	// This ref refers to the sidebar as a whole.
+	const sidebarRef = useRef();
+	// This ref refers to the close button.
+	const sidebarCloseButtonRef = useRef();
+	// This ref refers to the list view application area.
+	const listViewRef = useRef();
+
+	/*
+	 * Callback function to handle list view or close button focus.
+	 *
+	 * @return void
+	 */
+	function handleSidebarFocus() {
+		// Either focus the list view or the sidebar close button. Must have a fallback because the list view does not render when there are no blocks.
+		const listViewApplicationFocus = focus.tabbable.find(
+			listViewRef.current
+		)[ 0 ];
+		const listViewFocusArea = sidebarRef.current.contains(
+			listViewApplicationFocus
+		)
+			? listViewApplicationFocus
+			: sidebarCloseButtonRef.current;
+		listViewFocusArea.focus();
+	}
+
+	// This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+	useShortcut( 'core/edit-site/toggle-list-view', () => {
+		// If the sidebar has focus, it is safe to close.
+		if (
+			sidebarRef.current.contains(
+				sidebarRef.current.ownerDocument.activeElement
+			)
+		) {
+			setIsListViewOpened( false );
+			// If the list view or close button does not have focus, focus should be moved to it.
+		} else {
+			handleSidebarFocus();
+		}
+	} );
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			className="edit-site-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
+			ref={ sidebarRef }
 		>
 			<div
 				className="edit-site-editor__list-view-panel-header"
@@ -54,6 +99,7 @@ export default function ListViewSidebar() {
 					icon={ closeSmall }
 					label={ __( 'Close' ) }
 					onClick={ () => setIsListViewOpened( false ) }
+					ref={ sidebarCloseButtonRef }
 				/>
 			</div>
 			<div
@@ -62,6 +108,7 @@ export default function ListViewSidebar() {
 					contentFocusReturnRef,
 					focusOnMountRef,
 					setDropZoneElement,
+					listViewRef,
 				] ) }
 			>
 				<PrivateListView dropZoneElement={ dropZoneElement } />

package/src/components/sidebar/index.js

@@ -12,9 +12,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenTemplatePart from '../sidebar-navigation-screen-template-part';
+import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import useSyncPathWithURL, {
 	getPathFromURL,
 } from '../sync-state-with-url/use-sync-path-with-url';
@@ -23,7 +24,7 @@ import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 
@@ -52,18 +53,21 @@ function SidebarScreens() {
 			<NavigatorScreen path="/page/:postId">
 				<SidebarNavigationScreenPage />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
+			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+			<NavigatorScreen path="/library">
+				<SidebarNavigationScreenLibrary />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
+				<SidebarNavigationScreenPattern />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template_part)/:postId">
-				<SidebarNavigationScreenTemplatePart />
-			</NavigatorScreen>
 		</>
 	);
 }

package/src/components/sidebar-button/style.scss

@@ -19,6 +19,6 @@
 	&:focus,
 	&:not([aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
-		color: $white;
+		color: $gray-100;
 	}
 }

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -7,6 +7,7 @@ import { styles, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -15,31 +16,36 @@ import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 export default function GlobalStylesSidebar() {
-	const { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(
-		( select ) => {
-			const { getActiveComplementaryArea } = select( interfaceStore );
-			const { getEditorCanvasContainerView, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-			const _isVisualEditorMode =
-				'visual' === select( editSiteStore ).getEditorMode();
-			const _isEditCanvasMode = 'edit' === getCanvasMode();
+	const {
+		shouldClearCanvasContainerView,
+		isStyleBookOpened,
+		showListViewByDefault,
+	} = useSelect( ( select ) => {
+		const { getActiveComplementaryArea } = select( interfaceStore );
+		const { getEditorCanvasContainerView, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		const _isVisualEditorMode =
+			'visual' === select( editSiteStore ).getEditorMode();
+		const _isEditCanvasMode = 'edit' === getCanvasMode();
+		const _showListViewByDefault = select( preferencesStore ).get(
+			'core/edit-site',
+			'showListViewByDefault'
+		);
 
-			return {
-				isStyleBookOpened:
-					'style-book' === getEditorCanvasContainerView(),
-				shouldClearCanvasContainerView:
-					'edit-site/global-styles' !==
-						getActiveComplementaryArea( 'core/edit-site' ) ||
-					! _isVisualEditorMode ||
-					! _isEditCanvasMode,
-			};
-		},
-		[]
-	);
+		return {
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+			shouldClearCanvasContainerView:
+				'edit-site/global-styles' !==
+					getActiveComplementaryArea( 'core/edit-site' ) ||
+				! _isVisualEditorMode ||
+				! _isEditCanvasMode,
+			showListViewByDefault: _showListViewByDefault,
+		};
+	}, [] );
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
@@ -50,6 +56,8 @@ export default function GlobalStylesSidebar() {
 		}
 	}, [ shouldClearCanvasContainerView ] );
 
+	const { setIsListViewOpened } = useDispatch( editSiteStore );
+
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
@@ -59,7 +67,11 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex className="edit-site-global-styles-sidebar__header">
+				<Flex
+					className="edit-site-global-styles-sidebar__header"
+					role="menubar"
+					aria-label={ __( 'Styles actions' ) }
+				>
 					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<strong>{ __( 'Styles' ) }</strong>
 					</FlexBlock>
@@ -69,16 +81,17 @@ export default function GlobalStylesSidebar() {
 							label={ __( 'Style Book' ) }
 							isPressed={ isStyleBookOpened }
 							disabled={ shouldClearCanvasContainerView }
-							onClick={ () =>
+							onClick={ () => {
+								setIsListViewOpened(
+									isStyleBookOpened && showListViewByDefault
+								);
 								setEditorCanvasContainerView(
 									isStyleBookOpened ? undefined : 'style-book'
-								)
-							}
+								);
+							} }
 						/>
 					</FlexItem>
-					<FlexItem>
-						<GlobalStylesMenuSlot />
-					</FlexItem>
+					<GlobalStylesMenuSlot />
 				</Flex>
 			}
 		>

package/src/components/sidebar-edit-mode/index.js

@@ -33,7 +33,7 @@ export function SidebarComplementaryAreaFills() {
 		isEditorSidebarOpened,
 		hasBlockSelection,
 		supportsGlobalStyles,
-		hasPageContentLock,
+		hasPageContentFocus,
 	} = useSelect( ( select ) => {
 		const _sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
@@ -48,7 +48,7 @@ export function SidebarComplementaryAreaFills() {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
-			hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
+			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
@@ -56,15 +56,17 @@ export function SidebarComplementaryAreaFills() {
 	useEffect( () => {
 		// Don't automatically switch tab when the sidebar is closed or when we
 		// are focused on page content.
-		if ( ! isEditorSidebarOpened || hasPageContentLock ) {
+		if ( ! isEditorSidebarOpened ) {
 			return;
 		}
 		if ( hasBlockSelection ) {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			if ( ! hasPageContentFocus ) {
+				enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			}
 		} else {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}
-	}, [ hasBlockSelection, isEditorSidebarOpened, hasPageContentLock ] );
+	}, [ hasBlockSelection, isEditorSidebarOpened, hasPageContentFocus ] );
 
 	let sidebarName = sidebar;
 	if ( ! isEditorSidebarOpened ) {
@@ -83,7 +85,7 @@ export function SidebarComplementaryAreaFills() {
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
 					<>
-						{ hasPageContentLock ? (
+						{ hasPageContentFocus ? (
 							<PagePanels />
 						) : (
 							<TemplatePanel />