Attributes for Blocks

Descripción

This plugin adds additional advanced inspector controls to Gutenberg blocks that allow to add any custom HTML attributes to the block’s front-end output. This allows you to add inline styles to fine-tune the block’s appearance, set aria attributes to improve your site’s accessibility, add data attributes to integrate with any JavaScript modules or even JavaScript DOM event attributes such as onclick, onchange or onload.

Capturas

  • Adding style attribute to paragraph block

Instalación

Install via admin dashboard

  1. Go to your WordPress admin dashboard -> Plugins.
  2. Click “Add New”.
  3. Click “Upload Plugin”.
  4. Select the attributes-for-blocks.zip file.
  5. Click “Install Now”.
  6. Activate the plugin from WordPress admin dashboard -> Plugins.

Manual install via FTP upload

  1. Upload the folder “attributes-for-blocks” from attributes-for-blocks.zip file to your WordPress installations ../wp-content/plugins folder.
  2. Activate the plugin from WordPress admin dashboard -> Plugins.

FAQ

How do I add an attribute?

In your selected block’s inspector controls (Block settings) scroll all the way to the bottom and click on “Advanced”. It should contain a section called “Additional attributes”.
Type an attribute name into the “Add attribute” field and press “Add” to add an attribute for the block. A new input with the attribute’s name should appear below, into which you can optionally insert the attribute value.
Example attributes: style, title, target, class, id, onClick, data-*, aria-*.

How does it work?

For regular blocks, attributes are added to the block save content’s root element, meaning they will be rendered only on the front end and not in the editor. For dynamic blocks the attributes are added via render_callback function and they may also be applied in the editor, depending if the block is rendered server or client side.

Does it work for every block?

It should work with normal blocks that render a valid WP Element that can utilize the blocks.getSaveContent.extraProps filter as well as dynamic blocks that utilize a render_callback. Third party blocks that do something unorthodox may not work.
Known unsupported blocks

What happens when I disable this plugin?

Blocks with custom attributes may become invalid, depending on which attributes you’ve added. From there you can recover the block without the custom attributes by clicking “Attempt Block Recovery” or keep the block with custom attributes as HTML by choosing “Convert to HTML”. If you don’t want to risk blocks becoming invalid you need to remove all custom attributes before disabling the plugin.

Reseñas

13 de noviembre de 2021
It's perfect for what I need! I hope you'll keep it updated as this behaviour should really be native in WordPress!
2 de noviembre de 2021
Exactly what I was looking for to make my WordPress Site more accessible! Should be in the core of WP!
16 de septiembre de 2021
I like it a lot! Little enhancement: I would love to set default attributes (with emptpy values) to decrease repetitive attribute setup.
Leer todas las 4 reseñas

Colaboradores y desarrolladores

«Attributes for Blocks» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Attributes for Blocks» ha sido traducido a 1 idioma local. Gracias a los traductores por sus contribuciones.

Traduce «Attributes for Blocks» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.0.0

  • Initial release.