{"id":44617391,"url":"https://github.com/front/g-media-attributes","last_synced_at":"2026-02-14T13:12:07.269Z","repository":{"id":55912038,"uuid":"169600712","full_name":"front/g-media-attributes","owner":"front","description":null,"archived":false,"fork":false,"pushed_at":"2021-11-05T15:39:51.000Z","size":33,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-08-08T16:48:30.808Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/front.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-07T16:13:36.000Z","updated_at":"2021-11-05T15:39:54.000Z","dependencies_parsed_at":"2022-08-15T09:20:10.026Z","dependency_job_id":null,"html_url":"https://github.com/front/g-media-attributes","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/front/g-media-attributes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/front%2Fg-media-attributes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/front%2Fg-media-attributes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/front%2Fg-media-attributes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/front%2Fg-media-attributes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/front","download_url":"https://codeload.github.com/front/g-media-attributes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/front%2Fg-media-attributes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29444145,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T12:43:28.304Z","status":"ssl_error","status_checked_at":"2026-02-14T12:43:14.160Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-14T13:12:06.657Z","updated_at":"2026-02-14T13:12:07.262Z","avatar_url":"https://github.com/front.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gutenberg JS Media Attributes\n\u003e A set of extensions for core media blocks in order to support Drupal's media attributes.\n\n\n### How to use\n\nInstall the package from NPM.\n\n```\n$ npm install @frontkom/g-media-attributes\n```\n\nAdd to the editor before the core blocks are loaded:\n\n```\nimport '@frontkom/g-media-attributes';\n```\n\n\n### Motivation\n\nIn order to fully support Drupal's file entity when handling images on Gutenberg editor, the \u003cimg /\u003e tags on core media blocks need to have the `data-entity-uuid` and `data-entity-type` attributes.\n\nThe block resulting HTML must be something like this:\n\n```\n\u003cfigure class=\"wp-block-image\"\u003e\n  \u003cimg data-entity-uuid=\"f398bc3b-1c50-4394-bf80-3af0f72fef42\" data-entity-type=\"file\" src=\"...\"\n    alt=\"Picture\" class=\"wp-image-1\"\u003e\n\u003c/figure\u003e\n```\n\nThe data-* attributes are provided by `api-fetch`'s upload method.\n\nThe following core blocks needed to be updated:\n\n- core/image\n- core/video\n- core/media-text\n- core/cover\n- core/gallery\n\n\n### Solution\n\nThe solution we found was to wrap the Edit and Save components with [Higher Order Components](https://reactjs.org/docs/higher-order-components.html)'s (HOC) that handle the fetching and printing of these media attributes.\n\n```\nsettings.edit = editWithMediaAttrs(settings.edit);\nsettings.save = saveWithMediaAttrs(settings.save);\n```\n\nWhen an image is selected, the Edit HOC captures that event and fecthes the additional data required from the API.\n\nOn save, the Save HOC updates the rendered tree with the necessary attributes for each media element.\n\n\n### Known issues\n\n- core/gallery\n\nCurrently the block validation for `core/gallery` throws an error to the console. However, this does not affect the loading of the block itself. It seems to be caused by the difference in number of attributes present on each of the gallery items (expected vs actual). More discovery is needed.\n\n\n## License\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffront%2Fg-media-attributes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffront%2Fg-media-attributes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffront%2Fg-media-attributes/lists"}