Atributos para bloques

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

  • Agregando atributo de estilo al bloque de párrafo

Instalación

Instalar a través del panel de administración

  1. Ve a tu panel de administración de WordPress -> Plugins.
  2. Haz clic en «Añadir nuevo»
  3. Haz clic en «Subir plugin».
  4. Seleccione el archivo attributes-for-blocks.zip.
  5. Haz clic en «Instalar ahora».
  6. Active el plugin desde panel de administración de -> Plugins de WordPress.

Instalación manual vía carga FTP

  1. Sube la carpeta «attributes-for-blocks» desde el archivo attributes-for-blocks.zip a la carpeta ../wp-content/plugins de tus instalaciones de WordPress.
  2. Active el plugin desde panel de administración de -> Plugins de WordPress.

FAQ

¿Cómo agrego un atributo?

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-*.

¿Cómo funciona?

Para los bloques regulares, los atributos se agregan al elemento raíz del contenido guardado del bloque, lo que significa que se representarán solo en la interfaz y no en el editor. Para los bloques dinámicos, los atributos se agregan a través de la función render_callback y también se pueden aplicar en el editor, dependiendo de si el bloque se renderiza del lado del servidor o del cliente.

¿Funciona para todos los bloques?

Debería funcionar con bloques normales que renderizan un elemento WP válido que pueda utilizar el filtro blocks.getSaveContent.extraProps, así como bloques dinámicos que utilicen un render_callback. Es posible que los bloques de terceros que hacen algo poco ortodoxo no funcionen.
Bloques no admitidos conocidos

Disable block support

El filtro afb_unsupported_blocks se puede usar en el archivo functions.php de su tema hijo (Child theme) para deshabilitar el soporte de bloques para agregar atributos adicionales.

add_filter('afb_unsupported_blocks', function($blocks) {
    $blocks[] = 'core/button';
    return $blocks;
});

¿Qué pasa cuando desactivo el 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

24 de septiembre de 2022
this simple plugin is really necessary to be able to use javascript. thanks a lot!
30 de julio de 2022
Perfect for the feature it adds: block attributes. And it's a really handy feature for developers and anybody who knows enough HTML to edit tag attributes. I appreciate plugins that do something without trying to be all things to all people. This does its thing without fanfare or bloat. And it exceeds expectations with a handy style editor when "style"' is the attribute. Nice touch. Thanks for the handy plugin.
7 de junio de 2022
I was busy building a group block variation with a attribute field when I bumped into your plug-in. It just do what I was looking for in a more comprehensive way. This should definitly be native to wp ! Thank's
Leer todas las 10 reseñas

Colaboradores y desarrolladores

«Atributos para bloques» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Atributos para bloques» ha sido traducido a 3 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce «Atributos para bloques» 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.4

  • Add afb_sanitize_attribute_key and afb_sanitize_attribute_value filters.
  • Catch errors when using invalid characters in attribute name/value.
  • Update @wordpress/* packages.

1.0.3

  • Update @wordpress/* packages.
  • Test with WordPress 6.0.
  • Convert advanced style attribute editor to TypeScript and refactor.
  • Fix duplicate attribute values being output when the block has both JS and PHP render functions.
  • Add GitHub link.
  • Remove src folder from plugin.

1.0.2

  • Agregue un editor avanzado para el atributo de estilo.
  • Eliminar jQuery

1.0.1

  • Corrige la codificación de caracteres especiales para bloques dinámicos.