@wordpress/media-fields 0.2.1-next.ba3aee3a2.0 → 0.3.0

package/build/author/index.cjs

@@ -0,0 +1,69 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-fields/src/author/index.tsx
+var author_exports = {};
+__export(author_exports, {
+  default: () => author_default
+});
+module.exports = __toCommonJS(author_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_data = require("@wordpress/data");
+var import_core_data = require("@wordpress/core-data");
+var import_view = __toESM(require("./view.cjs"));
+var authorField = {
+  label: (0, import_i18n.__)("Author"),
+  id: "author",
+  type: "integer",
+  getElements: async () => {
+    const authors = await (0, import_data.resolveSelect)(import_core_data.store).getEntityRecords(
+      "root",
+      "user",
+      {
+        per_page: -1
+      }
+    ) ?? [];
+    return authors.map(({ id, name }) => ({
+      value: id,
+      label: name
+    }));
+  },
+  render: import_view.default,
+  sort: (a, b, direction) => {
+    const nameA = a._embedded?.author?.[0]?.name || "";
+    const nameB = b._embedded?.author?.[0]?.name || "";
+    return direction === "asc" ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
+  },
+  filterBy: {
+    operators: ["isAny", "isNone"]
+  },
+  readOnly: true
+};
+var author_default = authorField;
+//# sourceMappingURL=index.cjs.map

package/build/author/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/author/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { Field } from '@wordpress/dataviews';\nimport { __ } from '@wordpress/i18n';\nimport { resolveSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\nimport AuthorView from './view';\n\ninterface Author {\n\tid: number;\n\tname: string;\n}\n\nconst authorField: Partial< Field< MediaItem > > = {\n\tlabel: __( 'Author' ),\n\tid: 'author',\n\ttype: 'integer',\n\tgetElements: async () => {\n\t\tconst authors: Author[] =\n\t\t\t( await resolveSelect( coreDataStore ).getEntityRecords(\n\t\t\t\t'root',\n\t\t\t\t'user',\n\t\t\t\t{\n\t\t\t\t\tper_page: -1,\n\t\t\t\t}\n\t\t\t) ) ?? [];\n\t\treturn authors.map( ( { id, name } ) => ( {\n\t\t\tvalue: id,\n\t\t\tlabel: name,\n\t\t} ) );\n\t},\n\trender: AuthorView,\n\tsort: ( a, b, direction ) => {\n\t\tconst nameA = a._embedded?.author?.[ 0 ]?.name || '';\n\t\tconst nameB = b._embedded?.author?.[ 0 ]?.name || '';\n\n\t\treturn direction === 'asc'\n\t\t\t? nameA.localeCompare( nameB )\n\t\t\t: nameB.localeCompare( nameA );\n\t},\n\tfilterBy: {\n\t\toperators: [ 'isAny', 'isNone' ],\n\t},\n\treadOnly: true,\n};\n\nexport default authorField;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAmB;AACnB,kBAA8B;AAC9B,uBAAuC;AAMvC,kBAAuB;AAOvB,IAAM,cAA6C;AAAA,EAClD,WAAO,gBAAI,QAAS;AAAA,EACpB,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,aAAa,YAAY;AACxB,UAAM,UACH,UAAM,2BAAe,iBAAAA,KAAc,EAAE;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,QACC,UAAU;AAAA,MACX;AAAA,IACD,KAAO,CAAC;AACT,WAAO,QAAQ,IAAK,CAAE,EAAE,IAAI,KAAK,OAAS;AAAA,MACzC,OAAO;AAAA,MACP,OAAO;AAAA,IACR,EAAI;AAAA,EACL;AAAA,EACA,QAAQ,YAAAC;AAAA,EACR,MAAM,CAAE,GAAG,GAAG,cAAe;AAC5B,UAAM,QAAQ,EAAE,WAAW,SAAU,CAAE,GAAG,QAAQ;AAClD,UAAM,QAAQ,EAAE,WAAW,SAAU,CAAE,GAAG,QAAQ;AAElD,WAAO,cAAc,QAClB,MAAM,cAAe,KAAM,IAC3B,MAAM,cAAe,KAAM;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,IACT,WAAW,CAAE,SAAS,QAAS;AAAA,EAChC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,iBAAQ;",
+  "names": ["coreDataStore", "AuthorView"]
+}

package/build/author/view.cjs

@@ -0,0 +1,85 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-fields/src/author/view.tsx
+var view_exports = {};
+__export(view_exports, {
+  default: () => AuthorView
+});
+module.exports = __toCommonJS(view_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_icons = require("@wordpress/icons");
+var import_components = require("@wordpress/components");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AuthorView({
+  item
+}) {
+  const author = item?._embedded?.author?.[0];
+  const text = author?.name;
+  const imageUrl = author?.avatar_urls?.[48];
+  const [loadingState, setLoadingState] = (0, import_element.useState)("loading");
+  (0, import_element.useEffect)(() => {
+    setLoadingState("loading");
+  }, [imageUrl]);
+  const imgRef = (0, import_element.useCallback)((img) => {
+    if (img?.complete) {
+      setLoadingState("instant");
+    }
+  }, []);
+  const handleLoad = () => {
+    if (loadingState === "loading") {
+      setLoadingState("loaded");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { alignment: "left", spacing: 0, children: [
+    !!imageUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_clsx.default)("media-author-field__avatar", {
+          "is-loading": loadingState === "loading",
+          "is-loaded": loadingState === "loaded"
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            ref: imgRef,
+            onLoad: handleLoad,
+            alt: (0, import_i18n.__)("Author avatar"),
+            src: imageUrl
+          }
+        )
+      }
+    ),
+    !imageUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "media-author-field__icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: import_icons.commentAuthorAvatar }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "media-author-field__name", children: text })
+  ] });
+}
+//# sourceMappingURL=view.cjs.map

package/build/author/view.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/author/view.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState, useCallback, useEffect } from '@wordpress/element';\nimport { commentAuthorAvatar as authorIcon } from '@wordpress/icons';\nimport { __experimentalHStack as HStack, Icon } from '@wordpress/components';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nexport default function AuthorView( {\n\titem,\n}: DataViewRenderFieldProps< MediaItem > ) {\n\tconst author = item?._embedded?.author?.[ 0 ];\n\tconst text = author?.name;\n\tconst imageUrl = author?.avatar_urls?.[ 48 ];\n\n\t/*\n\t * Use three states to avoid fade-in animation for cached images:\n\t * 'instant' = image already cached, 'loading' = waiting, 'loaded' = just finished.\n\t */\n\tconst [ loadingState, setLoadingState ] = useState<\n\t\t'instant' | 'loading' | 'loaded'\n\t>( 'loading' );\n\n\tuseEffect( () => {\n\t\tsetLoadingState( 'loading' );\n\t}, [ imageUrl ] );\n\n\tconst imgRef = useCallback( ( img: HTMLImageElement | null ) => {\n\t\tif ( img?.complete ) {\n\t\t\tsetLoadingState( 'instant' );\n\t\t}\n\t}, [] );\n\n\tconst handleLoad = () => {\n\t\tif ( loadingState === 'loading' ) {\n\t\t\tsetLoadingState( 'loaded' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<HStack alignment=\"left\" spacing={ 0 }>\n\t\t\t{ !! imageUrl && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'media-author-field__avatar', {\n\t\t\t\t\t\t'is-loading': loadingState === 'loading',\n\t\t\t\t\t\t'is-loaded': loadingState === 'loaded',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<img\n\t\t\t\t\t\tref={ imgRef }\n\t\t\t\t\t\tonLoad={ handleLoad }\n\t\t\t\t\t\talt={ __( 'Author avatar' ) }\n\t\t\t\t\t\tsrc={ imageUrl }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! imageUrl && (\n\t\t\t\t<div className=\"media-author-field__icon\">\n\t\t\t\t\t<Icon icon={ authorIcon } />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<span className=\"media-author-field__name\">{ text }</span>\n\t\t</HStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAmB;AACnB,qBAAiD;AACjD,mBAAkD;AAClD,wBAAqD;AAwCnD;AAhCa,SAAR,WAA6B;AAAA,EACnC;AACD,GAA2C;AAC1C,QAAM,SAAS,MAAM,WAAW,SAAU,CAAE;AAC5C,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,QAAQ,cAAe,EAAG;AAM3C,QAAM,CAAE,cAAc,eAAgB,QAAI,yBAEvC,SAAU;AAEb,gCAAW,MAAM;AAChB,oBAAiB,SAAU;AAAA,EAC5B,GAAG,CAAE,QAAS,CAAE;AAEhB,QAAM,aAAS,4BAAa,CAAE,QAAkC;AAC/D,QAAK,KAAK,UAAW;AACpB,sBAAiB,SAAU;AAAA,IAC5B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,aAAa,MAAM;AACxB,QAAK,iBAAiB,WAAY;AACjC,sBAAiB,QAAS;AAAA,IAC3B;AAAA,EACD;AAEA,SACC,6CAAC,kBAAAA,sBAAA,EAAO,WAAU,QAAO,SAAU,GAChC;AAAA,KAAC,CAAE,YACJ;AAAA,MAAC;AAAA;AAAA,QACA,eAAY,YAAAC,SAAM,8BAA8B;AAAA,UAC/C,cAAc,iBAAiB;AAAA,UAC/B,aAAa,iBAAiB;AAAA,QAC/B,CAAE;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACA,KAAM;AAAA,YACN,QAAS;AAAA,YACT,SAAM,gBAAI,eAAgB;AAAA,YAC1B,KAAM;AAAA;AAAA,QACP;AAAA;AAAA,IACD;AAAA,IAEC,CAAE,YACH,4CAAC,SAAI,WAAU,4BACd,sDAAC,0BAAK,MAAO,aAAAC,qBAAa,GAC3B;AAAA,IAED,4CAAC,UAAK,WAAU,4BAA6B,gBAAM;AAAA,KACpD;AAEF;",
+  "names": ["HStack", "clsx", "authorIcon"]
+}

package/build/index.cjs

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   altTextField: () => import_alt_text.default,
   attachedToField: () => import_attached_to.default,
+  authorField: () => import_author.default,
   captionField: () => import_caption.default,
   dateAddedField: () => import_date_added.default,
   dateModifiedField: () => import_date_modified.default,
@@ -45,6 +46,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_alt_text = __toESM(require("./alt_text/index.cjs"));
 var import_attached_to = __toESM(require("./attached_to/index.cjs"));
+var import_author = __toESM(require("./author/index.cjs"));
 var import_caption = __toESM(require("./caption/index.cjs"));
 var import_date_added = __toESM(require("./date_added/index.cjs"));
 var import_date_modified = __toESM(require("./date_modified/index.cjs"));
@@ -58,6 +60,7 @@ var import_mime_type = __toESM(require("./mime_type/index.cjs"));
 0 && (module.exports = {
   altTextField,
   attachedToField,
+  authorField,
   captionField,
   dateAddedField,
   dateModifiedField,

package/build/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { default as altTextField } from './alt_text';\nexport { default as attachedToField } from './attached_to';\nexport { default as captionField } from './caption';\nexport { default as dateAddedField } from './date_added';\nexport { default as dateModifiedField } from './date_modified';\nexport { default as descriptionField } from './description';\nexport { default as filenameField } from './filename';\nexport { default as filesizeField } from './filesize';\nexport { default as mediaDimensionsField } from './media_dimensions';\nexport { default as mediaThumbnailField } from './media_thumbnail';\nexport { default as mimeTypeField } from './mime_type';\n\nexport type {\n\tMediaItem,\n\tMediaKind,\n\tMediaType,\n\tMediaItemUpdatable,\n} from './types';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAwC;AACxC,yBAA2C;AAC3C,qBAAwC;AACxC,wBAA0C;AAC1C,2BAA6C;AAC7C,yBAA4C;AAC5C,sBAAyC;AACzC,sBAAyC;AACzC,8BAAgD;AAChD,6BAA+C;AAC/C,uBAAyC;",
+  "sourcesContent": ["export { default as altTextField } from './alt_text';\nexport { default as attachedToField } from './attached_to';\nexport { default as authorField } from './author';\nexport { default as captionField } from './caption';\nexport { default as dateAddedField } from './date_added';\nexport { default as dateModifiedField } from './date_modified';\nexport { default as descriptionField } from './description';\nexport { default as filenameField } from './filename';\nexport { default as filesizeField } from './filesize';\nexport { default as mediaDimensionsField } from './media_dimensions';\nexport { default as mediaThumbnailField } from './media_thumbnail';\nexport { default as mimeTypeField } from './mime_type';\n\nexport type {\n\tMediaItem,\n\tMediaKind,\n\tMediaType,\n\tMediaItemUpdatable,\n} from './types';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAwC;AACxC,yBAA2C;AAC3C,oBAAuC;AACvC,qBAAwC;AACxC,wBAA0C;AAC1C,2BAA6C;AAC7C,yBAA4C;AAC5C,sBAAyC;AACzC,sBAAyC;AACzC,8BAAgD;AAChD,6BAA+C;AAC/C,uBAAyC;",
   "names": []
 }

package/build/types.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/types.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { Attachment, Updatable, Post } from '@wordpress/core-data';\n\nexport type MediaKind = 'image' | 'video' | 'audio' | 'application';\n\nexport interface MediaType {\n\ttype: MediaKind;\n\tlabel: string;\n\ticon: JSX.Element;\n}\n\n// TODO: Update the Attachment type separately.\nexport interface MediaItem extends Attachment< 'edit' > {\n\t// featured_media is not in the Attachment type. See https://github.com/WordPress/gutenberg/blob/trunk/packages/core-data/src/entity-types/attachment.ts#L10\n\tfeatured_media: number;\n\t_embedded?: {\n\t\t// TODO: Include wp:attached-to properly, and backport PHP changes from wordpress-develop to support this.\n\t\t'wp:attached-to'?: Post[] | Partial< Post >[];\n\t};\n}\n\nexport type MediaItemUpdatable = Updatable< Attachment >;\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { Attachment, Updatable, Post, User } from '@wordpress/core-data';\n\nexport type MediaKind = 'image' | 'video' | 'audio' | 'application';\n\nexport interface MediaType {\n\ttype: MediaKind;\n\tlabel: string;\n\ticon: JSX.Element;\n}\n\n// TODO: Update the Attachment type separately.\nexport interface MediaItem extends Attachment< 'edit' > {\n\t// featured_media is not in the Attachment type. See https://github.com/WordPress/gutenberg/blob/trunk/packages/core-data/src/entity-types/attachment.ts#L10\n\tfeatured_media: number;\n\t_embedded?: {\n\t\t// TODO: Include wp:attached-to properly, and backport PHP changes from wordpress-develop to support this.\n\t\t'wp:attached-to'?: Post[] | Partial< Post >[];\n\t\tauthor?: User[] | Partial< User >[];\n\t};\n}\n\nexport type MediaItemUpdatable = Updatable< Attachment >;\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build-module/author/index.mjs

@@ -0,0 +1,38 @@
+// packages/media-fields/src/author/index.tsx
+import { __ } from "@wordpress/i18n";
+import { resolveSelect } from "@wordpress/data";
+import { store as coreDataStore } from "@wordpress/core-data";
+import AuthorView from "./view.mjs";
+var authorField = {
+  label: __("Author"),
+  id: "author",
+  type: "integer",
+  getElements: async () => {
+    const authors = await resolveSelect(coreDataStore).getEntityRecords(
+      "root",
+      "user",
+      {
+        per_page: -1
+      }
+    ) ?? [];
+    return authors.map(({ id, name }) => ({
+      value: id,
+      label: name
+    }));
+  },
+  render: AuthorView,
+  sort: (a, b, direction) => {
+    const nameA = a._embedded?.author?.[0]?.name || "";
+    const nameB = b._embedded?.author?.[0]?.name || "";
+    return direction === "asc" ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
+  },
+  filterBy: {
+    operators: ["isAny", "isNone"]
+  },
+  readOnly: true
+};
+var author_default = authorField;
+export {
+  author_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/author/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/author/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { Field } from '@wordpress/dataviews';\nimport { __ } from '@wordpress/i18n';\nimport { resolveSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\nimport AuthorView from './view';\n\ninterface Author {\n\tid: number;\n\tname: string;\n}\n\nconst authorField: Partial< Field< MediaItem > > = {\n\tlabel: __( 'Author' ),\n\tid: 'author',\n\ttype: 'integer',\n\tgetElements: async () => {\n\t\tconst authors: Author[] =\n\t\t\t( await resolveSelect( coreDataStore ).getEntityRecords(\n\t\t\t\t'root',\n\t\t\t\t'user',\n\t\t\t\t{\n\t\t\t\t\tper_page: -1,\n\t\t\t\t}\n\t\t\t) ) ?? [];\n\t\treturn authors.map( ( { id, name } ) => ( {\n\t\t\tvalue: id,\n\t\t\tlabel: name,\n\t\t} ) );\n\t},\n\trender: AuthorView,\n\tsort: ( a, b, direction ) => {\n\t\tconst nameA = a._embedded?.author?.[ 0 ]?.name || '';\n\t\tconst nameB = b._embedded?.author?.[ 0 ]?.name || '';\n\n\t\treturn direction === 'asc'\n\t\t\t? nameA.localeCompare( nameB )\n\t\t\t: nameB.localeCompare( nameA );\n\t},\n\tfilterBy: {\n\t\toperators: [ 'isAny', 'isNone' ],\n\t},\n\treadOnly: true,\n};\n\nexport default authorField;\n"],
+  "mappings": ";AAIA,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAC9B,SAAS,SAAS,qBAAqB;AAMvC,OAAO,gBAAgB;AAOvB,IAAM,cAA6C;AAAA,EAClD,OAAO,GAAI,QAAS;AAAA,EACpB,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,aAAa,YAAY;AACxB,UAAM,UACH,MAAM,cAAe,aAAc,EAAE;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,QACC,UAAU;AAAA,MACX;AAAA,IACD,KAAO,CAAC;AACT,WAAO,QAAQ,IAAK,CAAE,EAAE,IAAI,KAAK,OAAS;AAAA,MACzC,OAAO;AAAA,MACP,OAAO;AAAA,IACR,EAAI;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,MAAM,CAAE,GAAG,GAAG,cAAe;AAC5B,UAAM,QAAQ,EAAE,WAAW,SAAU,CAAE,GAAG,QAAQ;AAClD,UAAM,QAAQ,EAAE,WAAW,SAAU,CAAE,GAAG,QAAQ;AAElD,WAAO,cAAc,QAClB,MAAM,cAAe,KAAM,IAC3B,MAAM,cAAe,KAAM;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,IACT,WAAW,CAAE,SAAS,QAAS;AAAA,EAChC;AAAA,EACA,UAAU;AACX;AAEA,IAAO,iBAAQ;",
+  "names": []
+}

package/build-module/author/view.mjs

@@ -0,0 +1,54 @@
+// packages/media-fields/src/author/view.tsx
+import clsx from "clsx";
+import { __ } from "@wordpress/i18n";
+import { useState, useCallback, useEffect } from "@wordpress/element";
+import { commentAuthorAvatar as authorIcon } from "@wordpress/icons";
+import { __experimentalHStack as HStack, Icon } from "@wordpress/components";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AuthorView({
+  item
+}) {
+  const author = item?._embedded?.author?.[0];
+  const text = author?.name;
+  const imageUrl = author?.avatar_urls?.[48];
+  const [loadingState, setLoadingState] = useState("loading");
+  useEffect(() => {
+    setLoadingState("loading");
+  }, [imageUrl]);
+  const imgRef = useCallback((img) => {
+    if (img?.complete) {
+      setLoadingState("instant");
+    }
+  }, []);
+  const handleLoad = () => {
+    if (loadingState === "loading") {
+      setLoadingState("loaded");
+    }
+  };
+  return /* @__PURE__ */ jsxs(HStack, { alignment: "left", spacing: 0, children: [
+    !!imageUrl && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("media-author-field__avatar", {
+          "is-loading": loadingState === "loading",
+          "is-loaded": loadingState === "loaded"
+        }),
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref: imgRef,
+            onLoad: handleLoad,
+            alt: __("Author avatar"),
+            src: imageUrl
+          }
+        )
+      }
+    ),
+    !imageUrl && /* @__PURE__ */ jsx("div", { className: "media-author-field__icon", children: /* @__PURE__ */ jsx(Icon, { icon: authorIcon }) }),
+    /* @__PURE__ */ jsx("span", { className: "media-author-field__name", children: text })
+  ] });
+}
+export {
+  AuthorView as default
+};
+//# sourceMappingURL=view.mjs.map

package/build-module/author/view.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/author/view.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState, useCallback, useEffect } from '@wordpress/element';\nimport { commentAuthorAvatar as authorIcon } from '@wordpress/icons';\nimport { __experimentalHStack as HStack, Icon } from '@wordpress/components';\nimport type { DataViewRenderFieldProps } from '@wordpress/dataviews';\n\n/**\n * Internal dependencies\n */\nimport type { MediaItem } from '../types';\n\nexport default function AuthorView( {\n\titem,\n}: DataViewRenderFieldProps< MediaItem > ) {\n\tconst author = item?._embedded?.author?.[ 0 ];\n\tconst text = author?.name;\n\tconst imageUrl = author?.avatar_urls?.[ 48 ];\n\n\t/*\n\t * Use three states to avoid fade-in animation for cached images:\n\t * 'instant' = image already cached, 'loading' = waiting, 'loaded' = just finished.\n\t */\n\tconst [ loadingState, setLoadingState ] = useState<\n\t\t'instant' | 'loading' | 'loaded'\n\t>( 'loading' );\n\n\tuseEffect( () => {\n\t\tsetLoadingState( 'loading' );\n\t}, [ imageUrl ] );\n\n\tconst imgRef = useCallback( ( img: HTMLImageElement | null ) => {\n\t\tif ( img?.complete ) {\n\t\t\tsetLoadingState( 'instant' );\n\t\t}\n\t}, [] );\n\n\tconst handleLoad = () => {\n\t\tif ( loadingState === 'loading' ) {\n\t\t\tsetLoadingState( 'loaded' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<HStack alignment=\"left\" spacing={ 0 }>\n\t\t\t{ !! imageUrl && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'media-author-field__avatar', {\n\t\t\t\t\t\t'is-loading': loadingState === 'loading',\n\t\t\t\t\t\t'is-loaded': loadingState === 'loaded',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<img\n\t\t\t\t\t\tref={ imgRef }\n\t\t\t\t\t\tonLoad={ handleLoad }\n\t\t\t\t\t\talt={ __( 'Author avatar' ) }\n\t\t\t\t\t\tsrc={ imageUrl }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! imageUrl && (\n\t\t\t\t<div className=\"media-author-field__icon\">\n\t\t\t\t\t<Icon icon={ authorIcon } />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<span className=\"media-author-field__name\">{ text }</span>\n\t\t</HStack>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,UAAU;AACnB,SAAS,UAAU,aAAa,iBAAiB;AACjD,SAAS,uBAAuB,kBAAkB;AAClD,SAAS,wBAAwB,QAAQ,YAAY;AAwCnD,SAQG,KARH;AAhCa,SAAR,WAA6B;AAAA,EACnC;AACD,GAA2C;AAC1C,QAAM,SAAS,MAAM,WAAW,SAAU,CAAE;AAC5C,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,QAAQ,cAAe,EAAG;AAM3C,QAAM,CAAE,cAAc,eAAgB,IAAI,SAEvC,SAAU;AAEb,YAAW,MAAM;AAChB,oBAAiB,SAAU;AAAA,EAC5B,GAAG,CAAE,QAAS,CAAE;AAEhB,QAAM,SAAS,YAAa,CAAE,QAAkC;AAC/D,QAAK,KAAK,UAAW;AACpB,sBAAiB,SAAU;AAAA,IAC5B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,aAAa,MAAM;AACxB,QAAK,iBAAiB,WAAY;AACjC,sBAAiB,QAAS;AAAA,IAC3B;AAAA,EACD;AAEA,SACC,qBAAC,UAAO,WAAU,QAAO,SAAU,GAChC;AAAA,KAAC,CAAE,YACJ;AAAA,MAAC;AAAA;AAAA,QACA,WAAY,KAAM,8BAA8B;AAAA,UAC/C,cAAc,iBAAiB;AAAA,UAC/B,aAAa,iBAAiB;AAAA,QAC/B,CAAE;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACA,KAAM;AAAA,YACN,QAAS;AAAA,YACT,KAAM,GAAI,eAAgB;AAAA,YAC1B,KAAM;AAAA;AAAA,QACP;AAAA;AAAA,IACD;AAAA,IAEC,CAAE,YACH,oBAAC,SAAI,WAAU,4BACd,8BAAC,QAAK,MAAO,YAAa,GAC3B;AAAA,IAED,oBAAC,UAAK,WAAU,4BAA6B,gBAAM;AAAA,KACpD;AAEF;",
+  "names": []
+}

package/build-module/index.mjs

@@ -1,26 +1,28 @@
 // packages/media-fields/src/index.ts
 import { default as default2 } from "./alt_text/index.mjs";
 import { default as default3 } from "./attached_to/index.mjs";
-import { default as default4 } from "./caption/index.mjs";
-import { default as default5 } from "./date_added/index.mjs";
-import { default as default6 } from "./date_modified/index.mjs";
-import { default as default7 } from "./description/index.mjs";
-import { default as default8 } from "./filename/index.mjs";
-import { default as default9 } from "./filesize/index.mjs";
-import { default as default10 } from "./media_dimensions/index.mjs";
-import { default as default11 } from "./media_thumbnail/index.mjs";
-import { default as default12 } from "./mime_type/index.mjs";
+import { default as default4 } from "./author/index.mjs";
+import { default as default5 } from "./caption/index.mjs";
+import { default as default6 } from "./date_added/index.mjs";
+import { default as default7 } from "./date_modified/index.mjs";
+import { default as default8 } from "./description/index.mjs";
+import { default as default9 } from "./filename/index.mjs";
+import { default as default10 } from "./filesize/index.mjs";
+import { default as default11 } from "./media_dimensions/index.mjs";
+import { default as default12 } from "./media_thumbnail/index.mjs";
+import { default as default13 } from "./mime_type/index.mjs";
 export {
   default2 as altTextField,
   default3 as attachedToField,
-  default4 as captionField,
-  default5 as dateAddedField,
-  default6 as dateModifiedField,
-  default7 as descriptionField,
-  default8 as filenameField,
-  default9 as filesizeField,
-  default10 as mediaDimensionsField,
-  default11 as mediaThumbnailField,
-  default12 as mimeTypeField
+  default4 as authorField,
+  default5 as captionField,
+  default6 as dateAddedField,
+  default7 as dateModifiedField,
+  default8 as descriptionField,
+  default9 as filenameField,
+  default10 as filesizeField,
+  default11 as mediaDimensionsField,
+  default12 as mediaThumbnailField,
+  default13 as mimeTypeField
 };
 //# sourceMappingURL=index.mjs.map

package/build-module/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["export { default as altTextField } from './alt_text';\nexport { default as attachedToField } from './attached_to';\nexport { default as captionField } from './caption';\nexport { default as dateAddedField } from './date_added';\nexport { default as dateModifiedField } from './date_modified';\nexport { default as descriptionField } from './description';\nexport { default as filenameField } from './filename';\nexport { default as filesizeField } from './filesize';\nexport { default as mediaDimensionsField } from './media_dimensions';\nexport { default as mediaThumbnailField } from './media_thumbnail';\nexport { default as mimeTypeField } from './mime_type';\n\nexport type {\n\tMediaItem,\n\tMediaKind,\n\tMediaType,\n\tMediaItemUpdatable,\n} from './types';\n"],
-  "mappings": ";AAAA,SAAoB,WAAXA,gBAA+B;AACxC,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAA+B;AACxC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAAgC;AACzC,SAAoB,WAAXA,gBAAgC;AACzC,SAAoB,WAAXA,iBAAuC;AAChD,SAAoB,WAAXA,iBAAsC;AAC/C,SAAoB,WAAXA,iBAAgC;",
+  "sourcesContent": ["export { default as altTextField } from './alt_text';\nexport { default as attachedToField } from './attached_to';\nexport { default as authorField } from './author';\nexport { default as captionField } from './caption';\nexport { default as dateAddedField } from './date_added';\nexport { default as dateModifiedField } from './date_modified';\nexport { default as descriptionField } from './description';\nexport { default as filenameField } from './filename';\nexport { default as filesizeField } from './filesize';\nexport { default as mediaDimensionsField } from './media_dimensions';\nexport { default as mediaThumbnailField } from './media_thumbnail';\nexport { default as mimeTypeField } from './mime_type';\n\nexport type {\n\tMediaItem,\n\tMediaKind,\n\tMediaType,\n\tMediaItemUpdatable,\n} from './types';\n"],
+  "mappings": ";AAAA,SAAoB,WAAXA,gBAA+B;AACxC,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAA8B;AACvC,SAAoB,WAAXA,gBAA+B;AACxC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAAgC;AACzC,SAAoB,WAAXA,iBAAgC;AACzC,SAAoB,WAAXA,iBAAuC;AAChD,SAAoB,WAAXA,iBAAsC;AAC/C,SAAoB,WAAXA,iBAAgC;",
   "names": ["default"]
 }

package/build-style/style-rtl.css

@@ -87,6 +87,50 @@
  * Creates a checkerboard pattern background to indicate transparency.
  * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  */
+.media-author-field__avatar {
+  flex-shrink: 0;
+  overflow: hidden;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: right;
+  display: flex;
+}
+.media-author-field__avatar img {
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+  opacity: 1;
+  border-radius: 100%;
+}
+@media not (prefers-reduced-motion) {
+  .media-author-field__avatar.is-loading img, .media-author-field__avatar.is-loaded img {
+    transition: opacity 0.1s linear;
+  }
+}
+.media-author-field__avatar.is-loading img {
+  opacity: 0;
+}
+.media-author-field__avatar.is-loaded img {
+  opacity: 1;
+}
+
+.media-author-field__icon {
+  display: flex;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+.media-author-field__icon svg {
+  margin-right: -4px;
+  fill: currentColor;
+}
+
+.media-author-field__name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .dataviews-media-field__media-thumbnail {
   display: flex;
   align-items: center;

package/build-style/style.css

@@ -87,6 +87,50 @@
  * Creates a checkerboard pattern background to indicate transparency.
  * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  */
+.media-author-field__avatar {
+  flex-shrink: 0;
+  overflow: hidden;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: left;
+  display: flex;
+}
+.media-author-field__avatar img {
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+  opacity: 1;
+  border-radius: 100%;
+}
+@media not (prefers-reduced-motion) {
+  .media-author-field__avatar.is-loading img, .media-author-field__avatar.is-loaded img {
+    transition: opacity 0.1s linear;
+  }
+}
+.media-author-field__avatar.is-loading img {
+  opacity: 0;
+}
+.media-author-field__avatar.is-loaded img {
+  opacity: 1;
+}
+
+.media-author-field__icon {
+  display: flex;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+.media-author-field__icon svg {
+  margin-left: -4px;
+  fill: currentColor;
+}
+
+.media-author-field__name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .dataviews-media-field__media-thumbnail {
   display: flex;
   align-items: center;

package/build-types/author/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+declare const authorField: Partial<Field<MediaItem>>;
+export default authorField;
+//# sourceMappingURL=index.d.ts.map

package/build-types/author/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/author/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAKlD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQ1C,QAAA,MAAM,WAAW,EAAE,OAAO,CAAE,KAAK,CAAE,SAAS,CAAE,CA+B7C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build-types/author/view.d.ts

@@ -0,0 +1,7 @@
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+export default function AuthorView({ item, }: DataViewRenderFieldProps<MediaItem>): import("react").JSX.Element;
+//# sourceMappingURL=view.d.ts.map

package/build-types/author/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/author/view.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAE,EACnC,IAAI,GACJ,EAAE,wBAAwB,CAAE,SAAS,CAAE,+BAsDvC"}

package/build-types/index.d.ts

@@ -1,5 +1,6 @@
 export { default as altTextField } from './alt_text';
 export { default as attachedToField } from './attached_to';
+export { default as authorField } from './author';
 export { default as captionField } from './caption';
 export { default as dateAddedField } from './date_added';
 export { default as dateModifiedField } from './date_modified';

package/build-types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AAEvD,YAAY,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,kBAAkB,GAClB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AAEvD,YAAY,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,kBAAkB,GAClB,MAAM,SAAS,CAAC"}

package/build-types/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAwB,MAAM,sBAAsB,CAAC;;;;;AAqBtE,wBAGE;AA6RF,eAAO,MAAM,gBAAgB;uBA7CU;QAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;KAAE;;;;;;;;;;;;;CAyDnE,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCA6C5B,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAwB,MAAM,sBAAsB,CAAC;;;;;AAsBtE,wBAGE;AAoUF,eAAO,MAAM,gBAAgB;uBA9CU;QAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;KAAE;;;;;;;;;;;;;CA0DnE,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCA6C5B,CAAC"}

package/build-types/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import type { Attachment, Updatable, Post } from '@wordpress/core-data';
+import type { Attachment, Updatable, Post, User } from '@wordpress/core-data';
 export type MediaKind = 'image' | 'video' | 'audio' | 'application';
 export interface MediaType {
     type: MediaKind;
@@ -12,6 +12,7 @@ export interface MediaItem extends Attachment<'edit'> {
     featured_media: number;
     _embedded?: {
         'wp:attached-to'?: Post[] | Partial<Post>[];
+        author?: User[] | Partial<User>[];
     };
 }
 export type MediaItemUpdatable = Updatable<Attachment>;

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAExE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEpE,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;CAClB;AAGD,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAE,MAAM,CAAE;IAEtD,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE;QAEX,gBAAgB,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,CAAE,IAAI,CAAE,EAAE,CAAC;KAC9C,CAAC;CACF;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAE,UAAU,CAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE9E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEpE,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;CAClB;AAGD,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAE,MAAM,CAAE;IAEtD,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE;QAEX,gBAAgB,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,CAAE,IAAI,CAAE,EAAE,CAAC;QAC9C,MAAM,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,CAAE,IAAI,CAAE,EAAE,CAAC;KACpC,CAAC;CACF;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAE,UAAU,CAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-fields",
-	"version": "0.2.1-next.ba3aee3a2.0",
+	"version": "0.3.0",
 	"description": "Reusable field definitions for displaying and editing media attachment properties in WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -49,18 +49,19 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@wordpress/base-styles": "^6.13.2-next.ba3aee3a2.0",
-		"@wordpress/components": "^32.0.1-next.ba3aee3a2.0",
-		"@wordpress/compose": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/core-data": "^7.37.1-next.ba3aee3a2.0",
-		"@wordpress/data": "^10.37.1-next.ba3aee3a2.0",
-		"@wordpress/dataviews": "^11.2.1-next.ba3aee3a2.0",
-		"@wordpress/date": "^5.37.2-next.ba3aee3a2.0",
-		"@wordpress/element": "^6.37.1-next.ba3aee3a2.0",
-		"@wordpress/i18n": "^6.10.1-next.ba3aee3a2.0",
-		"@wordpress/icons": "^11.4.1-next.ba3aee3a2.0",
-		"@wordpress/primitives": "^4.37.1-next.ba3aee3a2.0",
-		"@wordpress/url": "^4.37.1-next.ba3aee3a2.0"
+		"@wordpress/base-styles": "^6.14.0",
+		"@wordpress/components": "^32.0.0",
+		"@wordpress/compose": "^7.38.0",
+		"@wordpress/core-data": "^7.38.0",
+		"@wordpress/data": "^10.38.0",
+		"@wordpress/dataviews": "^11.2.0",
+		"@wordpress/date": "^5.38.0",
+		"@wordpress/element": "^6.38.0",
+		"@wordpress/i18n": "^6.11.0",
+		"@wordpress/icons": "^11.5.0",
+		"@wordpress/primitives": "^4.38.0",
+		"@wordpress/url": "^4.38.0",
+		"clsx": "2.1.1"
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "^6.6.3",
@@ -72,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "67d2e486fcd40c753591cf911ca0659132f519ca"
+	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
 }

package/src/author/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { resolveSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+import AuthorView from './view';
+
+interface Author {
+	id: number;
+	name: string;
+}
+
+const authorField: Partial< Field< MediaItem > > = {
+	label: __( 'Author' ),
+	id: 'author',
+	type: 'integer',
+	getElements: async () => {
+		const authors: Author[] =
+			( await resolveSelect( coreDataStore ).getEntityRecords(
+				'root',
+				'user',
+				{
+					per_page: -1,
+				}
+			) ) ?? [];
+		return authors.map( ( { id, name } ) => ( {
+			value: id,
+			label: name,
+		} ) );
+	},
+	render: AuthorView,
+	sort: ( a, b, direction ) => {
+		const nameA = a._embedded?.author?.[ 0 ]?.name || '';
+		const nameB = b._embedded?.author?.[ 0 ]?.name || '';
+
+		return direction === 'asc'
+			? nameA.localeCompare( nameB )
+			: nameB.localeCompare( nameA );
+	},
+	filterBy: {
+		operators: [ 'isAny', 'isNone' ],
+	},
+	readOnly: true,
+};
+
+export default authorField;

package/src/author/style.scss

@@ -0,0 +1,58 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.media-author-field__avatar {
+	flex-shrink: 0;
+	overflow: hidden;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: left;
+	display: flex;
+
+	img {
+		width: $grid-unit-20;
+		height: $grid-unit-20;
+		object-fit: cover;
+		opacity: 1;
+		border-radius: 100%;
+	}
+
+	&.is-loading,
+	&.is-loaded {
+		img {
+			@media not (prefers-reduced-motion) {
+				transition: opacity 0.1s linear;
+			}
+		}
+	}
+
+	&.is-loading {
+		img {
+			opacity: 0;
+		}
+	}
+
+	&.is-loaded {
+		img {
+			opacity: 1;
+		}
+	}
+}
+
+.media-author-field__icon {
+	display: flex;
+	flex-shrink: 0;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+
+	svg {
+		margin-left: -$grid-unit-05;
+		fill: currentColor;
+	}
+}
+
+.media-author-field__name {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}

package/src/author/view.tsx

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useCallback, useEffect } from '@wordpress/element';
+import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { MediaItem } from '../types';
+
+export default function AuthorView( {
+	item,
+}: DataViewRenderFieldProps< MediaItem > ) {
+	const author = item?._embedded?.author?.[ 0 ];
+	const text = author?.name;
+	const imageUrl = author?.avatar_urls?.[ 48 ];
+
+	/*
+	 * Use three states to avoid fade-in animation for cached images:
+	 * 'instant' = image already cached, 'loading' = waiting, 'loaded' = just finished.
+	 */
+	const [ loadingState, setLoadingState ] = useState<
+		'instant' | 'loading' | 'loaded'
+	>( 'loading' );
+
+	useEffect( () => {
+		setLoadingState( 'loading' );
+	}, [ imageUrl ] );
+
+	const imgRef = useCallback( ( img: HTMLImageElement | null ) => {
+		if ( img?.complete ) {
+			setLoadingState( 'instant' );
+		}
+	}, [] );
+
+	const handleLoad = () => {
+		if ( loadingState === 'loading' ) {
+			setLoadingState( 'loaded' );
+		}
+	};
+
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ !! imageUrl && (
+				<div
+					className={ clsx( 'media-author-field__avatar', {
+						'is-loading': loadingState === 'loading',
+						'is-loaded': loadingState === 'loaded',
+					} ) }
+				>
+					<img
+						ref={ imgRef }
+						onLoad={ handleLoad }
+						alt={ __( 'Author avatar' ) }
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="media-author-field__icon">
+					<Icon icon={ authorIcon } />
+				</div>
+			) }
+			<span className="media-author-field__name">{ text }</span>
+		</HStack>
+	);
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export { default as altTextField } from './alt_text';
 export { default as attachedToField } from './attached_to';
+export { default as authorField } from './author';
 export { default as captionField } from './caption';
 export { default as dateAddedField } from './date_added';
 export { default as dateModifiedField } from './date_modified';

package/src/stories/index.story.tsx

@@ -11,6 +11,7 @@ import type { Field, View } from '@wordpress/dataviews';
 import {
 	altTextField,
 	attachedToField,
+	authorField,
 	captionField,
 	dateAddedField,
 	dateModifiedField,
@@ -109,6 +110,19 @@ const sampleMediaItem: MediaItem = {
 		},
 	},
 	missing_image_sizes: [],
+	_embedded: {
+		author: [
+			{
+				id: 1,
+				name: 'John Doe',
+				avatar_urls: {
+					'24': 'https://gravatar.com/avatar/?s=24&d=mm&r=g',
+					'48': 'https://gravatar.com/avatar/?s=48&d=mm&r=g',
+					'96': 'https://gravatar.com/avatar/?s=96&d=mm&r=g',
+				},
+			},
+		],
+	},
 };
 
 // Sample data for a non-image file (ZIP)
@@ -197,6 +211,17 @@ const sampleMediaItemZip: MediaItem = {
 				featured_media: 0,
 			},
 		],
+		author: [
+			{
+				id: 1,
+				name: 'Jane Smith',
+				avatar_urls: {
+					'24': 'https://gravatar.com/avatar/?s=24&d=mm&r=g',
+					'48': 'https://gravatar.com/avatar/?s=48&d=mm&r=g',
+					'96': 'https://gravatar.com/avatar/?s=96&d=mm&r=g',
+				},
+			},
+		],
 	},
 };
 
@@ -249,6 +274,19 @@ const sampleMediaItemBrokenImage: MediaItem = {
 		sizes: {},
 	},
 	missing_image_sizes: [],
+	_embedded: {
+		author: [
+			{
+				id: 1,
+				name: 'Admin User',
+				avatar_urls: {
+					'24': 'https://gravatar.com/avatar/?s=24&d=mm&r=g',
+					'48': 'https://gravatar.com/avatar/?s=48&d=mm&r=g',
+					'96': 'https://gravatar.com/avatar/?s=96&d=mm&r=g',
+				},
+			},
+		],
+	},
 };
 
 // Create a showcase of all media fields.
@@ -257,6 +295,7 @@ const showcaseFields = [
 	filenameField,
 	altTextField,
 	attachedToField,
+	authorField,
 	captionField,
 	dateAddedField,
 	dateModifiedField,
@@ -287,6 +326,7 @@ const DataFormsComponent = ( { type }: { type: 'regular' | 'panel' } ) => {
 			'mime_type',
 			'media_dimensions',
 			'filesize',
+			'author',
 			'date',
 			'modified',
 			'attached_to',

package/src/style.scss

@@ -1 +1,2 @@
+@use "./author/style.scss" as *;
 @use "./media_thumbnail/style.scss" as *;

package/src/types.ts

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import type { Attachment, Updatable, Post } from '@wordpress/core-data';
+import type { Attachment, Updatable, Post, User } from '@wordpress/core-data';
 
 export type MediaKind = 'image' | 'video' | 'audio' | 'application';
 
@@ -18,6 +18,7 @@ export interface MediaItem extends Attachment< 'edit' > {
 	_embedded?: {
 		// TODO: Include wp:attached-to properly, and backport PHP changes from wordpress-develop to support this.
 		'wp:attached-to'?: Post[] | Partial< Post >[];
+		author?: User[] | Partial< User >[];
 	};
 }