Cómo crear patrones de bloques de WordPress para acelerar la creación de sitios web

Los patrones de bloques van a ser un gran problema para todos los usuarios de WordPress y en esta publicación, te mostraré exactamente cómo crear tus propios patrones de bloques.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

Hace dos días, publiqué un video y presenté este concepto que está llegando a la vuelta de la esquina en WordPress llamado patrones de blog. Es un poco experimental en este momento, y es algo que me emociona mucho. Y creo que si piensa en el potencial de los patrones de bloque, entonces puede ver el potencial para ayudarlo a entregar sitios web más rápido si tiene clientes, para poder permitirles hacer más con su sitio web.

Así que te voy a mostrar. Exactamente cómo crear un patrón de bloque en este video. Ahora vamos a hacer algunas cosas que son un poco del lado técnico, y sé que este es el canal de WordPress para los que no son técnicos, así que voy a tratar de hacerlo lo más simple posible, pero estás Voy a ver al final lo simple que es crear uno de estos patrones de bloques.

Así que sigamos adelante y echemos un vistazo. Así que aquí está la página donde se habla sobre la nueva versión de esta característica al hacerla. Capaz de que solo la gente promedio cree un patrón de bloque. Entonces, cuando me desplazo hacia abajo, da el tipo de plantilla para ello. Así que todo lo que implica es crear algo llamado función personalizada.

Pero no te preocupes, voy a hacer que sea muy fácil de hacer para todos, pero aquí es donde está ese pequeño fragmento de código. Ahora tendré un enlace en la descripción del video a continuación. Te llevará a mi sitio web. Recibirá instrucciones escritas sobre cómo hacer esto, así como. Este pequeño fragmento de código que puede copiar y pegar en su propio sitio web.

Bien, esto es lo que vamos a necesitar. Esta es una característica nueva de Gutenberg y necesitará el complemento de Gutenberg instalado y activado, por lo que necesitará una versión mínima de 7.8 y esto es lo que salió recientemente. Ahora, lo que terminará sucediendo es tal vez en cuatro a seis meses, tal vez para fines del verano de 2020, esto se incluirá en WordPress de forma predeterminada, pero por ahora, lo necesitará, si quiere probar esto. , necesitará instalar el complemento Gutenberg.

Lo siguiente que puede hacer, y esto es opcional, si no sabe cómo agregar una función personalizada a un tema secundario, y ya ni siquiera uso un tema secundario, es posible que desee utilizar este complemento gratuito, y este es uno de los mejores complementos gratuitos. Que me he encontrado alguna vez, y se llama fragmentos de código. Y esto nos permitirá agregar esta función personalizada y una manera muy fácil de usar, fácil de administrar.

¿De acuerdo? Así que vas a necesitar eso. Y esto es opcional. Este es un complemento gratuito llamado bloques de cadencia. Y lo que esto hace es agregar una gran cantidad de funciones de creación de páginas a Gutenberg. Es bastante ordenado en lo que te permite hacer. Puede arrastrar y cambiar el tamaño de las columnas. Tiene muchos elementos que agregan mucha de esa funcionalidad de creación de páginas, pero para Gutenberg, y es un complemento completamente gratuito.

Bueno. Ahora pasemos a mi sitio web. Así que aquí hay un sitio web. Está todo listo ahora. Y si no sabes cómo instalar un complemento, alguien se enojó mucho conmigo el otro día por no mostrar cómo instalar un complemento y un video. Vas a complementos, haces clic en agregar nuevo, y luego aquí mismo haces una búsqueda del nombre de ese complemento, y luego haces clic.

Descarga, o lo siento, haces clic en instalar ahora y luego lo activas. Es un proceso muy simple. Así que voy a hacer clic en mis complementos instalados, y pueden ver que tengo Gutenberg instalado y estos eran bloques de cadencia opcionales, y aquí hay fragmentos de código. Así que voy a seguir adelante y activar fragmentos de código y pueden ver que ahora está activado aquí.

Así que adelante, haga clic en fragmentos de código y verá algunos con los que viene. Y aquí está este interruptor de palanca y está activado. Todos están desactivados y, en realidad, no es necesario que conserves los que vienen de forma predeterminada. Puede simplemente hacer clic aquí y podría eliminarlos todos, pero ya agregué uno aquí llamado plantilla de patrón de bloque.

Entonces, ¿qué harías? Es hacer clic en agregar nuevo, y puede nombrar esta plantilla de patrón de bloque en ese pequeño fragmento de código que le mostré que está aquí, pero le daré una versión modificada de esto en mi sitio web. Solo vas a copiar y pegar eso aquí, y luego vas a hacer clic en guardar cambios.

No vas a hacer clic en guardar y activar, vas a hacer clic en para guardar los cambios, y te mostraré por qué en un momento. Bueno. Así que ahora lo que vas a querer hacer es crear este patrón de bloque. Y un patrón de bloques es simplemente una sección guardada. Entonces, si usa un creador de páginas, ahora sabe que puede guardar secciones y algunas de ellas vienen con secciones prediseñadas, pero la experiencia del usuario creo que es mucho mejor en Gutenberg.

Así que lo que vas a querer hacer es ir a las páginas. Y haga clic en agregar nuevo, y querrá nombrar esto. Um, en realidad déjame deshacerme de esta gira. Vas a querer nombrar este patrón de bloque, y aquí es justo donde vamos a crear este patrón de bloque. Ahora, no voy a pasar por la creación de un patrón de bloque en este momento.

Les voy a mostrar el que ya he creado, y es . Aquí mismo. Así que aquí hay un patrón de bloques que creé. Podrías ver que es esta sección. Tiene este fondo colorido. Tengo un encabezado, algunos subtítulos y un par de botones aquí, y puse un video. Así que voy a hacer que este sea mi patrón de bloques para poder agregarlo a cualquier parte de mi sitio web con solo dos clics del mouse.

Así que lo que voy a hacer es hacer clic en la parte superior derecha, hay estos tres puntos. Son un poco difíciles de ver, y cuando haces clic en eso, hay una opción aquí que dice editor de código. Así que vas a querer hacer clic en el editor de código, y luego te muestra todo el código relacionado con hacer que ese blog sea un patrón de blog de patrón de bloque.

¿De acuerdo? Así que vas a hacer clic aquí y luego vas a hacer clic en control a o comando a en tu computadora para resaltarlo todo. Y son de año nuevo. Ponlo en tu portapapeles. Así que lo haré control C. ahora está en mi portapapeles. Así que ahora lo que voy a hacer es salir de aquí. En realidad, si desea salir de esta vista, hay una pequeña X aquí que dice editor de código de salida, y ahora me mostrará la forma en que normalmente es aquí.

Bueno. Por lo tanto, puede guardar esto como borrador si lo desea, pero no lo necesitará. Esto es solo para que usted cree este patrón de bloque, y podría crear un patrón de bloque que sea cualquier cosa, y no tiene que ser un bloque de cosas. Podría ser una plantilla completa para una publicación de blog, por ejemplo. Bien, ahora voy a hacer clic donde está la w que me saca del editor de bloques.

Ahora voy a volver a los fragmentos de código. Así que aquí es donde creé esa plantilla de patrón de bloque. Voy a hacer clic en clonar, y ahora se ha creado un clon, y luego voy a hacer clic en el título para comenzar a editarlo. Entonces, para el título, voy a cambiar esto a un título que tenga sentido para administrarlo.

Entonces, para mí, solo voy a nombrarlo. Un héroe con video. Así que ahora sé qué es esto cuando miro la lista en el futuro. Bien, hay un par de cosas aquí que necesitarás editar. Tres cosas. Es súper simple. El primero es el nombre. Así que este puede ser cualquier nombre que vaya a ser, debe estar todo en minúsculas, sin espacios ni caracteres funky.

Así que seguiré adelante y pondré un nombre ahora mismo. Puedes ver que lo nombré héroe con video. A continuación, aquí tienes que poner un título. Así que estamos reemplazando este título de palabra, y esto es lo que se mostrará. Está viendo una lista de patrones de blog, bloque, no patrones de bloque de blog. Y si te fijas, puedes, este es el nombre descriptivo, por lo que puede tener espacios.

Uh, no pondría ningún personaje funky ahí. Los espacios están bien. Así que eso es lo que se va a mostrar en esta lista y luego aquí donde dice el patrón a. Vas a pegar lo que acabas de copiar en tu portapapeles. Ahora quiero que tomes nota de una cosa. Para cada uno de estos. Dejé el pequeño apóstrofe en el frente y el reverso.

Ves que ahí está el apóstrofe que debe estar ahí. Si lo quita accidentalmente, vuelva a colocarlo. Bueno. Solo estamos cambiando. Solo estamos reemplazando el marcador de posición de texto. Entonces, por aquí, no quiero reemplazar todo. Solo quiero reemplazar la palabra patrón, así que la resaltaré y luego pegaré lo que copié.

Y ahí está. Así que ahora voy a desplazarme hacia abajo y esta vez voy a hacer clic en guardar cambios y activar. Y ahora debería decir fragmento actualizado y activado. Y cuando hago clic en todos los fragmentos, puedes ver que este héroe con video está activado. Así que en el futuro para patrones de bloque adicionales, quiero ir a donde dice plantilla de patrón de bloque y hacer clic en clonar y hacer esa plantilla de patrón de bloque de esa manera.

De esa manera siempre tengo la plantilla ahí. Ahora, si ya lo sabe y tiene su propia forma de agregar funciones personalizadas, no necesita fragmentos de código y, y todo este tipo de cosas, puede ponerlo donde quiera. Esta es una forma mucho más fácil de administrarlo si me preguntas. Bien, ahora voy a ir a las páginas en mi clic en agregar nuevo, y si quieres ver el.

Patrones de bloques. Uh, aquí mismo está el icono para ello. Y cuando pasas el cursor sobre él, dice patrones de bloque. Y cuando hago clic en él, ven algunos de los patrones de bloques con los que se está experimentando en este momento. Pero cuando te desplazas hacia abajo, verás ese patrón de bloque que creé. Y lo que es realmente bueno es que genera una vista previa en miniatura.

Y lo hace dinámicamente. Tienes herramientas de creación de páginas que ni siquiera hacen esto. Uh, y hace que sea mucho más fácil administrar tus patrones de bloqueo. Entonces, y pueden ver aquí mismo, dice héroe con plantilla. Ahora, si quiero usar esto en cualquier parte de mi sitio web, es un clic del mouse. Y ahí está. Y todo lo que tendría que hacer en ese momento para comenzar a cambiar algunos textos, cambiar los enlaces a los botones.

Puedo hacer clic aquí y puedo cambiar el video. Asi que. Así es como se crea un patrón de bloques. Ahora bien, esto es un gran problema, creo que porque lo que va a pasar es un tema. Los desarrolladores y creadores de complementos podrán crear estos patrones de bloques para usted, por lo que será mucho más rápido, más rápido y más fácil crear un sitio web utilizando la herramienta de creación de bloques nativa que WordPress ya incluye.

No hay nada que comprar, no hay exceso de código. No hay ninguna de estas cosas, y. Lo que lo lleva aún más lejos. Puede ver lo fácil que es para usted crear sus propios patrones de bloques, y es muy fácil verlos en una lista. Haga clic en un botón y se pone allí. Entonces, ahora podría pensar en lo fácil que puede ser crear un sitio web cuando tiene su propia biblioteca de patrones de bloques.

Entonces, si crea sitios web para clientes y no desea utilizar un creador de páginas. Solo desea utilizar el generador de bloques incorporado. Podrías crear tu propia biblioteca de patrones. Ya viste lo fácil que es. Puedo hacerlo. Usted podría hacerlo. Uh, podría crear su propia biblioteca de patrones de bloques que puede mover de un sitio a otro, y puede mostrarle a su cliente cómo puede construir esto.

Ahora, esto no es solo para páginas, es para publicaciones, y no se limita solo a esa sección que viste. Básicamente cualquier cosa que puedas crear en una página. Puedes hacer un patrón de bloques. Entonces, si está utilizando el generador de bloques solo para publicaciones de blog, y hay ciertos elementos que desea usar una y otra vez en una publicación de blog para mejorar el diseño de las publicaciones de blog, puede crear un patrón de bloque para eso.

Y es muy fácil. Un clic y podrás usarlo. De hecho, las plantillas de publicación de blog completas. Entonces, si hay una fórmula que sigue para las secciones de una publicación de blog, puede hacer que toda la publicación de blog sea una plantilla de bloque. Ese clic se aplica y luego todo lo que tiene que hacer es señalar, hacer clic y editar.

Entonces, lo último antes de terminar aquí, este es un concepto nuevo y es algo en lo que pensar durante los próximos meses. Experimenta con ahora. No es exactamente Yeti, Yeti. No está del todo listo para el horario de máxima audiencia porque si te diste cuenta, um, lo único negativo que vi es cuando miras el blog. Mira ahí voy de nuevo.

Si está mirando los patrones de bloque, es solo una lista de artículos más alta por la que tiene que desplazarse, por lo que necesitan mejorar el proceso de categorización y organización. Tal vez tengan algún tipo de interfaz para que sea más visual y fácil de trabajar. Si vas a tener 50 bloques diferentes.

Patrones. Así que solo necesitan mejorar eso. Y parte de la sintaxis del código puede cambiar un poco. Quién sabe cuándo finalmente saldrá esto. Pero el objetivo de este video es solo mostrarte lo que será posible muy, muy pronto para que puedas comenzar. Pensando cómo se puede aplicar a su flujo de trabajo y lo que está haciendo como creador de sitios web.

De todos modos, eso es todo lo que tengo para ti en este post. Espero que aprecies las miradas avanzadas sobre el futuro de WordPress como esta, y si apreciaste este video o encontraste algún valor, considera darle un pulgar hacia arriba y compartir este video para que las personas puedan ver lo que viene a la vuelta de la esquina.