@wordpress/media-fields 0.1.1-next.738bb1424.0 → 0.2.0

package/build/alt_text/{index.cjs → index.js}

@@ -39,7 +39,8 @@ var altTextField = {
         label: field.label,
         value: data.alt_text || "",
         onChange: (value) => onChange({ alt_text: value }),
-        rows: 2
+        rows: 2,
+        __nextHasNoMarginBottom: true
       }
     );
   },
@@ -47,4 +48,4 @@ var altTextField = {
   filterBy: false
 };
 var alt_text_default = altTextField;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/alt_text/{index.cjs.map → index.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alt_text/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Field } from '@wordpress/dataviews';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\n\nconst altTextField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'alt_text',\n\ttype: 'text',\n\tlabel: __( 'Alt text' ),\n\tisVisible: ( item ) => item?.media_type === 'image',\n\trender: ( { item } ) => item?.alt_text || '-',\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ data.alt_text || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { alt_text: value } ) }\n\t\t\t\trows={ 2 }\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default altTextField;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAgC;AAY7B;AARH,IAAM,eAA4D;AAAA,EACjE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,UAAW;AAAA,EACtB,WAAW,CAAE,SAAU,MAAM,eAAe;AAAA,EAC5C,QAAQ,CAAE,EAAE,KAAK,MAAO,MAAM,YAAY;AAAA,EAC1C,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,OAAQ,KAAK,YAAY;AAAA,QACzB,UAAW,CAAE,UAAW,SAAU,EAAE,UAAU,MAAM,CAAE;AAAA,QACtD,MAAO;AAAA;AAAA,IACR;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,mBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Field } from '@wordpress/dataviews';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\n\nconst altTextField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'alt_text',\n\ttype: 'text',\n\tlabel: __( 'Alt text' ),\n\tisVisible: ( item ) => item?.media_type === 'image',\n\trender: ( { item } ) => item?.alt_text || '-',\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ data.alt_text || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { alt_text: value } ) }\n\t\t\t\trows={ 2 }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default altTextField;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAgC;AAY7B;AARH,IAAM,eAA4D;AAAA,EACjE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,UAAW;AAAA,EACtB,WAAW,CAAE,SAAU,MAAM,eAAe;AAAA,EAC5C,QAAQ,CAAE,EAAE,KAAK,MAAO,MAAM,YAAY;AAAA,EAC1C,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,OAAQ,KAAK,YAAY;AAAA,QACzB,UAAW,CAAE,UAAW,SAAU,EAAE,UAAU,MAAM,CAAE;AAAA,QACtD,MAAO;AAAA,QACP,yBAAuB;AAAA;AAAA,IACxB;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,mBAAQ;",
   "names": []
 }

package/build/caption/{index.cjs → index.js}

@@ -25,7 +25,7 @@ __export(caption_exports, {
 module.exports = __toCommonJS(caption_exports);
 var import_i18n = require("@wordpress/i18n");
 var import_components = require("@wordpress/components");
-var import_get_raw_content = require("../utils/get-raw-content.cjs");
+var import_get_raw_content = require("../utils/get-raw-content");
 var import_jsx_runtime = require("react/jsx-runtime");
 var captionField = {
   id: "caption",
@@ -40,7 +40,8 @@ var captionField = {
         label: field.label,
         value: (0, import_get_raw_content.getRawContent)(data.caption) || "",
         onChange: (value) => onChange({ caption: value }),
-        rows: 2
+        rows: 2,
+        __nextHasNoMarginBottom: true
       }
     );
   },
@@ -48,4 +49,4 @@ var captionField = {
   filterBy: false
 };
 var caption_default = captionField;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/caption/{index.cjs.map → index.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/caption/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getRawContent } from '../utils/get-raw-content';\n\nconst captionField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'caption',\n\ttype: 'text',\n\tlabel: __( 'Caption' ),\n\tgetValue: ( { item } ) => getRawContent( item?.caption ),\n\trender: ( { item } ) => getRawContent( item?.caption ) || '-',\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ getRawContent( data.caption ) || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { caption: value } ) }\n\t\t\t\trows={ 2 }\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default captionField;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAgC;AAOhC,6BAA8B;AAU3B;AARH,IAAM,eAA4D;AAAA,EACjE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,SAAU;AAAA,EACrB,UAAU,CAAE,EAAE,KAAK,UAAO,sCAAe,MAAM,OAAQ;AAAA,EACvD,QAAQ,CAAE,EAAE,KAAK,UAAO,sCAAe,MAAM,OAAQ,KAAK;AAAA,EAC1D,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,WAAQ,sCAAe,KAAK,OAAQ,KAAK;AAAA,QACzC,UAAW,CAAE,UAAW,SAAU,EAAE,SAAS,MAAM,CAAE;AAAA,QACrD,MAAO;AAAA;AAAA,IACR;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getRawContent } from '../utils/get-raw-content';\n\nconst captionField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'caption',\n\ttype: 'text',\n\tlabel: __( 'Caption' ),\n\tgetValue: ( { item } ) => getRawContent( item?.caption ),\n\trender: ( { item } ) => getRawContent( item?.caption ) || '-',\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ getRawContent( data.caption ) || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { caption: value } ) }\n\t\t\t\trows={ 2 }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default captionField;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAgC;AAOhC,6BAA8B;AAU3B;AARH,IAAM,eAA4D;AAAA,EACjE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,SAAU;AAAA,EACrB,UAAU,CAAE,EAAE,KAAK,UAAO,sCAAe,MAAM,OAAQ;AAAA,EACvD,QAAQ,CAAE,EAAE,KAAK,UAAO,sCAAe,MAAM,OAAQ,KAAK;AAAA,EAC1D,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,WAAQ,sCAAe,KAAK,OAAQ,KAAK;AAAA,QACzC,UAAW,CAAE,UAAW,SAAU,EAAE,SAAS,MAAM,CAAE;AAAA,QACrD,MAAO;AAAA,QACP,yBAAuB;AAAA;AAAA,IACxB;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/build/description/{index.cjs → index.js}

@@ -25,7 +25,7 @@ __export(description_exports, {
 module.exports = __toCommonJS(description_exports);
 var import_i18n = require("@wordpress/i18n");
 var import_components = require("@wordpress/components");
-var import_get_raw_content = require("../utils/get-raw-content.cjs");
+var import_get_raw_content = require("../utils/get-raw-content");
 var import_jsx_runtime = require("react/jsx-runtime");
 var descriptionField = {
   id: "description",
@@ -40,7 +40,8 @@ var descriptionField = {
         label: field.label,
         value: (0, import_get_raw_content.getRawContent)(data.description) || "",
         onChange: (value) => onChange({ description: value }),
-        rows: 5
+        rows: 5,
+        __nextHasNoMarginBottom: true
       }
     );
   },
@@ -48,4 +49,4 @@ var descriptionField = {
   filterBy: false
 };
 var description_default = descriptionField;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/description/{index.cjs.map → index.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/description/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getRawContent } from '../utils/get-raw-content';\n\nconst descriptionField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'description',\n\ttype: 'text',\n\tlabel: __( 'Description' ),\n\tgetValue: ( { item } ) => getRawContent( item?.description ),\n\trender: ( { item } ) => (\n\t\t<div>{ getRawContent( item?.description ) || '-' }</div>\n\t),\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ getRawContent( data.description ) || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { description: value } ) }\n\t\t\t\trows={ 5 }\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default descriptionField;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAgC;AAOhC,6BAA8B;AAQ5B;AANF,IAAM,mBAAgE;AAAA,EACrE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,aAAc;AAAA,EACzB,UAAU,CAAE,EAAE,KAAK,UAAO,sCAAe,MAAM,WAAY;AAAA,EAC3D,QAAQ,CAAE,EAAE,KAAK,MAChB,4CAAC,SAAM,oDAAe,MAAM,WAAY,KAAK,KAAK;AAAA,EAEnD,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,WAAQ,sCAAe,KAAK,WAAY,KAAK;AAAA,QAC7C,UAAW,CAAE,UAAW,SAAU,EAAE,aAAa,MAAM,CAAE;AAAA,QACzD,MAAO;AAAA;AAAA,IACR;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getRawContent } from '../utils/get-raw-content';\n\nconst descriptionField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'description',\n\ttype: 'text',\n\tlabel: __( 'Description' ),\n\tgetValue: ( { item } ) => getRawContent( item?.description ),\n\trender: ( { item } ) => (\n\t\t<div>{ getRawContent( item?.description ) || '-' }</div>\n\t),\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ getRawContent( data.description ) || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { description: value } ) }\n\t\t\t\trows={ 5 }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default descriptionField;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAgC;AAOhC,6BAA8B;AAQ5B;AANF,IAAM,mBAAgE;AAAA,EACrE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAO,gBAAI,aAAc;AAAA,EACzB,UAAU,CAAE,EAAE,KAAK,UAAO,sCAAe,MAAM,WAAY;AAAA,EAC3D,QAAQ,CAAE,EAAE,KAAK,MAChB,4CAAC,SAAM,oDAAe,MAAM,WAAY,KAAK,KAAK;AAAA,EAEnD,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,WAAQ,sCAAe,KAAK,WAAY,KAAK;AAAA,QAC7C,UAAW,CAAE,UAAW,SAAU,EAAE,aAAa,MAAM,CAAE;AAAA,QACzD,MAAO;AAAA,QACP,yBAAuB;AAAA;AAAA,IACxB;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,sBAAQ;",
   "names": []
 }

package/build/filename/{index.cjs → index.js}

@@ -35,7 +35,7 @@ __export(filename_exports, {
 module.exports = __toCommonJS(filename_exports);
 var import_i18n = require("@wordpress/i18n");
 var import_url = require("@wordpress/url");
-var import_view = __toESM(require("./view.cjs"), 1);
+var import_view = __toESM(require("./view"));
 var filenameField = {
   id: "filename",
   type: "text",
@@ -47,4 +47,4 @@ var filenameField = {
   readOnly: true
 };
 var filename_default = filenameField;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/filename/{view.cjs → view.js}

@@ -40,4 +40,4 @@ function FileNameView({
   }
   return fileName.length > TRUNCATE_LENGTH ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: fileName }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fileName });
 }
-//# sourceMappingURL=view.cjs.map
+//# sourceMappingURL=view.js.map

package/build/filesize/{index.cjs → index.js}

@@ -87,4 +87,4 @@ var filesizeField = {
   readOnly: true
 };
 var filesize_default = filesizeField;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/{index.cjs → index.js}

@@ -40,14 +40,14 @@ __export(index_exports, {
   mimeTypeField: () => import_mime_type.default
 });
 module.exports = __toCommonJS(index_exports);
-var import_alt_text = __toESM(require("./alt_text/index.cjs"), 1);
-var import_caption = __toESM(require("./caption/index.cjs"), 1);
-var import_description = __toESM(require("./description/index.cjs"), 1);
-var import_filename = __toESM(require("./filename/index.cjs"), 1);
-var import_filesize = __toESM(require("./filesize/index.cjs"), 1);
-var import_media_dimensions = __toESM(require("./media_dimensions/index.cjs"), 1);
-var import_media_thumbnail = __toESM(require("./media_thumbnail/index.cjs"), 1);
-var import_mime_type = __toESM(require("./mime_type/index.cjs"), 1);
+var import_alt_text = __toESM(require("./alt_text"));
+var import_caption = __toESM(require("./caption"));
+var import_description = __toESM(require("./description"));
+var import_filename = __toESM(require("./filename"));
+var import_filesize = __toESM(require("./filesize"));
+var import_media_dimensions = __toESM(require("./media_dimensions"));
+var import_media_thumbnail = __toESM(require("./media_thumbnail"));
+var import_mime_type = __toESM(require("./mime_type"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   altTextField,
@@ -59,4 +59,4 @@ var import_mime_type = __toESM(require("./mime_type/index.cjs"), 1);
   mediaThumbnailField,
   mimeTypeField
 });
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/media_dimensions/{index.cjs → index.js}

@@ -42,4 +42,4 @@ var mediaDimensionsField = {
   readOnly: true
 };
 var media_dimensions_default = mediaDimensionsField;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/media_thumbnail/{index.cjs → index.js}

@@ -34,7 +34,7 @@ __export(media_thumbnail_exports, {
 });
 module.exports = __toCommonJS(media_thumbnail_exports);
 var import_i18n = require("@wordpress/i18n");
-var import_view = __toESM(require("./view.cjs"), 1);
+var import_view = __toESM(require("./view"));
 var mediaThumbnailField = {
   id: "media_thumbnail",
   type: "media",
@@ -44,4 +44,4 @@ var mediaThumbnailField = {
   filterBy: false
 };
 var media_thumbnail_default = mediaThumbnailField;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/media_thumbnail/{view.cjs → view.js}

@@ -26,40 +26,13 @@ module.exports = __toCommonJS(view_exports);
 var import_data = require("@wordpress/data");
 var import_core_data = require("@wordpress/core-data");
 var import_components = require("@wordpress/components");
-var import_element = require("@wordpress/element");
 var import_url = require("@wordpress/url");
-var import_get_media_type_from_mime_type = require("../utils/get-media-type-from-mime-type.cjs");
+var import_get_media_type_from_mime_type = require("../utils/get-media-type-from-mime-type");
 var import_jsx_runtime = require("react/jsx-runtime");
-function FallbackView({
-  item,
-  filename
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-media-field__media-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_components.__experimentalVStack,
-    {
-      justify: "center",
-      alignment: "center",
-      className: "dataviews-media-field__media-thumbnail__stack",
-      spacing: 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.Icon,
-          {
-            className: "dataviews-media-field__media-thumbnail--icon",
-            icon: (0, import_get_media_type_from_mime_type.getMediaTypeFromMimeType)(item.mime_type).icon,
-            size: 24
-          }
-        ),
-        !!filename && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-media-field__media-thumbnail__filename", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { className: "dataviews-media-field__media-thumbnail__filename__truncate", children: filename }) })
-      ]
-    }
-  ) });
-}
 function MediaThumbnailView({
   item,
   config
 }) {
-  const [imageError, setImageError] = (0, import_element.useState)(false);
   const _featuredMedia = (0, import_data.useSelect)(
     (select) => {
       if (!item.featured_media) {
@@ -78,23 +51,44 @@ function MediaThumbnailView({
     return null;
   }
   const filename = (0, import_url.getFilename)(featuredMedia.source_url || "");
-  if (imageError || (0, import_get_media_type_from_mime_type.getMediaTypeFromMimeType)(featuredMedia.mime_type).type !== "image") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackView, { item: featuredMedia, filename: filename || "" });
+  if (
+    // Ensure the featured media is an image.
+    (0, import_get_media_type_from_mime_type.getMediaTypeFromMimeType)(featuredMedia.mime_type).type === "image"
+  ) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-media-field__media-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        className: "dataviews-media-field__media-thumbnail--image",
+        src: featuredMedia.source_url,
+        srcSet: featuredMedia?.media_details?.sizes ? Object.values(
+          featuredMedia.media_details.sizes
+        ).map(
+          (size) => `${size.source_url} ${size.width}w`
+        ).join(", ") : void 0,
+        sizes: config?.sizes || "100vw",
+        alt: featuredMedia.alt_text || featuredMedia.title.raw
+      }
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-media-field__media-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "img",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-media-field__media-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
     {
-      className: "dataviews-media-field__media-thumbnail--image",
-      src: featuredMedia.source_url,
-      srcSet: featuredMedia?.media_details?.sizes ? Object.values(
-        featuredMedia.media_details.sizes
-      ).map(
-        (size) => `${size.source_url} ${size.width}w`
-      ).join(", ") : void 0,
-      sizes: config?.sizes || "100vw",
-      alt: featuredMedia.alt_text || featuredMedia.title.raw,
-      onError: () => setImageError(true)
+      justify: "center",
+      alignment: "center",
+      className: "dataviews-media-field__media-thumbnail__stack",
+      spacing: 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Icon,
+          {
+            className: "dataviews-media-field__media-thumbnail--icon",
+            icon: (0, import_get_media_type_from_mime_type.getMediaTypeFromMimeType)(item.mime_type).icon,
+            size: 24
+          }
+        ),
+        !!filename && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-media-field__media-thumbnail__filename", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { className: "dataviews-media-field__media-thumbnail__filename__truncate", children: filename }) })
+      ]
     }
   ) });
 }
-//# sourceMappingURL=view.cjs.map
+//# sourceMappingURL=view.js.map

package/build/media_thumbnail/view.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/media_thumbnail/view.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\t__experimentalTruncate as Truncate,\n\t__experimentalVStack as VStack,\n\tIcon,\n} from '@wordpress/components';\nimport type { Attachment } from '@wordpress/core-data';\nimport { getFilename } from '@wordpress/url';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\n/**\n * Internal dependencies\n */\nimport { getMediaTypeFromMimeType } from '../utils/get-media-type-from-mime-type';\nimport type { MediaItem } from '../types';\n\nexport default function MediaThumbnailView( {\n\titem,\n\tconfig,\n}: DataViewRenderFieldProps< MediaItem > ) {\n\tconst _featuredMedia = useSelect(\n\t\t( select ) => {\n\t\t\t// Avoid the network request if it's not needed. `featured_media` is\n\t\t\t// 0 for images and media without featured media.\n\t\t\tif ( ! item.featured_media ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\treturn select( coreStore ).getEntityRecord< Attachment >(\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\titem.featured_media\n\t\t\t);\n\t\t},\n\t\t[ item.featured_media ]\n\t);\n\tconst featuredMedia = item.featured_media ? _featuredMedia : item;\n\n\t// Fetching.\n\tif ( ! featuredMedia ) {\n\t\treturn null;\n\t}\n\n\tconst filename = getFilename( featuredMedia.source_url || '' );\n\n\tif (\n\t\t// Ensure the featured media is an image.\n\t\tgetMediaTypeFromMimeType( featuredMedia.mime_type ).type === 'image'\n\t) {\n\t\treturn (\n\t\t\t<div className=\"dataviews-media-field__media-thumbnail\">\n\t\t\t\t<img\n\t\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail--image\"\n\t\t\t\t\tsrc={ featuredMedia.source_url }\n\t\t\t\t\tsrcSet={\n\t\t\t\t\t\tfeaturedMedia?.media_details?.sizes\n\t\t\t\t\t\t\t? (\n\t\t\t\t\t\t\t\t\tObject.values(\n\t\t\t\t\t\t\t\t\t\tfeaturedMedia.media_details.sizes\n\t\t\t\t\t\t\t\t\t) as Array< {\n\t\t\t\t\t\t\t\t\t\tsource_url: string;\n\t\t\t\t\t\t\t\t\t\twidth: number;\n\t\t\t\t\t\t\t\t\t} >\n\t\t\t\t\t\t\t   )\n\t\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t\t( size ) =>\n\t\t\t\t\t\t\t\t\t\t\t`${ size.source_url } ${ size.width }w`\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t.join( ', ' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tsizes={ config?.sizes || '100vw' }\n\t\t\t\t\talt={ featuredMedia.alt_text || featuredMedia.title.raw }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"dataviews-media-field__media-thumbnail\">\n\t\t\t<VStack\n\t\t\t\tjustify=\"center\"\n\t\t\t\talignment=\"center\"\n\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail__stack\"\n\t\t\t\tspacing={ 0 }\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"dataviews-media-field__media-thumbnail--icon\"\n\t\t\t\t\ticon={ getMediaTypeFromMimeType( item.mime_type ).icon }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t/>\n\t\t\t\t{ !! filename && (\n\t\t\t\t\t<div className=\"dataviews-media-field__media-thumbnail__filename\">\n\t\t\t\t\t\t<Truncate className=\"dataviews-media-field__media-thumbnail__filename__truncate\">\n\t\t\t\t\t\t\t{ filename }\n\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA0B;AAC1B,uBAAmC;AACnC,wBAIO;AAEP,iBAA4B;AAK5B,2CAAyC;AAqCrC;AAlCW,SAAR,mBAAqC;AAAA,EAC3C;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,qBAAiB;AAAA,IACtB,CAAE,WAAY;AAGb,UAAK,CAAE,KAAK,gBAAiB;AAC5B;AAAA,MACD;AACA,aAAO,OAAQ,iBAAAA,KAAU,EAAE;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,KAAK;AAAA,MACN;AAAA,IACD;AAAA,IACA,CAAE,KAAK,cAAe;AAAA,EACvB;AACA,QAAM,gBAAgB,KAAK,iBAAiB,iBAAiB;AAG7D,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,QAAM,eAAW,wBAAa,cAAc,cAAc,EAAG;AAE7D;AAAA;AAAA,QAEC,+DAA0B,cAAc,SAAU,EAAE,SAAS;AAAA,IAC5D;AACD,WACC,4CAAC,SAAI,WAAU,0CACd;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,KAAM,cAAc;AAAA,QACpB,QACC,eAAe,eAAe,QAE3B,OAAO;AAAA,UACN,cAAc,cAAc;AAAA,QAC7B,EAKC;AAAA,UACA,CAAE,SACD,GAAI,KAAK,UAAW,IAAK,KAAK,KAAM;AAAA,QACtC,EACC,KAAM,IAAK,IACZ;AAAA,QAEJ,OAAQ,QAAQ,SAAS;AAAA,QACzB,KAAM,cAAc,YAAY,cAAc,MAAM;AAAA;AAAA,IACrD,GACD;AAAA,EAEF;AAEA,SACC,4CAAC,SAAI,WAAU,0CACd;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,WAAU;AAAA,MACV,SAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,UAAO,+DAA0B,KAAK,SAAU,EAAE;AAAA,YAClD,MAAO;AAAA;AAAA,QACR;AAAA,QACE,CAAC,CAAE,YACJ,4CAAC,SAAI,WAAU,oDACd,sDAAC,kBAAAC,wBAAA,EAAS,WAAU,8DACjB,oBACH,GACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF;",
+  "names": ["coreStore", "VStack", "Truncate"]
+}

package/build/mime_type/{index.cjs → index.js}

@@ -35,4 +35,4 @@ var mimeTypeField = {
   readOnly: true
 };
 var mime_type_default = mimeTypeField;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.js.map

package/build/{types.cjs → types.js}

@@ -16,4 +16,4 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/media-fields/src/types.ts
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.cjs.map
+//# sourceMappingURL=types.js.map

package/build/utils/{get-media-type-from-mime-type.cjs → get-media-type-from-mime-type.js}

@@ -57,4 +57,4 @@ function getMediaTypeFromMimeType(mimeType) {
 0 && (module.exports = {
   getMediaTypeFromMimeType
 });
-//# sourceMappingURL=get-media-type-from-mime-type.cjs.map
+//# sourceMappingURL=get-media-type-from-mime-type.js.map

package/build/utils/{get-raw-content.cjs → get-raw-content.js}

@@ -39,4 +39,4 @@ function getRawContent(content) {
 0 && (module.exports = {
   getRawContent
 });
-//# sourceMappingURL=get-raw-content.cjs.map
+//# sourceMappingURL=get-raw-content.js.map

package/build/utils/{get-rendered-content.cjs → get-rendered-content.js}

@@ -39,4 +39,4 @@ function getRenderedContent(content) {
 0 && (module.exports = {
   getRenderedContent
 });
-//# sourceMappingURL=get-rendered-content.cjs.map
+//# sourceMappingURL=get-rendered-content.js.map

package/build-module/alt_text/index.js

@@ -15,7 +15,8 @@ var altTextField = {
         label: field.label,
         value: data.alt_text || "",
         onChange: (value) => onChange({ alt_text: value }),
-        rows: 2
+        rows: 2,
+        __nextHasNoMarginBottom: true
       }
     );
   },

package/build-module/alt_text/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alt_text/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Field } from '@wordpress/dataviews';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\n\nconst altTextField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'alt_text',\n\ttype: 'text',\n\tlabel: __( 'Alt text' ),\n\tisVisible: ( item ) => item?.media_type === 'image',\n\trender: ( { item } ) => item?.alt_text || '-',\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ data.alt_text || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { alt_text: value } ) }\n\t\t\t\trows={ 2 }\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default altTextField;\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAY7B;AARH,IAAM,eAA4D;AAAA,EACjE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,UAAW;AAAA,EACtB,WAAW,CAAE,SAAU,MAAM,eAAe;AAAA,EAC5C,QAAQ,CAAE,EAAE,KAAK,MAAO,MAAM,YAAY;AAAA,EAC1C,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,OAAQ,KAAK,YAAY;AAAA,QACzB,UAAW,CAAE,UAAW,SAAU,EAAE,UAAU,MAAM,CAAE;AAAA,QACtD,MAAO;AAAA;AAAA,IACR;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,mBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Field } from '@wordpress/dataviews';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\n\nconst altTextField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'alt_text',\n\ttype: 'text',\n\tlabel: __( 'Alt text' ),\n\tisVisible: ( item ) => item?.media_type === 'image',\n\trender: ( { item } ) => item?.alt_text || '-',\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ data.alt_text || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { alt_text: value } ) }\n\t\t\t\trows={ 2 }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default altTextField;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAY7B;AARH,IAAM,eAA4D;AAAA,EACjE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,UAAW;AAAA,EACtB,WAAW,CAAE,SAAU,MAAM,eAAe;AAAA,EAC5C,QAAQ,CAAE,EAAE,KAAK,MAAO,MAAM,YAAY;AAAA,EAC1C,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,OAAQ,KAAK,YAAY;AAAA,QACzB,UAAW,CAAE,UAAW,SAAU,EAAE,UAAU,MAAM,CAAE;AAAA,QACtD,MAAO;AAAA,QACP,yBAAuB;AAAA;AAAA,IACxB;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,mBAAQ;",
   "names": []
 }

package/build-module/caption/index.js

@@ -1,7 +1,7 @@
 // packages/media-fields/src/caption/index.tsx
 import { __ } from "@wordpress/i18n";
 import { TextareaControl } from "@wordpress/components";
-import { getRawContent } from "../utils/get-raw-content.js";
+import { getRawContent } from "../utils/get-raw-content";
 import { jsx } from "react/jsx-runtime";
 var captionField = {
   id: "caption",
@@ -16,7 +16,8 @@ var captionField = {
         label: field.label,
         value: getRawContent(data.caption) || "",
         onChange: (value) => onChange({ caption: value }),
-        rows: 2
+        rows: 2,
+        __nextHasNoMarginBottom: true
       }
     );
   },

package/build-module/caption/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/caption/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getRawContent } from '../utils/get-raw-content';\n\nconst captionField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'caption',\n\ttype: 'text',\n\tlabel: __( 'Caption' ),\n\tgetValue: ( { item } ) => getRawContent( item?.caption ),\n\trender: ( { item } ) => getRawContent( item?.caption ) || '-',\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ getRawContent( data.caption ) || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { caption: value } ) }\n\t\t\t\trows={ 2 }\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default captionField;\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAOhC,SAAS,qBAAqB;AAU3B;AARH,IAAM,eAA4D;AAAA,EACjE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,SAAU;AAAA,EACrB,UAAU,CAAE,EAAE,KAAK,MAAO,cAAe,MAAM,OAAQ;AAAA,EACvD,QAAQ,CAAE,EAAE,KAAK,MAAO,cAAe,MAAM,OAAQ,KAAK;AAAA,EAC1D,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,OAAQ,cAAe,KAAK,OAAQ,KAAK;AAAA,QACzC,UAAW,CAAE,UAAW,SAAU,EAAE,SAAS,MAAM,CAAE;AAAA,QACrD,MAAO;AAAA;AAAA,IACR;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getRawContent } from '../utils/get-raw-content';\n\nconst captionField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'caption',\n\ttype: 'text',\n\tlabel: __( 'Caption' ),\n\tgetValue: ( { item } ) => getRawContent( item?.caption ),\n\trender: ( { item } ) => getRawContent( item?.caption ) || '-',\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ getRawContent( data.caption ) || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { caption: value } ) }\n\t\t\t\trows={ 2 }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default captionField;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAOhC,SAAS,qBAAqB;AAU3B;AARH,IAAM,eAA4D;AAAA,EACjE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,SAAU;AAAA,EACrB,UAAU,CAAE,EAAE,KAAK,MAAO,cAAe,MAAM,OAAQ;AAAA,EACvD,QAAQ,CAAE,EAAE,KAAK,MAAO,cAAe,MAAM,OAAQ,KAAK;AAAA,EAC1D,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,OAAQ,cAAe,KAAK,OAAQ,KAAK;AAAA,QACzC,UAAW,CAAE,UAAW,SAAU,EAAE,SAAS,MAAM,CAAE;AAAA,QACrD,MAAO;AAAA,QACP,yBAAuB;AAAA;AAAA,IACxB;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/build-module/description/index.js

@@ -1,7 +1,7 @@
 // packages/media-fields/src/description/index.tsx
 import { __ } from "@wordpress/i18n";
 import { TextareaControl } from "@wordpress/components";
-import { getRawContent } from "../utils/get-raw-content.js";
+import { getRawContent } from "../utils/get-raw-content";
 import { jsx } from "react/jsx-runtime";
 var descriptionField = {
   id: "description",
@@ -16,7 +16,8 @@ var descriptionField = {
         label: field.label,
         value: getRawContent(data.description) || "",
         onChange: (value) => onChange({ description: value }),
-        rows: 5
+        rows: 5,
+        __nextHasNoMarginBottom: true
       }
     );
   },

package/build-module/description/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/description/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getRawContent } from '../utils/get-raw-content';\n\nconst descriptionField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'description',\n\ttype: 'text',\n\tlabel: __( 'Description' ),\n\tgetValue: ( { item } ) => getRawContent( item?.description ),\n\trender: ( { item } ) => (\n\t\t<div>{ getRawContent( item?.description ) || '-' }</div>\n\t),\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ getRawContent( data.description ) || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { description: value } ) }\n\t\t\t\trows={ 5 }\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default descriptionField;\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAOhC,SAAS,qBAAqB;AAQ5B;AANF,IAAM,mBAAgE;AAAA,EACrE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,aAAc;AAAA,EACzB,UAAU,CAAE,EAAE,KAAK,MAAO,cAAe,MAAM,WAAY;AAAA,EAC3D,QAAQ,CAAE,EAAE,KAAK,MAChB,oBAAC,SAAM,wBAAe,MAAM,WAAY,KAAK,KAAK;AAAA,EAEnD,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,OAAQ,cAAe,KAAK,WAAY,KAAK;AAAA,QAC7C,UAAW,CAAE,UAAW,SAAU,EAAE,aAAa,MAAM,CAAE;AAAA,QACzD,MAAO;AAAA;AAAA,IACR;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { TextareaControl } from '@wordpress/components';\nimport type { Attachment, Updatable } from '@wordpress/core-data';\nimport type { Field } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport { getRawContent } from '../utils/get-raw-content';\n\nconst descriptionField: Partial< Field< Updatable< Attachment > > > = {\n\tid: 'description',\n\ttype: 'text',\n\tlabel: __( 'Description' ),\n\tgetValue: ( { item } ) => getRawContent( item?.description ),\n\trender: ( { item } ) => (\n\t\t<div>{ getRawContent( item?.description ) || '-' }</div>\n\t),\n\tEdit: ( { field, onChange, data } ) => {\n\t\treturn (\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ field.label }\n\t\t\t\tvalue={ getRawContent( data.description ) || '' }\n\t\t\t\tonChange={ ( value ) => onChange( { description: value } ) }\n\t\t\t\trows={ 5 }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t);\n\t},\n\tenableSorting: false,\n\tfilterBy: false,\n};\n\nexport default descriptionField;\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAOhC,SAAS,qBAAqB;AAQ5B;AANF,IAAM,mBAAgE;AAAA,EACrE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO,GAAI,aAAc;AAAA,EACzB,UAAU,CAAE,EAAE,KAAK,MAAO,cAAe,MAAM,WAAY;AAAA,EAC3D,QAAQ,CAAE,EAAE,KAAK,MAChB,oBAAC,SAAM,wBAAe,MAAM,WAAY,KAAK,KAAK;AAAA,EAEnD,MAAM,CAAE,EAAE,OAAO,UAAU,KAAK,MAAO;AACtC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,MAAM;AAAA,QACd,OAAQ,cAAe,KAAK,WAAY,KAAK;AAAA,QAC7C,UAAW,CAAE,UAAW,SAAU,EAAE,aAAa,MAAM,CAAE;AAAA,QACzD,MAAO;AAAA,QACP,yBAAuB;AAAA;AAAA,IACxB;AAAA,EAEF;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AACX;AAEA,IAAO,sBAAQ;",
   "names": []
 }

package/build-module/filename/index.js

@@ -1,7 +1,7 @@
 // packages/media-fields/src/filename/index.ts
 import { __ } from "@wordpress/i18n";
 import { getFilename } from "@wordpress/url";
-import FileNameView from "./view.js";
+import FileNameView from "./view";
 var filenameField = {
   id: "filename",
   type: "text",

package/build-module/index.js

@@ -1,12 +1,12 @@
 // packages/media-fields/src/index.ts
-import { default as default2 } from "./alt_text/index.js";
-import { default as default3 } from "./caption/index.js";
-import { default as default4 } from "./description/index.js";
-import { default as default5 } from "./filename/index.js";
-import { default as default6 } from "./filesize/index.js";
-import { default as default7 } from "./media_dimensions/index.js";
-import { default as default8 } from "./media_thumbnail/index.js";
-import { default as default9 } from "./mime_type/index.js";
+import { default as default2 } from "./alt_text";
+import { default as default3 } from "./caption";
+import { default as default4 } from "./description";
+import { default as default5 } from "./filename";
+import { default as default6 } from "./filesize";
+import { default as default7 } from "./media_dimensions";
+import { default as default8 } from "./media_thumbnail";
+import { default as default9 } from "./mime_type";
 export {
   default2 as altTextField,
   default3 as captionField,

package/build-module/media_thumbnail/index.js

@@ -1,6 +1,6 @@
 // packages/media-fields/src/media_thumbnail/index.tsx
 import { __ } from "@wordpress/i18n";
-import MediaThumbnailView from "./view.js";
+import MediaThumbnailView from "./view";
 var mediaThumbnailField = {
   id: "media_thumbnail",
   type: "media",

package/build-module/media_thumbnail/view.js

@@ -6,40 +6,13 @@ import {
   __experimentalVStack as VStack,
   Icon
 } from "@wordpress/components";
-import { useState } from "@wordpress/element";
 import { getFilename } from "@wordpress/url";
-import { getMediaTypeFromMimeType } from "../utils/get-media-type-from-mime-type.js";
+import { getMediaTypeFromMimeType } from "../utils/get-media-type-from-mime-type";
 import { jsx, jsxs } from "react/jsx-runtime";
-function FallbackView({
-  item,
-  filename
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "dataviews-media-field__media-thumbnail", children: /* @__PURE__ */ jsxs(
-    VStack,
-    {
-      justify: "center",
-      alignment: "center",
-      className: "dataviews-media-field__media-thumbnail__stack",
-      spacing: 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          Icon,
-          {
-            className: "dataviews-media-field__media-thumbnail--icon",
-            icon: getMediaTypeFromMimeType(item.mime_type).icon,
-            size: 24
-          }
-        ),
-        !!filename && /* @__PURE__ */ jsx("div", { className: "dataviews-media-field__media-thumbnail__filename", children: /* @__PURE__ */ jsx(Truncate, { className: "dataviews-media-field__media-thumbnail__filename__truncate", children: filename }) })
-      ]
-    }
-  ) });
-}
 function MediaThumbnailView({
   item,
   config
 }) {
-  const [imageError, setImageError] = useState(false);
   const _featuredMedia = useSelect(
     (select) => {
       if (!item.featured_media) {
@@ -58,22 +31,43 @@ function MediaThumbnailView({
     return null;
   }
   const filename = getFilename(featuredMedia.source_url || "");
-  if (imageError || getMediaTypeFromMimeType(featuredMedia.mime_type).type !== "image") {
-    return /* @__PURE__ */ jsx(FallbackView, { item: featuredMedia, filename: filename || "" });
+  if (
+    // Ensure the featured media is an image.
+    getMediaTypeFromMimeType(featuredMedia.mime_type).type === "image"
+  ) {
+    return /* @__PURE__ */ jsx("div", { className: "dataviews-media-field__media-thumbnail", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: "dataviews-media-field__media-thumbnail--image",
+        src: featuredMedia.source_url,
+        srcSet: featuredMedia?.media_details?.sizes ? Object.values(
+          featuredMedia.media_details.sizes
+        ).map(
+          (size) => `${size.source_url} ${size.width}w`
+        ).join(", ") : void 0,
+        sizes: config?.sizes || "100vw",
+        alt: featuredMedia.alt_text || featuredMedia.title.raw
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "dataviews-media-field__media-thumbnail", children: /* @__PURE__ */ jsx(
-    "img",
+  return /* @__PURE__ */ jsx("div", { className: "dataviews-media-field__media-thumbnail", children: /* @__PURE__ */ jsxs(
+    VStack,
     {
-      className: "dataviews-media-field__media-thumbnail--image",
-      src: featuredMedia.source_url,
-      srcSet: featuredMedia?.media_details?.sizes ? Object.values(
-        featuredMedia.media_details.sizes
-      ).map(
-        (size) => `${size.source_url} ${size.width}w`
-      ).join(", ") : void 0,
-      sizes: config?.sizes || "100vw",
-      alt: featuredMedia.alt_text || featuredMedia.title.raw,
-      onError: () => setImageError(true)
+      justify: "center",
+      alignment: "center",
+      className: "dataviews-media-field__media-thumbnail__stack",
+      spacing: 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "dataviews-media-field__media-thumbnail--icon",
+            icon: getMediaTypeFromMimeType(item.mime_type).icon,
+            size: 24
+          }
+        ),
+        !!filename && /* @__PURE__ */ jsx("div", { className: "dataviews-media-field__media-thumbnail__filename", children: /* @__PURE__ */ jsx(Truncate, { className: "dataviews-media-field__media-thumbnail__filename__truncate", children: filename }) })
+      ]
     }
   ) });
 }