@wordpress/fields 0.25.3 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 0.26.0 (2025-10-29)
6
+
5
7
  ## 0.25.0 (2025-10-17)
6
8
 
7
9
  ## 0.24.0 (2025-10-01)
@@ -29,6 +29,32 @@ var import_media_utils = require("@wordpress/media-utils");
29
29
  var import_icons = require("@wordpress/icons");
30
30
  var import_core_data = require("@wordpress/core-data");
31
31
  var import_i18n = require("@wordpress/i18n");
32
+ var import_lock_unlock = require("../../lock-unlock");
33
+ const { MediaUploadModal } = (0, import_lock_unlock.unlock)(import_media_utils.privateApis);
34
+ function ConditionalMediaUpload({ render, ...props }) {
35
+ const [isModalOpen, setIsModalOpen] = (0, import_element.useState)(false);
36
+ if (window.__experimentalDataViewsMediaModal) {
37
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
38
+ render && render({ open: () => setIsModalOpen(true) }),
39
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
40
+ MediaUploadModal,
41
+ {
42
+ ...props,
43
+ isOpen: isModalOpen,
44
+ onClose: () => {
45
+ setIsModalOpen(false);
46
+ props.onClose?.();
47
+ },
48
+ onSelect: (media) => {
49
+ setIsModalOpen(false);
50
+ props.onSelect?.(media);
51
+ }
52
+ }
53
+ )
54
+ ] });
55
+ }
56
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media_utils.MediaUpload, { ...props, render });
57
+ }
32
58
  const FeaturedImageEdit = ({
33
59
  data,
34
60
  field,
@@ -53,74 +79,77 @@ const FeaturedImageEdit = ({
53
79
  const title = media?.title?.rendered;
54
80
  const ref = (0, import_element.useRef)(null);
55
81
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { className: "fields-controls__featured-image", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fields-controls__featured-image-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
56
- import_media_utils.MediaUpload,
82
+ ConditionalMediaUpload,
57
83
  {
58
84
  onSelect: (selectedMedia) => {
59
85
  onChangeControl(selectedMedia.id);
60
86
  },
61
87
  allowedTypes: ["image"],
62
- render: ({ open }) => {
63
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
64
- "div",
65
- {
66
- ref,
67
- role: "button",
68
- tabIndex: -1,
69
- onClick: () => {
88
+ value,
89
+ title: (0, import_i18n.__)("Select Featured Image"),
90
+ render: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
91
+ "div",
92
+ {
93
+ ref,
94
+ role: "button",
95
+ tabIndex: -1,
96
+ onClick: open,
97
+ onKeyDown: (event) => {
98
+ if (event.key === "Enter" || event.key === " ") {
99
+ event.preventDefault();
70
100
  open();
71
- },
72
- onKeyDown: open,
73
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
74
- import_components.__experimentalGrid,
75
- {
76
- rowGap: 0,
77
- columnGap: 8,
78
- templateColumns: "24px 1fr 24px",
79
- children: [
80
- url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
81
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
82
- "img",
83
- {
84
- className: "fields-controls__featured-image-image",
85
- alt: "",
86
- width: 24,
87
- height: 24,
88
- src: url
89
- }
90
- ),
91
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fields-controls__featured-image-title", children: title })
92
- ] }),
93
- !url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
94
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
95
- "span",
96
- {
97
- className: "fields-controls__featured-image-placeholder",
98
- style: {
99
- width: "24px",
100
- height: "24px"
101
- }
102
- }
103
- ),
104
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fields-controls__featured-image-title", children: (0, import_i18n.__)("Choose an image\u2026") })
105
- ] }),
106
- url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
107
- import_components.Button,
101
+ }
102
+ },
103
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
104
+ import_components.__experimentalGrid,
105
+ {
106
+ rowGap: 0,
107
+ columnGap: 8,
108
+ templateColumns: "24px 1fr 24px",
109
+ children: [
110
+ url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
111
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
112
+ "img",
108
113
  {
109
- size: "small",
110
- className: "fields-controls__featured-image-remove-button",
111
- icon: import_icons.lineSolid,
112
- onClick: (event) => {
113
- event.stopPropagation();
114
- onChangeControl(0);
114
+ className: "fields-controls__featured-image-image",
115
+ alt: "",
116
+ width: 24,
117
+ height: 24,
118
+ src: url
119
+ }
120
+ ),
121
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fields-controls__featured-image-title", children: title })
122
+ ] }),
123
+ !url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
124
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
125
+ "span",
126
+ {
127
+ className: "fields-controls__featured-image-placeholder",
128
+ style: {
129
+ width: "24px",
130
+ height: "24px"
115
131
  }
116
132
  }
117
- ) })
118
- ]
119
- }
120
- )
121
- }
122
- );
123
- }
133
+ ),
134
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fields-controls__featured-image-title", children: (0, import_i18n.__)("Choose an image\u2026") })
135
+ ] }),
136
+ url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
137
+ import_components.Button,
138
+ {
139
+ size: "small",
140
+ className: "fields-controls__featured-image-remove-button",
141
+ icon: import_icons.lineSolid,
142
+ onClick: (event) => {
143
+ event.stopPropagation();
144
+ onChangeControl(0);
145
+ }
146
+ }
147
+ ) })
148
+ ]
149
+ }
150
+ )
151
+ }
152
+ )
124
153
  }
125
154
  ) }) });
126
155
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/fields/featured-image/featured-image-edit.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, __experimentalGrid as Grid } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useCallback, useRef } from '@wordpress/element';\n// @ts-ignore\nimport { MediaUpload } from '@wordpress/media-utils';\nimport { lineSolid } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataFormControlProps } from '@wordpress/dataviews';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { BasePostWithEmbeddedFeaturedMedia } from '../../types';\n\nexport const FeaturedImageEdit = ( {\n\tdata,\n\tfield,\n\tonChange,\n}: DataFormControlProps< BasePostWithEmbeddedFeaturedMedia > ) => {\n\tconst { id } = field;\n\n\tconst value = field.getValue( { item: data } );\n\n\tconst media = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecord } = select( coreStore );\n\t\t\treturn getEntityRecord( 'postType', 'attachment', value );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: number ) =>\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 url = media?.source_url;\n\tconst title = media?.title?.rendered;\n\tconst ref = useRef( null );\n\n\treturn (\n\t\t<fieldset className=\"fields-controls__featured-image\">\n\t\t\t<div className=\"fields-controls__featured-image-container\">\n\t\t\t\t<MediaUpload\n\t\t\t\t\tonSelect={ ( selectedMedia: { id: number } ) => {\n\t\t\t\t\t\tonChangeControl( selectedMedia.id );\n\t\t\t\t\t} }\n\t\t\t\t\tallowedTypes={ [ 'image' ] }\n\t\t\t\t\trender={ ( { open }: { open: () => void } ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ open }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr 24px\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-image\"\n\t\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\t\twidth={ 24 }\n\t\t\t\t\t\t\t\t\t\t\t\theight={ 24 }\n\t\t\t\t\t\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"fields-controls__featured-image-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-placeholder\"\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"fields-controls__featured-image-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Choose an image\u2026' ) }\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-remove-button\"\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeControl( 0 );\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwEU;AArEV,wBAAmD;AACnD,kBAA0B;AAC1B,qBAAoC;AAEpC,yBAA4B;AAC5B,mBAA0B;AAC1B,uBAAmC;AAEnC,kBAAmB;AAOZ,MAAM,oBAAoB,CAAE;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACD,MAAkE;AACjE,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,YAAQ;AAAA,IACb,CAAE,WAAY;AACb,YAAM,EAAE,gBAAgB,IAAI,OAAQ,iBAAAA,KAAU;AAC9C,aAAO,gBAAiB,YAAY,cAAc,KAAM;AAAA,IACzD;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,QAAM,sBAAkB;AAAA,IACvB,CAAE,aACD,SAAU;AAAA,MACT,CAAE,EAAG,GAAG;AAAA,IACT,CAAE;AAAA,IACH,CAAE,IAAI,QAAS;AAAA,EAChB;AAEA,QAAM,MAAM,OAAO;AACnB,QAAM,QAAQ,OAAO,OAAO;AAC5B,QAAM,UAAM,uBAAQ,IAAK;AAEzB,SACC,4CAAC,cAAS,WAAU,mCACnB,sDAAC,SAAI,WAAU,6CACd;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAE,kBAAmC;AAC/C,wBAAiB,cAAc,EAAG;AAAA,MACnC;AAAA,MACA,cAAe,CAAE,OAAQ;AAAA,MACzB,QAAS,CAAE,EAAE,KAAK,MAA6B;AAC9C,eACC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,MAAK;AAAA,YACL,UAAW;AAAA,YACX,SAAU,MAAM;AACf,mBAAK;AAAA,YACN;AAAA,YACA,WAAY;AAAA,YAEZ;AAAA,cAAC,kBAAAC;AAAA,cAAA;AAAA,gBACA,QAAS;AAAA,gBACT,WAAY;AAAA,gBACZ,iBAAgB;AAAA,gBAEd;AAAA,yBACD,4EACC;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACA,WAAU;AAAA,wBACV,KAAI;AAAA,wBACJ,OAAQ;AAAA,wBACR,QAAS;AAAA,wBACT,KAAM;AAAA;AAAA,oBACP;AAAA,oBACA,4CAAC,UAAK,WAAU,yCACb,iBACH;AAAA,qBACD;AAAA,kBAEC,CAAE,OACH,4EACC;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACA,WAAU;AAAA,wBACV,OAAQ;AAAA,0BACP,OAAO;AAAA,0BACP,QAAQ;AAAA,wBACT;AAAA;AAAA,oBACD;AAAA,oBACA,4CAAC,UAAK,WAAU,yCACb,8BAAI,uBAAmB,GAC1B;AAAA,qBACD;AAAA,kBAEC,OACD,2EACC;AAAA,oBAAC;AAAA;AAAA,sBACA,MAAK;AAAA,sBACL,WAAU;AAAA,sBACV,MAAO;AAAA,sBACP,SAAU,CACT,UACI;AACJ,8BAAM,gBAAgB;AACtB,wCAAiB,CAAE;AAAA,sBACpB;AAAA;AAAA,kBACD,GACD;AAAA;AAAA;AAAA,YAEF;AAAA;AAAA,QACD;AAAA,MAEF;AAAA;AAAA,EACD,GACD,GACD;AAEF;",
6
- "names": ["coreStore", "Grid"]
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, __experimentalGrid as Grid } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useCallback, useRef, useState } from '@wordpress/element';\nimport {\n\tprivateApis as mediaUtilsPrivateApis,\n\tMediaUpload,\n} from '@wordpress/media-utils';\nimport { lineSolid } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataFormControlProps } from '@wordpress/dataviews';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { BasePostWithEmbeddedFeaturedMedia } from '../../types';\nimport { unlock } from '../../lock-unlock';\n\nconst { MediaUploadModal } = unlock( mediaUtilsPrivateApis );\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to media-utils MediaUpload.\n *\n * @param {Object} root0 Component props.\n * @param {Function} root0.render Render prop function that receives { open } object.\n * @param {Object} root0.props Other props passed to the media upload component.\n * @return {JSX.Element} The component.\n */\nfunction ConditionalMediaUpload( { render, ...props }: any ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tif ( ( window as any ).__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t<MediaUploadModal\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ ( media: any ) => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\t// Fallback to media-utils MediaUpload when experiment is disabled\n\treturn <MediaUpload { ...props } render={ render } />;\n}\n\nexport const FeaturedImageEdit = ( {\n\tdata,\n\tfield,\n\tonChange,\n}: DataFormControlProps< BasePostWithEmbeddedFeaturedMedia > ) => {\n\tconst { id } = field;\n\n\tconst value = field.getValue( { item: data } );\n\n\tconst media = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecord } = select( coreStore );\n\t\t\treturn getEntityRecord( 'postType', 'attachment', value );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: number ) =>\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 url = media?.source_url;\n\tconst title = media?.title?.rendered;\n\tconst ref = useRef( null );\n\n\treturn (\n\t\t<fieldset className=\"fields-controls__featured-image\">\n\t\t\t<div className=\"fields-controls__featured-image-container\">\n\t\t\t\t<ConditionalMediaUpload\n\t\t\t\t\tonSelect={ ( selectedMedia: any ) => {\n\t\t\t\t\t\tonChangeControl( selectedMedia.id );\n\t\t\t\t\t} }\n\t\t\t\t\tallowedTypes={ [ 'image' ] }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\ttitle={ __( 'Select Featured Image' ) }\n\t\t\t\t\trender={ ( { open }: any ) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tevent.key === 'Enter' ||\n\t\t\t\t\t\t\t\t\tevent.key === ' '\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr 24px\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-image\"\n\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\twidth={ 24 }\n\t\t\t\t\t\t\t\t\t\t\theight={ 24 }\n\t\t\t\t\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"fields-controls__featured-image-title\">\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</span>\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{ ! url && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-placeholder\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"fields-controls__featured-image-title\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Choose an image\u2026' ) }\n\t\t\t\t\t\t\t\t\t\t</span>\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{ url && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-remove-button\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeControl( 0 );\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\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</Grid>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n};\n"],
5
+ "mappings": "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",
6
+ "names": ["mediaUtilsPrivateApis", "coreStore", "Grid"]
7
7
  }
@@ -1,11 +1,40 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Button, __experimentalGrid as Grid } from "@wordpress/components";
3
3
  import { useSelect } from "@wordpress/data";
4
- import { useCallback, useRef } from "@wordpress/element";
5
- import { MediaUpload } from "@wordpress/media-utils";
4
+ import { useCallback, useRef, useState } from "@wordpress/element";
5
+ import {
6
+ privateApis as mediaUtilsPrivateApis,
7
+ MediaUpload
8
+ } from "@wordpress/media-utils";
6
9
  import { lineSolid } from "@wordpress/icons";
7
10
  import { store as coreStore } from "@wordpress/core-data";
8
11
  import { __ } from "@wordpress/i18n";
12
+ import { unlock } from "../../lock-unlock";
13
+ const { MediaUploadModal } = unlock(mediaUtilsPrivateApis);
14
+ function ConditionalMediaUpload({ render, ...props }) {
15
+ const [isModalOpen, setIsModalOpen] = useState(false);
16
+ if (window.__experimentalDataViewsMediaModal) {
17
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
18
+ render && render({ open: () => setIsModalOpen(true) }),
19
+ /* @__PURE__ */ jsx(
20
+ MediaUploadModal,
21
+ {
22
+ ...props,
23
+ isOpen: isModalOpen,
24
+ onClose: () => {
25
+ setIsModalOpen(false);
26
+ props.onClose?.();
27
+ },
28
+ onSelect: (media) => {
29
+ setIsModalOpen(false);
30
+ props.onSelect?.(media);
31
+ }
32
+ }
33
+ )
34
+ ] });
35
+ }
36
+ return /* @__PURE__ */ jsx(MediaUpload, { ...props, render });
37
+ }
9
38
  const FeaturedImageEdit = ({
10
39
  data,
11
40
  field,
@@ -30,74 +59,77 @@ const FeaturedImageEdit = ({
30
59
  const title = media?.title?.rendered;
31
60
  const ref = useRef(null);
32
61
  return /* @__PURE__ */ jsx("fieldset", { className: "fields-controls__featured-image", children: /* @__PURE__ */ jsx("div", { className: "fields-controls__featured-image-container", children: /* @__PURE__ */ jsx(
33
- MediaUpload,
62
+ ConditionalMediaUpload,
34
63
  {
35
64
  onSelect: (selectedMedia) => {
36
65
  onChangeControl(selectedMedia.id);
37
66
  },
38
67
  allowedTypes: ["image"],
39
- render: ({ open }) => {
40
- return /* @__PURE__ */ jsx(
41
- "div",
42
- {
43
- ref,
44
- role: "button",
45
- tabIndex: -1,
46
- onClick: () => {
68
+ value,
69
+ title: __("Select Featured Image"),
70
+ render: ({ open }) => /* @__PURE__ */ jsx(
71
+ "div",
72
+ {
73
+ ref,
74
+ role: "button",
75
+ tabIndex: -1,
76
+ onClick: open,
77
+ onKeyDown: (event) => {
78
+ if (event.key === "Enter" || event.key === " ") {
79
+ event.preventDefault();
47
80
  open();
48
- },
49
- onKeyDown: open,
50
- children: /* @__PURE__ */ jsxs(
51
- Grid,
52
- {
53
- rowGap: 0,
54
- columnGap: 8,
55
- templateColumns: "24px 1fr 24px",
56
- children: [
57
- url && /* @__PURE__ */ jsxs(Fragment, { children: [
58
- /* @__PURE__ */ jsx(
59
- "img",
60
- {
61
- className: "fields-controls__featured-image-image",
62
- alt: "",
63
- width: 24,
64
- height: 24,
65
- src: url
66
- }
67
- ),
68
- /* @__PURE__ */ jsx("span", { className: "fields-controls__featured-image-title", children: title })
69
- ] }),
70
- !url && /* @__PURE__ */ jsxs(Fragment, { children: [
71
- /* @__PURE__ */ jsx(
72
- "span",
73
- {
74
- className: "fields-controls__featured-image-placeholder",
75
- style: {
76
- width: "24px",
77
- height: "24px"
78
- }
79
- }
80
- ),
81
- /* @__PURE__ */ jsx("span", { className: "fields-controls__featured-image-title", children: __("Choose an image\u2026") })
82
- ] }),
83
- url && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
84
- Button,
81
+ }
82
+ },
83
+ children: /* @__PURE__ */ jsxs(
84
+ Grid,
85
+ {
86
+ rowGap: 0,
87
+ columnGap: 8,
88
+ templateColumns: "24px 1fr 24px",
89
+ children: [
90
+ url && /* @__PURE__ */ jsxs(Fragment, { children: [
91
+ /* @__PURE__ */ jsx(
92
+ "img",
85
93
  {
86
- size: "small",
87
- className: "fields-controls__featured-image-remove-button",
88
- icon: lineSolid,
89
- onClick: (event) => {
90
- event.stopPropagation();
91
- onChangeControl(0);
94
+ className: "fields-controls__featured-image-image",
95
+ alt: "",
96
+ width: 24,
97
+ height: 24,
98
+ src: url
99
+ }
100
+ ),
101
+ /* @__PURE__ */ jsx("span", { className: "fields-controls__featured-image-title", children: title })
102
+ ] }),
103
+ !url && /* @__PURE__ */ jsxs(Fragment, { children: [
104
+ /* @__PURE__ */ jsx(
105
+ "span",
106
+ {
107
+ className: "fields-controls__featured-image-placeholder",
108
+ style: {
109
+ width: "24px",
110
+ height: "24px"
92
111
  }
93
112
  }
94
- ) })
95
- ]
96
- }
97
- )
98
- }
99
- );
100
- }
113
+ ),
114
+ /* @__PURE__ */ jsx("span", { className: "fields-controls__featured-image-title", children: __("Choose an image\u2026") })
115
+ ] }),
116
+ url && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
117
+ Button,
118
+ {
119
+ size: "small",
120
+ className: "fields-controls__featured-image-remove-button",
121
+ icon: lineSolid,
122
+ onClick: (event) => {
123
+ event.stopPropagation();
124
+ onChangeControl(0);
125
+ }
126
+ }
127
+ ) })
128
+ ]
129
+ }
130
+ )
131
+ }
132
+ )
101
133
  }
102
134
  ) }) });
103
135
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/fields/featured-image/featured-image-edit.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, __experimentalGrid as Grid } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useCallback, useRef } from '@wordpress/element';\n// @ts-ignore\nimport { MediaUpload } from '@wordpress/media-utils';\nimport { lineSolid } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataFormControlProps } from '@wordpress/dataviews';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { BasePostWithEmbeddedFeaturedMedia } from '../../types';\n\nexport const FeaturedImageEdit = ( {\n\tdata,\n\tfield,\n\tonChange,\n}: DataFormControlProps< BasePostWithEmbeddedFeaturedMedia > ) => {\n\tconst { id } = field;\n\n\tconst value = field.getValue( { item: data } );\n\n\tconst media = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecord } = select( coreStore );\n\t\t\treturn getEntityRecord( 'postType', 'attachment', value );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: number ) =>\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 url = media?.source_url;\n\tconst title = media?.title?.rendered;\n\tconst ref = useRef( null );\n\n\treturn (\n\t\t<fieldset className=\"fields-controls__featured-image\">\n\t\t\t<div className=\"fields-controls__featured-image-container\">\n\t\t\t\t<MediaUpload\n\t\t\t\t\tonSelect={ ( selectedMedia: { id: number } ) => {\n\t\t\t\t\t\tonChangeControl( selectedMedia.id );\n\t\t\t\t\t} }\n\t\t\t\t\tallowedTypes={ [ 'image' ] }\n\t\t\t\t\trender={ ( { open }: { open: () => void } ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ open }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr 24px\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-image\"\n\t\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\t\twidth={ 24 }\n\t\t\t\t\t\t\t\t\t\t\t\theight={ 24 }\n\t\t\t\t\t\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"fields-controls__featured-image-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-placeholder\"\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"fields-controls__featured-image-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Choose an image\u2026' ) }\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-remove-button\"\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeControl( 0 );\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n};\n"],
5
- "mappings": "AAwEU,mBACC,KADD;AArEV,SAAS,QAAQ,sBAAsB,YAAY;AACnD,SAAS,iBAAiB;AAC1B,SAAS,aAAa,cAAc;AAEpC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAOZ,MAAM,oBAAoB,CAAE;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACD,MAAkE;AACjE,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE;AAE7C,QAAM,QAAQ;AAAA,IACb,CAAE,WAAY;AACb,YAAM,EAAE,gBAAgB,IAAI,OAAQ,SAAU;AAC9C,aAAO,gBAAiB,YAAY,cAAc,KAAM;AAAA,IACzD;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,QAAM,kBAAkB;AAAA,IACvB,CAAE,aACD,SAAU;AAAA,MACT,CAAE,EAAG,GAAG;AAAA,IACT,CAAE;AAAA,IACH,CAAE,IAAI,QAAS;AAAA,EAChB;AAEA,QAAM,MAAM,OAAO;AACnB,QAAM,QAAQ,OAAO,OAAO;AAC5B,QAAM,MAAM,OAAQ,IAAK;AAEzB,SACC,oBAAC,cAAS,WAAU,mCACnB,8BAAC,SAAI,WAAU,6CACd;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAE,kBAAmC;AAC/C,wBAAiB,cAAc,EAAG;AAAA,MACnC;AAAA,MACA,cAAe,CAAE,OAAQ;AAAA,MACzB,QAAS,CAAE,EAAE,KAAK,MAA6B;AAC9C,eACC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,MAAK;AAAA,YACL,UAAW;AAAA,YACX,SAAU,MAAM;AACf,mBAAK;AAAA,YACN;AAAA,YACA,WAAY;AAAA,YAEZ;AAAA,cAAC;AAAA;AAAA,gBACA,QAAS;AAAA,gBACT,WAAY;AAAA,gBACZ,iBAAgB;AAAA,gBAEd;AAAA,yBACD,iCACC;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACA,WAAU;AAAA,wBACV,KAAI;AAAA,wBACJ,OAAQ;AAAA,wBACR,QAAS;AAAA,wBACT,KAAM;AAAA;AAAA,oBACP;AAAA,oBACA,oBAAC,UAAK,WAAU,yCACb,iBACH;AAAA,qBACD;AAAA,kBAEC,CAAE,OACH,iCACC;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACA,WAAU;AAAA,wBACV,OAAQ;AAAA,0BACP,OAAO;AAAA,0BACP,QAAQ;AAAA,wBACT;AAAA;AAAA,oBACD;AAAA,oBACA,oBAAC,UAAK,WAAU,yCACb,aAAI,uBAAmB,GAC1B;AAAA,qBACD;AAAA,kBAEC,OACD,gCACC;AAAA,oBAAC;AAAA;AAAA,sBACA,MAAK;AAAA,sBACL,WAAU;AAAA,sBACV,MAAO;AAAA,sBACP,SAAU,CACT,UACI;AACJ,8BAAM,gBAAgB;AACtB,wCAAiB,CAAE;AAAA,sBACpB;AAAA;AAAA,kBACD,GACD;AAAA;AAAA;AAAA,YAEF;AAAA;AAAA,QACD;AAAA,MAEF;AAAA;AAAA,EACD,GACD,GACD;AAEF;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, __experimentalGrid as Grid } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useCallback, useRef, useState } from '@wordpress/element';\nimport {\n\tprivateApis as mediaUtilsPrivateApis,\n\tMediaUpload,\n} from '@wordpress/media-utils';\nimport { lineSolid } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport type { DataFormControlProps } from '@wordpress/dataviews';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { BasePostWithEmbeddedFeaturedMedia } from '../../types';\nimport { unlock } from '../../lock-unlock';\n\nconst { MediaUploadModal } = unlock( mediaUtilsPrivateApis );\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to media-utils MediaUpload.\n *\n * @param {Object} root0 Component props.\n * @param {Function} root0.render Render prop function that receives { open } object.\n * @param {Object} root0.props Other props passed to the media upload component.\n * @return {JSX.Element} The component.\n */\nfunction ConditionalMediaUpload( { render, ...props }: any ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tif ( ( window as any ).__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t<MediaUploadModal\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ ( media: any ) => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\t// Fallback to media-utils MediaUpload when experiment is disabled\n\treturn <MediaUpload { ...props } render={ render } />;\n}\n\nexport const FeaturedImageEdit = ( {\n\tdata,\n\tfield,\n\tonChange,\n}: DataFormControlProps< BasePostWithEmbeddedFeaturedMedia > ) => {\n\tconst { id } = field;\n\n\tconst value = field.getValue( { item: data } );\n\n\tconst media = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecord } = select( coreStore );\n\t\t\treturn getEntityRecord( 'postType', 'attachment', value );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: number ) =>\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 url = media?.source_url;\n\tconst title = media?.title?.rendered;\n\tconst ref = useRef( null );\n\n\treturn (\n\t\t<fieldset className=\"fields-controls__featured-image\">\n\t\t\t<div className=\"fields-controls__featured-image-container\">\n\t\t\t\t<ConditionalMediaUpload\n\t\t\t\t\tonSelect={ ( selectedMedia: any ) => {\n\t\t\t\t\t\tonChangeControl( selectedMedia.id );\n\t\t\t\t\t} }\n\t\t\t\t\tallowedTypes={ [ 'image' ] }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\ttitle={ __( 'Select Featured Image' ) }\n\t\t\t\t\trender={ ( { open }: any ) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tevent.key === 'Enter' ||\n\t\t\t\t\t\t\t\t\tevent.key === ' '\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr 24px\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-image\"\n\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\twidth={ 24 }\n\t\t\t\t\t\t\t\t\t\t\theight={ 24 }\n\t\t\t\t\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"fields-controls__featured-image-title\">\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</span>\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{ ! url && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-placeholder\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"fields-controls__featured-image-title\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Choose an image\u2026' ) }\n\t\t\t\t\t\t\t\t\t\t</span>\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{ url && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"fields-controls__featured-image-remove-button\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\t\t\t\t\tevent: React.MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeControl( 0 );\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\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</Grid>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1 +1 @@
1
- {"version":3,"file":"featured-image-edit.d.ts","sourceRoot":"","sources":["../../../src/fields/featured-image/featured-image-edit.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGjE;;GAEG;AACH,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAC;AAErE,eAAO,MAAM,iBAAiB,+BAI3B,oBAAoB,CAAE,iCAAiC,CAAE,gCAoG3D,CAAC"}
1
+ {"version":3,"file":"featured-image-edit.d.ts","sourceRoot":"","sources":["../../../src/fields/featured-image/featured-image-edit.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGjE;;GAEG;AACH,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAC;AAyCrE,eAAO,MAAM,iBAAiB,+BAI3B,oBAAoB,CAAE,iCAAiC,CAAE,gCA0G3D,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/fields",
3
- "version": "0.25.3",
3
+ "version": "0.26.0",
4
4
  "description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -39,30 +39,30 @@
39
39
  "src/**/*.scss"
40
40
  ],
41
41
  "dependencies": {
42
- "@wordpress/api-fetch": "^7.33.1",
43
- "@wordpress/base-styles": "^6.9.1",
44
- "@wordpress/blob": "^4.33.1",
45
- "@wordpress/block-editor": "^15.6.1",
46
- "@wordpress/blocks": "^15.6.1",
47
- "@wordpress/components": "^30.6.1",
48
- "@wordpress/compose": "^7.33.1",
49
- "@wordpress/core-data": "^7.33.1",
50
- "@wordpress/data": "^10.33.1",
51
- "@wordpress/dataviews": "^10.1.1",
52
- "@wordpress/date": "^5.33.1",
53
- "@wordpress/element": "^6.33.1",
54
- "@wordpress/hooks": "^4.33.1",
55
- "@wordpress/html-entities": "^4.33.1",
56
- "@wordpress/i18n": "^6.6.1",
57
- "@wordpress/icons": "^11.0.1",
58
- "@wordpress/media-utils": "^5.33.1",
59
- "@wordpress/notices": "^5.33.1",
60
- "@wordpress/patterns": "^2.33.1",
61
- "@wordpress/primitives": "^4.33.1",
62
- "@wordpress/private-apis": "^1.33.1",
63
- "@wordpress/router": "^1.33.1",
64
- "@wordpress/url": "^4.33.1",
65
- "@wordpress/warning": "^3.33.1",
42
+ "@wordpress/api-fetch": "^7.34.0",
43
+ "@wordpress/base-styles": "^6.10.0",
44
+ "@wordpress/blob": "^4.34.0",
45
+ "@wordpress/block-editor": "^15.7.0",
46
+ "@wordpress/blocks": "^15.7.0",
47
+ "@wordpress/components": "^30.7.0",
48
+ "@wordpress/compose": "^7.34.0",
49
+ "@wordpress/core-data": "^7.34.0",
50
+ "@wordpress/data": "^10.34.0",
51
+ "@wordpress/dataviews": "^10.2.0",
52
+ "@wordpress/date": "^5.34.0",
53
+ "@wordpress/element": "^6.34.0",
54
+ "@wordpress/hooks": "^4.34.0",
55
+ "@wordpress/html-entities": "^4.34.0",
56
+ "@wordpress/i18n": "^6.7.0",
57
+ "@wordpress/icons": "^11.1.0",
58
+ "@wordpress/media-utils": "^5.34.0",
59
+ "@wordpress/notices": "^5.34.0",
60
+ "@wordpress/patterns": "^2.34.0",
61
+ "@wordpress/primitives": "^4.34.0",
62
+ "@wordpress/private-apis": "^1.34.0",
63
+ "@wordpress/router": "^1.34.0",
64
+ "@wordpress/url": "^4.34.0",
65
+ "@wordpress/warning": "^3.34.0",
66
66
  "change-case": "4.1.2",
67
67
  "client-zip": "^2.4.5",
68
68
  "clsx": "2.1.1",
@@ -74,5 +74,5 @@
74
74
  "publishConfig": {
75
75
  "access": "public"
76
76
  },
77
- "gitHead": "5f84bafdec1bed05247c1080c12f6a237951b862"
77
+ "gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
78
78
  }