Gestión y creación de patrones de vanguardia

Aquellos que dominen los patrones de bloques estarán fuertemente posicionados para liderar el nuevo paradigma de diseño, construcción y escalado de WordPress.

Mire esta sesión para aprender cómo puede aprovechar las últimas funciones de patrones, así como una nueva y emocionante herramienta que eleva la experiencia de administración de patrones para autónomos y agencias.

Altavoces:

• Michael Day, ingeniero de reacción en WP Engine
• Phil Johnston, ingeniero de software sénior en WP Engine

Diapositivas de la sesión:

Transcripción:

PHIL JOHNSTON: Hola. Mi nombre es Phil Johnston y soy ingeniero de software sénior en WP Engine. Y yo, junto con mi compañero de equipo Mike Day, hablaremos sobre la gestión y creación de patrones de vanguardia en WordPress.

Así que hay muchas cosas nuevas e interesantes que se están agregando a WordPress últimamente. Y uno de ellos son los patrones. Y voy a estar hablando de eso. Los patrones están hechos de bloques. Así que vamos a sumergirnos en eso.

Usaría bloques en el editor de bloques, que es el tablero de WordPress. Aquí es donde irías para hacer algo como una publicación de blog o una página y donde puedes comenzar a escribir o crear. Y es el lugar donde usarías bloques.

Así que pude tomar prestados algunos bloques de LEGO de mis hijos para esta charla. Entonces, para ayudar a ilustrar esto, cuando mire la página aquí donde dice Soy un bloque de encabezado, puede pensar en eso como un bloque LEGO. Y luego debajo de eso donde dice Soy un bloque de párrafo, puedes pensar en eso como otro bloque que has recortado debajo de eso y así sucesivamente.

Tienes otro bloque de encabezado debajo. Entonces puede hacer clic en eso. Y luego puede comenzar a construir su página como desee. Y puede reorganizar esos bloques simplemente haciendo clic, arrastrando o reordenando. Y luego puedes volver a ensamblar tu página muy fácilmente de esa manera porque todas están bloqueadas.

Si bien esto es muy simple para algo como una publicación de blog, y puede sumergirse directamente en el editor y comenzar a hacer esto sin siquiera saber que se trata de bloques, también puede crear un diseño de bloque mucho más complejo como lo que está estoy viendo aquí. Así que aquí tienes un diseño de tres columnas con tres imágenes. Y encima de eso, en realidad tienes una columna de ancho completo. Y se extiende a lo largo de las tres columnas. Y luego tres bloques de imágenes, tres bloques de encabezados de muestra, tres bloques de párrafos y luego tres bloques de botones debajo de eso.

De nuevo, los bloques de WordPress son como LEGO. Puede juntarlos para hacer un diseño simple como el primero que mostré o un diseño más complejo como el que está viendo aquí. Por eso, he resaltado en rojo los bloques que podría esperar ver en una página como esta. Entonces puedes ver que el primero tiene un cuadro rojo alrededor. [SE ACLARA LA GARGANTA] Disculpe. Y eso representa un bloque. Y luego, debajo de eso, tienes otro bloque con algo de texto de Lorem ipsum y luego tres bloques de imágenes como mencioné, tres bloques de encabezados, tres bloques de párrafos debajo y tres bloques de botones.

Puede pensar que eso es todo lo que se necesita para hacer un diseño de página como este, pero en realidad es un poco más complejo que eso. Así que aquí en esta diapositiva, he resaltado los bloques invisibles, los bloques que no puedes ver. Estos son bloques que deben estar en la página para definir dónde deben ubicarse las cosas, como el hecho de que hay tres columnas en lugar de una columna.

Y así, los bloques invisibles, si bien son poderosos, también son muy difíciles para que un usuario promedio se sumerja y comience a usarlos. A medida que mueve el mouse dentro del editor de bloques, no sabrá que hay bloques invisibles allí porque son invisibles. Y todos esos bloques también tienen controles complejos que vienen con ellos. Por ejemplo, aquí está uno de los bloques de columnas.

Y si miras en el lado derecho, puedes ver todos los controles complejos que vienen con eso que no son súper fáciles o intuitivos de entender. Cosas como los bloques internos usan ancho de contenido o relleno o espaciado de bloque. El usuario promedio no sabrá ni entenderá lo que hacen estas configuraciones. Y esto es un poco como yo si entrara en una cocina y viera un montón de especias.

No soy un gran cocinero. Y entonces tendría un montón de especias en el estante como este. Y no sabría cómo combinarlos o usarlos porque no me he tomado el tiempo para convertirme en chef. Y al igual que se necesita tiempo para convertirse en un chef de cinco estrellas y cocinar una excelente y deliciosa comida, se necesita tiempo y hay una curva de aprendizaje difícil con el editor de bloques y comprender qué bloques usar y en qué momento para hacer algo que se vea bien o sepa. bien.

Y por eso es una especialidad. Es un oficio que tienes que desarrollar. Entonces, el usuario promedio será arrojado al editor de bloques con una pizarra vacía como la que ves aquí. Y no van a saber que necesitan usar un bloque de columnas, o cómo usar ese bloque, o qué poner dentro de ese bloque, básicamente las especias que necesitan combinar para hacer algo que realmente se vea genial.

Pueden encontrarlo frustrante. Puede que les resulte tedioso y difícil conseguir lo que quieren. E incluso si aprenden todas esas complejidades de los bloques, es posible que simplemente no tengan habilidades de diseño. Y así, aunque poderosos, los bloques pueden ser difíciles de usar. Y por eso se inventó el concepto de patrón.

Entonces, en WP Engine, creamos un complemento llamado Atomic Blocks. Y en Atomic Blocks, básicamente se nos ocurrió el concepto de patrón, pero los llamamos secciones y diseños. Y es exactamente el mismo concepto. Y WordPress Core en realidad se inspiró en Atomic Blocks para el concepto de lo que ahora está en WordPress Core y se llama patrones.

Entonces, los patrones son grupos de bloques preconstruidos que los usuarios pueden explorar, como se ve aquí. Hay un montón de patrones aquí para que elijan. Y al hacer clic en uno, obtienen todo eso insertado en su página con un solo clic. Entonces, en lugar de tener que ensamblar bloques como este, los bloques LEGO, obtienen algo como esto, un grupo preensamblado de un montón de bloques que fue hecho, con suerte, por alguien que ya es muy bueno en el diseño y ha dedicado horas a ese oficio de hacer bloques

Y así, una vez que lo insertas en la página, se parece un poco a esto. Y así, boom, tienes un patrón, un montón de bloques preensamblados que se ven bien, saben bien y funcionan, y luego puedes entrar y escribir el texto que necesitas cambiar. . Por lo tanto, cambiaría algo como el encabezado de muestra al texto único de su página.

Entonces, los patrones son como una gran ventaja para el usuario promedio. No necesitan aprender todas las complejidades del editor de bloques, todas esas cosas complejas. No es necesario que sean diseñadores profesionales, pero pueden obtener un diseño atractivo simplemente insertando un patrón en la página.

Entonces, si es una agencia, alguien que crea sitios web para otra persona o un cliente, puede usar patrones de bloqueo para ayudar a sus clientes a ayudarse a sí mismos. Al entregar un montón de patrones prediseñados a su cliente, puede crear sus propias páginas.

Digamos que tienen un evento próximo para el que necesitan una página especial. Pueden tomar un patrón de bloque que haya creado para ellos que coincida con su marca. Coincide con su combinación de colores y todo ese tipo de cosas, y pueden simplemente hacer clic e insertarlo en la página y aplicar ingeniería inversa: simplemente comience a escribir en esos bloques en lugar de necesitar saber todas las complejidades de qué bloque usar en qué escenario, y qué no hacer también, y cómo crear un diseño que funcione muy bien en todos los dispositivos y todo ese tipo de cosas.

Sin embargo, mientras que los patrones de bloques son fáciles de usar para el usuario promedio, no son fáciles de crear. Y son aún más difíciles de manejar con el tiempo. Y para los desarrolladores y las agencias, no hay un flujo de trabajo o herramientas integrados en WordPress para ayudarlos a crear patrones.

Así que he dividido los pasos para construir un patrón actualmente en lo que llamaré la manera difícil aquí en 10 pasos. Y si esto parece abrumador, es porque lo es. Lo primero que tienes que hacer es crear un archivo PHP en un editor de código como VS Code. Tienes que poner un encabezado de archivo específico en la parte superior de ese archivo.

Entonces necesitas un lugar para construir. Así que tienes que tener un WordPress, probablemente en tu local, lo cual es genial. Pero luego necesita crear una página temporal dentro de ese WordPress solo para poder colocar bloques en algún lugar y trabajar en ellos. Y luego necesitas construirlo. Necesitas usar esas habilidades, ese oficio que has desarrollado, y hacer que se vea bonito. Y luego, cuando haya terminado, debe cambiar a una vista de código y copiar todo ese código en el archivo que creó en el paso uno.

Y luego debe guardar ese archivo en una ubicación específica en su tema. Si está creando un tema y entregándoselo a su cliente, debe colocarlo en el directorio de patrones. Y luego, si su patrón contiene imágenes como en el diseño de tres columnas que mostré, debe asegurarse de que esas imágenes realmente funcionen cuando se las entregue a su cliente. Entonces, debido a que lo creó en su computadora local, esa imagen también se hará referencia en el código como si estuviera en el disco duro de su computadora local.

Obviamente, esto es un problema. Una vez que ya no esté en su computadora, esa imagen no funcionará. Entonces, debe revisar el código con un peine de dientes finos, buscar cualquiera de las URL de sus computadoras locales y reemplazarlas con una etiqueta PHP específica. Y luego debe asegurarse de mover esos archivos de imagen a su tema también. No puedes simplemente cambiarlo en el código. También tienes que mover ese archivo.

Y luego, para hacerlo aún más difícil, creo que aquí es donde se pone realmente más frustrante, al menos para mí cuando estaba construyendo muchos patrones, era si cometía un error de ortografía dentro de un patrón, tendría que comenzar. en el paso tres nuevamente y vaya hasta el paso nueve nuevamente cada vez solo para corregir un error de ortografía. También tiene que, porque tiene que regenerar todo el código de bloque cada vez, debe buscar todas esas URL de imágenes y reemplazarlas, volver a colocarlas en el archivo.

Es todo un conjunto de pasos repetitivos y tediosos, especialmente para administrar con el tiempo. Digamos que necesitas modificar un patrón dentro de unos meses. es muy tedioso Y esto es algo con lo que nos encontramos al crear patrones para nuestra colección Genesis Pro. Hemos entregado muchas secciones y diseños o patrones con eso y nos sentimos muy frustrados con el proceso de hacer estas cosas tediosas una y otra y otra vez.

Y eso es lo que nos llevó a crear una herramienta que nos ayude a no tener que hacer estas cosas, a eliminar ese tedio y a hacerlo lo más rápido posible. Puede trabajar en él, guardarlo y, boom, irá directamente al archivo por usted. Pondrá el archivo en el lugar correcto. Escribe todo el código por ti. Y entonces decidimos construir una herramienta para nosotros mismos internamente que eliminaría todo este dolor. Y en realidad nunca tuvimos la intención de que se convirtiera en algo que permitiríamos que otras personas usaran, pero se volvió tan útil para nosotros que queríamos que también estuviera disponible para que otras personas lo usaran.

De nuevo, como puede ver, la forma difícil actual de construir un patrón no es ideal, y no es una gran manera de hacer las cosas. Por eso creamos Pattern Manager, una interfaz de usuario para crear y mantener colecciones de patrones dentro de WordPress. Así que voy a pasárselo a mi colega, Mike Day, para que nos guíe a través del administrador de patrones y nos muestre todas las increíbles funciones que contiene. Así que te toca a ti, Mike.

MIKE DÍA: Hola. Soy Mike. Soy ingeniero de software en WP Engine. Los patrones son una poderosa herramienta de creación de diseño que tiene el potencial de cambiar el juego para los constructores de WordPress. Pero como Phil acaba de demostrar, la experiencia de usar estos patrones en términos de crearlos y administrarlos, falta por decir lo menos. Pattern Manager tiene como objetivo llevar la gestión de archivos de patrones a la vanguardia del diseño de WordPress sin fricciones a través de un complemento que puede deslizarse en su flujo de trabajo. Saltemos.

Para los propósitos iniciales de esta demostración, dejaré abierta la ventana del editor de código aquí a la derecha. Este es un archivo de patrón real guardado directamente en mi disco. Y realmente quiero recalcar el punto de que cuando trabaja con Pattern Manager, en realidad está manipulando y creando archivos físicos guardados en su disco. Específicamente, se guardan en su directorio de temas actual. Entonces puede ver aquí estos dos archivos PHP o archivos de patrones, representan los patrones que están actualmente activos en esta vista de Patrones.

Además, tenga en cuenta este directorio de imágenes. Phil trajo a colación un punto muy interesante de que, en este momento, cuando se trabaja con patrones, digamos que tiene un montón de imágenes guardadas en un patrón. Todas esas URL para esas imágenes en particular apuntarán a su instalación local. Ese es un gran problema cuando llega el momento de compartir tu trabajo.

Todas esas imágenes se romperán. Así que nos acercamos a eso un poco diferente. De hecho, guardamos copias de estas imágenes directamente en la carpeta del tema. Este es un cambio de juego para el control de versiones, por ejemplo. Digamos que usted y sus colaboradores están usando Git. Ahora puede estar seguro de que todos tienen acceso a las mismas imágenes mientras trabajan.

DE ACUERDO. Entonces, saltemos a la interfaz. Esta es la vista de patrones. E inmediatamente aquí, puede ver los dos patrones que están registrados para mi tema. Cuando pasa el cursor sobre la vista previa de un patrón, observe los botones de acción que aparecen. Tenemos opciones para editar, duplicar o eliminar un patrón determinado. También hay algunas opciones de filtrado aquí a la izquierda, pero voy a volver a eso aquí en un momento. Por ahora, entremos y editemos un patrón.

Así que de inmediato, estoy seguro de que reconocerá una interfaz de usuario muy familiar. Este es el editor de bloques de WordPress, en este caso reutilizado para proporcionar un espacio específico para trabajar con patrones. Y aquí a la derecha, verá estas diversas propiedades de encabezado. Ahora, antes de saltar a estos, quiero dar un poco más de contexto y usar un texto tomado de la documentación del desarrollador de WordPress.

La propiedad del título se explica por sí misma. Esta es una identificación frontal legible por humanos, por así decirlo, que los usuarios verán cuando interactúen con su patrón en un sitio. Las categorías se utilizan realmente para agrupar patrones. Esta va a ser una matriz de categorías registradas donde puede agregar una, o muchas, o realmente ninguna si lo desea. Pero aquí hay un problema con la forma actual en que esto funciona en WordPress Core.

Realmente no hay una buena manera de saber qué categorías están realmente disponibles. No hay un lugar obvio para encontrar estas categorías de patrones de bloque registradas en ningún lugar de su sitio, al menos que yo sepa. Ahora puedes pensar en palabras clave como términos de búsqueda. Esencialmente, puede ingresar estos alias descriptivos para describir su patrón, de modo que, independientemente de lo que los usuarios estén buscando en el insertador, puedan encontrar fácilmente lo que necesitan. Y la descripción es una especie de extensión de esa idea, excepto que es un texto visualmente oculto. Esto es realmente útil para usuarios con discapacidades visuales que podrían estar usando un lector de pantalla.

Ahora volviendo al Administrador de patrones, modifiquemos estas propiedades meta. El título del patrón es una simple entrada de texto. Simplemente comience a escribir para cambiar el nombre de su patrón. Pero observe una característica oculta aquí. El administrador de patrones me dice que ya existe un patrón con este título en el tema. No quiero destruir accidentalmente ese archivo, así que dejaré el título en paz.

DE ACUERDO. Escojamos algunas categorías. De inmediato, observe que hemos presentado esta lista de categorías solo en un menú desplegable. De lo contrario, es difícil saber dónde encontrar realmente estos datos. Pero esta lista se completa dinámicamente a través de una llamada a la API. Eso significa que no solo todas las categorías de patrones de bloques registradas para su tema, sino también cualquier categoría que haya registrado, la mostraremos aquí. Seleccionemos destacados por ahora.

DE ACUERDO. Y agreguemos algunos términos de búsqueda. Para los propósitos de esta demostración, solo usaré un patrón de muestra. Pero recuerde que aquí es donde puede agregar términos que describan este patrón para los usuarios que buscan en el insertador. Y observe que usé un término de varias palabras aquí. Esos son compatibles con el administrador de patrones.

DE ACUERDO. Y agreguemos una descripción. Recuerde que este es un texto oculto visualmente. Entonces, en mi opinión, la intención principal aquí es ayudar a los lectores de pantalla. Así que describamos esto como tres columnas con colores invertidos. DE ACUERDO. Perfecto. Siento que estamos en un buen lugar ahora. De hecho, podemos guardar nuestro trabajo. Pero antes de hacerlo, quiero que preste mucha atención al encabezado de este archivo a la derecha. Ahora, tan pronto como presiono Actualizar patrón, de repente hay muchos más datos aquí. La descripción, las categorías y las palabras clave que acabamos de modificar han aparecido aquí sin que yo tenga que tocar este archivo.

DE ACUERDO. Veamos las meta propiedades restantes. En primer lugar, tenemos una propiedad bastante interesante en el ancho de la ventana gráfica. Se pretende que sea un número entero que represente el ancho escalado para obtener una vista previa de este patrón. Entonces, de forma predeterminada, cada vez que crea un patrón, digamos que hace algo de ancho completo o tal vez incluso muy angosto. La configuración predeterminada para esto en un WordPress Core puede hacer que la escala se vea un poco extraña en las vistas previas.

Así que tipos de publicaciones. Esto es simplemente una matriz de slugs de tipo de publicación con los que se pretende usar el patrón. Tenga en cuenta que agregar valores aquí en realidad restringirá el patrón, por lo que solo funciona con esos tipos de publicaciones. También tenga en cuenta que dejar esto en blanco hará que el patrón funcione con todos los tipos de publicaciones.

A continuación tenemos tipos de bloques. Esta es otra matriz, pero esta vez de tipos de bloques con los que se pretende usar el patrón. Ahora debo admitir que cada vez que comencé a usar estos tipos de bloques, lo encontré un poco confuso. Parece que el uso realmente tiene la intención de ser multipropósito, pero la intención detrás de esto no está muy clara en mi opinión.

Y por último, tenemos la propiedad del insertador. Ahora, de forma predeterminada, todos los patrones aparecerán en el insertador, pero digamos que desea cambiar eso. Simplemente agregaría un valor booleano de falso para esta propiedad y se ocultará del uso en el insertador.

Entonces, volviendo al Administrador de patrones, veamos cómo manejamos estas metapropiedades restantes. En primer lugar, voy a cerrar estos otros paneles. Y echemos un vistazo al ancho de la ventana gráfica. Ahora recuerde que este es un valor entero que simplemente controla las vistas previas escaladas para su patrón en el insertador. Una cosa que es un dolor con la implementación actual de esto es ver los resultados de su trabajo.

Así que digamos que modifico el encabezado en mi archivo de patrones y cambio el ancho de la ventana gráfica. La única forma de ver realmente cómo se ve eso es, por ejemplo, creando una nueva publicación. Eso se vuelve un poco complicado. Es un poco demasiado complicado saltar de un lado a otro. Es un poco doloroso. Entonces, la forma en que lo hemos abordado es simplemente pasar el cursor sobre el control deslizante e inmediatamente se muestra una vista previa. Y mientras arrastro y pruebo diferentes tamaños, puedo ver cómo se escala este patrón. Esto es realmente útil y un gran ahorro de tiempo. Escojamos 1,200 por ahora. Y pasemos a los tipos de publicaciones.

Lo primero que hay que tener en cuenta sobre este panel es la presencia de esta información sobre herramientas. Estos son simplemente pequeños fragmentos de información para tratar de guiarlo en su camino mientras usa la aplicación. En primer lugar, esto es solo reiterar algo que ya he discutido. Si no hay selecciones, si no se agregan tipos de publicaciones al encabezado de su archivo de patrón, su patrón funcionará para todos los tipos de publicaciones. Pero observe a continuación que hay esta configuración llamada Visibilidad modal.

Esta es una característica oculta realmente genial. Esencialmente, si tiene el tipo correcto de tipo de bloque en el encabezado de su archivo de patrón, cada vez que los usuarios creen una nueva publicación del tipo objetivo, verán aparecer un modal. Y pueden elegir su patrón directamente desde ese modal. Y te mostraré exactamente lo que quiero decir en un momento. Pero quiero que se dé cuenta de cómo esta palanca está realmente deshabilitada. Y eso se debe a que la configuración de visibilidad modal no funcionará a menos que se complete un tipo de publicación.

Entonces, la forma en que lo abordamos es simplemente deshabilitando el interruptor hasta que haya un tipo de publicación presente. DE ACUERDO. Ahora puedo activar esto. Y la pantalla y el insertador alternan, hace lo que podría suponer. Si tuviera que desactivar esto, esto asignaría un valor de falso en el encabezado de su archivo. Y este patrón ya no aparecería en el insertador. DE ACUERDO. Sigamos adelante y actualicemos esto.

Ahora veamos cómo funciona todo esto en una publicación. Así que voy a cambiar y crear una nueva publicación. Ahora, de inmediato, este es ese modal del que estaba hablando en acción. Debido a que el tipo de bloque y el tipo de publicación correctos se agregan al archivo, ahora veo esto de inmediato cuando creo una nueva publicación. Y simplemente puedo hacer clic en la vista previa del patrón y, boom, mi patrón está allí.

Eso está muy bien, pero veamos cómo funciona realmente el etiquetado de lo contrario. Así que aquí está la categoría que elegí, la función. Y el otro patrón en mi tema tiene las categorías de columnas y texto, así que funciona muy bien. ¿Qué pasa con mis términos de búsqueda? Mi término de búsqueda con patrón de muestra. Eso está funcionando muy bien. Y mi texto oculto comenzó con tres columnas, y también funcionó exactamente como se esperaba. Genial.

DE ACUERDO. Así que regresemos y cubramos una meta propiedad más restante. Este es un poco raro de explicar. Siento que es más fácil si solo te muestro. Así que sigamos adelante y creemos un nuevo patrón. Todo lo que tiene que hacer para eso es presionar este botón Crear nuevo patrón. Y aquí estoy de vuelta en el editor. En este caso, voy a elegir el bloque de código. Y en este bloque de código, voy a pegar un código de muestra.

Ahora, esto en realidad está tomado de la documentación de WordPress. Esta es la forma en que registraría una transformación de bloque usando PHP. Entonces, tomaría este código y tal vez lo pegaría en un archivo de funciones, lo que prefiera. Déjame mostrarte cómo abordamos esto. En esta sección de tipo de bloque transformado, hay un menú desplegable. Este menú desplegable se completa dinámicamente al igual que los tipos y categorías de publicaciones a través de una llamada API.

Así que simplemente puedo buscar mi tipo objetivo, ahí está, núcleo/código, y seleccionarlo. Ahora, solo para ilustrar una vez más, la diferencia está en cómo puede hacer esto ahora versus usar el administrador de patrones. Para hacer esto ahora, tengo que buscar este bloque de código, averiguar exactamente qué contenido podría necesitar, averiguar mi tipo de bloque y pegarlo en algún lugar, en lugar de Pattern Manager, solo elegí este campo. Elegí este valor de un menú desplegable. DE ACUERDO. Actualicemos esto. Y voy a crear una nueva publicación. Y salgamos de nuestro modal.

Ahora esta vez, voy a elegir también el bloque de código. Pero en lugar de llenar esto con contenido, simplemente puedo elegir esta opción de la barra de herramientas. Y observe esta selección de patrón. Cuando escojo patrones, ahí está mi patrón. Y al hacer clic en él, inmediatamente este bloque se transformó en mi patrón objetivo.

Otra cosa a cubrir con los tipos de transformación es la idea de lo que se llama patrones de bloques semánticos. Son similares a una transformación de bloques, pero están dirigidas a las partes de la plantilla. Por ejemplo, encabezados y pies de página. Pero hay un problema ahí. Una cosa que debe saber sobre la selección de ese tipo de bloque de parte de plantilla de destino es que también debe tener asignado el tipo correcto de tipo de publicación o simplemente no funcionará. Entonces, la forma en que lo abordamos es simplemente asignándole este tipo de plantilla. Y está bloqueado. Y permanecerá bloqueado hasta que este tipo de bloque se elimine realmente.

Eso es todo para la demostración inicial de esta vista del editor, pero necesito cambiar los temas en segundo plano aquí. Y ahora volveré a la Vista de patrones. El punto aquí es mostrarle cómo se comporta Pattern Manager con muchos patrones. Este tema en particular tiene más de 50 patrones registrados.

Ahora observe, mientras hago clic en estas diversas categorías, cuán inmediatamente se filtran estos patrones. Esto es realmente útil cuando trato de encontrar lo que necesito entre un montón de patrones. Pero digamos que desea un control más granular. Simplemente comience a escribir. Este filtrado funciona de manera muy similar al Insertador. Es realmente útil y realmente ágil. Y hablando de ágil, una cosa más para señalar es cuán rápida se siente esta interfaz de usuario.

Observe cómo estas vistas previas no se cargan hasta que realmente me desplazo a ellas. Esta es una implementación personalizada que realmente es excelente para ahorrar recursos del navegador. Y hace que esta aplicación se sienta rápida y ágil sin importar cuántos patrones uses. Está bien. Hemos cubierto mucho terreno en esta presentación, así que recapitulemos rápidamente. Los patrones representan una intersección interesante entre la curación de elementos de contenido individuales y el diseño de página completa.

Como creador de WordPress, la capacidad de crear elementos de diseño más grandes y reutilizarlos en un tema es una idea atractiva. Encabezados, pies de página, testimonios, cuadros de características. Estos son todos los sellos distintivos de cada sitio web. Y ahora puedes diseñar fácilmente todo tu sitio con patrones.

Ahora, a pesar de la aparición de patrones como un componente clave de los temas de bloque, WordPress en sí mismo no tiene una interfaz oficial para crear o administrar estos patrones, ni hay nada en la hoja de ruta. En cambio, los constructores tienen que crear patrones manualmente en su editor de código, copiando y pegando el código docenas de veces, dejando mucho espacio para el error.

Nuestro producto, Pattern Manager, está diseñado para integrarse en su flujo de trabajo. Simplemente instale y active el complemento y obtendrá una interfaz de usuario moderna para filtrar patrones, crear, duplicar, editar, eliminar y todo esto junto con la experiencia de editar contenido en la experiencia familiar de usar el editor principal de WordPress. Además, muchas complejidades más difíciles de entender de etiquetar correctamente un archivo de patrón, por ejemplo, agregar categorías, palabras clave o tal vez incluso restringir el trabajo solo con ciertos tipos de publicaciones personalizadas, se abstraen en nuestra interfaz de usuario. Los constructores tienen control total sobre estas configuraciones a través de controles de barra lateral fáciles de usar.

Pattern Manager se ha lanzado y está disponible para su descarga ahora en la siguiente URL. Pruébelo y háganos saber sus pensamientos. Y no dude en comunicarse conmigo personalmente y decirme lo que piensa. Esperamos que pruebe Pattern Manager. Y esperamos que te ayude de la misma manera que ha ayudado a nuestro equipo de creadores de WordPress. Gracias.