Cómo crear una paleta de colores personalizada para el editor Gutenberg

Generador de paletas de colores para WordPress

Actualización del 18 de noviembre de 2018: Una de las últimas actualizaciones de Gutenberg eliminó el componente PanelColor, así que actualicé el código con el componente PanelColorSettings en su lugar. Eso lo hace más fácil, porque directamente nos permite especificar colores personalizados.

Actualización del 11 de julio de 2018: Es necesario establecer ambos atributos de color como atributos en el último bloque de código. De lo contrario, los colores seleccionados no se reconocen desde los selectores de color después de recargar el navegador.

Primero, mi solución fue usar el componente PanelColor, que no permite colores personalizados fácilmente, por lo que fue un poco más complicado que la solución a través de PanelColorSettings. Ese componente nos permite establecer un conjunto de colores personalizados – pero es necesario definir todos los colores utilizados a través de add_theme_support( ‘editor-color-palette’ ), porque eso es lo que Gutenberg utiliza para generar los nombres de las clases de color.

Como ya se ha escrito, la solución se compone de componentes existentes de Gutenberg – es decir, esas definiciones y la función withFallbackStyles() en el bloque de párrafo y el componente PanelColor.

La paleta de colores del editor no funciona

Aunque los temas de WordPress pueden anularlos y proporcionar paletas de colores “temáticas”, pensé que sería interesante cargar un valor de color personalizado desde el Personalizador de WordPress dentro de las paletas de colores de Gutenberg.

En primer lugar, tenemos que añadir un ajuste y control para una nueva opción de color de acento dentro del Personalizador de WordPress. A continuación encontrarás un ejemplo de cómo añadir una simple opción accent_color al panel “Colores” de un tema de WordPress dentro del Personalizador.

  Bach Tickets System – WordPress como gestor de tareas

Si necesita un repaso de la API del Personalizador, consulte esta sección del Manual de Temas de WordPress. Usando la configuración y el control del gist anterior, deberíamos ver una nueva opción de color Gutenberg Accent disponible dentro del panel Colors de la ventana Customizer, como se muestra a continuación:

Para añadir soporte para las paletas de colores de Gutenberg, un tema de WordPress necesita añadir una llamada a add_theme_support, haciendo referencia a la función editor-color-palette. Si necesitas un repaso, escribí un manual sobre cómo añadir soporte para las paletas de colores de Gutenberg a los temas de WordPress.

Ahora que los temas son responsables de proporcionar clases de color apropiadas en múltiples contextos, necesitamos añadir una función que construya las clases de color apropiadas que podemos usar dentro del editor, así como en el front-end.

Add_theme_support( ‘editor-color paleta)

El editor de páginas Gutenberg de WordPress es un potente constructor de páginas, que te da la opción de construir páginas y entradas únicas en todo tu sitio. Una opción de personalización es el panel de configuración de color en muchos bloques de Gutenberg.

Si alguna vez has querido modificar estos colores predefinidos, este artículo te dirá cómo hacerlo. Algunos de los beneficios de establecer tus propios colores predefinidos incluyen garantizar la integridad de la marca de tu sitio, la capacidad de reutilizar fácilmente los colores y dar a tu sitio una sensación más personalizada.

Cuando estableces un Color de texto y/o Color de fondo en el panel Configuración de color, utilizando colores predefinidos, se añaden clases al bloque para definir los colores. Las clases se referencian en la hoja de estilos de la biblioteca de bloques de Gutenberg.

  Traducción Wordpress que no funciona

Ahora que entendemos cómo funcionan los Ajustes de Color, vamos a codificar y establecer nuestros propios colores personalizados. Usted necesitará acceso para modificar algunos archivos en el tema de su sitio, y algunos conocimientos de trabajo en PHP y CSS o SCSS.

Ahora tenemos que añadir estilos para el color del texto y el color de fondo para cada uno de nuestros colores definidos. Esto puede llegar a ser tedioso, especialmente con paletas de colores más grandes, pero después del ejemplo CSS, vamos a repasar una solución SCSS que es mucho más fácil de mantener.

Personalizar colores

Este post es una continuación de mi post sobre la creación de un selector de color personalizado tipo Gutenberg utilizando campos personalizados avanzados. Este método actualizado incluye soporte para usar theme.json en lugar de la función obsoleta editor-color-palette.

Nota: Ahora puede utilizar la funcionalidad de color principal en cualquier bloque ACF como se documenta aquí por Bill Erickson. Yo tiendo a utilizar por defecto la funcionalidad básica a menos que necesite añadir más de un campo de selección de color a un bloque personalizado o que tenga sentido semántico no utilizar el selector de color básico “fondo” o “texto”.

En primer lugar, crearemos un simple campo de botón de radio ACF. Puede darle al campo el nombre que desee, pero asegúrese de que sea sencillo, ya que utilizará ese nombre de campo para cualquier campo adicional que desee rellenar automáticamente en otros bloques (o tendrá que añadir varios filtros para asegurarse de que los colores funcionan correctamente en cada campo). Deje las opciones en blanco por ahora, ya que se rellenarán automáticamente más adelante.

  Cómo hacer crecer tu negocio con marketing de contenidos y WordPress

En primer lugar, añadimos un filtro que se conecta a la función acf/load_field/. Añadimos el nombre de nuestro campo de radio ACF (wd_editor_color_picker) al filtro para asegurarnos de que esta función sólo se dirige a ese campo específico. Usted querrá cambiar el nombre del campo por el nombre que le haya dado a su campo de radio. Puede añadir varios filtros si está utilizando varios campos de radio con diferentes nombres.