@wordpress/edit-site 7.3.0 → 7.4.0

package/src/components/add-new-template/utils.js

@@ -197,6 +197,7 @@ export function usePostTypeArchiveMenuItems() {
 
 export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 	const publicPostTypes = usePublicPostTypes();
+	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
 	// We need to keep track of naming conflicts. If a conflict
 	// occurs, we need to add slug.
@@ -236,6 +237,9 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 		[ publicPostTypes ]
 	);
 	const postTypesInfo = useEntitiesInfo( 'postType', templatePrefixes );
+	const existingTemplateSlugs = ( existingTemplates || [] ).map(
+		( { slug } ) => slug
+	);
 	const menuItems = ( publicPostTypes || [] ).reduce(
 		( accumulator, postType ) => {
 			const { slug, labels, icon } = postType;
@@ -246,6 +250,8 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			const defaultTemplateType = defaultTemplateTypes?.find(
 				( { slug: _slug } ) => _slug === generalTemplateSlug
 			);
+			const hasGeneralTemplate =
+				existingTemplateSlugs?.includes( generalTemplateSlug );
 			const _needsUniqueIdentifier = needsUniqueIdentifier( postType );
 			let menuItemTitle =
 				labels.template_name ||
@@ -326,12 +332,14 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 							},
 						},
 						labels,
+						hasGeneralTemplate,
 						template,
 					} );
 				};
 			}
-			// We don't need to add the menu item if there are no entities.
-			if ( hasEntities ) {
+			// We don't need to add the menu item if there are no
+			// entities and the general template exists.
+			if ( ! hasGeneralTemplate || hasEntities ) {
 				accumulator.push( menuItem );
 			}
 			return accumulator;
@@ -564,11 +572,7 @@ export function useAuthorMenuItem( onClickMenuItem ) {
 							suggestion.slug
 						);
 						return {
-							title: sprintf(
-								// translators: %s: Name of the author e.g: "Admin".
-								__( 'Author: %s' ),
-								suggestion.name
-							),
+							title: templateSlug,
 							slug: templateSlug,
 							templatePrefix: 'author',
 						};
@@ -590,6 +594,91 @@ export function useAuthorMenuItem( onClickMenuItem ) {
 	}
 }
 
+/**
+ * Helper hook that filters all the existing templates by the given
+ * object with the entity's slug as key and the template prefix as value.
+ *
+ * Example:
+ * `existingTemplates` is: [ { slug: 'tag-apple' }, { slug: 'page-about' }, { slug: 'tag' } ]
+ * `templatePrefixes` is: { post_tag: 'tag' }
+ * It will return: { post_tag: ['apple'] }
+ *
+ * Note: We append the `-` to the given template prefix in this function for our checks.
+ *
+ * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
+ * @return {Record<string,string[]>} An object with the entity's slug as key and an array with the existing template slugs as value.
+ */
+const useExistingTemplateSlugs = ( templatePrefixes ) => {
+	const existingTemplates = useExistingTemplates();
+	const existingSlugs = useMemo( () => {
+		return Object.entries( templatePrefixes || {} ).reduce(
+			( accumulator, [ slug, prefix ] ) => {
+				const slugsWithTemplates = ( existingTemplates || [] ).reduce(
+					( _accumulator, existingTemplate ) => {
+						const _prefix = `${ prefix }-`;
+						if ( existingTemplate.slug.startsWith( _prefix ) ) {
+							_accumulator.push(
+								existingTemplate.slug.substring(
+									_prefix.length
+								)
+							);
+						}
+						return _accumulator;
+					},
+					[]
+				);
+				if ( slugsWithTemplates.length ) {
+					accumulator[ slug ] = slugsWithTemplates;
+				}
+				return accumulator;
+			},
+			{}
+		);
+	}, [ templatePrefixes, existingTemplates ] );
+	return existingSlugs;
+};
+
+/**
+ * Helper hook that finds the existing records with an associated template,
+ * as they need to be excluded from the template suggestions.
+ *
+ * @param {string}                entityName                The entity's name.
+ * @param {Record<string,string>} templatePrefixes          An object with the entity's slug as key and the template prefix as value.
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
+ * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the existing records as value.
+ */
+const useTemplatesToExclude = (
+	entityName,
+	templatePrefixes,
+	additionalQueryParameters = {}
+) => {
+	const slugsToExcludePerEntity =
+		useExistingTemplateSlugs( templatePrefixes );
+	const recordsToExcludePerEntity = useSelect(
+		( select ) => {
+			return Object.entries( slugsToExcludePerEntity || {} ).reduce(
+				( accumulator, [ slug, slugsWithTemplates ] ) => {
+					const entitiesWithTemplates = select(
+						coreStore
+					).getEntityRecords( entityName, slug, {
+						_fields: 'id',
+						context: 'view',
+						slug: slugsWithTemplates,
+						...additionalQueryParameters[ slug ],
+					} );
+					if ( entitiesWithTemplates?.length ) {
+						accumulator[ slug ] = entitiesWithTemplates;
+					}
+					return accumulator;
+				},
+				{}
+			);
+		},
+		[ slugsToExcludePerEntity ]
+	);
+	return recordsToExcludePerEntity;
+};
+
 /**
  * Helper hook that returns information about an entity having
  * records that we can create a specific template for.
@@ -610,10 +699,19 @@ const useEntitiesInfo = (
 	templatePrefixes,
 	additionalQueryParameters = EMPTY_OBJECT
 ) => {
+	const recordsToExcludePerEntity = useTemplatesToExclude(
+		entityName,
+		templatePrefixes,
+		additionalQueryParameters
+	);
 	const entitiesHasRecords = useSelect(
 		( select ) => {
 			return Object.keys( templatePrefixes || {} ).reduce(
 				( accumulator, slug ) => {
+					const existingEntitiesIds =
+						recordsToExcludePerEntity?.[ slug ]?.map(
+							( { id } ) => id
+						) || [];
 					const records = select( coreStore ).getEntityRecords(
 						entityName,
 						slug,
@@ -621,6 +719,7 @@ const useEntitiesInfo = (
 							per_page: 1,
 							_fields: 'id',
 							context: 'view',
+							exclude: existingEntitiesIds,
 							...additionalQueryParameters[ slug ],
 						}
 					);
@@ -631,18 +730,28 @@ const useEntitiesInfo = (
 				{}
 			);
 		},
-		[ templatePrefixes, entityName, additionalQueryParameters ]
+		[
+			templatePrefixes,
+			recordsToExcludePerEntity,
+			entityName,
+			additionalQueryParameters,
+		]
 	);
 	const entitiesInfo = useMemo( () => {
 		return Object.keys( templatePrefixes || {} ).reduce(
 			( accumulator, slug ) => {
+				const existingEntitiesIds =
+					recordsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
 				accumulator[ slug ] = {
 					hasEntities: entitiesHasRecords[ slug ],
+					existingEntitiesIds,
 				};
 				return accumulator;
 			},
 			{}
 		);
-	}, [ templatePrefixes, entitiesHasRecords ] );
+	}, [ templatePrefixes, recordsToExcludePerEntity, entitiesHasRecords ] );
 	return entitiesInfo;
 };

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

@@ -2,73 +2,12 @@ import { __ } from '@wordpress/i18n';
 import { pencil, drawerRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { addQueryArgs } from '@wordpress/url';
 import { PATTERN_TYPES } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export const useSetActiveTemplateAction = () => {
-	const activeTheme = useSelect( ( select ) =>
-		select( coreStore ).getCurrentTheme()
-	);
-	const { getEntityRecord } = useSelect( coreStore );
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
-	return useMemo(
-		() => ( {
-			id: 'set-active-template',
-			label( items ) {
-				return items.some( ( item ) => item._isActive )
-					? __( 'Deactivate' )
-					: __( 'Activate' );
-			},
-			isPrimary: true,
-			icon: pencil,
-			isEligible( item ) {
-				if ( item.theme !== activeTheme.stylesheet ) {
-					return false;
-				}
-
-				// If it's not a created template but a registered template,
-				// only allow activating (so when it's inactive).
-				if ( typeof item.id !== 'number' ) {
-					return item._isActive === false;
-				}
-
-				return true;
-			},
-			async callback( items ) {
-				const deactivate = items.some( ( item ) => item._isActive );
-				// current active templates
-				const activeTemplates = {
-					...( ( await getEntityRecord( 'root', 'site' )
-						.active_templates ) ?? {} ),
-				};
-				for ( const item of items ) {
-					if ( deactivate ) {
-						delete activeTemplates[ item.slug ];
-					} else {
-						activeTemplates[ item.slug ] = item.id;
-					}
-				}
-				await editEntityRecord( 'root', 'site', undefined, {
-					active_templates: activeTemplates,
-				} );
-				await saveEditedEntityRecord( 'root', 'site' );
-			},
-		} ),
-		[
-			editEntityRecord,
-			saveEditedEntityRecord,
-			getEntityRecord,
-			activeTheme,
-		]
-	);
-};
-
 export const useEditPostAction = () => {
 	const history = useHistory();
 	return useMemo(

package/src/components/editor/use-adapt-editor-to-canvas.js

@@ -2,7 +2,6 @@ import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import { useLayoutEffect } from '@wordpress/element';
-import { store as preferencesStore } from '@wordpress/preferences';
 import { DEFAULT_DEVICE_TYPE } from '../block-editor/viewport';
 
 export function useAdaptEditorToCanvas( canvas ) {
@@ -11,15 +10,11 @@ export function useAdaptEditorToCanvas( canvas ) {
 		editPost,
 		setDeviceType,
 		closePublishSidebar,
-		setIsListViewOpened,
 		setIsInserterOpened,
 	} = useDispatch( editorStore );
-	const { get: getPreference } = useSelect( preferencesStore );
 	const { getCurrentPost } = useSelect( editorStore );
 	const registry = useRegistry();
 	useLayoutEffect( () => {
-		const isMediumOrBigger =
-			window.matchMedia( '(min-width: 782px)' ).matches;
 		registry.batch( () => {
 			clearSelectedBlock();
 			if ( getCurrentPost()?.type ) {
@@ -28,20 +23,6 @@ export function useAdaptEditorToCanvas( canvas ) {
 			setDeviceType( DEFAULT_DEVICE_TYPE );
 			closePublishSidebar();
 			setIsInserterOpened( false );
-
-			// Check if the block list view should be open by default.
-			// If `distractionFree` mode is enabled, the block list view should not be open.
-			// This behavior is disabled for small viewports.
-			if (
-				isMediumOrBigger &&
-				canvas === 'edit' &&
-				getPreference( 'core', 'showListViewByDefault' ) &&
-				! getPreference( 'core', 'distractionFree' )
-			) {
-				setIsListViewOpened( true );
-			} else {
-				setIsListViewOpened( false );
-			}
 		} );
 	}, [
 		canvas,
@@ -51,8 +32,6 @@ export function useAdaptEditorToCanvas( canvas ) {
 		setDeviceType,
 		closePublishSidebar,
 		setIsInserterOpened,
-		setIsListViewOpened,
-		getPreference,
 		getCurrentPost,
 	] );
 }

package/src/components/layout/{index.js → index.jsx}

@@ -41,7 +41,8 @@ const { useLocation } = unlock( routerPrivateApis );
 const { useStyle, UploadProgressSnackbar } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
-const CONTENT_COLOR = { background: '#ffffff' };
+// Reset to the default background color.
+const CONTENT_COLOR = { background: '#fcfcfc' };
 
 function Layout() {
 	const { query, name: routeKey, areas, widths } = useLocation();
@@ -321,7 +322,9 @@ export default function LayoutWithGlobalStylesProvider( props ) {
 					} }
 				>
 					<ThemeProvider color={ themeColors }>
-						<Layout { ...props } />
+						<ErrorBoundary>
+							<Layout { ...props } />
+						</ErrorBoundary>
 					</ThemeProvider>
 				</ThemeProvider>
 			</Tooltip.Provider>

package/src/components/more-menu/{welcome-guide-menu-item.js → welcome-guide-menu-item.jsx}

@@ -1,14 +1,19 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { MenuItem } from '@wordpress/components';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { unlock } from '../../lock-unlock';
+
+const { MoreMenuItem } = unlock( editorPrivateApis );
 
 export default function WelcomeGuideMenuItem() {
 	const { toggle } = useDispatch( preferencesStore );
 
 	return (
-		<MenuItem onClick={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }>
+		<MoreMenuItem
+			onClick={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }
+		>
 			{ __( 'Welcome Guide' ) }
-		</MenuItem>
+		</MoreMenuItem>
 	);
 }

package/src/components/page-templates/fields.jsx

@@ -0,0 +1,51 @@
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	EditorProvider,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+
+const { useStyle } = unlock( editorPrivateApis );
+
+function PreviewField( { item } ) {
+	const settings = usePatternSettings();
+	const backgroundColor = useStyle( 'color.background' ) ?? 'white';
+	const blocks = useMemo( () => {
+		return parse( item.content.raw );
+	}, [ item.content.raw ] );
+
+	const isEmpty = ! blocks?.length;
+	// Wrap everything in a block editor provider to ensure 'styles' that are needed
+	// for the previews are synced between the site editor store and the block editor store.
+	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
+	// render patterns inside the previews.
+	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
+	// the block editor settings are needed in context where we don't have the block editor.
+	// Explore how we can solve this in a better way.
+	return (
+		<EditorProvider post={ item } settings={ settings }>
+			<div
+				className="page-templates-preview-field"
+				style={ { backgroundColor } }
+			>
+				{ isEmpty && __( 'Empty template' ) }
+				{ ! isEmpty && (
+					<BlockPreview.Async>
+						<BlockPreview blocks={ blocks } />
+					</BlockPreview.Async>
+				) }
+			</div>
+		</EditorProvider>
+	);
+}
+
+export const previewField = {
+	label: __( 'Preview' ),
+	id: 'preview',
+	render: PreviewField,
+	enableSorting: false,
+};

package/src/components/page-templates/{index-legacy.js → index.jsx}

@@ -8,7 +8,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { addQueryArgs } from '@wordpress/url';
 import { useEvent } from '@wordpress/compose';
 import { useView, useViewConfig } from '@wordpress/views';
-import AddNewTemplate from '../add-new-template-legacy';
+import AddNewTemplate from '../add-new-template';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';

package/src/components/post-list/{index.js → index.jsx}

@@ -7,7 +7,7 @@ import {
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect } from '@wordpress/data';
-import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { DataViews } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useEvent, usePrevious } from '@wordpress/compose';
 import { addQueryArgs } from '@wordpress/url';
@@ -176,27 +176,14 @@ export default function PostList( { postType } ) {
 	const { notesCount, isLoading: isLoadingNotesCount } =
 		useNotesCount( postIds );
 
-	// The REST API sort the authors by ID, but we want to sort them by name.
-	const data = useMemo( () => {
-		let processedRecords = records;
-
-		if ( view?.sort?.field === 'author' ) {
-			processedRecords = filterSortAndPaginate(
-				records,
-				{ sort: { ...view.sort } },
-				fields
-			).data;
-		}
-
-		if ( processedRecords ) {
-			return processedRecords.map( ( record ) => ( {
+	const data = useMemo(
+		() =>
+			records?.map( ( record ) => ( {
 				...record,
 				notesCount: notesCount[ record.id ] ?? 0,
-			} ) );
-		}
-
-		return processedRecords;
-	}, [ records, fields, view?.sort, notesCount ] );
+			} ) ),
+		[ records, notesCount ]
+	);
 
 	const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
 	const prevIds = usePrevious( ids ) ?? [];

package/src/components/sidebar-global-styles/{index.js → index.jsx}

@@ -98,11 +98,13 @@ export default function SidebarGlobalStyles() {
 			title={ __( 'Styles' ) }
 			headingLevel={ 2 }
 		>
-			<GlobalStylesUIWrapper
-				path={ section }
-				onPathChange={ onChangeSection }
-				settings={ settings }
-			/>
+			<div className="edit-site-styles__content">
+				<GlobalStylesUIWrapper
+					path={ section }
+					onPathChange={ onChangeSection }
+					settings={ settings }
+				/>
+			</div>
 		</Page>
 	);
 }

package/src/components/sidebar-global-styles/style.scss

@@ -31,6 +31,12 @@
 	}
 }
 
+.edit-site-styles__content {
+	flex-grow: 1;
+	min-height: 0;
+	background-color: var(--wpds-color-background-surface-neutral-strong);
+}
+
 // Show button text labels when preference is enabled.
 .show-icon-labels {
 	.edit-site-styles__header-actions {

package/src/components/sidebar-identity/{index.js → index.jsx}

@@ -5,6 +5,11 @@ import { store as coreStore } from '@wordpress/core-data';
 import { DataForm } from '@wordpress/dataviews';
 import { MediaEdit } from '@wordpress/fields';
 import { decodeEntities } from '@wordpress/html-entities';
+import { useViewConfig } from '@wordpress/views';
+
+// The screen only renders a form, so it requests the `form` of the entity
+// view configuration alone.
+const VIEW_CONFIG_FIELDS = [ 'form' ];
 
 const fields = [
 	{
@@ -53,14 +58,6 @@ const fields = [
 	},
 ];
 
-const form = {
-	layout: {
-		type: 'regular',
-		labelPosition: 'top',
-	},
-	fields: [ 'title', 'description', 'site_logo', 'site_icon' ],
-};
-
 export default function SidebarIdentity() {
 	const data = useSelect(
 		( select ) =>
@@ -68,23 +65,30 @@ export default function SidebarIdentity() {
 		[]
 	);
 	const { editEntityRecord } = useDispatch( coreStore );
+	const { form } = useViewConfig( {
+		kind: 'root',
+		name: 'site',
+		fields: VIEW_CONFIG_FIELDS,
+	} );
 
 	const onChange = ( edits ) => {
 		editEntityRecord( 'root', 'site', undefined, edits );
 	};
 
+	if ( ! form ) {
+		return null;
+	}
+
 	return (
-		<Page
-			title={ _x( 'Identity', 'site identity' ) }
-			headingLevel={ 2 }
-			hasPadding
-		>
-			<DataForm
-				data={ data }
-				fields={ fields }
-				form={ form }
-				onChange={ onChange }
-			/>
+		<Page title={ _x( 'Identity', 'site identity' ) } headingLevel={ 2 }>
+			<div className="edit-site-sidebar-identity__form">
+				<DataForm
+					data={ data }
+					fields={ fields }
+					form={ form }
+					onChange={ onChange }
+				/>
+			</div>
 		</Page>
 	);
 }

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

@@ -0,0 +1,7 @@
+.edit-site-sidebar-identity__form {
+	flex-grow: 1;
+	min-height: 0;
+	overflow: auto;
+	background-color: var(--wpds-color-background-surface-neutral-strong);
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+}

package/src/components/sidebar-navigation-item/{index.js → index.jsx}

@@ -65,13 +65,7 @@ function SidebarNavigationItemContent( {
 			{ ...props }
 		>
 			<Stack direction="row" align="center" justify="start" gap="sm">
-				{ icon && (
-					<Icon
-						style={ { fill: 'currentcolor' } }
-						icon={ icon }
-						size={ 24 }
-					/>
-				) }
+				{ icon && <Icon icon={ icon } size={ 24 } /> }
 				<FlexBlock>{ children }</FlexBlock>
 				{ withChevron && (
 					<Icon

package/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js

@@ -1,7 +1,7 @@
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 
-// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.jsx.
 export default function buildNavigationLabel( title, id, status ) {
 	if ( ! title?.rendered ) {
 		/* translators: %s: the index of the menu in the list of menus. */

package/src/components/sidebar-navigation-screen-navigation-menus/{index.js → index.jsx}

@@ -15,7 +15,7 @@ import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-m
 import { unlock } from '../../lock-unlock';
 import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 
-// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.jsx.
 function buildMenuLabel( title, id, status ) {
 	if ( ! title ) {
 		/* translators: %s: the index of the menu in the list of menus. */

package/src/components/sidebar-navigation-screen-navigation-menus/{navigation-menu-content.js → navigation-menu-content.jsx}

@@ -14,7 +14,7 @@ import LeafMoreMenu from './leaf-more-menu';
 const { PrivateListView } = unlock( blockEditorPrivateApis );
 const { NavigationLinkUI } = unlock( blockLibraryPrivateApis );
 
-// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
+// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.jsx.
 const MAX_PAGE_COUNT = 100;
 const PAGES_QUERY = [
 	'postType',

package/src/components/sidebar-navigation-screen-templates-browse/{index.js → index.jsx}

@@ -1,7 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import DataviewsTemplatesSidebarContent from './content';
-import DataviewsTemplatesSidebarContentLegacy from './content-legacy';
 
 export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 	return (
@@ -11,13 +10,7 @@ export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 				'Manage the templates that define the structure of your pages, or reset any customizations made to those supplied by your theme.'
 			) }
 			backPath={ backPath }
-			content={
-				window?.__experimentalTemplateActivate ? (
-					<DataviewsTemplatesSidebarContent />
-				) : (
-					<DataviewsTemplatesSidebarContentLegacy />
-				)
-			}
+			content={ <DataviewsTemplatesSidebarContent /> }
 		/>
 	);
 }