Cómo crear un patrón de bloque en el editor de bloques de WordPress

Introducción Una de las mayores pérdidas de tiempo al diseñar páginas en el editor de bloques de WordPress es agregar cada bloque de un aspecto complejo uno por uno en cada página. ¿No sería genial tener un sistema fácil para acelerar su proceso de diseño? ¿Uno que le brinda acceso directo a cualquier modelo disponible en la biblioteca de bloques, especialmente a sus propios modelos personalizados? Aquí están los modelos de bloque personalizados. Los modelos de bloques se pueden crear y diseñar manualmente, almacenarse e ingresar donde desee en su sitio de WordPress. Si todo esto se parece demasiado a un trabajo duro, también puede usar modelos de bloque prefabricados de varios desarrolladores y sitios.
En este artículo, echaremos un vistazo rápido a los bloques de Genesis StudioPress. Luego, pasaremos por un breve tutorial sobre cómo puede crear y almacenar manualmente su propio modelo de bloque para ser utilizado una y otra vez. El editor de Gutenberg Block the WordPress Block Editor fue un regalo de Navidad temprano que se nos ofreció en 2018, con la versión 5.0. Los patrones de bloques como característica vinieron con el lanzamiento de WordPress 5.5 en agosto de 2020. Actualmente, estamos en la versión 5.8, el editor tiene un crecimiento vertiginal en los últimos tres años. Lo amas o lo detestas (y si lo detestas, el antiguo editor clásico todavía está disponible como una opción), está aquí para quedarse.
La evolución, el crecimiento y la mejora constante parecen ser parte de los planes futuros de WordPress.Un enfoque basado en bloque para el editor de bloques de WordPress funciona con un enfoque basado en bloque para crear sitios, páginas y publicaciones de blog.Aquellos familiarizados con él sabrán que ya hay un bloque para casi todo lo que necesita.Esto puede ser cualquier cosa, a partir de la adición de columnas, un video construido, un separador de secciones, una galería o cualquier otra cosa utilizada para mejorar una página.Por supuesto, una vez que haya pasado tiempo para construir su página exactamente como lo desee, organizando todos los bloques diferentes, es una red bastante segura que le gustaría usar, o al menos partes de ella nuevamente.
Lo que realmente no quieres es comenzar desde cero cada vez para hacer esto. Ingrese los modelos de bloque aquí Intervine Block Models. ¿Qué es un patrón de bloque? Bueno, este es solo el nombre de lujo de WordPress para lo que es esencialmente una plantilla, ya sea una página completa o simplemente una pequeña sección. Es una plantilla que consiste en arreglos de bloques personalizados. Múltiples bloques sentados como desee, utilizados como un solo “modelo”. Modelos de bloques premium prefabricados Una de las mejores cosas de WordPress y su base de usuarios masivos es que hay opciones externas (es decir, hechas por cualquier otra persona que no sea WordPress) para casi lo que quiera obtener en un sitio de WordPress. Un vistazo rápido a la biblioteca de complementos, uno de los muchos sitios web que ofrecen temas de WordPress gratuitos o premium o nuestra lista de complementos preparado confirmará esto. Después de esperar, este es el caso de los modelos de bloques. Un buen ejemplo a este respecto son los bloques de Genesis de StudioPress.
Al ofrecer una buena gama de patrones de bloques prefabricados de prefacio, así como un número limitado de gratuitos, ofrecen lo que llaman “una poderosa biblioteca de bloques premium que toman (sic) todo lo mejor del editor de bloques y lo convierte en mejor. . ” Al momento de escribir, la versión gratuita ofrece lo siguiente:

15 bloques nuevos
4 diseños preconstruidos para toda la página
8 secciones prefabricadas
Optimizado
La versión Pro A Genesis Blocks ofrece un rango mucho más grande que incluye lo siguiente:
Más de 15 bloques nuevos
Más de 50 aspectos preconstruidos en toda la página
Más de 130 secciones prefabricadas
Optimizado
Guarde y reutilice sus propias secciones y Machetermisions avance al usuario en el nivel de bloque
¿Es hora de actualizar su alojamiento? ¿Desea una mejora de hasta un 40% en la velocidad del sitio? Cambie al motor WP. Disfrute de acceso instantáneo y asistencia para los 10 mejores temas de Genesis Block para WordPress creados por WP Engine, la compañía detrás de Genesis y StudioPress. Disponible para todos los planes! Obtenga un descuento del 20% con el código de cupón WPMayor20
Hazlo solo, por supuesto, siempre existe la opción de hacerlo tú mismo y crear exactamente lo que necesitas, personalizado según tus gustos.

Aquí le mostramos cómo hacerlo.
Desde el principio, aquí hay algunas conclusiones clave:
Los modelos de bloques son modelos de bloques predefinidos.

Una vez insertado en una página, cada bloque individual se puede editar como cualquier otro bloque ordinario.

Una vez que inserta un patrón de bloque en una página, está “por su cuenta”, lo que significa que ya no está conectado a la biblioteca de bloques. Esto significa que cambiar el modelo en su página no afectará el modelo original almacenado en la biblioteca. En su lugar, cambiar el modelo en la biblioteca no cambiará el modelo ya agregado a su página.
Ahora que nos deshicimos de él, sigamos los pasos rápidamente para crear y almacenar uno en la biblioteca:
Paso 1: Cree una nueva página en el editor de WordPress Gutenberg, cree una nueva página y diseñe como desee, utilizando bloques. Después de crear lo que siente que es una “plantilla” con la que está satisfecho y que le gustaría volver a usar, haga lo siguiente:
Paso 2: seleccione y copie los bloques Seleccione todos los bloques relevantes que se incluirán en el modelo guardado. En la barra de herramientas para los bloques que aparecen, seleccione los tres puntos verticales (“Opciones”) y haga clic en “Copias”, verá una confirmación emergente a lo largo de las líneas “copiados en bloques”. Los bloques como antes, pero en cambio, haga clic en Los tres puntos en la esquina superior derecha y seleccione “Editor de código”. Seleccione el código completo que aparezca y copie al portapapeles usando CTRL+C / CMD+C.
Paso 3: “Escape” del código Vaya a JSON Escape en JSON Formatter e inserte el código en la ventana izquierda. Luego haga clic en el botón “Escapar” en el medio (si el código modificado no aparece automáticamente, lo que generalmente se realiza). ¿Ves el código que apareció en la ventana correcta? Estas son las cosas buenas que queremos. Copie esto y guárdelo a mano.

Aquí es donde saltamos en un punto de luz PHP. (¡No se enoje si PHP es nuevo para usted! ¡Copie y pegue para guardar!) Regrese al tablero de WordPress y explore el editor de temas Look>. Lo que está buscando en los temas de la sección de archivos es el archivo functions.php. Tenga en cuenta que algunos temas enumeran este archivo en “Funciones de temas”.
En el archivo functions.php, desplácese hasta el final (ya no necesita meterse con nada). Copie y pegue el siguiente código: function function_name () {registre_block_pattern (‘slog’, array (‘title’ => __ (‘su título’, ‘Text-Domain’), ‘Descripción’ => _x (‘Su descripción. ‘,’ Descripción del patrón de bloque ‘,’ Text-Domain ‘),’ Content ‘=> “,)); } add_action (‘init’, ‘function_name’); Este código ha sido tomado de Rich Taborrece, deberá especificar su propio nombre de función aquí. Asegúrese de escribirlo exactamente como las dos veces es necesario que funcione. Aprendí esto en la ruta pesada … Agregue un título rápido y una descripción dentro de las citas simples relevantes. ¿Recuerdas ese código modificado que mencioné que tenía a mano en el paso 3? Ahora es el momento de determinarlo. Pegue ese código entre las dos comillas (actualmente vacías) en la sección de contenido. ¿Todo listo? Haga clic en “Actualizar el archivo” y está listo. Paso 4: tomar una prueba es el momento de probar los resultados de su arduo trabajo. Cree una nueva página como de costumbre en el editor de Gutenberg. Haga clic en el botón Agregar bloques/cambie el editor de bloques y haga clic desde bloques a modelos. ¿Ves algo nuevo? Hay una nueva categoría brillante llamada “no categorizada”. Seleccione y debería ver el nuevo patrón de bloque personalizado que se muestra y disponible para su uso, como se ilustra en la siguiente captura de pantalla: