La guía completa de los modelos de bloques de Gutenberg (i)

La semana pasada, Matt Mullenweg, como es la tradición cada año, ha apoyado su presentación (en este caso, virtual), estado de la palabra, en el que presentó un breve resumen del estado actual y de las nuevas funciones de WordPress.
Matt se centra más que nunca para que nos enamoren de la experiencia ofrecida por el editor de bloques de Gutenberg. Una de las nuevas características que Matt ha resaltado, que vino con la versión WordPress 5.5, son los patrones de bloques. Pensé que sería interesante hacer esta guía completa sobre ellos. La guía se divide en tres publicaciones y veremos los siguientes temas:
Introducción a los patrones de bloque
Inserte un patrón en una página
Modelos predefinidos y otros disponibles en directores
Agregar modelos disponibles en los directores a su sitio web
Cómo crear un modelo a partir de cero
Cómo crear un modelo si no eres desarrollador
Cómo convertir bloques reutilizables en patrones de bloque
Temas que usan patrones de bloque
Documentación oficial.
Entonces, sin otros retrasos, ¡comencemos! 1. Introducción a los modelos de bloque Cuando llegó Gutenberg, el gran cambio en comparación con el editor clásico que tuve en WordPress fue la introducción del concepto de “bloqueo”. Todo tenía que ser un bloque: el título de la publicación, sus párrafos, listas, imágenes … cada una de ellas era un bloque, con sus propias propiedades de personalización para configurar el tamaño de la fuente, el título, la alineación, etc.
Los bloques se han vuelto más sofisticados y ahora tenemos galerías de imágenes, bloques de medios/texto o incluso bloques que contienen otros bloques.

En el bloque de cobertura, las opciones de alineación han cambiado, ahora incluye la altura completa y la opción para indicar la alineación de contenido en el bloque … Por ejemplo, en Nelio desarrollamos imágenes de comprensión de Neli para comparar dos imágenes con una diapositiva simple:
Mire las diferencias entre Ferrari F40 y F50. No solo hubo una explosión de bloques que se pueden encontrar en complementos y temas, sino que sus capacidades han evolucionado con las diferentes versiones de WordPress. Por lo tanto, actualmente puede crear bloques reutilizables y, con ellos, incluso crear una plantilla de página o publicación.


Continuando con la idea de tener modelos predefinidos que se pueden reutilizar de manera rápida y fácil, con WordPress versión 5.5 han llegado los patrones de bloque. La idea de un modelo de bloque es muy simple: hay secciones o fragmentos predefinidos compuestos por un grupo de bloques que puede usar en la creación de páginas y publicaciones. Estos modelos pueden ser algo tan simple como una sección que tiene dos botones o una sección de precios con modelos atractivos y complejos. 2. Inserte un patrón en una página para comenzar con lo básico, ¿cómo se inserta un nuevo modelo en una página? ¡Muy fácil! Al igual que con los bloques, para insertar un modelo solo tiene que hacer clic en el botón + en la parte superior izquierda y, en lugar de agregar un bloque, seleccione la pestaña Modelo. Allí verá que un pequeño desplegable con los tipos de modelos que puede seleccionar, el WordPress predefinido, los del tema que instaló y cualquier otro que haya instalado con un complemento.
Seleccione el modelo que más le guste y vea cómo se inserta el conjunto de bloques que se componen en su página: insertar un modelo en el editor Guttenberg.
Después de insertar el modelo, puede cambiar cada uno de los bloques como lo ha hecho hasta ahora. Además, si los bloques de ese modelo se agrupan, también puede cambiar las propiedades del grupo en su conjunto. Simple, ¿verdad? 3. Modelos predeterminados y varios modelos de los directorios de tercera parte WordPress 5.5 surgió con un conjunto de modelos de bloque predefinidos que puede usar ahora para crear sus páginas. Solo tiene que hacer clic en el botón + que mencioné anteriormente para ver los modelos disponibles en su sitio.

Además, su tema activo podría definir sus propios patrones de bloque. Por ejemplo, el tema WordPress Veinte y veintiún años incluye algunos modelos de bloques, así como bloques de GoDaddy y Genesis, por mencionar algunos ejemplos.
Después del lanzamiento de WordPress 5.0, tuvimos una explosión de bloques y ahora vemos el mismo resultado en los modelos de bloques: puede descargar e instalar bloques y modelos en su sitio muy fácilmente, como explicaré más adelante. Aquí tiene dos redes de bloques y modelos que están disponibles para usted, aunque estoy seguro de que habrá más:
Compartir Patrones de Jeffrey Carandang: un sitio fantástico donde puede compartir y obtener muchos bloques, plantillas y modelos para descargar e instalar en su sitio.

Captura de captura de pantalla de ShareAblock.
El Centro Gutenberg de Munir Kamal, donde encontrará muchos bloques, plantillas y modelos.

Sitio web de Gutenberg Hub.
También existe el complemento Rodux Framework, que ofrece una biblioteca con más de 1000 bloques, plantillas y modelos de tercera parte (incluidos los disponibles en los directorios de arriba) para insertarlos en sus páginas. El complemento le permite descargar hasta 5 modelos gratis Y luego puede actualizar a la versión paga. El cabezal de pantalla del complemento Redux-Framework.

4. Agregue modelos disponibles en directorios en su sitio web como ya mencioné, puede usar el complemento Redux Framework para agregar fácilmente modelos de ShareBlock y Gutenberghub. Si es un diseñador profesional de sitios de WordPress, sin duda es una buena opción encontrar siempre cuántos modelos desea muy rápidamente. Pero puede usar nuevos modelos de bloque sin requerir un complemento premium. Veamos cómo. Agregue un modelo ShareBlock en el caso ShareBlock, para instalar un modelo (y, por supuesto, un bloque o plantilla), solo tiene que seleccionarlo en la web y hacer clic en el botón Descargar ahora.
Compartir características del patrón de columna.

La primera vez que se le solicitará una dirección de correo electrónico para que pueda obtener un nombre de usuario y contraseña.
En el correo electrónico hay un enlace para conectarse a su sitio; Inicie sesión y podrá descargar el modelo que le interese. Seleccione y haga clic nuevamente en la descarga ahora para que pueda obtener el modelo de bloqueo en el correo electrónico.

ShareBlock Mail con enlace de descarga.
Después de hacer clic en el enlace proporcionado en el correo electrónico, puede acceder a la web para descargar el archivo .json. Una vez descargado, llévelo al editor de bloques de WordPress y verá automáticamente todos los bloques que componen el modelo.

Bloques incorporados en el editor.

Es un proceso pesado, pero hace el trabajo. Desafortunadamente, notará que el modelo de bloques no aparece en su biblioteca … Agregue un modelo de Gutenberg Hub que agregue un modelo Gutenberg Hub es más fácil. Como antes, seleccione el modelo primero que desea copiar. Seleccionando un modelo Gutenberg Hub. A la derecha del modelo, verá el botón del código de la copiadora. Haga clic en el botón para copiarlo en el portapapeles y luego inserte en el editor de Gutenberg. Esto pegará el bloque en su editor, pero omitirá la biblioteca. ¡Pero espera! No tan rapido. Si desea personalizar completamente los bloques resultantes, Munir Kamal recomienda instalar su complemento gratuito, EditorPlus, que agrega nuevos bloques al editor y extiende a Gutenberg con verificaciones de diseño avanzadas, fuentes, iconos, divisores, animaciones y más. Características.
El modelo Hub Gutenberg ha sido atascado.

Si lo hace, verá en la barra del lado derecho del editor que tiene controles avanzados para cambiar el diseño del modelo copiado. Ahora sabe cuáles son los modelos de bloques, dónde puede encontrarlos y cómo insertarlos en su sitio web para crear excelentes modelos. ¡No se pierda la próxima publicación donde aprenderá a crear sus propios modelos! Imagen presentada por el río Cacho Oes en Unsplash.