https://github.com/front/g-media-attributes
https://github.com/front/g-media-attributes
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/front/g-media-attributes
- Owner: front
- License: mit
- Created: 2019-02-07T16:13:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-11-05T15:39:51.000Z (over 4 years ago)
- Last Synced: 2025-08-08T16:48:30.808Z (10 months ago)
- Language: JavaScript
- Size: 32.2 KB
- Stars: 0
- Watchers: 11
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gutenberg JS Media Attributes
> A set of extensions for core media blocks in order to support Drupal's media attributes.
### How to use
Install the package from NPM.
```
$ npm install @frontkom/g-media-attributes
```
Add to the editor before the core blocks are loaded:
```
import '@frontkom/g-media-attributes';
```
### Motivation
In order to fully support Drupal's file entity when handling images on Gutenberg editor, the ![]()
tags on core media blocks need to have the `data-entity-uuid` and `data-entity-type` attributes.
The block resulting HTML must be something like this:
```
```
The data-* attributes are provided by `api-fetch`'s upload method.
The following core blocks needed to be updated:
- core/image
- core/video
- core/media-text
- core/cover
- core/gallery
### Solution
The 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.
```
settings.edit = editWithMediaAttrs(settings.edit);
settings.save = saveWithMediaAttrs(settings.save);
```
When an image is selected, the Edit HOC captures that event and fecthes the additional data required from the API.
On save, the Save HOC updates the rendered tree with the necessary attributes for each media element.
### Known issues
- core/gallery
Currently 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.
## License
[MIT](./LICENSE)