Opened 3 months ago
Last modified 3 months ago
#62686 new feature request
Support for data-* attributes in Gutenberg blocks
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Editor | Keywords: | close |
| Focuses: | Cc: |
Description
Add support for data-* attributes in Gutenberg blocks. Currently, adding data-* attributes to any element via the code editor results in an error message saying “Block contains unexpected or invalid content”.
data-* attributes are needed by thousands of websites because they help them leverage hundreds of features and design changes.
One small example. Using the data-nosnippet HTML attribute in Google’s recommendations for hiding elements in search engine results (SEO)
https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#data-nosnippet-attr
Change History (1)
Note: See
TracTickets for help on using
tickets.
Hi there and welcome to WordPress Trac!
Note that Gutenberg-specific feature requests are best submitted at https://github.com/WordPress/gutenberg, as that's where development for that part of WordPress happens.
It's expected behavior for a Gutenberg block to return such an error if there is unknown markup in the content that can't be accounted for. You should not manually edit the HTML of blocks, because the HTML is not the source of truth, it is only generated based on the block's properties (block attributes). When saving a block, the editor doesn't know where your custom markup is coming from, be it a data-* attribute or something else. You would need to first add support for that.
When you build a plugin for adding such custom HTML attributes through the editor, you'll want to use JS filters such as `blocks.getSaveContent.extraProps` to ensure this HTML attribute is present in the generated HTML. You'll also want a new block attribute if you want to be able to control the behavior through the UI (i.e. a toggle for turning that on or off).
Alternatively, for programmatically adding custom attributes you could use the server-side HTML API.
There is prior discussion about this at https://github.com/WordPress/gutenberg/issues/16164, which seems to contain almost like a tutorial. So I'd suggest continuing the discussion there if you have any questions.
Again, that GitHub repository is the way to go for Gutenberg-specific requests.