@wordpress/edit-site 5.25.1-next.79a6196f.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-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>