@wordpress/fields 0.33.1-next.v.202603102151.0 → 0.34.0

package/build-module/fields/template/template-edit.mjs

@@ -5,16 +5,56 @@ import { SelectControl } from "@wordpress/components";
 import { useSelect } from "@wordpress/data";
 import { __ } from "@wordpress/i18n";
 import { getItemTitle } from "../../actions/utils.mjs";
-import { useDefaultTemplateLabel } from "./hooks.mjs";
+import { useDefaultTemplateLabel, useTemplateFieldMode } from "./hooks.mjs";
 import { unlock } from "../../lock-unlock.mjs";
 import { jsx } from "react/jsx-runtime";
 var EMPTY_ARRAY = [];
-var TemplateEdit = ({
+function ClassicTemplateEdit({
   data,
   field,
   onChange
-}) => {
-  const { id } = field;
+}) {
+  const postId = typeof data.id === "number" ? data.id : parseInt(data.id, 10);
+  const value = field.getValue({ item: data });
+  const options = useMemo(
+    () => Object.entries(
+      data?.available_templates ?? {}
+    ).map(([templateSlug, title]) => ({
+      label: title,
+      value: templateSlug
+    })),
+    [data]
+  );
+  const canSwitchTemplate = useSelect(
+    (select) => {
+      const { getHomePage, getPostsPageId } = unlock(
+        select(coreStore)
+      );
+      const singlePostId = String(postId);
+      const isPostsPage = getPostsPageId() === singlePostId;
+      const isFrontPage = data.type === "page" && getHomePage()?.postId === singlePostId;
+      return !isPostsPage && !isFrontPage;
+    },
+    [postId, data.type]
+  );
+  return /* @__PURE__ */ jsx(
+    SelectControl,
+    {
+      __next40pxDefaultSize: true,
+      label: __("Template"),
+      hideLabelFromVision: true,
+      value,
+      options,
+      onChange,
+      disabled: !canSwitchTemplate
+    }
+  );
+}
+function BlockThemeTemplateEdit({
+  data,
+  field,
+  onChange
+}) {
   const postType = data.type;
   const postId = typeof data.id === "number" ? data.id : parseInt(data.id, 10);
   const slug = data.slug;
@@ -32,8 +72,8 @@ var TemplateEdit = ({
         select(coreStore)
       );
       const singlePostId = String(postId);
-      const isPostsPage = singlePostId !== void 0 && getPostsPageId() === singlePostId;
-      const isFrontPage = singlePostId !== void 0 && postType === "page" && getHomePage()?.postId === singlePostId;
+      const isPostsPage = getPostsPageId() === singlePostId;
+      const isFrontPage = postType === "page" && getHomePage()?.postId === singlePostId;
       return {
         templates: allTemplates,
         canSwitchTemplate: !isPostsPage && !isFrontPage
@@ -47,12 +87,6 @@ var TemplateEdit = ({
     slug
   );
   const value = field.getValue({ item: data });
-  const onChangeControl = useCallback(
-    (newValue) => onChange({
-      [id]: newValue
-    }),
-    [id, onChange]
-  );
   const options = useMemo(() => {
     const templateOptions = templates.map((template) => ({
       label: getItemTitle(template),
@@ -71,10 +105,28 @@ var TemplateEdit = ({
       hideLabelFromVision: true,
       value,
       options,
-      onChange: onChangeControl,
+      onChange,
       disabled: !canSwitchTemplate
     }
   );
+}
+var TemplateEdit = ({
+  data,
+  field,
+  onChange
+}) => {
+  const onChangeControl = useCallback(
+    (newValue) => onChange({
+      [field.id]: newValue
+    }),
+    [field.id, onChange]
+  );
+  const mode = useTemplateFieldMode(data);
+  if (!mode || !["block-theme", "classic"].includes(mode)) {
+    return null;
+  }
+  const Edit = mode === "classic" ? ClassicTemplateEdit : BlockThemeTemplateEdit;
+  return /* @__PURE__ */ jsx(Edit, { data, field, onChange: onChangeControl });
 };
 export {
   TemplateEdit

package/build-module/fields/template/template-edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/fields/template/template-edit.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport type { WpTemplate } from '@wordpress/core-data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataFormControlProps } from '@wordpress/dataviews';\nimport { SelectControl } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getItemTitle } from '../../actions/utils';\nimport type { BasePost } from '../../types';\nimport { useDefaultTemplateLabel } from './hooks';\nimport { unlock } from '../../lock-unlock';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport const TemplateEdit = ( {\n\tdata,\n\tfield,\n\tonChange,\n}: DataFormControlProps< BasePost > ) => {\n\tconst { id } = field;\n\tconst postType = data.type;\n\tconst postId =\n\t\ttypeof data.id === 'number' ? data.id : parseInt( data.id, 10 );\n\tconst slug = data.slug;\n\n\tconst { templates, canSwitchTemplate } = useSelect(\n\t\t( select ) => {\n\t\t\tconst allTemplates =\n\t\t\t\tselect( coreStore ).getEntityRecords< WpTemplate >(\n\t\t\t\t\t'postType',\n\t\t\t\t\t'wp_template',\n\t\t\t\t\t{\n\t\t\t\t\t\tper_page: -1,\n\t\t\t\t\t\tpost_type: postType,\n\t\t\t\t\t}\n\t\t\t\t) ?? EMPTY_ARRAY;\n\n\t\t\tconst { getHomePage, getPostsPageId } = unlock(\n\t\t\t\tselect( coreStore )\n\t\t\t);\n\t\t\tconst singlePostId = String( postId );\n\t\t\tconst isPostsPage =\n\t\t\t\tsinglePostId !== undefined && getPostsPageId() === singlePostId;\n\t\t\tconst isFrontPage =\n\t\t\t\tsinglePostId !== undefined &&\n\t\t\t\tpostType === 'page' &&\n\t\t\t\tgetHomePage()?.postId === singlePostId;\n\n\t\t\treturn {\n\t\t\t\ttemplates: allTemplates,\n\t\t\t\tcanSwitchTemplate: ! isPostsPage && ! isFrontPage,\n\t\t\t};\n\t\t},\n\t\t[ postId, postType ]\n\t);\n\n\tconst defaultTemplateLabel = useDefaultTemplateLabel(\n\t\tpostType,\n\t\tpostId,\n\t\tslug\n\t);\n\n\tconst value = field.getValue( { item: data } );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( {\n\t\t\t\t[ id ]: newValue,\n\t\t\t} ),\n\t\t[ id, onChange ]\n\t);\n\n\tconst options = useMemo( () => {\n\t\tconst templateOptions = templates.map( ( template ) => ( {\n\t\t\tlabel: getItemTitle( template ),\n\t\t\tvalue: template.slug,\n\t\t} ) );\n\t\treturn [\n\t\t\t{ label: defaultTemplateLabel, value: '' },\n\t\t\t...templateOptions,\n\t\t];\n\t}, [ templates, defaultTemplateLabel ] );\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Template' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\toptions={ options }\n\t\t\tonChange={ onChangeControl }\n\t\t\tdisabled={ ! canSwitchTemplate }\n\t\t/>\n\t);\n};\n"],
-  "mappings": ";AAGA,SAAS,aAAa,eAAe;AAErC,SAAS,SAAS,iBAAiB;AAEnC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAKnB,SAAS,oBAAoB;AAE7B,SAAS,+BAA+B;AACxC,SAAS,cAAc;AA0ErB;AAxEF,IAAM,cAAkB,CAAC;AAElB,IAAM,eAAe,CAAE;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACD,MAAyC;AACxC,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,WAAW,KAAK;AACtB,QAAM,SACL,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,SAAU,KAAK,IAAI,EAAG;AAC/D,QAAM,OAAO,KAAK;AAElB,QAAM,EAAE,WAAW,kBAAkB,IAAI;AAAA,IACxC,CAAE,WAAY;AACb,YAAM,eACL,OAAQ,SAAU,EAAE;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,UACC,UAAU;AAAA,UACV,WAAW;AAAA,QACZ;AAAA,MACD,KAAK;AAEN,YAAM,EAAE,aAAa,eAAe,IAAI;AAAA,QACvC,OAAQ,SAAU;AAAA,MACnB;AACA,YAAM,eAAe,OAAQ,MAAO;AACpC,YAAM,cACL,iBAAiB,UAAa,eAAe,MAAM;AACpD,YAAM,cACL,iBAAiB,UACjB,aAAa,UACb,YAAY,GAAG,WAAW;AAE3B,aAAO;AAAA,QACN,WAAW;AAAA,QACX,mBAAmB,CAAE,eAAe,CAAE;AAAA,MACvC;AAAA,IACD;AAAA,IACA,CAAE,QAAQ,QAAS;AAAA,EACpB;AAEA,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU;AAAA,MACT,CAAE,EAAG,GAAG;AAAA,IACT,CAAE;AAAA,IACH,CAAE,IAAI,QAAS;AAAA,EAChB;AAEA,QAAM,UAAU,QAAS,MAAM;AAC9B,UAAM,kBAAkB,UAAU,IAAK,CAAE,cAAgB;AAAA,MACxD,OAAO,aAAc,QAAS;AAAA,MAC9B,OAAO,SAAS;AAAA,IACjB,EAAI;AACJ,WAAO;AAAA,MACN,EAAE,OAAO,sBAAsB,OAAO,GAAG;AAAA,MACzC,GAAG;AAAA,IACJ;AAAA,EACD,GAAG,CAAE,WAAW,oBAAqB,CAAE;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,OAAQ,GAAI,UAAW;AAAA,MACvB,qBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA,UAAW;AAAA,MACX,UAAW,CAAE;AAAA;AAAA,EACd;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport type { WpTemplate } from '@wordpress/core-data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataFormControlProps } from '@wordpress/dataviews';\nimport { SelectControl } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getItemTitle } from '../../actions/utils';\nimport type { BasePost } from '../../types';\nimport { useDefaultTemplateLabel, useTemplateFieldMode } from './hooks';\nimport { unlock } from '../../lock-unlock';\n\ntype TemplateEditComponentProps = Omit<\n\tDataFormControlProps< BasePost >,\n\t'onChange'\n> & {\n\tonChange: ( value: string ) => void;\n};\n\nconst EMPTY_ARRAY: [] = [];\n\nfunction ClassicTemplateEdit( {\n\tdata,\n\tfield,\n\tonChange,\n}: TemplateEditComponentProps ) {\n\tconst postId =\n\t\ttypeof data.id === 'number' ? data.id : parseInt( data.id, 10 );\n\tconst value = field.getValue( { item: data } );\n\tconst options = useMemo(\n\t\t() =>\n\t\t\tObject.entries(\n\t\t\t\t( ( data as Record< string, any > )?.available_templates ??\n\t\t\t\t\t{} ) as Record< string, string >\n\t\t\t).map( ( [ templateSlug, title ] ) => ( {\n\t\t\t\tlabel: title,\n\t\t\t\tvalue: templateSlug,\n\t\t\t} ) ),\n\t\t[ data ]\n\t);\n\tconst canSwitchTemplate = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getHomePage, getPostsPageId } = unlock(\n\t\t\t\tselect( coreStore )\n\t\t\t);\n\t\t\tconst singlePostId = String( postId );\n\t\t\tconst isPostsPage = getPostsPageId() === singlePostId;\n\t\t\tconst isFrontPage =\n\t\t\t\tdata.type === 'page' && getHomePage()?.postId === singlePostId;\n\n\t\t\treturn ! isPostsPage && ! isFrontPage;\n\t\t},\n\t\t[ postId, data.type ]\n\t);\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Template' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\toptions={ options }\n\t\t\tonChange={ onChange }\n\t\t\tdisabled={ ! canSwitchTemplate }\n\t\t/>\n\t);\n}\n\nfunction BlockThemeTemplateEdit( {\n\tdata,\n\tfield,\n\tonChange,\n}: TemplateEditComponentProps ) {\n\tconst postType = data.type;\n\tconst postId =\n\t\ttypeof data.id === 'number' ? data.id : parseInt( data.id, 10 );\n\tconst slug = data.slug;\n\tconst { templates, canSwitchTemplate } = useSelect(\n\t\t( select ) => {\n\t\t\tconst allTemplates =\n\t\t\t\tselect( coreStore ).getEntityRecords< WpTemplate >(\n\t\t\t\t\t'postType',\n\t\t\t\t\t'wp_template',\n\t\t\t\t\t{\n\t\t\t\t\t\tper_page: -1,\n\t\t\t\t\t\tpost_type: postType,\n\t\t\t\t\t}\n\t\t\t\t) ?? EMPTY_ARRAY;\n\n\t\t\tconst { getHomePage, getPostsPageId } = unlock(\n\t\t\t\tselect( coreStore )\n\t\t\t);\n\t\t\tconst singlePostId = String( postId );\n\t\t\tconst isPostsPage = getPostsPageId() === singlePostId;\n\t\t\tconst isFrontPage =\n\t\t\t\tpostType === 'page' && getHomePage()?.postId === singlePostId;\n\n\t\t\treturn {\n\t\t\t\ttemplates: allTemplates,\n\t\t\t\tcanSwitchTemplate: ! isPostsPage && ! isFrontPage,\n\t\t\t};\n\t\t},\n\t\t[ postId, postType ]\n\t);\n\tconst defaultTemplateLabel = useDefaultTemplateLabel(\n\t\tpostType,\n\t\tpostId,\n\t\tslug\n\t);\n\tconst value = field.getValue( { item: data } );\n\tconst options = useMemo( () => {\n\t\tconst templateOptions = templates.map( ( template ) => ( {\n\t\t\tlabel: getItemTitle( template ),\n\t\t\tvalue: template.slug,\n\t\t} ) );\n\t\treturn [\n\t\t\t{ label: defaultTemplateLabel, value: '' },\n\t\t\t...templateOptions,\n\t\t];\n\t}, [ templates, defaultTemplateLabel ] );\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Template' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\toptions={ options }\n\t\t\tonChange={ onChange }\n\t\t\tdisabled={ ! canSwitchTemplate }\n\t\t/>\n\t);\n}\n\nexport const TemplateEdit = ( {\n\tdata,\n\tfield,\n\tonChange,\n}: DataFormControlProps< BasePost > ) => {\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string ) =>\n\t\t\tonChange( {\n\t\t\t\t[ field.id ]: newValue,\n\t\t\t} ),\n\t\t[ field.id, onChange ]\n\t);\n\tconst mode = useTemplateFieldMode( data );\n\tif ( ! mode || ! [ 'block-theme', 'classic' ].includes( mode ) ) {\n\t\treturn null;\n\t}\n\tconst Edit =\n\t\tmode === 'classic' ? ClassicTemplateEdit : BlockThemeTemplateEdit;\n\treturn <Edit data={ data } field={ field } onChange={ onChangeControl } />;\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/fields/template/template-view.mjs

@@ -1,13 +1,23 @@
 // packages/fields/src/fields/template/template-view.tsx
 import { useSelect } from "@wordpress/data";
 import { store as coreStore } from "@wordpress/core-data";
+import { __ } from "@wordpress/i18n";
 import { getItemTitle } from "../../actions/utils.mjs";
-import { useDefaultTemplateLabel } from "./hooks.mjs";
+import { useDefaultTemplateLabel, useTemplateFieldMode } from "./hooks.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
-var TemplateView = ({
+function ClassicTemplateView({
   item,
   field
-}) => {
+}) {
+  const templateSlug = field.getValue({ item });
+  const availableTemplates = item?.available_templates ?? {};
+  const classicLabel = templateSlug && availableTemplates[templateSlug] ? availableTemplates[templateSlug] : __("Default template");
+  return /* @__PURE__ */ jsx(Fragment, { children: classicLabel });
+}
+function BlockThemeTemplateView({
+  item,
+  field
+}) {
   const postType = item.type;
   const slug = item.slug;
   const postId = item.id;
@@ -36,6 +46,17 @@ var TemplateView = ({
     [postType, templateSlug]
   );
   return /* @__PURE__ */ jsx(Fragment, { children: templateLabel ?? defaultTemplateLabel });
+}
+var TemplateView = ({
+  item,
+  field
+}) => {
+  const mode = useTemplateFieldMode(item);
+  if (!mode || !["block-theme", "classic"].includes(mode)) {
+    return null;
+  }
+  const View = mode === "classic" ? ClassicTemplateView : BlockThemeTemplateView;
+  return /* @__PURE__ */ jsx(View, { item, field });
 };
 export {
   TemplateView

package/build-module/fields/template/template-view.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/fields/template/template-view.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport type { WpTemplate } from '@wordpress/core-data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getItemTitle } from '../../actions/utils';\nimport type { BasePost } from '../../types';\nimport { useDefaultTemplateLabel } from './hooks';\n\nexport const TemplateView = ( {\n\titem,\n\tfield,\n}: DataViewRenderFieldProps< BasePost > ) => {\n\tconst postType = item.type;\n\tconst slug = item.slug;\n\tconst postId = item.id;\n\tconst templateSlug = field.getValue( { item } );\n\n\tconst defaultTemplateLabel = useDefaultTemplateLabel(\n\t\tpostType,\n\t\tpostId,\n\t\tslug\n\t);\n\n\tconst templateLabel = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! templateSlug ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst allTemplates = select(\n\t\t\t\tcoreStore\n\t\t\t).getEntityRecords< WpTemplate >( 'postType', 'wp_template', {\n\t\t\t\tper_page: -1,\n\t\t\t\tpost_type: postType,\n\t\t\t} );\n\t\t\tconst match = allTemplates?.find(\n\t\t\t\t( t ) => t.slug === templateSlug\n\t\t\t);\n\t\t\treturn match ? getItemTitle( match ) : undefined;\n\t\t},\n\t\t[ postType, templateSlug ]\n\t);\n\n\treturn <>{ templateLabel ?? defaultTemplateLabel }</>;\n};\n"],
-  "mappings": ";AAGA,SAAS,iBAAiB;AAE1B,SAAS,SAAS,iBAAiB;AAMnC,SAAS,oBAAoB;AAE7B,SAAS,+BAA+B;AAqChC;AAnCD,IAAM,eAAe,CAAE;AAAA,EAC7B;AAAA,EACA;AACD,MAA6C;AAC5C,QAAM,WAAW,KAAK;AACtB,QAAM,OAAO,KAAK;AAClB,QAAM,SAAS,KAAK;AACpB,QAAM,eAAe,MAAM,SAAU,EAAE,KAAK,CAAE;AAE9C,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,gBAAgB;AAAA,IACrB,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB;AAAA,MACD;AAEA,YAAM,eAAe;AAAA,QACpB;AAAA,MACD,EAAE,iBAAgC,YAAY,eAAe;AAAA,QAC5D,UAAU;AAAA,QACV,WAAW;AAAA,MACZ,CAAE;AACF,YAAM,QAAQ,cAAc;AAAA,QAC3B,CAAE,MAAO,EAAE,SAAS;AAAA,MACrB;AACA,aAAO,QAAQ,aAAc,KAAM,IAAI;AAAA,IACxC;AAAA,IACA,CAAE,UAAU,YAAa;AAAA,EAC1B;AAEA,SAAO,gCAAI,2BAAiB,sBAAsB;AACnD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport type { WpTemplate } from '@wordpress/core-data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getItemTitle } from '../../actions/utils';\nimport type { BasePost } from '../../types';\nimport { useDefaultTemplateLabel, useTemplateFieldMode } from './hooks';\n\nfunction ClassicTemplateView( {\n\titem,\n\tfield,\n}: DataViewRenderFieldProps< BasePost > ) {\n\tconst templateSlug = field.getValue( { item } );\n\tconst availableTemplates = ( ( item as Record< string, any > )\n\t\t?.available_templates ?? {} ) as Record< string, string >;\n\n\tconst classicLabel =\n\t\ttemplateSlug && availableTemplates[ templateSlug ]\n\t\t\t? availableTemplates[ templateSlug ]\n\t\t\t: __( 'Default template' );\n\n\treturn <>{ classicLabel }</>;\n}\n\nfunction BlockThemeTemplateView( {\n\titem,\n\tfield,\n}: DataViewRenderFieldProps< BasePost > ) {\n\tconst postType = item.type;\n\tconst slug = item.slug;\n\tconst postId = item.id;\n\tconst templateSlug = field.getValue( { item } );\n\n\tconst defaultTemplateLabel = useDefaultTemplateLabel(\n\t\tpostType,\n\t\tpostId,\n\t\tslug\n\t);\n\n\tconst templateLabel = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! templateSlug ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst allTemplates = select(\n\t\t\t\tcoreStore\n\t\t\t).getEntityRecords< WpTemplate >( 'postType', 'wp_template', {\n\t\t\t\tper_page: -1,\n\t\t\t\tpost_type: postType,\n\t\t\t} );\n\t\t\tconst match = allTemplates?.find(\n\t\t\t\t( t ) => t.slug === templateSlug\n\t\t\t);\n\t\t\treturn match ? getItemTitle( match ) : undefined;\n\t\t},\n\t\t[ postType, templateSlug ]\n\t);\n\n\treturn <>{ templateLabel ?? defaultTemplateLabel }</>;\n}\n\nexport const TemplateView = ( {\n\titem,\n\tfield,\n}: DataViewRenderFieldProps< BasePost > ) => {\n\tconst mode = useTemplateFieldMode( item );\n\tif ( ! mode || ! [ 'block-theme', 'classic' ].includes( mode ) ) {\n\t\treturn null;\n\t}\n\tconst View =\n\t\tmode === 'classic' ? ClassicTemplateView : BlockThemeTemplateView;\n\treturn <View item={ item } field={ field } />;\n};\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAE1B,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAKnB,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB,4BAA4B;AAetD;AAbR,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAA0C;AACzC,QAAM,eAAe,MAAM,SAAU,EAAE,KAAK,CAAE;AAC9C,QAAM,qBAAyB,MAC5B,uBAAuB,CAAC;AAE3B,QAAM,eACL,gBAAgB,mBAAoB,YAAa,IAC9C,mBAAoB,YAAa,IACjC,GAAI,kBAAmB;AAE3B,SAAO,gCAAI,wBAAc;AAC1B;AAEA,SAAS,uBAAwB;AAAA,EAChC;AAAA,EACA;AACD,GAA0C;AACzC,QAAM,WAAW,KAAK;AACtB,QAAM,OAAO,KAAK;AAClB,QAAM,SAAS,KAAK;AACpB,QAAM,eAAe,MAAM,SAAU,EAAE,KAAK,CAAE;AAE9C,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,gBAAgB;AAAA,IACrB,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB;AAAA,MACD;AAEA,YAAM,eAAe;AAAA,QACpB;AAAA,MACD,EAAE,iBAAgC,YAAY,eAAe;AAAA,QAC5D,UAAU;AAAA,QACV,WAAW;AAAA,MACZ,CAAE;AACF,YAAM,QAAQ,cAAc;AAAA,QAC3B,CAAE,MAAO,EAAE,SAAS;AAAA,MACrB;AACA,aAAO,QAAQ,aAAc,KAAM,IAAI;AAAA,IACxC;AAAA,IACA,CAAE,UAAU,YAAa;AAAA,EAC1B;AAEA,SAAO,gCAAI,2BAAiB,sBAAsB;AACnD;AAEO,IAAM,eAAe,CAAE;AAAA,EAC7B;AAAA,EACA;AACD,MAA6C;AAC5C,QAAM,OAAO,qBAAsB,IAAK;AACxC,MAAK,CAAE,QAAQ,CAAE,CAAE,eAAe,SAAU,EAAE,SAAU,IAAK,GAAI;AAChE,WAAO;AAAA,EACR;AACA,QAAM,OACL,SAAS,YAAY,sBAAsB;AAC5C,SAAO,oBAAC,QAAK,MAAc,OAAgB;AAC5C;",
   "names": []
 }

package/build-types/fields/parent/parent-edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parent-edit.d.ts","sourceRoot":"","sources":["../../../src/fields/parent/parent-edit.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAMjE;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAoE5C,eAAO,MAAM,eAAe,GAAK,MAAM,MAAM,EAAE,aAAa,MAAM,WAYjE,CAAC;AAEF,wBAAgB,oBAAoB,CAAE,EACrC,IAAI,EACJ,eAAe,GACf,EAAE;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,CAAE,QAAQ,EAAE,MAAM,KAAM,IAAI,CAAC;CAC9C,sCAsKA;AAED,eAAO,MAAM,UAAU,GAAK,4BAIzB,oBAAoB,CAAE,QAAQ,CAAE,gCA2DlC,CAAC"}
+{"version":3,"file":"parent-edit.d.ts","sourceRoot":"","sources":["../../../src/fields/parent/parent-edit.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAMjE;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAoE5C,eAAO,MAAM,eAAe,GAAK,MAAM,MAAM,EAAE,aAAa,MAAM,WAYjE,CAAC;AAEF,wBAAgB,oBAAoB,CAAE,EACrC,IAAI,EACJ,eAAe,GACf,EAAE;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,EAAE,CAAE,QAAQ,EAAE,MAAM,KAAM,IAAI,CAAC;CAC9C,sCAgKA;AAED,eAAO,MAAM,UAAU,GAAK,4BAIzB,oBAAoB,CAAE,QAAQ,CAAE,gCA2DlC,CAAC"}

package/build-types/fields/template/hooks.d.ts

@@ -1,3 +1,11 @@
+import type { BasePost } from '../../types';
+/**
+ * Hook that determines the template field rendering mode for a post.
+ *
+ * @param record The post record.
+ * @return 'block-theme' | 'classic' | null
+ */
+export declare function useTemplateFieldMode(record: BasePost): 'block-theme' | 'classic' | null;
 /**
  * Hook that resolves the human-readable label for the default template
  * that would apply to a post, given its type, ID and slug.

package/build-types/fields/template/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/fields/template/hooks.ts"],"names":[],"mappings":"AAsCA;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACtC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EACnC,IAAI,EAAE,MAAM,GAAG,SAAS,GACtB,MAAM,CAsER"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/fields/template/hooks.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;GAKG;AACH,wBAAgB,oBAAoB,CACnC,MAAM,EAAE,QAAQ,GACd,aAAa,GAAG,SAAS,GAAG,IAAI,CAqClC;AA2BD;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACtC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EACnC,IAAI,EAAE,MAAM,GAAG,SAAS,GACtB,MAAM,CAsER"}

package/build-types/fields/template/template-edit.d.ts

@@ -1,4 +1,4 @@
 import type { DataFormControlProps } from '@wordpress/dataviews';
 import type { BasePost } from '../../types';
-export declare const TemplateEdit: ({ data, field, onChange, }: DataFormControlProps<BasePost>) => import("react").JSX.Element;
+export declare const TemplateEdit: ({ data, field, onChange, }: DataFormControlProps<BasePost>) => import("react").JSX.Element | null;
 //# sourceMappingURL=template-edit.d.ts.map

package/build-types/fields/template/template-edit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-edit.d.ts","sourceRoot":"","sources":["../../../src/fields/template/template-edit.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AASjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAM5C,eAAO,MAAM,YAAY,GAAK,4BAI3B,oBAAoB,CAAE,QAAQ,CAAE,gCA4ElC,CAAC"}
+{"version":3,"file":"template-edit.d.ts","sourceRoot":"","sources":["../../../src/fields/template/template-edit.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AASjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA4H5C,eAAO,MAAM,YAAY,GAAK,4BAI3B,oBAAoB,CAAE,QAAQ,CAAE,uCAelC,CAAC"}

package/build-types/fields/template/template-view.d.ts

@@ -1,4 +1,4 @@
 import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
 import type { BasePost } from '../../types';
-export declare const TemplateView: ({ item, field, }: DataViewRenderFieldProps<BasePost>) => import("react").JSX.Element;
+export declare const TemplateView: ({ item, field, }: DataViewRenderFieldProps<BasePost>) => import("react").JSX.Element | null;
 //# sourceMappingURL=template-view.d.ts.map

package/build-types/fields/template/template-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-view.d.ts","sourceRoot":"","sources":["../../../src/fields/template/template-view.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAMrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,eAAO,MAAM,YAAY,GAAK,kBAG3B,wBAAwB,CAAE,QAAQ,CAAE,gCAiCtC,CAAC"}
+{"version":3,"file":"template-view.d.ts","sourceRoot":"","sources":["../../../src/fields/template/template-view.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAOrE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAyD5C,eAAO,MAAM,YAAY,GAAK,kBAG3B,wBAAwB,CAAE,QAAQ,CAAE,uCAQtC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/fields",
-	"version": "0.33.1-next.v.202603102151.0+59e17f9ec",
+	"version": "0.34.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -48,30 +48,30 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/api-fetch": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/base-styles": "^6.17.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/blob": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/blocks": "^15.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/components": "^32.4.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/core-data": "^7.41.2-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/data": "^10.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/dataviews": "^13.1.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/date": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/hooks": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/html-entities": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/media-utils": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/notices": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/patterns": "^2.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/primitives": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/router": "^1.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/url": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/warning": "^3.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/wordcount": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/api-fetch": "^7.42.0",
+		"@wordpress/base-styles": "^6.18.0",
+		"@wordpress/blob": "^4.42.0",
+		"@wordpress/blocks": "^15.15.0",
+		"@wordpress/components": "^32.4.0",
+		"@wordpress/compose": "^7.42.0",
+		"@wordpress/core-data": "^7.42.0",
+		"@wordpress/data": "^10.42.0",
+		"@wordpress/dataviews": "^13.1.0",
+		"@wordpress/date": "^5.42.0",
+		"@wordpress/element": "^6.42.0",
+		"@wordpress/hooks": "^4.42.0",
+		"@wordpress/html-entities": "^4.42.0",
+		"@wordpress/i18n": "^6.15.0",
+		"@wordpress/icons": "^12.0.0",
+		"@wordpress/media-utils": "^5.42.0",
+		"@wordpress/notices": "^5.42.0",
+		"@wordpress/patterns": "^2.42.0",
+		"@wordpress/primitives": "^4.42.0",
+		"@wordpress/private-apis": "^1.42.0",
+		"@wordpress/router": "^1.42.0",
+		"@wordpress/url": "^4.42.0",
+		"@wordpress/warning": "^3.42.0",
+		"@wordpress/wordcount": "^4.42.0",
 		"change-case": "4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "2.1.1",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }

package/src/fields/parent/parent-edit.tsx

@@ -114,7 +114,7 @@ export function PageAttributesParent( {
 	data: BasePost;
 	onChangeControl: ( newValue: number ) => void;
 } ) {
-	const [ fieldValue, setFieldValue ] = useState< null | string >( null );
+	const [ fieldValue, setFieldValue ] = useState< string >( '' );
 
 	const pageId = data.parent;
 	const postId = data.id;
@@ -145,7 +145,7 @@ export function PageAttributesParent( {
 				orderby: 'menu_order',
 				order: 'asc',
 				_fields: 'id,title,parent',
-				...( fieldValue !== null && {
+				...( !! fieldValue && {
 					// Perform a search by relevance when the field is changed.
 					search: fieldValue,
 					orderby: 'relevance',
@@ -192,14 +192,8 @@ export function PageAttributesParent( {
 			] );
 
 			const sortedNodes = mappedNodes.sort( ( [ a ], [ b ] ) => {
-				const priorityA = getItemPriority(
-					a.rawName,
-					fieldValue ?? ''
-				);
-				const priorityB = getItemPriority(
-					b.rawName,
-					fieldValue ?? ''
-				);
+				const priorityA = getItemPriority( a.rawName, fieldValue );
+				const priorityB = getItemPriority( b.rawName, fieldValue );
 				return priorityA >= priorityB ? 1 : -1;
 			} );
 

package/src/fields/template/hooks.ts

@@ -10,6 +10,54 @@ import type { WpTemplate } from '@wordpress/core-data';
  */
 import { getItemTitle } from '../../actions/utils';
 import { unlock } from '../../lock-unlock';
+import type { BasePost } from '../../types';
+
+/**
+ * Hook that determines the template field rendering mode for a post.
+ *
+ * @param record The post record.
+ * @return 'block-theme' | 'classic' | null
+ */
+export function useTemplateFieldMode(
+	record: BasePost
+): 'block-theme' | 'classic' | null {
+	const postType = record.type;
+	const availableTemplates = ( ( record as Record< string, any > )
+		?.available_templates ?? {} ) as Record< string, string >;
+	const hasAvailableTemplates = Object.keys( availableTemplates ).length > 0;
+	return useSelect(
+		( select ) => {
+			const isBlockTheme =
+				!! select( coreStore ).getCurrentTheme()?.is_block_theme;
+			const postTypeObj = select( coreStore ).getPostType( postType );
+			if ( ! postTypeObj?.viewable ) {
+				return null;
+			}
+			const canCreateTemplates =
+				isBlockTheme &&
+				( select( coreStore ).canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_template',
+				} ) ??
+					false );
+			const isVisible = hasAvailableTemplates || canCreateTemplates;
+			const canViewTemplates = isVisible
+				? !! select( coreStore ).canUser( 'read', {
+						kind: 'postType',
+						name: 'wp_template',
+				  } )
+				: false;
+			if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
+				return 'classic';
+			}
+			if ( isBlockTheme && canViewTemplates ) {
+				return 'block-theme';
+			}
+			return null;
+		},
+		[ postType, hasAvailableTemplates ]
+	);
+}
 
 /**
  * Compute the template slug to look up in the template hierarchy.

package/src/fields/template/template-edit.tsx

@@ -14,22 +14,73 @@ import { __ } from '@wordpress/i18n';
  */
 import { getItemTitle } from '../../actions/utils';
 import type { BasePost } from '../../types';
-import { useDefaultTemplateLabel } from './hooks';
+import { useDefaultTemplateLabel, useTemplateFieldMode } from './hooks';
 import { unlock } from '../../lock-unlock';
 
+type TemplateEditComponentProps = Omit<
+	DataFormControlProps< BasePost >,
+	'onChange'
+> & {
+	onChange: ( value: string ) => void;
+};
+
 const EMPTY_ARRAY: [] = [];
 
-export const TemplateEdit = ( {
+function ClassicTemplateEdit( {
 	data,
 	field,
 	onChange,
-}: DataFormControlProps< BasePost > ) => {
-	const { id } = field;
+}: TemplateEditComponentProps ) {
+	const postId =
+		typeof data.id === 'number' ? data.id : parseInt( data.id, 10 );
+	const value = field.getValue( { item: data } );
+	const options = useMemo(
+		() =>
+			Object.entries(
+				( ( data as Record< string, any > )?.available_templates ??
+					{} ) as Record< string, string >
+			).map( ( [ templateSlug, title ] ) => ( {
+				label: title,
+				value: templateSlug,
+			} ) ),
+		[ data ]
+	);
+	const canSwitchTemplate = useSelect(
+		( select ) => {
+			const { getHomePage, getPostsPageId } = unlock(
+				select( coreStore )
+			);
+			const singlePostId = String( postId );
+			const isPostsPage = getPostsPageId() === singlePostId;
+			const isFrontPage =
+				data.type === 'page' && getHomePage()?.postId === singlePostId;
+
+			return ! isPostsPage && ! isFrontPage;
+		},
+		[ postId, data.type ]
+	);
+	return (
+		<SelectControl
+			__next40pxDefaultSize
+			label={ __( 'Template' ) }
+			hideLabelFromVision
+			value={ value }
+			options={ options }
+			onChange={ onChange }
+			disabled={ ! canSwitchTemplate }
+		/>
+	);
+}
+
+function BlockThemeTemplateEdit( {
+	data,
+	field,
+	onChange,
+}: TemplateEditComponentProps ) {
 	const postType = data.type;
 	const postId =
 		typeof data.id === 'number' ? data.id : parseInt( data.id, 10 );
 	const slug = data.slug;
-
 	const { templates, canSwitchTemplate } = useSelect(
 		( select ) => {
 			const allTemplates =
@@ -46,12 +97,9 @@ export const TemplateEdit = ( {
 				select( coreStore )
 			);
 			const singlePostId = String( postId );
-			const isPostsPage =
-				singlePostId !== undefined && getPostsPageId() === singlePostId;
+			const isPostsPage = getPostsPageId() === singlePostId;
 			const isFrontPage =
-				singlePostId !== undefined &&
-				postType === 'page' &&
-				getHomePage()?.postId === singlePostId;
+				postType === 'page' && getHomePage()?.postId === singlePostId;
 
 			return {
 				templates: allTemplates,
@@ -60,23 +108,12 @@ export const TemplateEdit = ( {
 		},
 		[ postId, postType ]
 	);
-
 	const defaultTemplateLabel = useDefaultTemplateLabel(
 		postType,
 		postId,
 		slug
 	);
-
 	const value = field.getValue( { item: data } );
-
-	const onChangeControl = useCallback(
-		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
-	);
-
 	const options = useMemo( () => {
 		const templateOptions = templates.map( ( template ) => ( {
 			label: getItemTitle( template ),
@@ -87,7 +124,6 @@ export const TemplateEdit = ( {
 			...templateOptions,
 		];
 	}, [ templates, defaultTemplateLabel ] );
-
 	return (
 		<SelectControl
 			__next40pxDefaultSize
@@ -95,8 +131,29 @@ export const TemplateEdit = ( {
 			hideLabelFromVision
 			value={ value }
 			options={ options }
-			onChange={ onChangeControl }
+			onChange={ onChange }
 			disabled={ ! canSwitchTemplate }
 		/>
 	);
+}
+
+export const TemplateEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ field.id ]: newValue,
+			} ),
+		[ field.id, onChange ]
+	);
+	const mode = useTemplateFieldMode( data );
+	if ( ! mode || ! [ 'block-theme', 'classic' ].includes( mode ) ) {
+		return null;
+	}
+	const Edit =
+		mode === 'classic' ? ClassicTemplateEdit : BlockThemeTemplateEdit;
+	return <Edit data={ data } field={ field } onChange={ onChangeControl } />;
 };

package/src/fields/template/template-view.tsx

@@ -5,18 +5,35 @@ import { useSelect } from '@wordpress/data';
 import type { WpTemplate } from '@wordpress/core-data';
 import { store as coreStore } from '@wordpress/core-data';
 import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getItemTitle } from '../../actions/utils';
 import type { BasePost } from '../../types';
-import { useDefaultTemplateLabel } from './hooks';
+import { useDefaultTemplateLabel, useTemplateFieldMode } from './hooks';
 
-export const TemplateView = ( {
+function ClassicTemplateView( {
 	item,
 	field,
-}: DataViewRenderFieldProps< BasePost > ) => {
+}: DataViewRenderFieldProps< BasePost > ) {
+	const templateSlug = field.getValue( { item } );
+	const availableTemplates = ( ( item as Record< string, any > )
+		?.available_templates ?? {} ) as Record< string, string >;
+
+	const classicLabel =
+		templateSlug && availableTemplates[ templateSlug ]
+			? availableTemplates[ templateSlug ]
+			: __( 'Default template' );
+
+	return <>{ classicLabel }</>;
+}
+
+function BlockThemeTemplateView( {
+	item,
+	field,
+}: DataViewRenderFieldProps< BasePost > ) {
 	const postType = item.type;
 	const slug = item.slug;
 	const postId = item.id;
@@ -49,4 +66,17 @@ export const TemplateView = ( {
 	);
 
 	return <>{ templateLabel ?? defaultTemplateLabel }</>;
+}
+
+export const TemplateView = ( {
+	item,
+	field,
+}: DataViewRenderFieldProps< BasePost > ) => {
+	const mode = useTemplateFieldMode( item );
+	if ( ! mode || ! [ 'block-theme', 'classic' ].includes( mode ) ) {
+		return null;
+	}
+	const View =
+		mode === 'classic' ? ClassicTemplateView : BlockThemeTemplateView;
+	return <View item={ item } field={ field } />;
 };