Crear bloque de Gutenberg personalizado – Parte 5: Configuración del inspector
En los pasos anteriores, aprendimos los conceptos básicos de cómo representar componentes y atributos en un bloque. En este paso nos centraremos en lo que WordPress (al menos en el código) llama Inspector: la barra lateral en el lado derecho del editor. Hablaremos sobre algunos componentes nuevos que tiene sentido colocar en la barra lateral y cómo manejarlos.
Inspector/componente de barra lateral
Para insertar su configuración personalizada y HTML en la barra lateral del Inspector, envolverá todo dentro de un componente llamado InspectorControls. Lo que ponga dentro de este componente se mostrará en la barra lateral y no dentro del bloque/editor en sí. Básicamente, puede colocar el componente y su contenido en todas partes en el retorno de la editfunción.
Aparte de eso, manejarías la configuración dentro de la barra lateral como si estuviera dentro del bloque. Cada configuración requiere un atributo, y carga y actualiza los atributos de la misma manera.
Primero echemos un vistazo rápido a cómo se ve la barra lateral de nuestro bloque (cuando nuestro bloque está activo en el editor), según el código que terminamos en el paso anterior.
Todos los bloques mostrarán de forma predeterminada el icono, el nombre y la descripción del bloque, y la sección Avanzado: colapsado. Dentro de Avanzado encontrará una entrada de texto para proporcionar la clase CSS para el bloque.
Agregar una sección de barra lateral y algunas configuraciones
La barra lateral está dividida en secciones (denominadas paneles en el código), y para un diseño y una funcionalidad óptimos (incluida la funcionalidad de apertura y contracción) debemos usar los componentes de WordPress para generar paneles correctamente.
Use el componente PanelBodypara agregar una sección (las que puede abrir o contraer), que se encuentra en el wp.componentspaquete. El componente acepta algunos accesorios, por ejemplo, para el título y si el panel debe estar abierto o cerrado de forma predeterminada. También puede proporcionar una clase personalizada, un icono y adjuntar una función de evento al activador de apertura y cierre.
Dentro PanelBodyde WordPress se recomienda usar el PanelRowcomponente que actúa como contenedores genéricos dentro del panel, para garantizar la optimización del diseño. Este componente aplica automáticamente un margen y un estilo de fila flexible para su contenido. Debido al flex-direction: rowestilo " ", debe envolver cada configuración dentro de una PanelRow. O puede omitirlo por completo y asumir la responsabilidad de diseñarlo usted mismo con divs y demás.
Agregar un panel y configuraciones
Agreguemos un panel de barra lateral para nuestro bloque con algunas configuraciones adentro, solo para verlo en la práctica. Agregaremos un control de alternar, una entrada de selección, un selector de color y una casilla de verificación, solo para obtener algo de experiencia con diferentes tipos de componentes de entrada. He dejado el contenido del bloque (con las dos RichTexts) y la savefunción como antes.
Como siempre, empezamos por desestructurar los componentes y la función que queremos usar. En el attributesinterior registerBlockType(), definimos un atributo por entrada y hacemos coincidir el tipo; por ejemplo, el control de alternar espera un booleano y, debido a que los valores del menú desplegable son cadenas, ese atributo también debe ser una cadena de tipo.
En línea #41comenzamos el InspectorControlscomponente, y todo desde ese punto hasta línea #80aparecerá en la barra lateral. El resto aparecerá dentro del propio editor, y no he realizado ningún cambio allí.
En el interior, primero creamos un panel con PanelBodyy con el accesorio initialOpenestablecido en verdadero, le decimos a Gutenberg que este panel debe abrirse de forma predeterminada. Y luego depende de nosotros qué agregar dentro de cada uno PanelRow.
Para el componente ToggleControl, usamos los mismos accesorios que hemos hecho antes con las entradas de texto, excepto que en lugar del accesorio value, proporcionamos el valor del atributo dentro del accesorio checked. Esto se aplica a cualquier entrada que espera un atributo marcado en HTML sin formato, por ejemplo, casillas de verificación. Para los botones de radio, usaría el accesorio, selectedya que esto es lo que usaría también en HTML sin formato. Tenga en cuenta que el atributo de esta entrada debe ser de tipo boolean.
En cuanto CheckboxControlal manejo de una casilla de verificación singular, funciona exactamente igual que ToggleControl: devuelve un valor booleano, ya sea que esté marcada o no.
Genera un menú desplegable de selección y espera las SelectControlposibles opciones como una matriz en el prop options. Cada elemento debe ser un objeto con las propiedades labely value. Lo mismo se aplica a las casillas de verificación y los botones de opción (RadioControl). En circunstancias normales, probablemente generaría las opciones como una variable fuera de la salida HTML.
Puede notar que ColorPickerfunciona un poco diferente a los demás, ya que este es un componente más complejo y no una entrada HTML estándar. Proporcione el accesorio colorpara el color guardado, y en lugar de onChange(se dispara una vez al hacer clic, pero también cada vez que se cambia el valor mientras se arrastra, lo que puede resultar en muchos incendios) use onChangeComplete. El accesorio devuelto en este evento también es un objeto en el que debemos decidir qué parte queremos guardar en nuestro atributo. En este ejemplo, queremos guardar el valor hexadecimal (sin alfa/opacidad), por lo que dentro setAttributes()extraemos la hexpropiedad del colorobjeto devuelto. Esta es también la razón por la que agregamos la propiedaddisableAlphacomo para eliminar la interfaz de usuario del canal alfa (para controlar la opacidad), ya que no tiene sentido ofrecer esto al usuario cuando nunca guardamos el valor de opacidad.
Cada uno de los componentes tiene un labelaccesorio disponible, excepto el selector de color. Si desea generar una etiqueta o texto antes, deberá jugar con HTML o estilo para asegurarse de que se vea bien.
Obviamente, puede agregar tantos paneles como desee, simplemente agregue otro PanelBodycomponente después del anterior.
Si está interesado en obtener más información sobre cómo agregar configuraciones de bloque, tengo tutoriales separados para configuraciones y componentes más complejos para Inspector; Cómo agregar una selección de imagen y cómo agregar un panel de configuración de color.
Manejosave
He dejado la savefunción como estaba antes. Depende de usted y todo depende de lo que controle la configuración en la salida. Ya sabes cómo obtener los valores de cada ajuste. Como ejemplo, supongamos que el atributo booleano activateLaserscontrola si se representa o no un elemento HTML personalizado. Si el atributo es trueun div, debe generarse, de lo contrario, no. Puede hacerlo con el tradicional if-check o usar el operador ify en línea de JSX. &&Lea más sobre esto en la guía de React para renderizado condicional.
Debido a que usamos RichTextesta salida, no sería visible en el editor, pero aparecerá en la interfaz.
Encontrará más componentes en el repositorio de wp.components Github. La mayoría de estas carpetas deberían proporcionarle un archivo Léame con alguna documentación sobre cómo usarlo. Aprendí la mayor parte de esto mirando en este repositorio y también en los componentes principales de WordPress cómo lo hicieron.
En el siguiente paso de la serie, nos centraremos en cómo controlar la barra de herramientas del bloque. Aprenderemos cómo manejar, por ejemplo, la alineación de un bloque y agregar botones personalizados a la barra de herramientas.