@wordpress/edit-site 7.3.0 → 7.4.1-next.v.202609031004.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "7.3.0",
+	"version": "7.4.1-next.v.202609031004.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,57 +47,47 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.54.0",
-		"@wordpress/admin-ui": "^2.9.0",
-		"@wordpress/api-fetch": "^7.54.0",
-		"@wordpress/base-styles": "^13.0.0",
-		"@wordpress/blob": "^4.54.0",
-		"@wordpress/block-editor": "^17.0.0",
-		"@wordpress/block-library": "^10.5.0",
-		"@wordpress/blocks": "^15.27.0",
-		"@wordpress/commands": "^1.54.0",
-		"@wordpress/components": "^40.0.0",
-		"@wordpress/compose": "^8.7.0",
-		"@wordpress/core-data": "^7.54.0",
-		"@wordpress/data": "^10.54.0",
-		"@wordpress/dataviews": "^18.1.0",
-		"@wordpress/date": "^5.54.0",
-		"@wordpress/deprecated": "^4.54.0",
-		"@wordpress/dom": "^4.54.0",
-		"@wordpress/editor": "^14.54.0",
-		"@wordpress/element": "^8.6.0",
-		"@wordpress/escape-html": "^3.54.0",
-		"@wordpress/fields": "^0.46.0",
-		"@wordpress/global-styles-engine": "^1.21.0",
-		"@wordpress/global-styles-ui": "^1.21.0",
-		"@wordpress/hooks": "^4.54.0",
-		"@wordpress/html-entities": "^4.54.0",
-		"@wordpress/i18n": "^6.27.0",
-		"@wordpress/icons": "^15.5.0",
-		"@wordpress/keyboard-shortcuts": "^5.54.0",
-		"@wordpress/keycodes": "^4.54.0",
-		"@wordpress/media-utils": "^5.54.0",
-		"@wordpress/notices": "^5.54.0",
-		"@wordpress/patterns": "^2.54.0",
-		"@wordpress/plugins": "^7.54.0",
-		"@wordpress/preferences": "^4.54.0",
-		"@wordpress/primitives": "^4.54.0",
-		"@wordpress/private-apis": "^1.54.0",
-		"@wordpress/reusable-blocks": "^5.54.0",
-		"@wordpress/router": "^1.54.0",
-		"@wordpress/style-engine": "^2.54.0",
-		"@wordpress/theme": "^2.0.0",
-		"@wordpress/ui": "^0.21.0",
-		"@wordpress/url": "^4.54.0",
-		"@wordpress/viewport": "^6.54.0",
-		"@wordpress/views": "^1.21.0",
-		"@wordpress/widgets": "^4.54.0",
-		"@wordpress/wordcount": "^4.54.0",
+		"@wordpress/a11y": "^4.54.1-next.v.202609031004.0",
+		"@wordpress/admin-ui": "^2.9.1-next.v.202609031004.0",
+		"@wordpress/api-fetch": "^7.54.1-next.v.202609031004.0",
+		"@wordpress/base-styles": "^13.1.1-next.v.202609031004.0",
+		"@wordpress/block-editor": "^17.1.1-next.v.202609031004.0",
+		"@wordpress/block-library": "^10.6.1-next.v.202609031004.0",
+		"@wordpress/blocks": "^16.0.1-next.v.202609031004.0",
+		"@wordpress/commands": "^1.54.2-next.v.202609031004.0",
+		"@wordpress/components": "^40.1.1-next.v.202609031004.0",
+		"@wordpress/compose": "^8.7.2-next.v.202609031004.0",
+		"@wordpress/core-data": "^8.0.1-next.v.202609031004.0",
+		"@wordpress/data": "^10.54.2-next.v.202609031004.0",
+		"@wordpress/dataviews": "^19.0.1-next.v.202609031004.0",
+		"@wordpress/deprecated": "^4.54.1-next.v.202609031004.0",
+		"@wordpress/dom": "^4.54.1-next.v.202609031004.0",
+		"@wordpress/editor": "^15.0.1-next.v.202609031004.0",
+		"@wordpress/element": "^8.6.2-next.v.202609031004.0",
+		"@wordpress/fields": "^0.47.1-next.v.202609031004.0",
+		"@wordpress/global-styles-engine": "^1.21.2-next.v.202609031004.0",
+		"@wordpress/global-styles-ui": "^1.21.2-next.v.202609031004.0",
+		"@wordpress/html-entities": "^4.54.1-next.v.202609031004.0",
+		"@wordpress/i18n": "^6.27.1-next.v.202609031004.0",
+		"@wordpress/icons": "^16.0.1-next.v.202609031004.0",
+		"@wordpress/keyboard-shortcuts": "^5.54.1-next.v.202609031004.0",
+		"@wordpress/keycodes": "^4.54.1-next.v.202609031004.0",
+		"@wordpress/notices": "^5.54.1-next.v.202609031004.0",
+		"@wordpress/patterns": "^2.54.2-next.v.202609031004.0",
+		"@wordpress/plugins": "^7.54.1-next.v.202609031004.0",
+		"@wordpress/preferences": "^4.54.2-next.v.202609031004.0",
+		"@wordpress/private-apis": "^1.54.2-next.v.202609031004.0",
+		"@wordpress/router": "^1.54.1-next.v.202609031004.0",
+		"@wordpress/theme": "^2.1.1-next.v.202609031004.0",
+		"@wordpress/ui": "^0.22.1-next.v.202609031004.0",
+		"@wordpress/url": "^4.54.1-next.v.202609031004.0",
+		"@wordpress/views": "^1.21.2-next.v.202609031004.0",
+		"@wordpress/widgets": "^4.54.2-next.v.202609031004.0",
 		"change-case": "^4.1.2",
-		"clsx": "^2.1.1",
-		"colord": "^2.9.3",
-		"fast-deep-equal": "^3.1.3",
-		"react-autosize-textarea": "^7.1.0"
+		"clsx": "^2.1.1"
+	},
+	"devDependencies": {
+		"vitest": "^4.1.10"
 	},
 	"peerDependencies": {
 		"react": "^18 || ^19",
@@ -106,5 +96,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5ef24f60261976bb198ad035db24bf81c1fb92b4"
+	"gitHead": "7275d6c6d93b542fca3cd98cdb9c7344ddd11e19"
 }

package/src/components/add-new-template/style.scss

@@ -10,12 +10,6 @@
 		> * {
 			width: 100%;
 		}
-
-		&__suggestions_list {
-			margin-left: - $grid-unit-15;
-			margin-right: - $grid-unit-15;
-			width: calc(100% + #{$grid-unit-15 * 2});
-		}
 	}
 
 	&__contents {
@@ -31,8 +25,14 @@
 
 	.edit-site-custom-template-modal__suggestions_list {
 		@include break-small() {
-			max-height: $grid-unit-70 * 4; // Height of four buttons
 			overflow-y: auto;
+			// Height of four buttons
+			max-height: calc(#{$grid-unit-70 * 4} + 4 * var(--wpds-border-width-focus));
+			// Room for the focus ring, and keep it in view while arrowing.
+			padding: calc(2 * var(--wpds-border-width-focus));
+			margin-inline: calc(-2 * var(--wpds-border-width-focus));
+			width: calc(100% + 4 * var(--wpds-border-width-focus));
+			scroll-padding-block: calc(2 * var(--wpds-border-width-focus));
 		}
 
 		&__list-item {
@@ -65,10 +65,6 @@
 				background-color: $gray-100;
 			}
 
-			&:focus:not(:disabled) {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
-			}
-
 			&__title,
 			&__info {
 				overflow: hidden;
@@ -112,7 +108,7 @@
 	.edit-site-add-new-template__template-button,
 	.edit-site-add-new-template__custom-template-button {
 		svg {
-			fill: var(--wp-admin-theme-color);
+			color: var(--wp-admin-theme-color);
 		}
 	}
 
@@ -141,9 +137,6 @@
 		border: $border-width solid $gray-300;
 		justify-content: center;
 
-		// Show the boundary of the button, in High Contrast Mode.
-		outline: 1px solid transparent;
-
 		span:first-child {
 			color: $gray-900;
 		}
@@ -163,12 +156,6 @@
 		}
 
 		&:focus {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-color: transparent;
-
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 3px solid transparent;
-
 			span:first-child {
 				color: var(--wp-admin-theme-color);
 			}

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();

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/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}

@@ -74,17 +74,15 @@ export default function SidebarIdentity() {
 	};
 
 	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>
 	);
 }