• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Crear block styles o estilos personalizados para bloques de WordPress

Aprende en este tutorial cómo crear estilos personalizados de bloques (block styles) para el editor de WordPress y añadirlos a un tema.

Una de las características de los bloques del editor de WordPress es que pueden tener distintos estilos.

Por ejemplo, en el de imagen muestra dos opciones:

  • Por defecto
  • Redondeado

Pero, ¿sabes qué es lo más interesante?

Que puedes crear tus propios block styles de forma sencilla.

En este tutorial vas a ver cómo crear un estilo de bloque personalizado para el bloque de imagen y tenerlo disponible en tu child theme.

Ejemplo de distintos estilos personalizados para el bloque de imagen.

Aquí tienes cómo:

Pasos para crear estilos de bloque personalizados en WordPress

1. Registra los nuevos estilos

Lo primero que tienes que hacer es registrar los nuevos estilos.

Para ello crea un fichero llamado image-block-styles.js dentro de la carpeta /js/ con el siguiente código :

Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.

Cada estilo consta de 4 elementos:

  • core/image -> el bloque de imagen al que vamos a añadir los nuevos estilos
  • name -> nombre interno que también otorgará la clase CSS.
  • label -> etiqueta utilizada para el nombre que se muestra en el editor.
  • isDefault -> si quieres que sea el estilo por defecto o no.

Con el ejemplo anterior registras 3 nuevos estilos para el bloque de imagen:

  • Circular
  • Con forma de estrella
  • Triangular

2. Encola los nuevos estilos

Una vez que tienes el fichero donde has registrado los estilos debes encolarlos al tema. Para ello añade el siguiente snippet al final de functions.php:

Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.

3. Otorga estilos mediante CSS

A la hora de registrar los nuevos estilos de bloques has usado nomenclaturas que se traducen en clases CSS. Concretamente:

  • is-style-circular-image
  • is-style-star-shape
  • is-style-triangle-shape

Ahora tienes que usar estas clases para dar el diseño que quieras y añadirlos tanto a la hoja de estilos del frontend como del editor.

Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.

En el caso de Genesis Sample debes añadirlo al final de los fichero:

  • /lib/gutenberg/front-end.css
  • /lib/gutenberg/style-editor.css

¡Ojo! Por que si solo lo incluyes en la parte frontal no podrás previsualizar los estilos en el editor.

Block styles extra para el bloque de imagen.

Esto es un simple ejemplo en que te puedes inspirar para crear tus propios estilos de bloques.

¡Imaginación al poder! 😉

Conclusiones

El editor de bloques de WordPress permite muchas posibilidades de personalización. Si quieres empezar a sacarle partido creando tus propios estilos de bloques o block styles ahora ya sabes cómo hacerlo.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉


CSS Editor de bloques Estilos de bloques Javascript PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?