Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Crear variaciones de estilo para WordPress Gutenberg Blocks: Parte 2

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

En la publicación anterior aprendimos todo sobre las variaciones de estilo de bloque y cómo se usan en el nuevo editor de WordPress 5.0 para cambiar entre los estilos predefinidos fácilmente.

Iremos un poco más lejos en esta publicación y le daremos más ejemplos para darle una base sólida para implementar variaciones de estilo de bloque en sus propios proyectos. Específicamente, crearemos nuestro propio bloque desde cero para demostrar cómo agregar múltiples variaciones de estilo directamente en la propia definición de bloque. También le mostraré cómo establecer qué estilo de bloque se usa, ya que también se cubre el valor predeterminado.

Luego veremos cómo ampliar nuestro bloque agregando más variaciones de estilo de bloque (BSV, por sus siglas en inglés) a través de un complemento separado. Normalmente querrá hacer esto si necesita extender los estilos de bloque pero no tiene acceso al código fuente del bloque.

Se volverá a utilizar el mismo enfoque, pero esta vez a través de un tema secundario. Es posible que desee hacer esto para proporcionar variaciones de estilo adicionales para los bloques principales para que coincidan con sus propios estilos de tema.

Tan importante como registrar nuevos estilos es cómo anular el registro también. Y hay una función dedicada que usaremos para hacer justamente esto.

Todo el código de este tutorial está disponible para descargar nuestro repositorio de GitHub a la derecha, por lo que no tiene que escribir el código manualmente si solo desea seguirlo.

Registro de un BSV dentro de un bloque

Si tiene acceso al código fuente de un bloque, puede administrar las variaciones de estilo de bloque directamente dentro de registerBlockType (). Miremos más de cerca.

En primer lugar, tendremos que girar un nuevo bloque. Realmente no importa lo que haga el bloque, ya que solo necesitamos algo para agregar nuestras variaciones de estilo de bloque personalizadas también. Probablemente la forma más fácil de hacerlo es usar la utilidad create-guten-block que crea un nuevo complemento y agrega un bloque de muestra listo para personalización. ¡Y lo hace todo desde un solo comando de terminal!

Si no ha utilizado esta útil utilidad antes, puede consultar el repositorio del proyecto para obtener más información. Además, aquí hay un tutorial dedicado para actualizarlo si es necesario.

Dentro de su carpeta local de plugins de WordPress, abra una ventana de línea de comandos e ingrese:

He usado bsv-plugin aquí para el nombre, pero puedes usar lo que quieras. Después de un par de minutos una vez completada la instalación, ingrese:

Ahora podemos editar el código fuente para nuestro bloque recién creado y create-guten-block compilará automáticamente el código fuente para nosotros después de cada cambio. Bonito.

Continúe y active el complemento dentro del administrador de WordPress y agregue una instancia de su nuevo bloque al editor creando una nueva página o editando una existente.

Block created with create-guten-block

Eliminar estilos solo de editor

Antes de continuar, debemos modificar la forma en que CSS se pone en cola de forma predeterminada.

El bloque personalizado create-guten-block que acabamos de crear incluye dos hojas de estilo. Uno se pone en cola en el editor y el otro se pone en cola en el editor y la interfaz. No necesitamos los estilos de solo editor para este tutorial, por lo que en. \ Bsv-plugin \ src \ init.php comentar o eliminar la llamada a wp_enqueue_style () en bsv_plugin_cgb_editor_assets ().

Al permanecer en init.php por un momento, también debemos comentar la matriz de dependencias para wp_enqueue_style () en bsv_plugin_cgb_block_assets () ya que, por alguna razón, actualmente esto evita que los estilos se pongan en cola correctamente. Estoy usando create-guten-block v1.11.0 en este tutorial, por lo que puede o no tener el mismo problema dependiendo de la versión que esté usando.

La función bsv_plugin_cgb_block_assets () ahora debería tener este aspecto:

Ahora, cuando cargue la página, verá los estilos de bloque que se aplican en el editor y en el extremo frontal, que es lo que queremos.

Block styles enqueued on frontend and backend

Registrar variaciones de estilo de bloque

Todos estamos configurados ahora para agregar nuestro CSS personalizado que haremos en breve. Primero, aunque necesitamos registrar nuestras variaciones de estilo de bloque.

Abra. \ Bsv-plugin \ src \ block \ block.js y agregue lo siguiente al objeto de configuración de las funciones registerBlockType (por ejemplo, directamente debajo de la propiedad keyword aquí).

Esto registra tres nuevas variaciones de estilo para nuestro bloque personalizado. Observe cómo la variación de estilo de bloque llamada style1 tiene la propiedad isDefault establecida en true. Esto simplemente selecciona la variación de estilo del bloque Style 1 cuando abre las opciones de bloque en el editor. En realidad, no establece ninguna clase de CSS para el bloque como podría pensar.

Esto fue un poco un punto difícil para mí cuando comencé a trabajar con variaciones de estilo de bloque y fue una fuente de mucha confusión. Esperemos que en el futuro la propiedad isDefault también active la clase CSS que se agregará a la envoltura del bloque, que creo que es más intuitiva.

Actualice la página del editor y abra las opciones de variación de estilo haciendo clic en el icono en la parte superior izquierda del bloque para ver las tres variaciones de estilo de bloque que acabamos de definir.

Our three new block style variations

Observe cómo se selecciona de forma predeterminada la variación de estilo del bloque Style 1, que es la que hemos especificado en la propiedad de styles anterior. La selección de cualquiera de las tres variaciones de estilo de bloque hace que se agreguen diferentes clases de CSS a la envoltura del bloque. Por ejemplo, al seleccionar el style 2 se agrega la clase is-style-style2.

Block style variation CSS class added to markup

Actualmente no ocurre nada cuando se selecciona cada variación de estilo de bloque, así que vamos a agregar algunos estilos básicos para solucionar este problema. En. \ Bsv-plugin \ src \ block \ style.scss agregue lo siguiente después de los estilos existentes:

Solo los estilos personalizados para las variaciones de estilo de bloque de Style 2 y Style 3 se agregan aquí, por lo que los estilos de bloque predeterminados aún se aplican incluso cuando no se hace clic específicamente en ninguna variación de estilo de bloque.

Our block styles added

Como puede ver, nuestras variaciones de estilo de bloque ahora están disponibles con los estilos aplicados. Realmente me gusta la forma en que puede ver una vista previa de cada variación de estilo mientras la desplaza, ¡y sin tener que seleccionarla también!

Registro de un BSV a través de un complemento

Si desea agregar variaciones de estilo a un bloque para el que no tiene acceso al código fuente, puede usar registerBlockStyle (). Esta función le permite definir variaciones de estilo adicionales para bloques principales y bloques de terceros, fuera de registerBlockType ().

Probemos esto agregando un par de nuestras propias variaciones de estilo al bloque de botones central. Este bloque viene con tres variaciones de estilo ya definidas: Redondeado, Contorno y Cuadrado.

Default block style variations for the button block

Agregaremos otras dos variaciones de estilo: Pill Shaped y Uppercase.

Sin embargo, antes de hacer eso necesitamos un complemento para almacenar nuestro código personalizado. No lo cubriré en profundidad ya que el enfoque de este tutorial son las variaciones de estilo de bloque en lugar del desarrollo de complementos. Si tiene problemas para seguir adelante, simplemente puede descargar el complemento finalizado a través del enlace de GitHub a la derecha.

Cree una nueva carpeta bsv dentro de su carpeta local de WordPress. \ Wp-content \ plugins y agregue tres archivos:

  • bsv.php
  • bsv.js
  • bsv.css

En bsv.php agrega el siguiente código:

En bsv.js agregue el código de front-end:

Y en bsv.css agrega los estilos mismos:

Active el complemento e inserte una nueva instancia del bloque de botones en el editor. ¡Ahora deberías ver las dos nuevas variaciones de estilo de bloque disponibles!

Two new block style variations added

Entendiendo el código del complemento BSV

Repasemos lo que acabamos de hacer. En bsv.php, el archivo JavaScript se puso en cola a través del enlace enqueue_block_editor_assets, por lo que se carga solo en el editor de administración. Sin embargo, queremos que el CSS se cargue en el editor y en el front-end, así que usamos el enlace enqueue_block_assets para esto.

Los estilos se explican por sí mismos, pero observe cómo hemos dirigido las instancias de bloque con clases de variación de estilo de bloque específicas. Esto nos da una forma limpia de separar nuestro CSS para diferentes variaciones de estilo de bloque.

Lo importante a tener en cuenta aquí son las dos llamadas registerBlockStyle (). Esta función reside en el objeto wp.blocks global, por lo que debemos incluir explícitamente el prefijo donde se usa esa función.

registerBlockStyle () toma dos argumentos. El primero es el nombre del bloque al que desea agregar la variación de estilo y el segundo es un objeto de configuración. Este es exactamente el mismo objeto que encontramos anteriormente cuando agregamos variaciones de estilo de bloque directamente a una definición de bloque a través de la propiedad styles.

Sin embargo, una cosa a tener en cuenta es que si agrega isDefault: true para una variación de estilo de bloque a través de registerBlockStyle (), se ignorará si ya se ha establecido una variación de estilo predeterminada. Solo algo a tener en cuenta si (como yo) esperabas que anulara la variación de estilo predeterminada.

De acuerdo con la documentación, también puede anular el registro de una variación de estilo de bloque con unregisterBlockStyle (). El uso es muy similar a registerBlockStyle () pero solo necesita especificar el nombre del bloque y el nombre de la variación de estilo.

Así, por ejemplo, para anular el registro de la variación del estilo del Esquema del bloque de botones que puede usar:

Sin embargo, parece que hay un pequeño problema con esto ahora mismo. Funciona si ingresa la línea de código anterior en la ventana de la consola, pero no siempre parece funcionar cuando se usa desde un complemento. Esperemos que estos problemas sean abordados pronto.

Registro de un BSV a través de un tema

Para nuestro ejemplo final, agreguemos otra variación de estilo al bloque central de botones para agregar una opción para renderizar botones con un color de fondo degradado en lugar de solo un color plano.

Implementaremos esta nueva variación de estilo a través de un tema secundario esta vez, ya que creo que será un caso de uso común proporcionar estilos alternativos para los bloques que coincidan con su propio tema. (El tema también se incluye en el archivo descargable para este tutorial si no desea crearlo manualmente).

Estoy usando Twenty Nineteen como tema principal, ya que se incluye con WordPress 5.0, pero puede basarse en cualquier tema principal que desee.

Cree una nueva carpeta twentynineteen-child en su carpeta local de WordPress. \ Wp-content \ themes y agregue cuatro archivos:

  • style.css
  • functions.php
  • tnc_bsv.js
  • tnc_bsv.css

No agregaremos estilos de temas secundarios específicos a style.css, pero debemos incluirlo para que WordPress reconozca el tema.

En style.css agregar:

Los archivos JavaScript y CSS se ponen en cola a través de functions.php, así que agregue el siguiente código a este archivo:

En tnc_bsv.js agregue el código para registrar nuestra variación de estilo de bloque:

Finalmente, el CSS para nuestra variación de estilo de bloque se agrega a tnc_bsv.css:

El código es prácticamente el mismo que el complemento que creamos en el último ejemplo para agregar dos nuevas variaciones de estilo de bloque. Todo lo que estamos haciendo aquí es agregar otro, pero esta vez a través de un tema secundario.

Active el tema y luego agregue un bloque de botones al editor para ver nuestra nueva creación.

New block style variation added via a child theme

Es posible que haya notado que envolví el código JavaScript dentro de una declaración jQuery:

Esto no es realmente estrictamente necesario. Durante la prueba, el código pareció funcionar bien sin el contenedor jQuery. Sin embargo, todavía no hay pautas oficiales sobre cómo agregar código JavaScript que interactúe con la nueva API del editor. Mientras tanto, puede ser recomendable seguir utilizando el método de envoltura jQuery anterior, pero la elección depende de usted.

Descargar el codigo

Como ya se mencionó, el código está disponible para descargarlo a través del enlace de GitHub a la derecha de la página.

Este repositorio contiene el tema y dos complementos que desarrollamos en este tutorial. Cuando hayas descargado los contenidos verás tres carpetas. Agregue la carpeta twentynineteen-child a su carpeta de temas. \ Wp-content \ themes y las otras dos carpetas de complementos a su carpeta de complementos. \ Wp-content \ plugins.

Active ambos complementos y el tema para que las variaciones de estilo de bloque estén disponibles en el nuevo editor de WordPress.

Conclusión

Gracias por acompañarme en este tutorial! Espero que ahora tengas más idea de qué se tratan las variaciones de estilo de bloque. Déjeme saber en los comentarios qué ideas podría tener para usarlas en sus propios proyectos.

Estoy seguro de que esta será una característica muy utilizada por los desarrolladores de complementos y por temas. En particular para los desarrolladores de temas, le ofrece una gran cantidad de posibilidades para personalizar los estilos de bloque para que coincidan con sus estilos de tema.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.