Crear bloque personalizado de Gutenberg – Parte 6: Barras de herramientas

En esta publicación, aprenderemos cómo agregar las barras de herramientas de WordPress a nuestro bloque, es decir, para alinear y alinear bloques. También aprenderemos a agregar nuestras propias barras de herramientas con nuestros propios botones para realizar acciones personalizadas.

Agregar barras de herramientas

Para agregar algo a la barra de herramientas para nuestro bloque, necesitaremos envolver lo que queremos en él dentro de un componente llamado BlockControls(desde wp.blockEditor). Dentro de este componente podemos agregar cualquiera de los componentes de WordPress para las barras de herramientas estándar que conocemos de otros bloques (por ejemplo, alineación) o podemos agregar nuestra propia barra de herramientas.

De forma predeterminada, un bloque tendrá una barra de herramientas que contiene solo el icono del bloque (para la funcionalidad Transformar a) y el menú del bloque para, por ejemplo, eliminar el bloque. No podemos eliminarlos, pero podemos agregar nuestros propios botones y barras de herramientas en el medio.

Sin embargo, algunos componentes de WordPress agregarán por sí mismos sus propias barras de herramientas. A partir de ahora, nuestro bloque muestra una barra de herramientas para formatear texto que proviene del RichTextcomponente que agregamos.

Agregar una barra de herramientas de alineación de bloques

La barra de herramientas de alineación de bloques existe en prácticamente todos los tipos de bloques de WordPress, así que agreguemos eso a nuestro bloque también. Detrás de escena existe un componente BlockAlignmentToolbarque podríamos agregar, sin embargo recomiendo no hacerlo. Usarlo requiere que manejes manualmente las clases para la alineación de bloques y te asegures de que el bloque extienda su ancho en el editor al elegir "Ancho ancho" o "Ancho completo". Afortunadamente, WordPress ha hecho que sea muy fácil de implementar, completamente automático.

PD: El tema activo debe haber agregado activamente soporte de tema para estas dos alineaciones de bloques. Puede agregar soporte para estos al tener add_theme_support('align-wide')en el after_setup_themegancho.

Podemos agregar una nueva propiedad a la configuración de nuestro objeto en registerBlockType(), llamada supports. Hay algunas otras características, pero lo que nos interesa aquí es align. Podemos configurar alignpara trueagregar todas las alineaciones posibles, o podemos proporcionar una matriz de alineaciones precisas que permitimos para nuestro bloque.

Lo que nos da esto en el editor:

Si desea, por ejemplo, evitar que alguien use Wide Width o Full Width, puede proporcionar una matriz y excluir esos dos. Los nombres de las alineaciones de bloques son los siguientes: left, right, center, widey full.

supports: {
    align: ['left', 'right', 'center']
},

¿Necesita alineación predeterminada?

De forma predeterminada, el bloque no tiene alineación de bloque. Si lo desea, puede establecer un valor predeterminado creando un atributo con la clave align, establezca el tipo en stringy establezca el valor predeterminado allí. WordPress conectará automáticamente este atributo a la alineación del bloque.

attributes: {
    align: {
        type: 'string',
        default: 'center'
    }
},
supports: {
    align: true
},

Con esto cada vez que se crea un nuevo bloque de nuestro tipo, se centra la alineación del bloque por defecto.

¿Desorden de estilo de alineación de bloques? no es nuestra culpa

Nota: El estilo de bloque predeterminado de WordPress arruinará el flujo del contenido de su publicación cuando use la alineación de bloque izquierda y derecha. Lo mismo sucede con otros tipos de bloques de WordPress también y no es un problema exclusivo de nuestro bloque. Esto se produce al agregar float al elemento, lo que colapsa el elemento principal. Créame, he intentado construir el bloque para evitar este problema. Lo único que he encontrado que funciona correctamente sin alterar las otras alineaciones de bloques es agregar estilo al editor y ajustar el estilo flotante.

De todos modos, WordPress ha hecho que sea bastante fácil implementar la alineación de bloques. Ahora veamos otras barras de herramientas que podemos usar.

Agregar una barra de herramientas de alineación de texto

Si prefiere la barra de herramientas para la alineación del texto, puede hacerlo en lugar de la alineación de bloques: en esta barra de herramientas solo tenemos alineación a la izquierda, al centro y a la derecha. De hecho, puede usar la alineación de texto y la alineación de bloques juntas; funcionan por separado. Para no confundir a los usuarios, por ejemplo, solo podría agregar soporte para la alineación de bloques de ancho y ancho completo, y usar la barra de herramientas de alineación de texto para controlar la alineación a la izquierda, al centro o a la derecha. Al hacer esto, evita el problema mencionado anteriormente con el flujo de bloques en el editor. Depende de usted cómo quiere que funcione su bloque.

WordPress tiene un componente para generar la barra de herramientas de alineación de texto, sin embargo, no tiene un manejo automático para agregar las clases correctas para alinear el contenido, tanto dentro del editor como en la interfaz (¡al menos hasta donde he encontrado!). Necesitamos agregar y actualizar manualmente un atributo para la alineación del texto.

Agregar BlockControlsyAlignmentToolbar

Agreguemos finalmente BlockControlsa nuestra editfunción para nuestra salida en la barra de herramientas. El componente para la alineación del texto es AlignmentToolbardel wp.blockEditorpaquete.

Tenga en cuenta que excluí el contenido de todo lo que creamos en InspectorControlsel paso anterior para acortar el código.

Entre líneas #37se #42encuentra todo el contenido de nuestra barra de herramientas (aparte de la alineación de bloques agregada automáticamente por la supportspropiedad y el formato de texto agregado por nuestros RichTextcomponentes). Usamos BlockControlspara acceder a la barra de herramientas, y dentro añadimos el AlignmentToolbarcomponente.

Como hemos hecho varias veces con las entradas, proporcionamos un valueaccesorio para mostrar el valor guardado y un onChangeaccesorio para actualizar nuestro atributo al AlignmentToolbarcomponente. El atributo que usaremos para almacenar la alineación de texto elegida se define como textAlignmenty debe ser de tipo string. Como de costumbre, puede proporcionar un defaultpara asegurarse de que los bloques recién creados obtengan una alineación predeterminada.

Para asegurarnos de que el bloque genere la información de alineación y también tenga el estilo correcto (para que realmente veamos el cambio de alineación del texto) tanto en el editor como en la interfaz, debemos configurar manualmente la clase correcta en el div de envoltura. En ambos edity savedefino una variable que verifica si attributes.textAlignmentestá configurada. Si es así, construyo el nombre de la clase siguiendo los estándares de WordPress para alineaciones de texto, que es "has-text-align-(left|center|right)". Con esta clase, WordPress aplicará su estilo a nuestro bloque y se asegurará de que nuestro bloque se alinee visualmente correctamente, tanto en el editor como en la interfaz.

Agregar barras de herramientas personalizadas con nuestros propios botones

También puede agregar sus propios botones en la barra de herramientas para hacer lo que desee al hacer clic en ellos. Para hacer esto, querrá agregar el componente Toolbary dentro de este elemento agregar un IconButton(ambos en el wp.componentspaquete). Todo dentro BlockControls, por supuesto.

Nota: Según WordPress, el registro de cambios de Gutenberg IconButtonestá en desuso a favor del uso de Button. Sin embargo, parece que no puedo hacer que aparezca un ícono usando el Buttoncomponente sin importar lo que haga, aunque se supone que lo admite. Así que a partir de ahora usaré IconButton.

Obviamente, puede combinar múltiples componentes de la barra de herramientas dentro de BlockControls. Con el siguiente código, agregamos la barra de herramientas de alineación de texto y nuestra barra de herramientas personalizada con un botón después.

El componente IconButton acepta un ícono dashicon de WordPress o un SVG para el accesorio icon. Podemos proporcionar algunos otros accesorios como classNamey label(aparecerá en la información sobre herramientas al pasar el cursor sobre el botón). El accesorio que más nos interesa es obviamente el onClickaccesorio que se dispara cuando se hace clic en el botón. Aquí podemos proporcionar una función y básicamente hacer lo que queramos. Las posibilidades son infinitas y depende de lo que quieras hacer. En el código anterior, simplemente registro algo en la consola cuando se hace clic en el botón. A medida que avanzamos en esta serie de tutoriales, probablemente obtendrá algunas ideas sobre cómo hacer que su botón personalizado haga lo que usted quiere que haga.

Esto es lo que hemos hecho hasta ahora. En el próximo paso de la serie, comenzaremos a buscar cosas más avanzadas y aprenderemos a crear nuestros propios componentes para utilizar el estado y otros beneficios.