@wordpress/edit-site 6.33.3-next.36001005c.0 → 6.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.33.3-next.36001005c.0",
+	"version": "6.34.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,51 +35,55 @@
 	},
 	"react-native": "src/index",
 	"wpScript": true,
+	"wpScriptExtraDependencies": [
+		"wp-dom-ready"
+	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.33.1-next.36001005c.0",
-		"@wordpress/admin-ui": "^1.1.1-next.36001005c.0",
-		"@wordpress/api-fetch": "^7.33.1-next.36001005c.0",
-		"@wordpress/base-styles": "^6.10.1-next.36001005c.0",
-		"@wordpress/blob": "^4.33.1-next.36001005c.0",
-		"@wordpress/block-editor": "^15.6.1-next.36001005c.0",
-		"@wordpress/block-library": "^9.33.2-next.36001005c.0",
-		"@wordpress/blocks": "^15.6.1-next.36001005c.0",
-		"@wordpress/commands": "^1.33.1-next.36001005c.0",
-		"@wordpress/components": "^30.7.1-next.36001005c.0",
-		"@wordpress/compose": "^7.33.1-next.36001005c.0",
-		"@wordpress/core-data": "^7.33.1-next.36001005c.0",
-		"@wordpress/data": "^10.33.1-next.36001005c.0",
-		"@wordpress/dataviews": "^10.1.1-next.36001005c.0",
-		"@wordpress/date": "^5.33.1-next.36001005c.0",
-		"@wordpress/deprecated": "^4.33.1-next.36001005c.0",
-		"@wordpress/dom": "^4.33.1-next.36001005c.0",
-		"@wordpress/editor": "^14.33.3-next.36001005c.0",
-		"@wordpress/element": "^6.33.1-next.36001005c.0",
-		"@wordpress/escape-html": "^3.33.1-next.36001005c.0",
-		"@wordpress/fields": "^0.25.3-next.36001005c.0",
-		"@wordpress/global-styles-engine": "^1.0.1-next.36001005c.0",
-		"@wordpress/hooks": "^4.33.1-next.36001005c.0",
-		"@wordpress/html-entities": "^4.33.1-next.36001005c.0",
-		"@wordpress/i18n": "^6.6.1-next.36001005c.0",
-		"@wordpress/icons": "^11.0.1-next.36001005c.0",
-		"@wordpress/keyboard-shortcuts": "^5.33.1-next.36001005c.0",
-		"@wordpress/keycodes": "^4.33.1-next.36001005c.0",
-		"@wordpress/media-utils": "^5.33.1-next.36001005c.0",
-		"@wordpress/notices": "^5.33.1-next.36001005c.0",
-		"@wordpress/patterns": "^2.33.1-next.36001005c.0",
-		"@wordpress/plugins": "^7.33.1-next.36001005c.0",
-		"@wordpress/preferences": "^4.33.1-next.36001005c.0",
-		"@wordpress/primitives": "^4.33.1-next.36001005c.0",
-		"@wordpress/private-apis": "^1.33.1-next.36001005c.0",
-		"@wordpress/reusable-blocks": "^5.33.1-next.36001005c.0",
-		"@wordpress/router": "^1.33.1-next.36001005c.0",
-		"@wordpress/style-engine": "^2.33.1-next.36001005c.0",
-		"@wordpress/url": "^4.33.1-next.36001005c.0",
-		"@wordpress/viewport": "^6.33.1-next.36001005c.0",
-		"@wordpress/views": "^1.0.2-next.36001005c.0",
-		"@wordpress/widgets": "^4.33.1-next.36001005c.0",
-		"@wordpress/wordcount": "^4.33.1-next.36001005c.0",
+		"@wordpress/a11y": "^4.34.0",
+		"@wordpress/admin-ui": "^1.2.0",
+		"@wordpress/api-fetch": "^7.34.0",
+		"@wordpress/base-styles": "^6.10.0",
+		"@wordpress/blob": "^4.34.0",
+		"@wordpress/block-editor": "^15.7.0",
+		"@wordpress/block-library": "^9.34.0",
+		"@wordpress/blocks": "^15.7.0",
+		"@wordpress/commands": "^1.34.0",
+		"@wordpress/components": "^30.7.0",
+		"@wordpress/compose": "^7.34.0",
+		"@wordpress/core-data": "^7.34.0",
+		"@wordpress/data": "^10.34.0",
+		"@wordpress/dataviews": "^10.2.0",
+		"@wordpress/date": "^5.34.0",
+		"@wordpress/deprecated": "^4.34.0",
+		"@wordpress/dom": "^4.34.0",
+		"@wordpress/editor": "^14.34.0",
+		"@wordpress/element": "^6.34.0",
+		"@wordpress/escape-html": "^3.34.0",
+		"@wordpress/fields": "^0.26.0",
+		"@wordpress/global-styles-engine": "^1.1.0",
+		"@wordpress/global-styles-ui": "^1.1.0",
+		"@wordpress/hooks": "^4.34.0",
+		"@wordpress/html-entities": "^4.34.0",
+		"@wordpress/i18n": "^6.7.0",
+		"@wordpress/icons": "^11.1.0",
+		"@wordpress/keyboard-shortcuts": "^5.34.0",
+		"@wordpress/keycodes": "^4.34.0",
+		"@wordpress/media-utils": "^5.34.0",
+		"@wordpress/notices": "^5.34.0",
+		"@wordpress/patterns": "^2.34.0",
+		"@wordpress/plugins": "^7.34.0",
+		"@wordpress/preferences": "^4.34.0",
+		"@wordpress/primitives": "^4.34.0",
+		"@wordpress/private-apis": "^1.34.0",
+		"@wordpress/reusable-blocks": "^5.34.0",
+		"@wordpress/router": "^1.34.0",
+		"@wordpress/style-engine": "^2.34.0",
+		"@wordpress/url": "^4.34.0",
+		"@wordpress/viewport": "^6.34.0",
+		"@wordpress/views": "^1.1.0",
+		"@wordpress/widgets": "^4.34.0",
+		"@wordpress/wordcount": "^4.34.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -94,5 +98,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b73a8a22e779c59efb8f911e32b681652f237d60"
+	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
 }

package/src/components/block-editor/use-site-editor-settings.js

@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { usePrevious } from '@wordpress/compose';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -40,10 +41,13 @@ export function useSpecificEditorSettings() {
 	const { query } = useLocation();
 	const { canvas = 'view' } = query;
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const { settings } = useSelect( ( select ) => {
+	const { settings, currentPostIsTrashed } = useSelect( ( select ) => {
 		const { getSettings } = select( editSiteStore );
+		const { getCurrentPostAttribute } = select( editorStore );
 		return {
 			settings: getSettings(),
+			currentPostIsTrashed:
+				getCurrentPostAttribute( 'status' ) === 'trash',
 		};
 	}, [] );
 
@@ -52,7 +56,21 @@ export function useSpecificEditorSettings() {
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
-
+			styles: [
+				...settings.styles,
+				{
+					// Forming a "block formatting context" to prevent margin collapsing.
+					// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+					css:
+						canvas === 'view'
+							? `body{min-height: 100vh; ${
+									currentPostIsTrashed
+										? ''
+										: 'cursor: pointer;'
+							  }}`
+							: undefined,
+				},
+			],
 			richEditingEnabled: true,
 			supportsTemplateMode: true,
 			focusMode: canvas !== 'view',
@@ -63,6 +81,7 @@ export function useSpecificEditorSettings() {
 	}, [
 		settings,
 		canvas,
+		currentPostIsTrashed,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
 	] );

package/src/components/canvas-loader/index.js

@@ -1,29 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	privateApis as componentsPrivateApis,
 	ProgressBar,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { useStylesPreviewColors } from '../global-styles/hooks';
 
 const { Theme } = unlock( componentsPrivateApis );
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { useStyle } = unlock( editorPrivateApis );
 
 export default function CanvasLoader( { id } ) {
-	const [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );
-	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const { highlightedColors } = useStylesPreviewColors();
-	const indicatorColor =
-		highlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;
+	const textColor = useStyle( 'color.text' );
+	const backgroundColor = useStyle( 'color.background' );
 	const { elapsed, total } = useSelect( ( select ) => {
 		const selectorsByStatus = select( coreStore ).countSelectorsByStatus();
 		const resolving = selectorsByStatus.resolving ?? 0;
@@ -36,7 +32,7 @@ export default function CanvasLoader( { id } ) {
 
 	return (
 		<div className="edit-site-canvas-loader">
-			<Theme accent={ indicatorColor } background={ backgroundColor }>
+			<Theme accent={ textColor } background={ backgroundColor }>
 				<ProgressBar id={ id } max={ total } value={ elapsed } />
 			</Theme>
 		</div>

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

@@ -34,11 +34,17 @@ export const useSetActiveTemplateAction = () => {
 			isPrimary: true,
 			icon: pencil,
 			isEligible( item ) {
-				return (
-					! item._isCustom &&
-					! ( item.slug === 'index' && item.source === 'theme' ) &&
-					item.theme === activeTheme.stylesheet
-				);
+				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 );
@@ -49,11 +55,7 @@ export const useSetActiveTemplateAction = () => {
 				};
 				for ( const item of items ) {
 					if ( deactivate ) {
-						if ( item.source === 'theme' ) {
-							activeTemplates[ item.slug ] = false;
-						} else {
-							delete activeTemplates[ item.slug ];
-						}
+						delete activeTemplates[ item.slug ];
 					} else {
 						activeTemplates[ item.slug ] = item.id;
 					}

package/src/components/editor/index.js

@@ -12,12 +12,11 @@ import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
-	store as editorStore,
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -29,18 +28,11 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import WelcomeGuide from '../welcome-guide';
-import { store as editSiteStore } from '../../store';
-import { GlobalStylesRenderer } from '../global-styles-renderer';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
-import GlobalStylesSidebar from '../global-styles-sidebar';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-import {
-	getEditorCanvasContainerTitle,
-	useHasEditorCanvasContainer,
-} from '../editor-canvas-container';
 import SaveButton from '../save-button';
 import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
@@ -49,7 +41,6 @@ import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
 import { useIsSiteEditorLoading } from '../layout/hooks';
 import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import {
 	useResolveEditedEntity,
 	useSyncDeprecatedEntityIntoState,
@@ -132,24 +123,12 @@ export default function EditSiteEditor( {
 	// deprecated sync state with url
 	useSyncDeprecatedEntityIntoState( entity );
 	const { postType, postId, context } = entity;
-	const {
-		isBlockBasedTheme,
-		editorCanvasView,
-		currentPostIsTrashed,
-		hasSiteIcon,
-	} = useSelect( ( select ) => {
-		const { getEditorCanvasContainerView } = unlock(
-			select( editSiteStore )
-		);
+	const { isBlockBasedTheme, hasSiteIcon } = useSelect( ( select ) => {
 		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
 			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
-			editorCanvasView: getEditorCanvasContainerView(),
-			currentPostIsTrashed:
-				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
-				'trash',
 			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
@@ -159,7 +138,6 @@ export default function EditSiteEditor( {
 		postWithTemplate ? context.postId : postId
 	);
 	const _isPreviewingTheme = isPreviewingTheme();
-	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
 	const isEditMode = canvas === 'edit';
 	const loadingProgressId = useInstanceId(
@@ -168,22 +146,6 @@ export default function EditSiteEditor( {
 	);
 
 	const settings = useSpecificEditorSettings();
-	const styles = useMemo(
-		() => [
-			...settings.styles,
-			{
-				// Forming a "block formatting context" to prevent margin collapsing.
-				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-				css:
-					canvas === 'view'
-						? `body{min-height: 100vh; ${
-								currentPostIsTrashed ? '' : 'cursor: pointer;'
-						  }}`
-						: undefined,
-			},
-		],
-		[ settings.styles, canvas, currentPostIsTrashed ]
-	);
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
@@ -241,9 +203,6 @@ export default function EditSiteEditor( {
 		]
 	);
 
-	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
-	const title = getEditorCanvasContainerTitle( editorCanvasView );
-
 	const isReady = ! isLoading;
 	const transition = {
 		duration: disableMotion ? 0 : 0.2,
@@ -253,9 +212,6 @@ export default function EditSiteEditor( {
 		<SitePreview />
 	) : (
 		<>
-			<GlobalStylesRenderer
-				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
-			/>
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
@@ -271,13 +227,10 @@ export default function EditSiteEditor( {
 					templateId={ postWithTemplate ? postId : undefined }
 					settings={ settings }
 					className="edit-site-editor__editor-interface"
-					styles={ styles }
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
 					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
-					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-					title={ title }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={
@@ -356,7 +309,6 @@ export default function EditSiteEditor( {
 						</BackButton>
 					) }
 					<SiteEditorMoreMenu />
-					{ isBlockBasedTheme && <GlobalStylesSidebar /> }
 				</Editor>
 			) }
 		</>

package/src/components/layout/index.js

@@ -21,7 +21,6 @@ import {
 } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	UnsavedChangesWarning,
@@ -47,9 +46,8 @@ import { SidebarContent, SidebarNavigationProvider } from '../sidebar';
 import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-const { GlobalStylesProvider } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
+const { useStyle } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
@@ -77,8 +75,8 @@ function Layout() {
 		};
 	} );
 
-	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+	const backgroundColor = useStyle( 'color.background' );
+	const gradientValue = useStyle( 'color.gradient' );
 	const previousCanvaMode = usePrevious( canvas );
 	useEffect( () => {
 		if ( previousCanvaMode === 'edit' ) {
@@ -276,11 +274,9 @@ export default function LayoutWithGlobalStylesProvider( props ) {
 
 	return (
 		<SlotFillProvider>
-			<GlobalStylesProvider>
-				{ /** This needs to be within the SlotFillProvider */ }
-				<PluginArea onError={ onPluginAreaError } />
-				<Layout { ...props } />
-			</GlobalStylesProvider>
+			{ /** This needs to be within the SlotFillProvider */ }
+			<PluginArea onError={ onPluginAreaError } />
+			<Layout { ...props } />
 		</SlotFillProvider>
 	);
 }

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

@@ -9,12 +9,10 @@ import clsx from 'clsx';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useId } from '@wordpress/element';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { BlockPreview } from '@wordpress/block-editor';
 import { Icon } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -24,16 +22,16 @@ import {
 	PATTERN_SYNC_TYPES,
 	OPERATOR_IS,
 } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
 import { useAddedBy } from '../page-templates/hooks';
+import { unlock } from '../../lock-unlock';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { useStyle } = unlock( editorPrivateApis );
 
 function PreviewField( { item } ) {
 	const descriptionId = useId();
 	const description = item.description || item?.excerpt?.raw;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const backgroundColor = useStyle( 'color.background' );
 	const blocks = useMemo( () => {
 		return (
 			item.blocks ??

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

@@ -15,11 +15,11 @@ import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { parse } from '@wordpress/blocks';
+import { BlockPreview } from '@wordpress/block-editor';
 import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { EditorProvider } from '@wordpress/editor';
+	EditorProvider,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import {
 	privateApis as corePrivateApis,
 	store as coreStore,
@@ -34,16 +34,15 @@ import { useDefaultTemplateTypes } from '../add-new-template/utils';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { Badge } = unlock( componentsPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
+const { useStyle } = unlock( editorPrivateApis );
 
 function useAllDefaultTemplateTypes() {
 	const defaultTemplateTypes = useDefaultTemplateTypes();
 	const { records: staticRecords } = useEntityRecordsWithPermissions(
-		'postType',
-		'wp_registered_template',
-		{ per_page: -1 }
+		'root',
+		'registeredTemplate'
 	);
 	return [
 		...defaultTemplateTypes,
@@ -61,7 +60,7 @@ function useAllDefaultTemplateTypes() {
 
 function PreviewField( { item } ) {
 	const settings = usePatternSettings();
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const backgroundColor = useStyle( 'color.background' ) ?? 'white';
 	const blocks = useMemo( () => {
 		return parse( item.content.raw );
 	}, [ item.content.raw ] );
@@ -153,25 +152,17 @@ export const authorField = {
 export const activeField = {
 	label: __( 'Status' ),
 	id: 'active',
+	type: 'boolean',
 	getValue: ( { item } ) => item._isActive,
 	render: function Render( { item } ) {
-		if ( item._isCustom ) {
-			return (
-				<Badge
-					intent="info"
-					title={ __(
-						'Custom templates cannot be active nor inactive.'
-					) }
-				>
-					{ __( 'N/A' ) }
-				</Badge>
-			);
-		}
-
+		const activeLabel = item._isCustom
+			? __( 'Active when used' )
+			: __( 'Active' );
+		const activeIntent = item._isCustom ? 'info' : 'success';
 		const isActive = item._isActive;
 		return (
-			<Badge intent={ isActive ? 'success' : 'default' }>
-				{ isActive ? __( 'Active' ) : __( 'Inactive' ) }
+			<Badge intent={ isActive ? activeIntent : 'default' }>
+				{ isActive ? activeLabel : __( 'Inactive' ) }
 			</Badge>
 		);
 	},
@@ -181,17 +172,20 @@ 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>;
-		},
-	};
+	return useMemo(
+		() => ( {
+			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>;
+			},
+		} ),
+		[ activeTheme ]
+	);
 };
 
 export const slugField = {