@wordpress/edit-site 5.26.0 → 5.27.0

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

@@ -1,30 +1,16 @@
 /**
  * WordPress dependencies
  */
-import {
-	PreferencesModal,
-	PreferencesModalTabs,
-	PreferencesModalSection,
-	store as interfaceStore,
-} from '@wordpress/interface';
-import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	PostTaxonomies,
-	PostExcerptCheck,
-	PageAttributesCheck,
-	PostFeaturedImageCheck,
-	PostTypeSupportCheck,
-	store as editorStore,
-} from '@wordpress/editor';
+import { store as interfaceStore } from '@wordpress/interface';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import EnableFeature from './enable-feature';
-import EnablePanelOption from './enable-panel-option';
-import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { PreferencesModal } = unlock( editorPrivateApis );
 
 export const PREFERENCES_MODAL_NAME = 'edit-site/preferences';
 
@@ -32,201 +18,12 @@ export default function EditSitePreferencesModal() {
 	const isModalActive = useSelect( ( select ) =>
 		select( interfaceStore ).isModalActive( PREFERENCES_MODAL_NAME )
 	);
-	const { closeModal, openModal } = useDispatch( interfaceStore );
-	const toggleModal = () =>
-		isModalActive ? closeModal() : openModal( PREFERENCES_MODAL_NAME );
-	const registry = useRegistry();
-	const { closeGeneralSidebar } = useDispatch( editSiteStore );
-	const { setIsListViewOpened, setIsInserterOpened } =
-		useDispatch( editorStore );
-
-	const { set: setPreference } = useDispatch( preferencesStore );
-	const toggleDistractionFree = () => {
-		registry.batch( () => {
-			setPreference( 'core', 'fixedToolbar', true );
-			setIsInserterOpened( false );
-			setIsListViewOpened( false );
-			closeGeneralSidebar();
-		} );
-	};
-
-	const turnOffDistractionFree = () => {
-		setPreference( 'core', 'distractionFree', false );
-	};
+	const { closeModal } = useDispatch( interfaceStore );
 
-	const sections = [
-		{
-			name: 'general',
-			tabLabel: __( 'General' ),
-			content: (
-				<>
-					<PreferencesModalSection title={ __( 'Interface' ) }>
-						<EnableFeature
-							scope="core"
-							featureName="showListViewByDefault"
-							help={ __(
-								'Opens the block list view sidebar by default.'
-							) }
-							label={ __( 'Always open list view' ) }
-						/>
-						<EnableFeature
-							scope="core"
-							featureName="showBlockBreadcrumbs"
-							help={ __(
-								'Shows block breadcrumbs at the bottom of the editor.'
-							) }
-							label={ __( 'Display block breadcrumbs' ) }
-						/>
-						<EnableFeature
-							scope="core"
-							featureName="allowRightClickOverrides"
-							help={ __(
-								'Allows contextual list view menus via right-click, overriding browser defaults.'
-							) }
-							label={ __( 'Allow right-click contextual menus' ) }
-						/>
-					</PreferencesModalSection>
-					<PreferencesModalSection
-						title={ __( 'Document settings' ) }
-						description={ __(
-							'Select what settings are shown in the document panel.'
-						) }
-					>
-						<PostTaxonomies
-							taxonomyWrapper={ ( content, taxonomy ) => (
-								<EnablePanelOption
-									label={ taxonomy.labels.menu_name }
-									panelName={ `taxonomy-panel-${ taxonomy.slug }` }
-								/>
-							) }
-						/>
-						<PostFeaturedImageCheck>
-							<EnablePanelOption
-								label={ __( 'Featured image' ) }
-								panelName="featured-image"
-							/>
-						</PostFeaturedImageCheck>
-						<PostExcerptCheck>
-							<EnablePanelOption
-								label={ __( 'Excerpt' ) }
-								panelName="post-excerpt"
-							/>
-						</PostExcerptCheck>
-						<PostTypeSupportCheck
-							supportKeys={ [ 'comments', 'trackbacks' ] }
-						>
-							<EnablePanelOption
-								label={ __( 'Discussion' ) }
-								panelName="discussion-panel"
-							/>
-						</PostTypeSupportCheck>
-						<PageAttributesCheck>
-							<EnablePanelOption
-								label={ __( 'Page attributes' ) }
-								panelName="page-attributes"
-							/>
-						</PageAttributesCheck>
-					</PreferencesModalSection>
-				</>
-			),
-		},
-		{
-			name: 'appearance',
-			tabLabel: __( 'Appearance' ),
-			content: (
-				<PreferencesModalSection
-					title={ __( 'Appearance' ) }
-					description={ __(
-						'Customize the editor interface to suit your needs.'
-					) }
-				>
-					<EnableFeature
-						scope="core"
-						featureName="fixedToolbar"
-						onToggle={ turnOffDistractionFree }
-						help={ __(
-							'Access all block and document tools in a single place.'
-						) }
-						label={ __( 'Top toolbar' ) }
-					/>
-					<EnableFeature
-						scope="core"
-						featureName="distractionFree"
-						onToggle={ toggleDistractionFree }
-						help={ __(
-							'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
-						) }
-						label={ __( 'Distraction free' ) }
-					/>
-					<EnableFeature
-						scope="core"
-						featureName="focusMode"
-						help={ __(
-							'Highlights the current block and fades other content.'
-						) }
-						label={ __( 'Spotlight mode' ) }
-					/>
-				</PreferencesModalSection>
-			),
-		},
-		{
-			name: 'accessibility',
-			tabLabel: __( 'Accessibility' ),
-			content: (
-				<>
-					<PreferencesModalSection
-						title={ __( 'Navigation' ) }
-						description={ __(
-							'Optimize the editing experience for enhanced control.'
-						) }
-					>
-						<EnableFeature
-							scope="core"
-							featureName="keepCaretInsideBlock"
-							help={ __(
-								'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
-							) }
-							label={ __( 'Contain text cursor inside block' ) }
-						/>
-					</PreferencesModalSection>
-					<PreferencesModalSection title={ __( 'Interface' ) }>
-						<EnableFeature
-							scope="core"
-							featureName="showIconLabels"
-							label={ __( 'Show button text labels' ) }
-							help={ __(
-								'Show text instead of icons on buttons across the interface.'
-							) }
-						/>
-					</PreferencesModalSection>
-				</>
-			),
-		},
-		{
-			name: 'blocks',
-			tabLabel: __( 'Blocks' ),
-			content: (
-				<>
-					<PreferencesModalSection title={ __( 'Inserter' ) }>
-						<EnableFeature
-							scope="core"
-							featureName="mostUsedBlocks"
-							help={ __(
-								'Adds a category with the most frequently used blocks in the inserter.'
-							) }
-							label={ __( 'Show most used blocks' ) }
-						/>
-					</PreferencesModalSection>
-				</>
-			),
-		},
-	];
 	if ( ! isModalActive ) {
 		return null;
 	}
 	return (
-		<PreferencesModal closeModal={ toggleModal }>
-			<PreferencesModalTabs sections={ sections } />
-		</PreferencesModal>
+		<PreferencesModal isActive={ isModalActive } onClose={ closeModal } />
 	);
 }

package/src/components/revisions/index.js

@@ -78,7 +78,7 @@ function Revisions( { userConfig, blocks } ) {
 					{
 						// Forming a "block formatting context" to prevent margin collapsing.
 						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-						`.is-root-container { display: flow-root; } body { position: relative; padding: 32px; }`
+						`.is-root-container { display: flow-root; }`
 					}
 				</style>
 				<Disabled className="edit-site-revisions__example-preview__content">

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

@@ -34,9 +34,7 @@ export default function SaveButton( {
 			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 			const { isSaveViewOpened } = select( editSiteStore );
 			const isActivatingTheme = isResolving( 'activateTheme' );
-			const previewingTheme = select( coreStore ).getTheme(
-				currentlyPreviewingTheme()
-			);
+			const currentlyPreviewingThemeId = currentlyPreviewingTheme();
 
 			return {
 				isDirty: dirtyEntityRecords.length > 0,
@@ -49,7 +47,12 @@ export default function SaveButton( {
 						)
 					) || isActivatingTheme,
 				isSaveViewOpen: isSaveViewOpened(),
-				previewingThemeName: previewingTheme?.name?.rendered,
+				// Do not call `getTheme` with null, it will cause a request to
+				// the server.
+				previewingThemeName: currentlyPreviewingThemeId
+					? select( coreStore ).getTheme( currentlyPreviewingThemeId )
+							?.name?.rendered
+					: undefined,
 			};
 		}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );

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

@@ -23,10 +23,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useActivateTheme } from '../../utils/use-activate-theme';
-import {
-	currentlyPreviewingTheme,
-	isPreviewingTheme,
-} from '../../utils/is-previewing-theme';
+import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
 const { EntitiesSavedStatesExtensible } = unlock( privateApis );
 
@@ -39,19 +37,22 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 		activateSaveLabel = __( 'Activate' );
 	}
 
-	const themeName = useSelect( ( select ) => {
-		const theme = select( coreStore ).getTheme(
-			currentlyPreviewingTheme()
-		);
+	const currentTheme = useActualCurrentTheme();
 
-		return theme?.name?.rendered;
-	}, [] );
+	const previewingTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
 
 	const additionalPrompt = (
 		<p>
 			{ sprintf(
-				'Saving your changes will change your active theme to %s.',
-				themeName
+				/* translators: %1$s: The name of active theme, %2$s: The name of theme to be activated. */
+				__(
+					'Saving your changes will change your active theme from %1$s to %2$s.'
+				),
+				currentTheme?.name?.rendered ?? '...',
+				previewingTheme?.name?.rendered ?? '...'
 			) }
 		</p>
 	);

package/src/components/sidebar/index.js

@@ -66,11 +66,10 @@ function SidebarScreens() {
 				<SidebarNavigationScreenGlobalStyles />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page">
-				{ window?.__experimentalAdminViews ? (
-					<SidebarNavigationScreenPagesDataViews />
-				) : (
-					<SidebarNavigationScreenPages />
-				) }
+				<SidebarNavigationScreenPages />
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/pages">
+				<SidebarNavigationScreenPagesDataViews />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page/:postId">
 				<SidebarNavigationScreenPage />

package/src/components/sidebar-dataviews/dataview-item.js

@@ -29,7 +29,7 @@ export default function DataViewItem( {
 	suffix,
 } ) {
 	const {
-		params: { path },
+		params: { path, layout },
 	} = useLocation();
 
 	const iconToUse =
@@ -37,6 +37,7 @@ export default function DataViewItem( {
 
 	const linkInfo = useLink( {
 		path,
+		layout,
 		activeView: isCustom === 'true' ? customViewId : slug,
 		isCustom,
 	} );

package/src/components/sidebar-dataviews/default-views.js

@@ -15,7 +15,9 @@ import {
 } from '../../utils/constants';
 
 export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
-	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_TABLE ]: {
+		primaryField: 'title',
+	},
 	[ LAYOUT_GRID ]: {
 		mediaField: 'featured-image',
 		primaryField: 'title',
@@ -27,7 +29,7 @@ export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
 };
 
 const DEFAULT_PAGE_BASE = {
-	type: LAYOUT_LIST,
+	type: LAYOUT_TABLE,
 	search: '',
 	filters: [],
 	page: 1,

package/src/components/sidebar-dataviews/index.js

@@ -15,7 +15,7 @@ import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
 const PATH_TO_TYPE = {
-	'/page': 'page',
+	'/pages': 'page',
 };
 
 export default function DataViewsSidebarContent() {
@@ -47,11 +47,13 @@ export default function DataViewsSidebarContent() {
 					);
 				} ) }
 			</ItemGroup>
-			<CustomDataViewsList
-				activeView={ activeView }
-				type={ type }
-				isCustom="true"
-			/>
+			{ window?.__experimentalAdminViews && (
+				<CustomDataViewsList
+					activeView={ activeView }
+					type={ type }
+					isCustom="true"
+				/>
+			) }
 		</>
 	);
 }

package/src/components/sidebar-navigation-item/style.scss

@@ -33,5 +33,5 @@
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
 	cursor: grab;
-	padding: $grid-unit-10;
+	padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 0;
 }

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

@@ -41,17 +41,26 @@ export default function SidebarNavigationScreen( {
 	description,
 	backPath: backPathProp,
 } ) {
-	const { dashboardLink, dashboardLinkText } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-		return {
-			dashboardLink: getSettings().__experimentalDashboardLink,
-			dashboardLinkText: getSettings().__experimentalDashboardLinkText,
-		};
-	}, [] );
-	const { getTheme } = useSelect( coreStore );
+	const { dashboardLink, dashboardLinkText, previewingThemeName } = useSelect(
+		( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
+			const currentlyPreviewingThemeId = currentlyPreviewingTheme();
+			return {
+				dashboardLink: getSettings().__experimentalDashboardLink,
+				dashboardLinkText:
+					getSettings().__experimentalDashboardLinkText,
+				// Do not call `getTheme` with null, it will cause a request to
+				// the server.
+				previewingThemeName: currentlyPreviewingThemeId
+					? select( coreStore ).getTheme( currentlyPreviewingThemeId )
+							?.name?.rendered
+					: undefined,
+			};
+		},
+		[]
+	);
 	const location = useLocation();
 	const navigator = useNavigator();
-	const theme = getTheme( currentlyPreviewingTheme() );
 	const icon = isRTL() ? chevronRight : chevronLeft;
 
 	return (
@@ -108,7 +117,7 @@ export default function SidebarNavigationScreen( {
 							? title
 							: sprintf(
 									'Previewing %1$s: %2$s',
-									theme?.name?.rendered,
+									previewingThemeName,
 									title
 							  ) }
 					</Heading>

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

@@ -137,14 +137,6 @@ export default function SidebarNavigationScreenPages() {
 	};
 
 	const pagesLink = useLink( { path: '/pages' } );
-	const manageAllPagesProps = window?.__experimentalAdminViews
-		? { ...pagesLink }
-		: {
-				href: 'edit.php?post_type=page',
-				onClick: () => {
-					document.location = 'edit.php?post_type=page';
-				},
-		  };
 
 	return (
 		<>
@@ -156,7 +148,7 @@ export default function SidebarNavigationScreenPages() {
 			) }
 			<SidebarNavigationScreen
 				title={ __( 'Pages' ) }
-				description={ __( 'Browse and edit pages on your site.' ) }
+				description={ __( 'Browse and manage pages.' ) }
 				actions={
 					<SidebarButton
 						icon={ plus }
@@ -230,7 +222,7 @@ export default function SidebarNavigationScreenPages() {
 						) ) }
 						<SidebarNavigationItem
 							className="edit-site-sidebar-navigation-screen-pages__see-all"
-							{ ...manageAllPagesProps }
+							{ ...pagesLink }
 						>
 							{ __( 'Manage all pages' ) }
 						</SidebarNavigationItem>

package/src/components/sidebar-navigation-screen-pages-dataviews/index.js

@@ -7,9 +7,10 @@ import {
 } from '@wordpress/components';
 import { layout } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -41,18 +42,43 @@ export default function SidebarNavigationScreenPagesDataViews() {
 			per_page: -1,
 		}
 	);
-	const templates = useMemo(
-		() =>
-			templateRecords?.filter( ( { slug } ) =>
+
+	const { frontPage, postsPage } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			frontPage: siteSettings?.page_on_front,
+			postsPage: siteSettings?.page_for_posts,
+		};
+	}, [] );
+
+	const templates = useMemo( () => {
+		if ( ! templateRecords ) {
+			return [];
+		}
+
+		const isHomePageBlog = frontPage === postsPage;
+		const homeTemplate =
+			templateRecords?.find(
+				( template ) => template.slug === 'front-page'
+			) ||
+			templateRecords?.find( ( template ) => template.slug === 'home' ) ||
+			templateRecords?.find( ( template ) => template.slug === 'index' );
+
+		return [
+			isHomePageBlog ? homeTemplate : null,
+			...templateRecords?.filter( ( { slug } ) =>
 				[ '404', 'search' ].includes( slug )
 			),
-		[ templateRecords ]
-	);
+		].filter( Boolean );
+	}, [ templateRecords, frontPage, postsPage ] );
 
 	return (
 		<SidebarNavigationScreen
 			title={ __( 'Pages' ) }
+			description={ __( 'Browse and manage pages.' ) }
 			content={ <DataViewsSidebarContent /> }
+			backPath="/page"
 			footer={
 				<VStack spacing={ 0 }>
 					{ templates?.map( ( item ) => (

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

@@ -4,6 +4,7 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
@@ -30,20 +31,11 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 
 export default function SidebarNavigationScreenTemplates() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
 		TEMPLATE_POST_TYPE,
-		{
-			per_page: -1,
-		}
-	);
-
-	const sortedTemplates = templates ? [ ...templates ] : [];
-	sortedTemplates.sort( ( a, b ) =>
-		a.title.rendered.localeCompare( b.title.rendered )
+		{ per_page: -1 }
 	);
-
 	const browseAllLink = useLink( { path: '/wp_template/all' } );
 	const canCreate = ! isMobileViewport;
 	return (
@@ -66,24 +58,7 @@ export default function SidebarNavigationScreenTemplates() {
 				<>
 					{ isLoading && __( 'Loading templates…' ) }
 					{ ! isLoading && (
-						<ItemGroup>
-							{ ! templates?.length && (
-								<Item>{ __( 'No templates found' ) }</Item>
-							) }
-							{ sortedTemplates.map( ( template ) => (
-								<TemplateItem
-									postType={ TEMPLATE_POST_TYPE }
-									postId={ template.id }
-									key={ template.id }
-									withChevron
-								>
-									{ decodeEntities(
-										template.title?.rendered ||
-											template.slug
-									) }
-								</TemplateItem>
-							) ) }
-						</ItemGroup>
+						<SidebarTemplatesList templates={ templates } />
 					) }
 				</>
 			}
@@ -97,3 +72,85 @@ export default function SidebarNavigationScreenTemplates() {
 		/>
 	);
 }
+
+function TemplatesGroup( { title, templates } ) {
+	return (
+		<ItemGroup>
+			{ !! title && (
+				<Item className="edit-site-sidebar-navigation-screen-templates__templates-group-title">
+					{ title }
+				</Item>
+			) }
+			{ templates.map( ( template ) => (
+				<TemplateItem
+					postType={ TEMPLATE_POST_TYPE }
+					postId={ template.id }
+					key={ template.id }
+					withChevron
+				>
+					{ decodeEntities(
+						template.title?.rendered || template.slug
+					) }
+				</TemplateItem>
+			) ) }
+		</ItemGroup>
+	);
+}
+function SidebarTemplatesList( { templates } ) {
+	if ( ! templates?.length ) {
+		return (
+			<ItemGroup>
+				<Item>{ __( 'No templates found' ) }</Item>
+			</ItemGroup>
+		);
+	}
+	const sortedTemplates = templates ? [ ...templates ] : [];
+	sortedTemplates.sort( ( a, b ) =>
+		a.title.rendered.localeCompare( b.title.rendered )
+	);
+	const { hierarchyTemplates, customTemplates, ...plugins } =
+		sortedTemplates.reduce(
+			( accumulator, template ) => {
+				const {
+					original_source: originalSource,
+					author_text: authorText,
+				} = template;
+				if ( originalSource === 'plugin' ) {
+					if ( ! accumulator[ authorText ] ) {
+						accumulator[ authorText ] = [];
+					}
+					accumulator[ authorText ].push( template );
+				} else if ( template.is_custom ) {
+					accumulator.customTemplates.push( template );
+				} else {
+					accumulator.hierarchyTemplates.push( template );
+				}
+				return accumulator;
+			},
+			{ hierarchyTemplates: [], customTemplates: [] }
+		);
+	return (
+		<VStack spacing={ 3 }>
+			{ !! hierarchyTemplates.length && (
+				<TemplatesGroup templates={ hierarchyTemplates } />
+			) }
+			{ !! customTemplates.length && (
+				<TemplatesGroup
+					title={ __( 'Custom' ) }
+					templates={ customTemplates }
+				/>
+			) }
+			{ Object.entries( plugins ).map(
+				( [ plugin, pluginTemplates ] ) => {
+					return (
+						<TemplatesGroup
+							key={ plugin }
+							title={ plugin }
+							templates={ pluginTemplates }
+						/>
+					);
+				}
+			) }
+		</VStack>
+	);
+}