Modelos de bloques de WordPress: ¿Qué son ellos y cómo usarlos?

Hace aproximadamente un año, un cliente me pidió que construyera un sitio web con muchos componentes y características complejos y pasé horas tratando de crear algo para sorprender. Muchas tazas de café y revelaciones frustradas más tarde, me sorprende, pero también quería que los temas de los temas tuvieran un negocio más fácil, una mejor manera de desarrollar componentes complejos sin toda esta frustración. En agosto de 2020, la introducción de modelos de bloque de WordPress con la versión 5.5 hizo un mundo de diferencia para, estoy seguro, la vida de todos los desarrolladores de WordPress allí.
Los patrones de bloque o las plantillas de bloque, como también se conocen, han simplificado drásticamente el desarrollo de sitios web. Se agregó un alto nivel de inteligencia a la forma en que se construyó un tema. Y desde la perspectiva de un usuario, una demostración del tema ya no era solo una muestra de diseño intacta. Mejor, los modelos de bloques han eliminado la mayoría de los obstáculos importantes que se han relacionado con opciones anteriores, como widgets, códigos cortos, plantillas de página y opciones de temas. Simplemente dicho, el camino hacia un diseño de sitio web mejor y más fácil fue pavimentado.
¿Qué son los modelos de bloques de WordPress? Imagine un mundo donde tenía diseños predefinidos de WordPress listos para insertar. En este mundo, sería muy poco involucrado, tal vez solo unos pocos clics en los botones, para crear modelos complejos. Y si quisiera desatar sus habilidades de diseño, podría ir al núcleo de estos modelos y hacer su propio trabajo. ¿Sol al cielo de WordPress? Bueno, ¡eso es sobre modelos de bloques de WordPress! Son una forma de agrupar los bloqueos de WordPress para formar elementos de página con configuraciones predefinidas. En el centro de este concepto está la idea de que los complementos y los temas podrán acceder fácilmente a bloques y secciones preconstruidas. Entonces, en lugar de agregar bloques individuales a una página, tendrá acceso a una biblioteca de bloques existente con un conjunto de modelos o modelos que puede agregar a sus publicaciones y páginas con solo unos pocos clics en el botón. Esto permite preestablecer páginas y temas completos, simplificando incluso los modelos complejos. Debe instalar y activar el complemento Gutenberg para comenzar a usar modelos de bloques. Debido a que no son tan complejos o avanzados como los bloques personalizados, son mucho más fáciles de usar. Puede encontrar modelos existentes de Bloque de WordPress un poco limitados si es un profesional de WordPress, pero la buena noticia es que son personalizables. ¿Cuáles son los beneficios de usar modelos de bloques de WordPress? El rave sobre los modelos de bloques de WordPress aún no se ha suavizado, así que vayamos a la persecución hablando de los beneficios más relevantes desde la perspectiva de un desarrollador de temas.
Ahorra mucho tiempo y frustración si ha tenido la amarga experiencia de tratar de reproducir un tema increíble o crear modelos complejos en un sitio, los modelos de bloques le ahorrarán tiempo y frustración. Su absoluta facilidad de uso le permite completar el trabajo en unos minutos, en lugar de unas pocas horas que hubiera pasado de manera diferente. Flexible y personalizable ya no tiene que hundirse en el código real y buscar secciones de edición cuando estructura las publicaciones y las páginas. Al usar patrones de bloque, se vuelve simple eliminar o cambiar los bloques seleccionados en un modelo para obtener el aspecto que prefiere. El posicionamiento de la apariencia también es simple y no es exactamente una ciencia de misiles. Demostras fácilmente el tema que puedes crear fácilmente sitios web que se parecen exactamente a esas increíbles demostraciones temáticas que has querido que repetirte. Cada desarrollador de temas de WordPress conoce el dolor de encontrar lo que parecía ser el tema perfecto, solo para parecer un desastre absoluto después de la instalación. Los modelos de bloques, por otro lado, le permiten recrear las páginas de un tema, exactamente como se veía en la demostración del tema. Y todo esto se puede hacer fácilmente desde el editor de bloques de WordPress. Los bloques personalizados de bloques simplifican su vida ya no tienen que codificar nada para tener un sitio increíble con componentes complejos. Los complementos y los temas terminan proporcionando sus propios modelos de bloque que se pueden aplicar en todo el sitio con absoluta facilidad.
El artículo continúa a continuación
Los aspectos se mantienen recordados cuando perdió todo el aspecto de su sitio al cambiar los temas. ¡No más! Los modelos de bloques de WordPress lo ahorran durante mucho tiempo en restaurar modelos cuando cambia los temas, porque permanecen intactos, incluso si el nuevo tema no incluye los mismos modelos que el anterior. Cree sus propios modelos de bloque, puede crear sus propios modelos de bloque si es lo suficientemente profesional como para ir allí. Esta es la mejor parte de los modelos de bloques: son perfectos para principiantes que desean hacer el trabajo fácilmente y también son perfectos para profesionales que les gusta ensuciar sus dedos y crear sus propios modelos de bloque personalizados. Todo lo que tiene que hacer es usar el editor para crear sus propios modelos, copiar el código e inserte en el tema o el código del complemento. Luego se replicará donde quiera mostrar esos modelos complejos. Después de ver cómo pueden beneficiarlo, ¿está ahora ansioso por comenzar con los modelos de bloques de WordPress? Bueno, veamos cómo funciona realmente. Cómo los modelos de bloque de WordPress 5.5 WordPress 5.5 funcionan con algunos modelos de bloque ya instalados y listos para usar y pueden ser elegantes utilizando comandos Gutenberg. La flexibilidad absoluta de los modelos de bloques los hace incluso mejores que una costumbre. Por ejemplo, el bloque de comercio electrónico es perfecto si desea definir secciones para una tienda, mientras que los bloques de columna hacen que las secciones de servicio creen.

Los patrones de bloques funcionan reuniendo un conjunto de bloques preestablecido para formar una plantilla.Entonces podría decir que hay plantillas que se pueden personalizar.Si ya ha usado bloques, encontrará que el uso de modelos es simple.La parte interesante de los modelos de bloques de WordPress es que, aunque son plantillas, funciona como bloques ordinarios una vez que los inserta en el editor.Su edición es simple y no hay límite para el número de modelos o hijos del mismo modelo que puede colocar en una página o publicación.Una vez que haya agregado un modelo al editor, WordPress lo ve como un bloque individual, puede moverse y posicionarse en cualquier lugar.Si es un profesional de diseño de WordPress, puede combinar CSS CSS adicional, estilos de bloques personalizados y variaciones para crear múltiples secciones que se pueden usar en su base.
Aunque hay un largo camino por recorrer para que se mejoren los modelos de bloques de WordPress, eventualmente será una interfaz completamente integrada que le permitirá insertar un modelo en su publicación o página con solo un clic o dos.Este será el final final en tener que lidiar con códigos cortos y opciones de temas complicados.Patrones de bloques de WordPress vs constructores de páginas Si usted era un generador de página frecuente (y hay muchas personas), es posible que se pregunte cómo diferir en los modelos de bloque.Por supuesto, los creadores de páginas también tienen plantillas de diseño preestablecidas para aplicaciones específicas para temas del sitio web.Sin embargo, los modelos de bloque de WordPress abordan algunas desventajas serias que vienen con el uso de generadores de página.
Compatibilidad Aunque los creadores de páginas podrían ser útiles, no hay garantía de que siempre serán compatibles con futuras versiones de WordPress. Además, si el autor del generador de página ya no acepta el complemento que usa, puede llegar con muchos códigos cortos en su sitio, que no funciona. Los modelos de bloque de WordPress, por otro lado, funcionan perfectamente con el editor existente y siempre serán compatibles con versiones futuras. Los creadores de la página de velocidad pueden convertirlo en el notorio sitio lentamente debido a los numerosos guiones, hojas de estilo y fuentes que vienen con ellos. Intentan ser una solución todo en uno, pero en realidad, inyectan muchos scripts (hinchazón) que nunca pueden usarse en su sitio. Un sitio lento puede afectar el SEO y alejar el tráfico. Por el contrario, los patrones de bloque son ligeros, reutilizan el código y no usan scripts innecesarios. El artículo continúa a continuación
Actualizaciones del tema Al usar generadores de páginas, puede ser bastante difícil pasar a otro tema, porque todas las configuraciones anteriores eventualmente se perderán. Hacer una copia de reserva del código de creación de la página y moverlo en un nuevo tema puede ser un trabajo duro. Los modelos de bloques mantienen su contenido y se ven incluso si cambia los temas, aunque pueden verse ligeramente diferentes de su nuevo tema. La flexibilidad del usuario final, mientras que los creadores de páginas pueden brindarle un sitio web agradable, pueden ser bastante difícil de entender para los usuarios finales. No todos pueden encontrarlos fáciles de usar y muchos no querrían aprender ni usar ningún tipo de código para trabajar con su sitio. Los modelos de bloqueo de WordPress eliminan este dolor de cabeza para los usuarios finales, con una interfaz que se puede hacer clic fácilmente en uso. Para resumir, aunque los creadores de las páginas son excelentes si está buscando plantillas y componentes preestablecidos, pueden ralentizar su sitio y no son tan flexibles. Los patrones de bloques compensan situaciones en las que los constructores de páginas son insuficientes. ¿Cómo usar modelos de bloques de WordPress están listos para comenzar a usar modelos de bloques? En esta sección, explicaré cómo puede insertar un modelo de bloque simple, editarlo y crear sus propios modelos una vez que se sienta más cómodo con él. Aunque no tiene que ser excelente en el código para usar modelos de bloque, debe tener una idea básica sobre el editor de WordPress. Y, por supuesto, necesitará tener WordPress 5.5 o una versión posterior. Inserte los modelos de bloque en el editor de WordPress, haga clic en el icono más (+) en la esquina superior izquierda.
Elija la pestaña Modelos para navegar a través de los modelos que ya forman parte de su sitio, que variará según el tema que use y cualquier complemento activo. Los modelos disponibles se dividen en secciones. Podrá ver una pequeña vista previa de cada modelo antes de hacer clic para insertarlo en el editor.
El artículo continúa a continuación

En el siguiente ejemplo, elegí el modelo dos columnas de texto con imágenes.

Edición de modelos de bloque de WordPress Haga clic en un modelo de bloque de WordPress para editarlo.

Puede editar el texto de un patrón, impresión, configuración de color, imagen o puede agregar cualquier clase avanzada de CSS CSS que desee aplicar. Crear sus propios modelos de bloque Por lo general, crear sus propios modelos de bloque requiere conocimiento del código (HTML y PHP). Puede crear sus propios modelos utilizando la API de patrones de bloques de WordPress. El siguiente paso sería usar la función Registro_Block_Pattern para grabar el nuevo modelo con Functions.php o un complemento personalizado. Para crear su propio patrón de bloque, los necesita para establecer estas propiedades:

Título (obligatorio): un título que se puede leer para el modelo.

Contenido (obligatorio): el código HTML bruto que constituye el modelo.

Descripción: describe lo que hacen los modelos. La descripción generalmente está visualmente oculta.


Categorías: se utiliza para grupos de modelos. Se puede incluir un solo modelo en varias categorías.

Palabras clave: allies que ayudan a los usuarios a encontrar el modelo a través de una búsqueda simple.

Viewportwidth: el ancho del modelo en el dispositivo de inserción.
Ahora que tenemos los conceptos básicos en su lugar, comencemos a crear un complemento personalizado de WordPress.
Cree una publicación inacabada que tenga bloques que necesita para su modelo.
Para este ejemplo, agregué una portada, una cita y algún texto.
Seleccione y copie todos los bloques que desea agregar a su nuevo modelo.
Sugerencia: haga clic en los tres puntos verticales para llegar a la opción Copiar.
Use una herramienta JSON Escape/Unescape, como CodeBeautify para deshacerse de la salida HTML de los bloques que acaba de copiar.
Pegue lo que ha copiado en el cuadro Ingrese la cadena y presione el botón de escape.
Copie el código que aparece en el cuadro de resultados.

Ahora puede elegir dónde desea registrar su modelo de bloque, como un complemento personalizado o en el archivo Functions.php. Le sugiero que grabe su patrón como un complemento personalizado para que sea accesible sin importar su tema.
Vaya al Administrador de archivos de su sitio (a través de CPANEL o FTP) y navegue en su sitio/WP-Content/PLOGINS.

Cree una nueva carpeta con su nombre de complemento personalizado. Llamé a mi complemento “modelo a seguir”. Creamos un nuevo archivo, plugin.php en esta carpeta.
Edite el archivo plugin.php y registre el nuevo código de modelo de bloque.

Así es como lo hice:
La propiedad de contenido contiene el código HTML escapado que copié anteriormente del instrumento JSON Escape/Unescape. Guarde el archivo plugin.php.

Regrese al tablero de WordPress, explore complementos y encontrará su complemento recién creado entre complementos inactivos.
Active su complemento.
Cree una nueva publicación, acceda a la pestaña Modelo y encontrará su complemento en la lista de la categoría que especificó anteriormente. En mi caso, no especificé una categoría y mi complemento obviamente no estaba categorizado. Aquí está: al hacer clic en el modelo, ¡lo agregó a mi publicación!
Ahora puedo usar mi modelo en cualquier tema de su elección, porque lo grabé con un complemento personalizado. Agregar más modelos de bloque usando complementos Si no desea tratar con el código para crear sus propios modelos de bloqueo de WordPress, siempre puede usar complementos para agregar más. Encontrará más complementos de este tipo cuando busque wordpress.org. Algunos complementos excelentes para los modelos de bloques incluyen GuteBlock, Ultimate Blocks, Bloques QUBY, APULABLE, Toolset, GetWid y Advanced Gutenberg. Puede encontrar más recursos de WordPress para modelos de bloque. Puede encontrar más modelos de bloque en la Biblioteca de patrones de Hub Gutenberg si aún no está listo para comenzar a crear sus propios modelos. Hay algunas plantillas excelentes y modelos prefabricados que tendrá que registrarse antes de usar, pero ciertamente es mejor encontrar algo completo por su cuenta. El Bloock Pattern Builder de Justin Tadlock es otro gran recurso que definitivamente recomendaría. Este complemento le permite crear sus propios modelos de bloque sin codificar, directamente desde el editor. Seleccione los bloques de los que desea crear un modelo y elija la opción Agregar a los patrones de bloque para crear un bloque personalizado. ¡Es tan simple!