Aprende con este tutorial cómo añadir clases CSS personalizadas en el cuerpo tu child theme de Genesis para poder personalizar los bloques del editor.
Los bloques del editor de WordPress ofrecen algunas clases de CSS para poder darles estilo.
Pero, ¿y si estos estilos predefinidos no son suficientes y necesitas algo más específico?
En concreto, las últimas versiones de Genesis Sample (>2.8) han introducido nuevas clases de CSS que permiten un poco más de personalización en los bloques, pensando sobre todo en otorgar estilos diferentes al primer bloque de cada tipo.
¿Te interesa aplicar esa mejora a cualquier otro child theme de Genesis?
Aquí tienes cómo hacerlo:
Snippet para agregar clases de CSS que ayudan a dar estilos a los bloques del editor
Añade la siguiente línea en functions.php:
Para ver este código y los otros 1307 snippets de esta web,
identifícate o suscríbete aquí.
Este fragmento otorga clases CSS al cuerpo:
- Si no tiene bloques >
has-no-blocks - Al primer bloque de cada tipo >
first-block-+ nombre del bloque - Al primer bloque de ancho amplio o completo >
first-block-align-+alignwideoalignfull.
Esto te permite aplicar estilos específicos para estos tres escenarios y, de esta forma, personalizar de forma más granular los bloques de WordPress.
Puedes modificar el nombre de la función para adecuarlo al del child theme de Genesis donde quieras aplicarlo.
Por ejemplo, si lo quieres aplicarlo al tema Academy Pro sustituye genesis_sample_blocks_body_classes por academy_pro_blocks_body_classes.
Conclusiones
Genesis Sample (>2.8) integra unas clases de CSS muy interesantes para personalizar aún más los bloques del editor de WordPress.
¿Quieres adaptar a tu child theme de Genesis de la misma forma? Ahora ya sabes cómo. 😉
Si tienes alguna duda sobre este tutorial déjala en los comentarios.
¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.
Todo ventajas de ser suscriptor.
