ElegantThemes

Agregar atributos HTML personalizados con el complemento de atributos de bloque

A principios de esta semana, websevendev tiene su cuarto complemento de WordPress en el directorio oficial llamado. liberado Atributos de bloque. La extensión permite a los usuarios finales agregar cualquier atributo HTML a casi cualquier bloque.

Uno de los problemas con el editor de WordPress es que puede resultar un poco quisquilloso con la personalización de HTML. Los bloques se basan en una serie de estándares y el marcado está diseñado para cumplir con esas expectativas. Si algo no encaja, los usuarios verán una advertencia de marcado no válido.

Sin embargo, hay situaciones en las que los usuarios necesitan ingresar un atributo HTML personalizado por varias razones. Por ejemplo, a veces necesito agregar uno personalizado data- -Atributo por trabajar con algo de JavaScript. Como estoy muy bien informado sobre el código, generalmente escribo el HTML usando el bloque HTML personalizado en estas situaciones. Sin embargo, esto no tiene sentido si se requieren adiciones menores de atributos.

WordPress actualmente permite a los usuarios agregar clases e ID (llamados «anclajes HTML» en el administrador) a casi cualquier bloque. No permite la entrada directa de la docena de otros atributos posibles que admite HTML. Los casos de uso para el usuario medio son pocos y distantes entre sí.

Para escenarios en los que algunos usuarios podrían usar la función adicional, el complemento Block Attributes es útil.

El complemento es fácil de usar. Agrega un nuevo campo llamado «Atributos adicionales» en la pestaña «Avanzado» de cada bloque. Los usuarios pueden agregar el nombre del atributo y hacer clic en el botón «Agregar». A partir de ahí, crea un nuevo campo para agregar el valor del atributo.

Añadiendo un onclick Atributo a un bloque de botones.

El complemento también admite varios atributos. Una vez que haya agregado uno, simplemente use el mismo campo de entrada para crear más.

Para mi primera prueba de manejo tengo una simple onclick Atributo con un valor de myFunction(). Luego salté a mi tema y creé esta función a través de JavaScript para enviar un mensaje simple a la consola. Todo se veía bien debajo del capó y funcionó.

La mayoría de los casos de uso que visualizo están relacionados con la integración con JavaScript, y este fue un ejemplo simple de lo que es posible. Hay cosas mucho más complejas que un desarrollador podría hacer con esta función. Razón suficiente para mantener este complemento en la caja de herramientas: a veces se necesita una llave inglesa en lugar de un martillo.

También pude ver que los atributos de bloque se utilizan para agregar atributos ARIA en otras situaciones en las que esto podría ayudar a la accesibilidad.

Los usuarios pueden acceder a un bloque específico a través de un. agregar estilos personalizados style Atributo con el complemento. Sin embargo, si este no es un simple caso aislado, lo desaconsejaría. Para aplicaciones avanzadas, Bloques de CSS es un complemento mucho más adecuado. Tiene un resaltador de sintaxis incorporado. Además, un área de texto es más amigable que un campo de entrada de texto de una sola línea.

La única desventaja de bloquear los atributos que he visto es la desactivación. Si ha agregado atributos personalizados, verá el temido mensaje «Este bloque contiene contenido inesperado o no válido» en el editor. El editor logró resolver todos los problemas que encontré con los bloques centrales.

Vista en paralelo del modal emergente para la resolución de bloques en el editor de WordPress.
Resolviendo la advertencia de bloqueo después de desactivar el complemento.

La desactivación del complemento no debería afectar la salida de la interfaz. Debido a que los atributos personalizados son parte del marcado HTML, todavía están allí. El mensaje de error solo debe mostrarse en el editor.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *