@wordpress/edit-site 6.32.0 → 6.32.1-next.b8c8708f3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.32.0",
+	"version": "6.32.1-next.b8c8708f3.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,50 +25,60 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js",
+			"default": "./build/index.js"
+		},
+		"./package.json": "./package.json"
+	},
 	"react-native": "src/index",
 	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.32.0",
-		"@wordpress/api-fetch": "^7.32.0",
-		"@wordpress/blob": "^4.32.0",
-		"@wordpress/block-editor": "^15.5.0",
-		"@wordpress/block-library": "^9.32.0",
-		"@wordpress/blocks": "^15.5.0",
-		"@wordpress/commands": "^1.32.0",
-		"@wordpress/components": "^30.5.0",
-		"@wordpress/compose": "^7.32.0",
-		"@wordpress/core-data": "^7.32.0",
-		"@wordpress/data": "^10.32.0",
-		"@wordpress/dataviews": "^9.1.0",
-		"@wordpress/date": "^5.32.0",
-		"@wordpress/deprecated": "^4.32.0",
-		"@wordpress/dom": "^4.32.0",
-		"@wordpress/editor": "^14.32.0",
-		"@wordpress/element": "^6.32.0",
-		"@wordpress/escape-html": "^3.32.0",
-		"@wordpress/fields": "^0.24.0",
-		"@wordpress/hooks": "^4.32.0",
-		"@wordpress/html-entities": "^4.32.0",
-		"@wordpress/i18n": "^6.5.0",
-		"@wordpress/icons": "^10.32.0",
-		"@wordpress/keyboard-shortcuts": "^5.32.0",
-		"@wordpress/keycodes": "^4.32.0",
-		"@wordpress/media-utils": "^5.32.0",
-		"@wordpress/notices": "^5.32.0",
-		"@wordpress/patterns": "^2.32.0",
-		"@wordpress/plugins": "^7.32.0",
-		"@wordpress/preferences": "^4.32.0",
-		"@wordpress/primitives": "^4.32.0",
-		"@wordpress/private-apis": "^1.32.0",
-		"@wordpress/reusable-blocks": "^5.32.0",
-		"@wordpress/router": "^1.32.0",
-		"@wordpress/style-engine": "^2.32.0",
-		"@wordpress/url": "^4.32.0",
-		"@wordpress/viewport": "^6.32.0",
-		"@wordpress/widgets": "^4.32.0",
-		"@wordpress/wordcount": "^4.32.0",
+		"@wordpress/a11y": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/admin-ui": "^1.0.1-next.b8c8708f3.0",
+		"@wordpress/api-fetch": "^7.32.1-next.b8c8708f3.0",
+		"@wordpress/base-styles": "^6.8.1-next.b8c8708f3.0",
+		"@wordpress/blob": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/block-editor": "^15.5.1-next.b8c8708f3.0",
+		"@wordpress/block-library": "^9.33.1-next.b8c8708f3.0",
+		"@wordpress/blocks": "^15.5.1-next.b8c8708f3.0",
+		"@wordpress/commands": "^1.32.1-next.b8c8708f3.0",
+		"@wordpress/components": "^30.6.1-next.b8c8708f3.0",
+		"@wordpress/compose": "^7.32.1-next.b8c8708f3.0",
+		"@wordpress/core-data": "^7.32.1-next.b8c8708f3.0",
+		"@wordpress/data": "^10.32.1-next.b8c8708f3.0",
+		"@wordpress/dataviews": "^10.0.1-next.b8c8708f3.0",
+		"@wordpress/date": "^5.32.1-next.b8c8708f3.0",
+		"@wordpress/deprecated": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/dom": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/editor": "^14.32.1-next.b8c8708f3.0",
+		"@wordpress/element": "^6.32.1-next.b8c8708f3.0",
+		"@wordpress/escape-html": "^3.32.1-next.b8c8708f3.0",
+		"@wordpress/fields": "^0.24.1-next.b8c8708f3.0",
+		"@wordpress/hooks": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/html-entities": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/i18n": "^6.5.1-next.b8c8708f3.0",
+		"@wordpress/icons": "^11.0.1-next.b8c8708f3.0",
+		"@wordpress/keyboard-shortcuts": "^5.32.1-next.b8c8708f3.0",
+		"@wordpress/keycodes": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/media-utils": "^5.32.1-next.b8c8708f3.0",
+		"@wordpress/notices": "^5.32.1-next.b8c8708f3.0",
+		"@wordpress/patterns": "^2.32.1-next.b8c8708f3.0",
+		"@wordpress/plugins": "^7.32.1-next.b8c8708f3.0",
+		"@wordpress/preferences": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/primitives": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/private-apis": "^1.32.1-next.b8c8708f3.0",
+		"@wordpress/reusable-blocks": "^5.32.1-next.b8c8708f3.0",
+		"@wordpress/router": "^1.32.1-next.b8c8708f3.0",
+		"@wordpress/style-engine": "^2.32.1-next.b8c8708f3.0",
+		"@wordpress/url": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/viewport": "^6.32.1-next.b8c8708f3.0",
+		"@wordpress/views": "^1.0.1-next.b8c8708f3.0",
+		"@wordpress/widgets": "^4.32.1-next.b8c8708f3.0",
+		"@wordpress/wordcount": "^4.32.1-next.b8c8708f3.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -83,5 +93,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a030b4c0e0695239b942c7dc18511782b64f10ed"
+	"gitHead": "67cfd7e661931aeb0d06bec894599d287a4f8d0f"
 }

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

@@ -26,7 +26,7 @@ import {
 	calendar,
 	category,
 	commentAuthorAvatar,
-	edit,
+	pencil,
 	home,
 	layout,
 	list,
@@ -211,7 +211,9 @@ function NewTemplateModal( { onClose } ) {
 					status: 'publish',
 					title,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
-					is_wp_suggestion: isWPSuggestion,
+					meta: {
+						is_wp_suggestion: isWPSuggestion,
+					},
 				},
 				{ throwOnError: true }
 			);
@@ -315,7 +317,7 @@ function NewTemplateModal( { onClose } ) {
 						title={ __( 'Custom template' ) }
 						direction="row"
 						className="edit-site-add-new-template__custom-template-button"
-						icon={ edit }
+						icon={ pencil }
 						onClick={ () =>
 							setModalContent(
 								modalContentMap.customGenericTemplate

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

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-custom-template-modal {
 	&__contents-wrapper {
 		height: 100%;

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit } from '@wordpress/icons';
+import { pencil } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -17,6 +17,9 @@ import { unlock } from '../../lock-unlock';
 const { useHistory } = unlock( routerPrivateApis );
 
 export const useSetActiveTemplateAction = () => {
+	const activeTheme = useSelect( ( select ) =>
+		select( coreStore ).getCurrentTheme()
+	);
 	const { getEntityRecord } = useSelect( coreStore );
 	const { editEntityRecord, saveEditedEntityRecord } =
 		useDispatch( coreStore );
@@ -29,9 +32,12 @@ export const useSetActiveTemplateAction = () => {
 					: __( 'Activate' );
 			},
 			isPrimary: true,
-			icon: edit,
+			icon: pencil,
 			isEligible( item ) {
-				return ! ( item.slug === 'index' && item.source === 'theme' );
+				return (
+					! ( item.slug === 'index' && item.source === 'theme' ) &&
+					item.theme === activeTheme.stylesheet
+				);
 			},
 			async callback( items ) {
 				const deactivate = items.some( ( item ) => item._isActive );
@@ -51,17 +57,18 @@ export const useSetActiveTemplateAction = () => {
 						activeTemplates[ item.slug ] = item.id;
 					}
 				}
-				// To do: figure out why the REST API deletes the option when
-				// it's set to an empty object. That would trigger the migration
-				// function, which will make all templates in the database active.
-				activeTemplates.__preventCollapse = 0;
 				await editEntityRecord( 'root', 'site', undefined, {
 					active_templates: activeTemplates,
 				} );
 				await saveEditedEntityRecord( 'root', 'site' );
 			},
 		} ),
-		[ editEntityRecord, saveEditedEntityRecord, getEntityRecord ]
+		[
+			editEntityRecord,
+			saveEditedEntityRecord,
+			getEntityRecord,
+			activeTheme,
+		]
 	);
 };
 
@@ -72,7 +79,7 @@ export const useEditPostAction = () => {
 			id: 'edit-post',
 			label: __( 'Edit' ),
 			isPrimary: true,
-			icon: edit,
+			icon: pencil,
 			isEligible( post ) {
 				if ( post.status === 'trash' ) {
 					return false;

package/src/components/editor/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-editor__editor-interface {
 	opacity: 1;
 

package/src/components/editor/use-resolve-edited-entity.js

@@ -30,7 +30,7 @@ const postTypesWithoutParentTemplate = [
 
 const authorizedPostTypes = [ 'page', 'post' ];
 
-function getPostType( name, postId ) {
+function getPostType( name ) {
 	let postType;
 	if ( name === 'navigation-item' ) {
 		postType = NAVIGATION_POST_TYPE;
@@ -39,9 +39,7 @@ function getPostType( name, postId ) {
 	} else if ( name === 'template-part-item' ) {
 		postType = TEMPLATE_PART_POST_TYPE;
 	} else if ( name === 'templates' ) {
-		postType = /^\d+$/.test( postId )
-			? TEMPLATE_POST_TYPE
-			: 'wp_registered_template';
+		postType = TEMPLATE_POST_TYPE;
 	} else if ( name === 'template-item' ) {
 		postType = TEMPLATE_POST_TYPE;
 	} else if ( name === 'static-template-item' ) {
@@ -126,18 +124,6 @@ export function useResolveEditedEntity() {
 		[ homePage, postId, postType ]
 	);
 
-	const editableResolvedTemplateId = useSelect(
-		( select ) => {
-			if ( typeof resolvedTemplateId !== 'string' ) {
-				return resolvedTemplateId;
-			}
-			return unlock( select( coreDataStore ) ).getTemplateAutoDraftId(
-				resolvedTemplateId
-			);
-		},
-		[ resolvedTemplateId ]
-	);
-
 	const context = useMemo( () => {
 		if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
 			return {};
@@ -161,9 +147,9 @@ export function useResolveEditedEntity() {
 
 	if ( !! homePage ) {
 		return {
-			isReady: editableResolvedTemplateId !== undefined,
+			isReady: resolvedTemplateId !== undefined,
 			postType: TEMPLATE_POST_TYPE,
-			postId: editableResolvedTemplateId,
+			postId: resolvedTemplateId,
 			context,
 		};
 	}

package/src/components/editor-canvas-container/style.scss

@@ -1,9 +1,12 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-editor-canvas-container {
 	height: 100%;
 
 	// This is the gray background color that's applied behind "isolation mode".
 	// The color normally comes from .editor-visual-editor, but that class is missing here.
-	background-color: $gray-300;
+	background-color: var(--wp-editor-canvas-background);
 
 	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
 	iframe {

package/src/components/global-styles/font-library-modal/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 // Fixed height for the modal footer.
 // Ensures that the footer is always visible when the modal content is scrollable.
 $footer-height: 70px;

package/src/components/global-styles/screen-revisions/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-global-styles-screen-revisions__revisions-list {
 	list-style: none;
 	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
 	// To round the outline in Windows 10 high contrast mode.

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-global-styles-sidebar {
 	display: flex;
 	flex-direction: column;

package/src/components/layout/index.js

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { NavigableRegion } from '@wordpress/admin-ui';
 import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
@@ -47,7 +48,7 @@ import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-const { NavigableRegion, GlobalStylesProvider } = unlock( editorPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.3;

package/src/components/layout/style.scss

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .edit-site-layout {
 	height: 100%;
 	background: $gray-900;

package/src/components/page-patterns/actions.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, MenuGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import AddNewPattern from '../add-new-pattern';
+import RenameCategoryMenuItem from './rename-category-menu-item';
+import DeleteCategoryMenuItem from './delete-category-menu-item';
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
+import { PATTERN_TYPES } from '../../utils/constants';
+
+export default function PatternsActions( { categoryId, type } ) {
+	const { patternCategories } = usePatternCategories();
+	let patternCategory;
+	if ( type === PATTERN_TYPES.user && !! categoryId ) {
+		patternCategory = patternCategories.find(
+			( category ) => category.name === categoryId
+		);
+	}
+
+	return (
+		<>
+			<AddNewPattern />
+			{ !! patternCategory?.id && (
+				<DropdownMenu
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+					toggleProps={ {
+						className: 'edit-site-patterns__button',
+						size: 'compact',
+					} }
+				>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							<RenameCategoryMenuItem
+								category={ patternCategory }
+								onClose={ onClose }
+							/>
+							<DeleteCategoryMenuItem
+								category={ patternCategory }
+								onClose={ onClose }
+							/>
+						</MenuGroup>
+					) }
+				</DropdownMenu>
+			) }
+		</>
+	);
+}

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

@@ -1,19 +1,20 @@
 /**
  * WordPress dependencies
  */
+import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo, useId, useEffect } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import { usePrevious } from '@wordpress/compose';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useView } from '@wordpress/views';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import Page from '../page';
 import {
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
@@ -24,13 +25,16 @@ import {
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
-import PatternsHeader from './header';
+import PatternsActions from './actions';
 import { useEditPostAction } from '../dataviews-actions';
 import {
 	patternStatusField,
 	previewField,
 	templatePartAuthorField,
 } from './fields';
+import { addQueryArgs } from '@wordpress/url';
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
+import { Button } from '@wordpress/components';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { usePostActions, patternTitleField } = unlock( editorPrivateApis );
@@ -55,8 +59,6 @@ const defaultLayouts = {
 };
 const DEFAULT_VIEW = {
 	type: LAYOUT_GRID,
-	search: '',
-	page: 1,
 	perPage: 20,
 	titleField: 'title',
 	mediaField: 'preview',
@@ -65,15 +67,58 @@ const DEFAULT_VIEW = {
 	...defaultLayouts[ LAYOUT_GRID ],
 };
 
+function usePagePatternsHeader( type, categoryId ) {
+	const { patternCategories } = usePatternCategories();
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( coreStore ).getCurrentTheme()
+				?.default_template_part_areas || [],
+		[]
+	);
+	let title, description, patternCategory;
+	if ( type === TEMPLATE_PART_POST_TYPE ) {
+		const templatePartArea = templatePartAreas.find(
+			( area ) => area.area === categoryId
+		);
+		title = templatePartArea?.label || __( 'All Template Parts' );
+		description =
+			templatePartArea?.description ||
+			__( 'Includes every template part defined for any area.' );
+	} else if ( type === PATTERN_TYPES.user && !! categoryId ) {
+		patternCategory = patternCategories.find(
+			( category ) => category.name === categoryId
+		);
+		title = patternCategory?.label;
+		description = patternCategory?.description;
+	}
+
+	return { title, description };
+}
+
 export default function DataviewsPatterns() {
-	const {
-		query: { postType = 'wp_block', categoryId: categoryIdFromURL },
-	} = useLocation();
+	const { path, query } = useLocation();
+	const { postType = 'wp_block', categoryId: categoryIdFromURL } = query;
 	const history = useHistory();
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
-	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const previousCategoryId = usePrevious( categoryId );
-	const previousPostType = usePrevious( postType );
+	const { view, updateView, isModified, resetToDefault } = useView( {
+		kind: 'postType',
+		name: postType,
+		slug: categoryId,
+		defaultView: DEFAULT_VIEW,
+		queryParams: {
+			page: Number( query.pageNumber ?? 1 ),
+			search: query.search,
+		},
+		onChangeQueryParams: ( params ) => {
+			history.navigate(
+				addQueryArgs( path, {
+					...query,
+					pageNumber: params.page,
+					search: params.search,
+				} )
+			);
+		},
+	} );
 	const viewSyncStatus = view.filters?.find(
 		( { field } ) => field === 'sync-status'
 	)?.value;
@@ -115,15 +160,6 @@ export default function DataviewsPatterns() {
 		return _fields;
 	}, [ postType, authors ] );
 
-	// Reset the page number when the category changes.
-	useEffect( () => {
-		if (
-			previousCategoryId !== categoryId ||
-			previousPostType !== postType
-		) {
-			setView( ( prevView ) => ( { ...prevView, page: 1 } ) );
-		}
-	}, [ categoryId, previousCategoryId, previousPostType, postType ] );
 	const { data, paginationInfo } = useMemo( () => {
 		// Search is managed server-side as well as filters for patterns.
 		// However, the author filter in template parts is done client-side.
@@ -153,24 +189,35 @@ export default function DataviewsPatterns() {
 		}
 		return [ editAction, ...patternActions ].filter( Boolean );
 	}, [ editAction, postType, templatePartActions, patternActions ] );
-	const id = useId();
 	const settings = usePatternSettings();
+	const { title, description } = usePagePatternsHeader(
+		postType,
+		categoryId
+	);
+
 	// Wrap everything in a block editor provider.
 	// This ensures 'styles' that are needed for the previews are synced
 	// from the site editor store to the block editor store.
 	return (
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<Page
-				title={ __( 'Patterns content' ) }
 				className="edit-site-page-patterns-dataviews"
-				hideTitleFromUI
+				title={ title }
+				subTitle={ description }
+				actions={
+					<>
+						{ isModified && (
+							<Button
+								__next40pxDefaultSize
+								onClick={ resetToDefault }
+							>
+								{ __( 'Reset view' ) }
+							</Button>
+						) }
+						<PatternsActions />
+					</>
+				}
 			>
-				<PatternsHeader
-					categoryId={ categoryId }
-					type={ postType }
-					titleId={ `${ id }-title` }
-					descriptionId={ `${ id }-description` }
-				/>
 				<DataViews
 					key={ categoryId + postType }
 					paginationInfo={ paginationInfo }
@@ -195,7 +242,7 @@ export default function DataviewsPatterns() {
 						);
 					} }
 					view={ view }
-					onChangeView={ setView }
+					onChangeView={ updateView }
 					defaultLayouts={ defaultLayouts }
 				/>
 			</Page>

package/src/components/page-patterns/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-patterns__delete-modal {
 	width: $modal-width-small;
 }

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

@@ -20,7 +20,11 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@wordpress/editor';
-import { privateApis as corePrivateApis } from '@wordpress/core-data';
+import {
+	privateApis as corePrivateApis,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -160,6 +164,23 @@ export const activeField = {
 	},
 };
 
+export const useThemeField = () => {
+	const activeTheme = useSelect( ( select ) =>
+		select( coreStore ).getCurrentTheme()
+	);
+	return {
+		label: __( 'Compatible Theme' ),
+		id: 'theme',
+		getValue: ( { item } ) => item.theme,
+		render: function Render( { item } ) {
+			if ( item.theme === activeTheme.stylesheet ) {
+				return <Badge intent="success">{ item.theme }</Badge>;
+			}
+			return <Badge intent="error">{ item.theme }</Badge>;
+		},
+	};
+};
+
 export const slugField = {
 	label: __( 'Template Type' ),
 	id: 'slug',