@wordpress/fields 0.31.1-next.v.202602091733.0 → 0.32.0

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, useState } from '@wordpress/element';\n// @ts-ignore\nimport { parse } from '@wordpress/blocks';\nimport type { WpTemplate } from '@wordpress/core-data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataFormControlProps } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\n// @ts-expect-error block-editor is not typed correctly.\nimport { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';\nimport {\n\tButton,\n\tDropdown,\n\tMenuGroup,\n\tMenuItem,\n\tModal,\n} from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { __ } from '@wordpress/i18n';\nimport { getItemTitle } from '../../actions/utils';\nimport type { BasePost } from '../../types';\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 { canSwitchTemplate, templates } = 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\n\t\t\tconst isPostsPage = getPostsPageId() === +postId;\n\t\t\tconst isFrontPage =\n\t\t\t\tpostType === 'page' && getHomePage()?.postId === +postId;\n\n\t\t\tconst allowSwitchingTemplate = ! isPostsPage && ! isFrontPage;\n\n\t\t\treturn {\n\t\t\t\ttemplates: allTemplates,\n\t\t\t\tcanSwitchTemplate: allowSwitchingTemplate,\n\t\t\t};\n\t\t},\n\t\t[ postId, postType ]\n\t);\n\n\tconst templatesAsPatterns = useMemo( () => {\n\t\tif ( ! canSwitchTemplate ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn templates\n\t\t\t.filter(\n\t\t\t\t( template ) =>\n\t\t\t\t\ttemplate.is_custom &&\n\t\t\t\t\ttemplate.slug !== data.template &&\n\t\t\t\t\t// Skip empty templates.\n\t\t\t\t\t!! template.content.raw\n\t\t\t)\n\t\t\t.map( ( template ) => ( {\n\t\t\t\tname: template.slug,\n\t\t\t\tblocks: parse( template.content.raw ),\n\t\t\t\ttitle: decodeEntities( template.title.rendered ),\n\t\t\t\tid: template.id,\n\t\t\t} ) );\n\t}, [ canSwitchTemplate, data.template, templates ] );\n\n\tconst shownTemplates = useAsyncList( templatesAsPatterns );\n\n\tconst value = field.getValue( { item: data } );\n\tconst foundTemplate = templates.find(\n\t\t( template ) => template.slug === value\n\t);\n\n\tconst currentTemplate = useSelect(\n\t\t( select ) => {\n\t\t\tif ( foundTemplate ) {\n\t\t\t\treturn foundTemplate;\n\t\t\t}\n\n\t\t\tlet slugToCheck;\n\t\t\t// In `draft` status we might not have a slug available, so we use the `single`\n\t\t\t// post type templates slug(ex page, single-post, single-product etc..).\n\t\t\t// Pages do not need the `single` prefix in the slug to be prioritized\n\t\t\t// through template hierarchy.\n\t\t\tif ( slug ) {\n\t\t\t\tslugToCheck =\n\t\t\t\t\tpostType === 'page'\n\t\t\t\t\t\t? `${ postType }-${ slug }`\n\t\t\t\t\t\t: `single-${ postType }-${ slug }`;\n\t\t\t} else {\n\t\t\t\tslugToCheck =\n\t\t\t\t\tpostType === 'page' ? 'page' : `single-${ postType }`;\n\t\t\t}\n\n\t\t\tif ( postType ) {\n\t\t\t\tconst templateId = select( coreStore ).getDefaultTemplateId( {\n\t\t\t\t\tslug: slugToCheck,\n\t\t\t\t} );\n\n\t\t\t\treturn select( coreStore ).getEntityRecord(\n\t\t\t\t\t'postType',\n\t\t\t\t\t'wp_template',\n\t\t\t\t\ttemplateId\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ foundTemplate, postType, slug ]\n\t);\n\n\tconst [ showModal, setShowModal ] = useState( false );\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\treturn (\n\t\t<fieldset className=\"fields-controls__template\">\n\t\t\t<Dropdown\n\t\t\t\tpopoverProps={ { placement: 'bottom-start' } }\n\t\t\t\trenderToggle={ ( { onToggle } ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ currentTemplate\n\t\t\t\t\t\t\t? getItemTitle( currentTemplate )\n\t\t\t\t\t\t\t: '' }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\trenderContent={ ( { onToggle } ) => (\n\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowModal( true );\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Change template' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// The default template in a post is indicated by an empty string\n\t\t\t\t\t\t\tvalue !== '' && (\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonChangeControl( '' );\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Use default template' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ showModal && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Choose a template' ) }\n\t\t\t\t\tonRequestClose={ () => setShowModal( false ) }\n\t\t\t\t\toverlayClassName=\"fields-controls__template-modal\"\n\t\t\t\t\tisFullScreen\n\t\t\t\t>\n\t\t\t\t\t<div className=\"fields-controls__template-content\">\n\t\t\t\t\t\t<BlockPatternsList\n\t\t\t\t\t\t\tlabel={ __( 'Templates' ) }\n\t\t\t\t\t\t\tblockPatterns={ templatesAsPatterns }\n\t\t\t\t\t\t\tshownPatterns={ shownTemplates }\n\t\t\t\t\t\t\tonClickPattern={ (\n\t\t\t\t\t\t\t\ttemplate: ( typeof templatesAsPatterns )[ 0 ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tonChangeControl( template.name );\n\t\t\t\t\t\t\t\tsetShowModal( false );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</fieldset>\n\t);\n};\n"],
-  "mappings": "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",
+  "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;",
   "names": []
 }

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

@@ -0,0 +1,43 @@
+// packages/fields/src/fields/template/template-view.tsx
+import { useSelect } from "@wordpress/data";
+import { store as coreStore } from "@wordpress/core-data";
+import { getItemTitle } from "../../actions/utils.mjs";
+import { useDefaultTemplateLabel } from "./hooks.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+var TemplateView = ({
+  item,
+  field
+}) => {
+  const postType = item.type;
+  const slug = item.slug;
+  const postId = item.id;
+  const templateSlug = field.getValue({ item });
+  const defaultTemplateLabel = useDefaultTemplateLabel(
+    postType,
+    postId,
+    slug
+  );
+  const templateLabel = useSelect(
+    (select) => {
+      if (!templateSlug) {
+        return;
+      }
+      const allTemplates = select(
+        coreStore
+      ).getEntityRecords("postType", "wp_template", {
+        per_page: -1,
+        post_type: postType
+      });
+      const match = allTemplates?.find(
+        (t) => t.slug === templateSlug
+      );
+      return match ? getItemTitle(match) : void 0;
+    },
+    [postType, templateSlug]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: templateLabel ?? defaultTemplateLabel });
+};
+export {
+  TemplateView
+};
+//# sourceMappingURL=template-view.mjs.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,65 @@
+// packages/fields/src/fields/template/utils.ts
+import { store as coreStore } from "@wordpress/core-data";
+import { __ } from "@wordpress/i18n";
+import { getItemTitle } from "../../actions/utils.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+function getTemplateSlugToCheck(postType, slug) {
+  if (slug) {
+    return postType === "page" ? `${postType}-${slug}` : `single-${postType}-${slug}`;
+  }
+  return postType === "page" ? "page" : `single-${postType}`;
+}
+function getDefaultTemplateLabel(select, postType, postId, slug) {
+  if (!postType || !postId) {
+    return __("Default template");
+  }
+  const homePage = unlock(select(coreStore)).getHomePage();
+  if (postType === "page" && homePage?.postType === "page" && homePage?.postId === String(postId)) {
+    const templates = select(coreStore).getEntityRecords(
+      "postType",
+      "wp_template",
+      { per_page: -1 }
+    );
+    const frontPage = templates?.find(
+      (t) => t.slug === "front-page"
+    );
+    if (frontPage) {
+      return getItemTitle(frontPage);
+    }
+  }
+  const postsPageId = unlock(select(coreStore)).getPostsPageId();
+  if (postType === "page" && postsPageId === String(postId)) {
+    const templateId2 = select(coreStore).getDefaultTemplateId({
+      slug: "home"
+    });
+    if (templateId2) {
+      const template2 = select(coreStore).getEntityRecord(
+        "postType",
+        "wp_template",
+        templateId2
+      );
+      if (template2) {
+        return getItemTitle(template2);
+      }
+    }
+    return __("Default template");
+  }
+  const slugToCheck = getTemplateSlugToCheck(postType, slug);
+  const templateId = select(coreStore).getDefaultTemplateId({
+    slug: slugToCheck
+  });
+  if (!templateId) {
+    return __("Default template");
+  }
+  const template = select(coreStore).getEntityRecord(
+    "postType",
+    "wp_template",
+    templateId
+  );
+  return template ? getItemTitle(template) : __("Default template");
+}
+export {
+  getDefaultTemplateLabel,
+  getTemplateSlugToCheck
+};
+//# sourceMappingURL=utils.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/fields/template/utils.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { WpTemplate } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getItemTitle } from '../../actions/utils';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Compute the template slug to look up in the template hierarchy.\n *\n * In `draft` status we might not have a slug available, so we use the\n * `single` post type template slug (e.g. page, single-post,\n * single-product, etc.). Pages do not need the `single` prefix to be\n * prioritised through template hierarchy.\n *\n * @param postType The post type.\n * @param slug     The post slug.\n */\nexport function getTemplateSlugToCheck(\n\tpostType: string,\n\tslug: string | undefined\n): string {\n\tif ( slug ) {\n\t\treturn postType === 'page'\n\t\t\t? `${ postType }-${ slug }`\n\t\t\t: `single-${ postType }-${ slug }`;\n\t}\n\treturn postType === 'page' ? 'page' : `single-${ postType }`;\n}\n\n/**\n * Resolve the human-readable label for the default template that would\n * apply to a post, given its type, ID and slug. Meant to be called inside a\n * `useSelect` callback (receives `select` as its first argument).\n *\n * @param select   The `select` function from a `useSelect` callback.\n * @param postType The post type.\n * @param postId   The post ID.\n * @param slug     The post slug.\n */\nexport function getDefaultTemplateLabel(\n\tselect: ( store: typeof coreStore ) => any,\n\tpostType: string | undefined,\n\tpostId: string | number | undefined,\n\tslug: string | undefined\n): string {\n\tif ( ! postType || ! postId ) {\n\t\treturn __( 'Default template' );\n\t}\n\n\t// For the front page, we always use the front page template if existing.\n\tconst homePage = unlock( select( coreStore ) ).getHomePage();\n\tif (\n\t\tpostType === 'page' &&\n\t\thomePage?.postType === 'page' &&\n\t\thomePage?.postId === String( postId )\n\t) {\n\t\t// The /lookup endpoint cannot currently handle a lookup\n\t\t// when a page is set as the front page, so specifically in\n\t\t// that case, we want to check if there is a front page\n\t\t// template, and instead of falling back to the home\n\t\t// template, we want to fall back to the page template.\n\t\tconst templates = select( coreStore ).getEntityRecords(\n\t\t\t'postType',\n\t\t\t'wp_template',\n\t\t\t{ per_page: -1 }\n\t\t);\n\t\tconst frontPage = templates?.find(\n\t\t\t( t: WpTemplate ) => t.slug === 'front-page'\n\t\t);\n\t\tif ( frontPage ) {\n\t\t\treturn getItemTitle( frontPage );\n\t\t}\n\t\t// If no front page template is found, continue with the\n\t\t// logic below (fetching the page template).\n\t}\n\n\tconst postsPageId = unlock( select( coreStore ) ).getPostsPageId();\n\t// Check if the current page is the posts page.\n\tif ( postType === 'page' && postsPageId === String( postId ) ) {\n\t\tconst templateId = select( coreStore ).getDefaultTemplateId( {\n\t\t\tslug: 'home',\n\t\t} );\n\t\tif ( templateId ) {\n\t\t\tconst template = select( coreStore ).getEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template',\n\t\t\t\ttemplateId\n\t\t\t);\n\t\t\tif ( template ) {\n\t\t\t\treturn getItemTitle( template );\n\t\t\t}\n\t\t}\n\t\treturn __( 'Default template' );\n\t}\n\n\tconst slugToCheck = getTemplateSlugToCheck( postType, slug );\n\tconst templateId = select( coreStore ).getDefaultTemplateId( {\n\t\tslug: slugToCheck,\n\t} );\n\n\tif ( ! templateId ) {\n\t\treturn __( 'Default template' );\n\t}\n\n\tconst template = select( coreStore ).getEntityRecord(\n\t\t'postType',\n\t\t'wp_template',\n\t\ttemplateId\n\t);\n\n\treturn template ? getItemTitle( template ) : __( 'Default template' );\n}\n"],
+  "mappings": ";AAGA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAKnB,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AAahB,SAAS,uBACf,UACA,MACS;AACT,MAAK,MAAO;AACX,WAAO,aAAa,SACjB,GAAI,QAAS,IAAK,IAAK,KACvB,UAAW,QAAS,IAAK,IAAK;AAAA,EAClC;AACA,SAAO,aAAa,SAAS,SAAS,UAAW,QAAS;AAC3D;AAYO,SAAS,wBACf,QACA,UACA,QACA,MACS;AACT,MAAK,CAAE,YAAY,CAAE,QAAS;AAC7B,WAAO,GAAI,kBAAmB;AAAA,EAC/B;AAGA,QAAM,WAAW,OAAQ,OAAQ,SAAU,CAAE,EAAE,YAAY;AAC3D,MACC,aAAa,UACb,UAAU,aAAa,UACvB,UAAU,WAAW,OAAQ,MAAO,GACnC;AAMD,UAAM,YAAY,OAAQ,SAAU,EAAE;AAAA,MACrC;AAAA,MACA;AAAA,MACA,EAAE,UAAU,GAAG;AAAA,IAChB;AACA,UAAM,YAAY,WAAW;AAAA,MAC5B,CAAE,MAAmB,EAAE,SAAS;AAAA,IACjC;AACA,QAAK,WAAY;AAChB,aAAO,aAAc,SAAU;AAAA,IAChC;AAAA,EAGD;AAEA,QAAM,cAAc,OAAQ,OAAQ,SAAU,CAAE,EAAE,eAAe;AAEjE,MAAK,aAAa,UAAU,gBAAgB,OAAQ,MAAO,GAAI;AAC9D,UAAMA,cAAa,OAAQ,SAAU,EAAE,qBAAsB;AAAA,MAC5D,MAAM;AAAA,IACP,CAAE;AACF,QAAKA,aAAa;AACjB,YAAMC,YAAW,OAAQ,SAAU,EAAE;AAAA,QACpC;AAAA,QACA;AAAA,QACAD;AAAA,MACD;AACA,UAAKC,WAAW;AACf,eAAO,aAAcA,SAAS;AAAA,MAC/B;AAAA,IACD;AACA,WAAO,GAAI,kBAAmB;AAAA,EAC/B;AAEA,QAAM,cAAc,uBAAwB,UAAU,IAAK;AAC3D,QAAM,aAAa,OAAQ,SAAU,EAAE,qBAAsB;AAAA,IAC5D,MAAM;AAAA,EACP,CAAE;AAEF,MAAK,CAAE,YAAa;AACnB,WAAO,GAAI,kBAAmB;AAAA,EAC/B;AAEA,QAAM,WAAW,OAAQ,SAAU,EAAE;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SAAO,WAAW,aAAc,QAAS,IAAI,GAAI,kBAAmB;AACrE;",
+  "names": ["templateId", "template"]
+}

package/build-style/style-rtl.css

@@ -186,14 +186,31 @@ fieldset.fields__media-edit {
   padding: 0;
   margin: 0;
   width: 100%;
+}
+fieldset.fields__media-edit .components-base-control__label {
+  color: #1e1e1e;
+}
+fieldset.fields__media-edit {
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
   container-type: inline-size;
 }
-fieldset.fields__media-edit .fields__media-edit-compact {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 8px;
-  align-items: center;
+fieldset.fields__media-edit .fields__media-edit-compact-group {
+  border: 1px dashed #949494;
+  border-radius: 4px;
+  overflow: hidden;
+}
+fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
+  border-radius: 2px;
+}
+fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
+  border: 0;
+  border-radius: 0;
+}
+fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
+  border-bottom: 1px solid #f0f0f0;
 }
 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
   display: flex;
@@ -203,6 +220,27 @@ fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .c
 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
   margin: 0;
 }
+fieldset.fields__media-edit .fields__media-edit-compact {
+  position: relative;
+  min-width: 0;
+}
+fieldset.fields__media-edit .fields__media-edit-compact:hover .fields__media-edit-compact-movers, fieldset.fields__media-edit .fields__media-edit-compact:focus-within .fields__media-edit-compact-movers {
+  opacity: 1;
+}
+fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+  border-radius: 2px;
+  background: #fff;
+}
+fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
+  pointer-events: auto;
+}
 fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner {
   display: flex;
   align-items: center;
@@ -215,15 +253,25 @@ fieldset.fields__media-edit .fields__media-edit-picker-button {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   border: 1px dashed #949494;
-  border-radius: 1px;
-  padding: calc(8px - 1px);
+  border-radius: 2px;
+  padding: 4px 8px;
+  min-height: 40px;
   cursor: pointer;
   min-width: 0;
 }
+fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
+  border-color: var(--wp-admin-theme-color);
+  color: var(--wp-admin-theme-color);
+}
+fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
+  background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
+  color: var(--wp-admin-theme-color-darker-20);
+  border-color: var(--wp-admin-theme-color-darker-20);
+}
 fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
-  background-color: #f0f0f0;
+  color: var(--wp-admin-theme-color);
 }
 fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -291,37 +339,20 @@ fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-exp
   opacity: 0;
   pointer-events: none;
 }
-@media not (prefers-reduced-motion) {
-  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
-    transition: opacity 50ms ease-out;
-  }
-}
 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
   pointer-events: auto;
 }
-fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-remove {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  border-radius: 1px;
-  backdrop-filter: blur(16px) saturate(180%);
-  background: rgba(255, 255, 255, 0.75);
-}
-fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-title {
+fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
   position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  margin: 8px;
-  padding: 4px;
-  text-align: center;
-  border-radius: 1px;
-  backdrop-filter: blur(16px) saturate(180%);
-  background: rgba(255, 255, 255, 0.75);
+  top: 4px;
+  left: 4px;
+  border-radius: 2px;
+  background: #fff;
 }
 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
   position: relative;
   min-width: 0;
+  border-radius: 4px;
 }
 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:hover .fields__media-edit-expanded-overlay, fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:focus-within .fields__media-edit-expanded-overlay {
   opacity: 1;
@@ -348,6 +379,12 @@ fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
 fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
   aspect-ratio: 2/1;
 }
+fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
+  border-radius: 4px;
+}
+fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
+  border-radius: 2px;
+}
 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
   grid-template-columns: repeat(3, 1fr);
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
@@ -422,35 +459,6 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
   margin: 0;
 }
 
-.fields-controls__template {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
-.fields-controls__template-modal {
-  z-index: 1000001;
-}
-
-.fields-controls__template-content .block-editor-block-patterns-list {
-  column-count: 2;
-  column-gap: 24px;
-  padding-top: 2px;
-}
-@media (min-width: 782px) {
-  .fields-controls__template-content .block-editor-block-patterns-list {
-    column-count: 3;
-  }
-}
-@media (min-width: 1280px) {
-  .fields-controls__template-content .block-editor-block-patterns-list {
-    column-count: 4;
-  }
-}
-.fields-controls__template-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
-  break-inside: avoid-column;
-}
-
 .fields-field__title > span:first-child {
   text-overflow: ellipsis;
   overflow: hidden;

package/build-style/style.css

@@ -186,14 +186,31 @@ fieldset.fields__media-edit {
   padding: 0;
   margin: 0;
   width: 100%;
+}
+fieldset.fields__media-edit .components-base-control__label {
+  color: #1e1e1e;
+}
+fieldset.fields__media-edit {
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
   container-type: inline-size;
 }
-fieldset.fields__media-edit .fields__media-edit-compact {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 8px;
-  align-items: center;
+fieldset.fields__media-edit .fields__media-edit-compact-group {
+  border: 1px dashed #949494;
+  border-radius: 4px;
+  overflow: hidden;
+}
+fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
+  border-radius: 2px;
+}
+fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
+  border: 0;
+  border-radius: 0;
+}
+fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
+  border-bottom: 1px solid #f0f0f0;
 }
 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
   display: flex;
@@ -203,6 +220,27 @@ fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .c
 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
   margin: 0;
 }
+fieldset.fields__media-edit .fields__media-edit-compact {
+  position: relative;
+  min-width: 0;
+}
+fieldset.fields__media-edit .fields__media-edit-compact:hover .fields__media-edit-compact-movers, fieldset.fields__media-edit .fields__media-edit-compact:focus-within .fields__media-edit-compact-movers {
+  opacity: 1;
+}
+fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+  border-radius: 2px;
+  background: #fff;
+}
+fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
+  pointer-events: auto;
+}
 fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner {
   display: flex;
   align-items: center;
@@ -215,15 +253,25 @@ fieldset.fields__media-edit .fields__media-edit-picker-button {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   border: 1px dashed #949494;
-  border-radius: 1px;
-  padding: calc(8px - 1px);
+  border-radius: 2px;
+  padding: 4px 8px;
+  min-height: 40px;
   cursor: pointer;
   min-width: 0;
 }
+fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
+  border-color: var(--wp-admin-theme-color);
+  color: var(--wp-admin-theme-color);
+}
+fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
+  background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
+  color: var(--wp-admin-theme-color-darker-20);
+  border-color: var(--wp-admin-theme-color-darker-20);
+}
 fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
-  background-color: #f0f0f0;
+  color: var(--wp-admin-theme-color);
 }
 fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -291,37 +339,20 @@ fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-exp
   opacity: 0;
   pointer-events: none;
 }
-@media not (prefers-reduced-motion) {
-  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
-    transition: opacity 50ms ease-out;
-  }
-}
 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
   pointer-events: auto;
 }
-fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-remove {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  border-radius: 1px;
-  backdrop-filter: blur(16px) saturate(180%);
-  background: rgba(255, 255, 255, 0.75);
-}
-fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-title {
+fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 8px;
-  padding: 4px;
-  text-align: center;
-  border-radius: 1px;
-  backdrop-filter: blur(16px) saturate(180%);
-  background: rgba(255, 255, 255, 0.75);
+  top: 4px;
+  right: 4px;
+  border-radius: 2px;
+  background: #fff;
 }
 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
   position: relative;
   min-width: 0;
+  border-radius: 4px;
 }
 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:hover .fields__media-edit-expanded-overlay, fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:focus-within .fields__media-edit-expanded-overlay {
   opacity: 1;
@@ -348,6 +379,12 @@ fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
 fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
   aspect-ratio: 2/1;
 }
+fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
+  border-radius: 4px;
+}
+fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
+  border-radius: 2px;
+}
 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
   grid-template-columns: repeat(3, 1fr);
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
@@ -422,35 +459,6 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
   margin: 0;
 }
 
-.fields-controls__template {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
-.fields-controls__template-modal {
-  z-index: 1000001;
-}
-
-.fields-controls__template-content .block-editor-block-patterns-list {
-  column-count: 2;
-  column-gap: 24px;
-  padding-top: 2px;
-}
-@media (min-width: 782px) {
-  .fields-controls__template-content .block-editor-block-patterns-list {
-    column-count: 3;
-  }
-}
-@media (min-width: 1280px) {
-  .fields-controls__template-content .block-editor-block-patterns-list {
-    column-count: 4;
-  }
-}
-.fields-controls__template-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
-  break-inside: avoid-column;
-}
-
 .fields-field__title > span:first-child {
   text-overflow: ellipsis;
   overflow: hidden;

package/build-types/actions/duplicate-post.d.ts

@@ -12,7 +12,7 @@ interface Action<Item> {
     label: string;
     isEligible?: (item: Item) => boolean;
     modalFocusOnMount?: string;
-    RenderModal: (props: RenderModalProps<Item>) => JSX.Element;
+    RenderModal: (props: RenderModalProps<Item>) => React.JSX.Element;
 }
 declare const duplicatePost: Action<BasePost>;
 /**

package/build-types/actions/duplicate-post.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"duplicate-post.d.ts","sourceRoot":"","sources":["../../src/actions/duplicate-post.tsx"],"names":[],"mappings":"AAeA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAiB,MAAM,UAAU,CAAC;AAGxD,UAAU,gBAAgB,CAAE,IAAI;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;CAC9C;AAED,UAAU,MAAM,CAAE,IAAI;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,CAAE,KAAK,EAAE,gBAAgB,CAAE,IAAI,CAAE,KAAM,GAAG,CAAC,OAAO,CAAC;CAChE;AAED,QAAA,MAAM,aAAa,EAAE,MAAM,CAAE,QAAQ,CAyJpC,CAAC;AAEF;;GAEG;AACH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"duplicate-post.d.ts","sourceRoot":"","sources":["../../src/actions/duplicate-post.tsx"],"names":[],"mappings":"AAeA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAiB,MAAM,UAAU,CAAC;AAGxD,UAAU,gBAAgB,CAAE,IAAI;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;CAC9C;AAED,UAAU,MAAM,CAAE,IAAI;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,CAAE,KAAK,EAAE,gBAAgB,CAAE,IAAI,CAAE,KAAM,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CACtE;AAED,QAAA,MAAM,aAAa,EAAE,MAAM,CAAE,QAAQ,CAyJpC,CAAC;AAEF;;GAEG;AACH,eAAe,aAAa,CAAC"}

package/build-types/actions/reorder-page.d.ts

@@ -12,7 +12,7 @@ interface Action<Item> {
     label: string;
     isEligible?: (item: Item) => boolean;
     modalFocusOnMount?: string;
-    RenderModal: (props: RenderModalProps<Item>) => JSX.Element;
+    RenderModal: (props: RenderModalProps<Item>) => React.JSX.Element;
 }
 declare const reorderPage: Action<BasePost>;
 /**

package/build-types/actions/reorder-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reorder-page.d.ts","sourceRoot":"","sources":["../../src/actions/reorder-page.tsx"],"names":[],"mappings":"AAeA;;GAEG;AACH,OAAO,KAAK,EAAiB,QAAQ,EAAE,MAAM,UAAU,CAAC;AAExD,UAAU,gBAAgB,CAAE,IAAI;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;CAC9C;AAED,UAAU,MAAM,CAAE,IAAI;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,CAAE,KAAK,EAAE,gBAAgB,CAAE,IAAI,CAAE,KAAM,GAAG,CAAC,OAAO,CAAC;CAChE;AAyGD,QAAA,MAAM,WAAW,EAAE,MAAM,CAAE,QAAQ,CAQlC,CAAC;AAEF;;GAEG;AACH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"reorder-page.d.ts","sourceRoot":"","sources":["../../src/actions/reorder-page.tsx"],"names":[],"mappings":"AAeA;;GAEG;AACH,OAAO,KAAK,EAAiB,QAAQ,EAAE,MAAM,UAAU,CAAC;AAExD,UAAU,gBAAgB,CAAE,IAAI;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAE,KAAK,EAAE,IAAI,EAAE,KAAM,IAAI,CAAC;CAC9C;AAED,UAAU,MAAM,CAAE,IAAI;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAE,IAAI,EAAE,IAAI,KAAM,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,CAAE,KAAK,EAAE,gBAAgB,CAAE,IAAI,CAAE,KAAM,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CACtE;AAyGD,QAAA,MAAM,WAAW,EAAE,MAAM,CAAE,QAAQ,CAQlC,CAAC;AAEF;;GAEG;AACH,eAAe,WAAW,CAAC"}

package/build-types/components/create-template-part-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/create-template-part-modal/index.tsx"],"names":[],"mappings":"AA8CA,KAAK,oCAAoC,GAAG;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAE,YAAY,EAAE,GAAG,KAAM,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAE,EAChD,UAAU,EACV,GAAG,SAAS,EACZ,EAAE;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,oCAAoC,+BAkBvC;AA+BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,+BAA+B,CAAE,EAChD,WAA6B,EAC7B,MAAW,EACX,YAA0B,EAC1B,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAiB,GACjB,EAAE,oCAAoC,+BAiKtC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/create-template-part-modal/index.tsx"],"names":[],"mappings":"AA8CA,KAAK,oCAAoC,GAAG;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAE,YAAY,EAAE,GAAG,KAAM,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAE,EAChD,UAAU,EACV,GAAG,SAAS,EACZ,EAAE;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,oCAAoC,+BAkBvC;AAsBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,+BAA+B,CAAE,EAChD,WAA6B,EAC7B,MAAW,EACX,YAA0B,EAC1B,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAiB,GACjB,EAAE,oCAAoC,+BAiKtC"}

package/build-types/components/media-edit/index.d.ts

@@ -18,7 +18,7 @@ import type { MediaEditProps } from '../../types';
  * @param {boolean}              [props.hideLabelFromVision] - Whether the label should be hidden from vision.
  * @param {boolean}              [props.isExpanded]          - Whether to render in an expanded form. Default `false`.
  *
- * @return {JSX.Element} The media edit control component.
+ * @return {React.JSX.Element} The media edit control component.
  *
  * @example
  * ```tsx

package/build-types/components/media-edit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-edit/index.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAsWlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,IAAI,EAAI,EAC1C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,mBAAmB,EACnB,YAA0B,EAC1B,QAAQ,EACR,UAAU,EACV,QAAQ,GACR,EAAE,cAAc,CAAE,IAAI,CAAE,+BA6QxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-edit/index.tsx"],"names":[],"mappings":"AAuDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAoflD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,IAAI,EAAI,EAC1C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,mBAAmB,EACnB,YAA0B,EAC1B,QAAQ,EACR,UAAU,EACV,QAAQ,GACR,EAAE,cAAc,CAAE,IAAI,CAAE,+BA2XxB"}

package/build-types/components/media-edit/use-moving-animation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Hook used to compute the styles required to move a div into a new position.
+ *
+ * The way this animation works is the following:
+ *  - It first renders the element as if there was no animation.
+ *  - It takes a snapshot of the position of the element to use it
+ *    as a destination point for the animation.
+ *  - It restores the element to the previous position using a CSS transform
+ *
+ * @param triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ */
+export default function useMovingAnimation(triggerAnimationOnChange: unknown): import("react").RefObject<HTMLDivElement>;
+//# sourceMappingURL=use-moving-animation.d.ts.map

package/build-types/components/media-edit/use-moving-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-moving-animation.d.ts","sourceRoot":"","sources":["../../../src/components/media-edit/use-moving-animation.ts"],"names":[],"mappings":"AAiBA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACzC,wBAAwB,EAAE,OAAO,6CA+CjC"}

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

@@ -0,0 +1,10 @@
+/**
+ * Hook that resolves the human-readable label for the default template
+ * that would apply to a post, given its type, ID and slug.
+ *
+ * @param postType The post type.
+ * @param postId   The post ID.
+ * @param slug     The post slug.
+ */
+export declare function useDefaultTemplateLabel(postType: string | undefined, postId: string | number | undefined, slug: string | undefined): string;
+//# sourceMappingURL=hooks.d.ts.map

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

@@ -0,0 +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"}