Build for Gutenberg: ¿Cómo los autores de los complementos y los temas de la transición al enfoque de Gutenberg

En WordCamp Europe 2018, Matt Mullenweg estableció una hoja de ruta aproximada para Gutenberg en los próximos meses. En julio, habrá un gran impulso para aumentar la adopción de Gutenberg, con una versión Beta 5.0 para agosto (o más; de hecho, probablemente después). La integración inminente puede hacerte preguntarte cómo los desarrolladores de WordPress pretenden construir para Gutenberg. Es decir, ¿cuáles son las diferentes formas en que los desarrolladores preparan sus ofertas para Gutenberg? ¿Y la gente hace algo nuevo e interesante para Gutenberg? En esta publicación, le daremos algunos ejemplos reales y concretos sobre cómo los desarrolladores de arado y temas pueden crear para Gutenberg, mostrándole lo que ya existe.
Mirando algunos ejemplos en la vida real de cómo los desarrolladores usan bloques y estilos para crear una experiencia de edición más integrada, esperamos que:
Comprenda cómo Gutenberg puede beneficiarlo como usuario final.
Obtenga algunas ideas para construir para Gutenberg para sus propios proyectos de WordPress.
Si no está seguro de cuál es el editor de Gutenberg, es posible que desee consultar primero nuestro tutorial completo del editor de Gutenberg.
¿Cómo los autores #Wordpress #Plogin y #Teme Transition a Gutenberg
Haga clic en Tweet
Seis ejemplos de la forma en que los complementos existentes se acercan a la transición a Gutenberg cómo se construyen los autores de arado para Gutenberg depende principalmente de la función del complemento.
Por un lado, tiene complementos que se centran en agregar contenido frontal. Estas son principalmente las cosas que se habrían hecho anteriormente al agregar un código corto. Un buen ejemplo es un complemento de formulario. Casi todos los enchufes de formulación le ofrecen una interfaz separada para construir sus formularios y luego un código corto para incorporar de manera efectiva esos formularios en el frente. Estos tipos de complementos generalmente abordan Gutenberg con un bloque personalizado para facilitar la inserción del contenido. Verá más ejemplos en esta sección de: formularios ninja
Sí
WooCommerce
Luego tiene otros complementos que lo ayudan a controlar los detalles del backstage. Por lo general, estos complementos usan metaboxs.
El ejemplo más conocido sería algo como Yoast SEO. No agregue contenido, pero toda esa información de metabox es esencial. Los metaboxs ahora trabajan con Gutenberg, pero todavía existe la posibilidad de que estos complementos cambien su funcionalidad para aprovechar Gutenberg. Le mostraré algunas formas en que Yoast SEO podría abordar el problema, así como cómo elegimos hacer las cosas con algunos de nuestros propios complementos.
1. Ninja Forms agrega un nuevo bloque de formularios de Gutenberg Ninja es uno de los complementos de formulación más populares en el almacén de WordPress.org. Hasta ahora, se dirige a Gutenberg agregando un bloque simple de Forms Ninja.
Inserte el bloque como cualquier otro bloque de Gutenberg:
Luego puede seleccionar su formulario en el menú desplegable:

Y una vez que seleccione un formulario, verá una vista previa en vivo directamente en el editor:

En este momento, eso es todo lo que existe. Pero este es un enfoque básico sólido porque:

Elimina la necesidad de trabajar directamente con códigos cortos
Puede ver una vista previa en vivo de su diseño mientras aún edita sus paginitores, dos complementos dependerán de esto con algunas opciones de estilo/control más profundas.
2. Give Adds dos bloques gutenberg con las opciones de gana es un complemento de donación popular con un equipo de desarrollo que ha sido muy proactivo en términos de dar con gutenberg editor (si le gusta el tema de esta publicación, disfrutará de la serie #playingwithblocks en el Dale un blog, donde el equipo Give Detalling planea planear para Gutenberg).
Give tiene una de las experiencias simplificadas de Gutenberg que he probado. No solo puede traer formularios de donación Give a través de dos bloques de Give, sino que también puede diseñar utilizando la interfaz Gutenberg. Da dos bloques te permiten incorporar:
Un solo formulario de donación
Una cuadrícula de formulación de donaciones
Al igual que los formularios ninja, obtienes una vista previa en vivo de tu formulario, pero también tienes opciones de edición de bloques que te permiten:
Elija el formato

Activar/deshabilitar la lente de donación
Elija dónde colocar el contenido
Y si pasa con el mouse sobre su formulario, recibirá un enlace directo para editar ese formulario:
Por lo tanto, hay un vistazo a cómo los bloques pueden ir un poco más profundos que la implementación actual de formularios ninja. Pero WooCommerce da un paso más …

3. WooCommerce agrega un bloque de control de columna, mientras que WooCommerce probablemente agregará más Gutenberg a medida que se acerca WordPress 5.0 (algunas ideas sobre cómo agregar productos aquí), el equipo ya ha entrado en sus dedos en Gutenberg con el complemento oficial de Bloque de productos WooCommerce Gutenberg. Sí, ahora este es un complemento separado. Pero una vez que lo instale, puede ingresar los productos de WooCommerce existentes como un bloque en su contenido de Gutenberg. Cuando agrega el bloque de productos, puede elegir qué productos mostrar:

Luego puede usar opciones de edición de bloques para cambiar el aspecto:
Me deleita bastante, porque es un gran ejemplo de cómo Gutenberg hace que sea más accesible el estilo/configuración del contenido no estándar.
4. Beaver Builder agrega la opción “Conversión a Beaver Builder”. Se ha hablado mucho sobre cómo las páginas los creadores abordarán a Gutenberg. Todavía no hay mucho concreto, pero Beaver Builder agregó una característica en Beaver Builder 2.1 que le permite convertir a Gutenberg a Beaver Builder:

En este momento, el proceso de conversión no es perfecto. Pero la idea de poder pasar entre Gutenberg y un generador de páginas es intrigante si la conversión había sido sin interrupciones.

5. Las meta cajas deberían continuar funcionando con el SEO es un buen ejemplo, no creo que Yoast SEO todavía haya lanzado cambios a Gutenberg, por lo que ahora este es un ejemplo de cómo funciona Metabox existente con Gutenberg (si no ha visto de cerca a Gutenberg – Tiene soporte de metabox ahora, aunque es más para la compatibilidad inversa que para una solución a largo plazo).
Como puede ver, el Metabox Yoast SEO principal viene ileso de Gutenberg: pero le falta puntajes de SEO y análisis de contenido que avanzaron en la barra lateral. Entonces, ¿cómo podría Yoast construir para Gutenberg para resolver eso? Aquí hay algunos modelos para posibles formas en que Yoast puede integrar su análisis en la interfaz real de Gutenberg:

Modelo A.
Modelo B.
Modelo C.

6. Cómo nos acercamos a las meta cajas en la revisión del producto WP Nuestra revisión del producto WP es uno de esos complementos que usan una meta caja para controlar la salida front-end (un cuadro de revisión en este caso).
Así es como trabajamos para integrar la revisión de productos de WP en el editor Gutenberg:

Cuando los usuarios indican que la publicación es una revisión con un interruptor de barra lateral, podrán configurar todo sobre el cuadro de revisión de las opciones anteriores:

Los desarrolladores, ya que es un excelente recurso para preparar su complemento para Gutenberg si es un desarrollador de arado real, es posible que se pregunte cómo debe crear para Gutenberg para su complemento específico. Bueno … no puedo decirte eso. Pero puedo indicar esta maravillosa publicación de nuestro propio Hardeep Asrani. Hardeep ofrece algunos consejos útiles para preparar su complemento para Gutenberg.

Subir

Los desarrolladores pueden construir para Gutenberg y con los nuevos complementos que los desarrolladores no se centran solo en hacer que los arados existentes compatibles con Gutenberg tengan la intención de construir para Gutenberg con nuevos complementos.

Los nuevos bloques de Gutenberg, por un lado, tiene muchos complementos generales que solo agregan nuevos tipos de bloques de contenido. Le dan a Gutenberg más sensación del generador de páginas. Puede encontrar bloques para: Tablas de precios

evidencia
Miembros del equipo
y así
Por ejemplo, aquí hay un bloque de precios en el complemento apilable: Ultimate Gutenberg Blocks. Mire qué tan detalladas son las opciones de edición de bloques:
Ya hay muchos de estos complementos en WordPress.org. Pero más allá del complemento apilable mencionado anteriormente, otras ofertas populares parecen ser:
Bloques atómicos: esto es de temas de matriz.
Bloques avanzados de Gutenberg
También hay una oferta llamada Coblocks que se comercializa como “Bloques de Gutenberg para los vendedores de contenido”. Creo que este enfoque de nicho es particularmente interesante. Tal vez en el futuro veremos conjuntos especiales de bloques de Gutenberg para:
Bloggers de comida

Bloggers de viajes
y así
El complemento de bloque de revisión del libro es otro mini ejemplo de cómo los bloques de nicho de Gutenberg podrían convertirse en una cosa.
Un ejemplo de cómo los campos personalizados pueden funcionar con Gutenberg Gutenberg Custom Fields es otro complemento interesante que parece lograr alguna acción. Facilita la configuración de campos personalizados o grupos de campo que están asociados con un cierto tipo de publicación personalizada:
Luego, cuando accede al editor de Gutenberg, esos campos personalizados son pre -compliantes como bloques:
Muchas personas se han preguntado cómo funcionarán los campos personalizados con Gutenberg: este es un ejemplo prometedor que ya está en la naturaleza. Puedes obtener más información sobre él aquí.
Subir
Tres ejemplos sobre cómo los desarrolladores de temas se acercan a la transición a Gutenberg acaban de ver algunos ejemplos sobre cómo pueden crear los desarrolladores de complementos, pero ¿qué pasa con la tarea? Los desarrolladores de temas parecen seguir dos formas principales de abordar la transición: la preparación de temas para Gutenberg agregando estilo para bloques y aceptar las opciones de apariencia de Gutenberg
Usar bloques de Gutenberg para construir contenido temático

Aquí hay algunos ejemplos para pintar la imagen …

1. Agregar estilos personalizados al editor de Gutenberg Una cosa muy agradable que vemos que hacen los desarrolladores es agregar estilos de temas a la interfaz real de back-end. Esto abre las puertas para crear una experiencia verdaderamente Wysiwyg, aunque Spencer de Bigbox WoCommerce que detalla algunos problemas relacionados con el estilo de tercera parte. Por ejemplo, mire cómo el tema de Ohana del mero de Themeshaper remodela completamente todo el contenido de Gutenberg, incluido el título de publicación:
Si quieres verlo en acción, descargue el tema Ohana de GitHub. Y Themeshaper también explica cómo han logrado este efecto en esta publicación de blog.
2. Agregar nuevas opciones de alineación en ancho completo Otro gran cambio en la compatibilidad de los temas que verá es agregar el soporte para una amplia alineación. Esencialmente, esto le permite hacer ciertos bloques con un ancho completo. El ejemplo más común sería insertar una imagen de ancho completo. Nuevamente puedes ver esto en efecto con el tema Ohana:
Para que esta alineación funcione, los autores del tema deben declarar explícitamente.
3. Construcción del contenido demostrativo del tema con bloques: por ejemplo, el tema del bloque eventualmente, este enfoque de temas orgánicos es bastante grande: el contenido demostrativo del bloque se construye completamente con bloques de Gutenberg. Esto es algo que sin duda continuará viendo, como Matt dijo explícitamente en la hoja de ruta de Gutenberg que julio incluiría explorar la “expansión de Gutenberg más allá de publicar el sitio”. Más allá del bloque, Array Temas también tiene un tema de bloques atómicos que está especialmente diseñado para integrarse con los bloques atómicos mencionados anteriormente. Haga que su tema existente sea compatible con Gutenberg, Bill Erickson tiene una excelente guía para los puntos máximos. Y la sección de apoyo temático en el manual de Gutenberg es otro buen recurso.
Subir
Ciertamente, las cosas más interesantes seguirán de la muestra anterior, espero que comprenda mejor cómo los desarrolladores de arado y temas planean crear para Gutenberg. En una nota personal, sé que escribir esta publicación me hizo más entusiasmado con las posibilidades con Gutenberg. En cuanto al complemento, el uso de bloques para reemplazar todas las cosas que se habrían hecho con códigos cortos es una mejora importante para su uso, especialmente para usuarios ocasionales. Y la forma en que los temas de los desarrolladores pueden traer sus propios estilos y bloques incorporados también es emocionante, especialmente ya que Gutenberg se extiende más para personalizar el sitio. ¿Ahora voy a usted, superas excelentes ejemplos de arados o temas que encuentran formas interesantes de construir para Gutenberg? ¡Cuéntanos en comentarios! Cómo los autores #Wordpress #Plugin y #Teme Transition a Gutenberg

Haga clic en Tweet
Recuerde unirse a nuestro curso rápido para acelerar su sitio de WordPress. Con algunos remedios simples, puede reducir el tiempo de carga incluso en 50-80%: