Share
Bienvenido de nuevo a nuestra serie sobre la creación de bloques personalizados con la API de WordPress Gutenberg Block. Este tutorial trata sobre la extensión del bloque de imagen aleatoria que creamos en la publicación anterior. Llegamos tan lejos como para agregar un control desplegable para seleccionar una categoría de imagen. Continuaremos con esto agregando más opciones de bloque para permitir una mayor personalización.
Específicamente, veremos cómo agregar configuraciones de bloque en varias partes del editor. Así es, no solo está limitado a agregar controles de bloque directamente en el propio bloque!
El final mi-bloque personalizado El código del plugin está disponible para descargar. Simplemente haga clic en el enlace en la barra lateral a la derecha y descargue el archivo zip en su computadora, e instálelo como lo haría con cualquier otro complemento de WordPress. También puede encontrar el código fuente en nuestro repositorio de GitHub..
El desarrollo de Gutenberg está avanzando a buen ritmo, y ha habido un nuevo lanzamiento significativo desde que se publicó el último tutorial. La versión de Gutenberg utilizada en este tutorial se ha actualizado a 3.0.1, y parte de la interfaz de usuario del editor puede verse ligeramente diferente a las capturas de pantalla que se muestran en los tutoriales anteriores de esta serie..
El control desplegable que agregamos en el tutorial anterior estaba ubicado dentro del editor, directamente debajo del marcado de la imagen aleatoria. Esto fue conveniente, pero también tenemos otras opciones..
También podemos agregar controles de bloque a una barra de herramientas emergente (que aparece cuando se selecciona un bloque) y un panel de inspección de bloques.
En la captura de pantalla anterior, podemos ver los controles de la barra de herramientas para el bloque de párrafo [1], así como los controles asociados en el inspector de panel [3]. La ubicación [2] muestra el control desplegable para nuestro bloque de imagen aleatorio.
Es posible que ya esté pensando en qué ubicación elegiría para sus propios ajustes de bloqueo, pero no tiene que elegir solo una de estas ubicaciones. No son mutuamente excluyentes. Por ejemplo, para el bloque de párrafo (que se muestra arriba), puede ver que la configuración se divide entre el panel del inspector de bloques y la barra de herramientas.
Además, está perfectamente bien tener dos controles separados en diferentes ubicaciones en el editor que afectan al mismo ajuste. Es posible que no desee hacer esto con demasiada frecuencia, pero es útil saber cómo implementarlo, así que veremos cómo hacerlo un poco más adelante..
Comencemos con la forma más fácil de agregar funcionalidad a su bloque, que está directamente dentro del bloque editar función. Ya hemos utilizado este enfoque para agregar nuestro control desplegable de imágenes al azar porque requiere muy poco esfuerzo extra.
No vamos a añadir nuevos controles al bloque en sí, pero podemos modificar el comportamiento del control desplegable para que sea un poco más intuitivo. Para que se muestre lo más cerca posible del extremo delantero, podemos restringir la aparición del menú desplegable a menos que se seleccione el bloque.
Hagamos este cambio ahora. Si estás siguiendo este tutorial de la última vez, abre /my-custom-block/src/random-image/index.js en tu editor favorito. Este es el archivo JavaScript principal para nuestro bloque de imagen aleatorio..
Uno de los accesorios pasados a todos los bloques es esSeleccionado, que mantiene el estado de visibilidad del bloque. Podemos usar esto para mostrar condicionalmente el control desplegable de categorías.
En primer lugar, sacar esSeleccionado desde el accesorios objeto y agregarlo a la lista de constantes dentro de la editar función. Esto es útil para que podamos referenciarlo con un nombre abreviado (es decir,. esSeleccionado más bien que props.isSelected).
const atributos: categoría, setAttributes, isSelected = props;
A continuación, podemos usar esta propiedad para determinar si se debe mostrar el control desplegable:
isSelected && ()
Esta es una forma abreviada de probar que esSeleccionado es cierto, ya que no podemos usar un JavaScript completo Si declaración dentro del código JSX.
Asegúrese de seguir viendo los archivos en busca de cambios para que cualquier código fuente de bloque (JSX, ES6 +, Sass, etc.) sea transpilado a JavaScript y CSS válidos. Si actualmente no está viendo los archivos en busca de cambios, abra una ventana de línea de comandos dentro de mi-bloque personalizado carpeta raíz del plugin y entrar npm start.
Abre el editor de Gutenberg y agrega el bloque de imagen al azar. Esta vez, el control desplegable no está visible si aún no se ha hecho clic en el bloque.
Esto le da al bloque una sensación mucho más interactiva..
Si ha usado alguno de los bloques principales de Gutenberg (como el bloque de párrafo), estará familiarizado con la configuración de la barra de herramientas. Tan pronto como se selecciona el bloque de Párrafo, aparece una barra de herramientas emergente que contiene botones para dar formato al texto. Este tipo de control es ideal para configuraciones de bloque que tienen un estado de tipo de encendido / apagado, por ejemplo, alineación de texto o formato como negrita o cursiva.
Usaremos el control integrado de la barra de herramientas de alineación para permitir que el control de categoría de imagen desplegable quede a la izquierda (predeterminado), a la derecha o al centro alineado.
Primero, necesitamos sacar el AlineaciónToolBar y BlockControls componentes de wp.blocks. Estos nos permiten mostrar los controles de alineación dentro de una barra de herramientas flotante sobre nuestro bloque cuando se selecciona. Estos son parte de los componentes principales que podemos usar en nuestros propios bloques..
const AlignmentToolbar, BlockControls, registerBlockType = wp.blocks;
los BlockControls el componente actúa como el contenedor de la barra de herramientas, y AlignmentToolbar se coloca dentro.
Todavía tenemos que conectar el comportamiento de la barra de herramientas de alineación manualmente, lo que podemos hacer agregando un nuevo categoríaAlinear atributo para almacenar el estado de alineación de bloque (izquierda, derecha o centro).
Nuestro atributos objeto ahora contiene dos configuraciones.
atributos: categoría: tipo: 'cadena', por defecto: 'naturaleza', categoríaAligno: tipo: 'cadena' por defecto: "
El valor predeterminado para el categoríaAlinear el atributo es una cadena vacía, lo que resultará en que no se aplique alineación por defecto.
Para hacer referencia al nuevo atributo, podemos extraer este valor en su propia variable constante de la misma manera que lo hicimos para el menú desplegable categoría atributo.
const atributos: category, categoryAlign, setAttributes, isSelected = props;
Todo lo que tenemos que hacer ahora es colocar los dos nuevos componentes en el editar Funcionar y configurar las propiedades..
setAttributes (categoryAlign: value) />
Como se puede ver, todo lo que necesitábamos hacer era asignar la valor atributo de Alineación a categoríaAlinear atribuir y llamar al setAttributes funciona cada vez que se hace clic en un nuevo botón de la barra de herramientas. Esta función a su vez actualiza el categoríaAlinear atribuye y mantiene todo sincronizado.
Para aplicar el estilo de alineación del control desplegable, debemos agregar una propiedad de estilo a nuestro elemento de formulario.
);Se puede hacer referencia a esta función cuando necesitamos que se reproduzca el control desplegable de la categoría. El marcado para el panel del inspector de bloques debe estar fuera del marcado de bloques, para que podamos usar el
A continuación, debemos agregar los componentes del inspector de bloque para los desplegables de categorías y filtros de imagen. Estos necesitan ser definidos dentro onChange evento. Esto es muy similar al código desplegable de la categoría del último tutorial, por lo que ya debería estar familiarizado con usted..
Poniendo todo esto junto, el editar método de regreso La función ahora se ve así:
regreso (); showForm () setAttributes (categoryAlign: value) /> isSelected && (showForm ())
Y el setFilter La devolución de llamada se define como:
Accentsconagua
función setFilter (evento) const selected = event.target.querySelector ('# opción de filtro de imagen: marcado'); setAttributes (imageFilter: selected.value); event.preventDefault (); Para obtener la imagen filtrada, necesitamos actualizar la Imagen aleatoria componente para aceptar el nuevo valor de filtro cada vez que se cambia el menú desplegable.
función RandomImage (category, filter) if (filter) filter = '/' + filter; const src = 'https://placeimg.com/320/220/' + category + filter; regreso;
Observe cómo estamos usando esta nueva propiedad componente en el editar Método para enviar el nuevo valor de filtro a PlaceIMG.
Todos estos cambios de código hacen que se cree un nuevo panel del inspector de bloques con dos controles desplegables para cambiar la categoría de imagen y el filtro.
Para que la nueva propiedad de filtro funcione también para el extremo frontal, solo necesitamos actualizar la salvar método.
save: function (props) const atributos: category, imageFilter = props; regreso ();
En esta publicación, cubrimos tres métodos diferentes para agregar configuraciones a un bloque:
Solo agregamos configuraciones básicas para cada bloque, pero podríamos llevar esto aún más lejos agregando soporte para múltiples imágenes, agregando leyendas de imágenes y controlando estilos como el color del borde, el radio o el tamaño de imagen al azar.
Estoy seguro de que a estas alturas probablemente tengas algunas ideas para crear tus propios bloques personalizados. Me encantaría saber qué tipo de bloques le serían útiles en sus propios proyectos.!
Acabamos de comenzar con Gutenberg aquí en Envato Tuts +, por lo que si hay aspectos particulares del desarrollo del bloque de Gutenberg que le gustaría ver más detalladamente en futuros tutoriales, háganoslo saber a través de los comentarios..
