Share
El nuevo editor de WordPress (con nombre en código Gutenberg) se lanzará en la versión 5.0. Ahora es el momento perfecto para enfrentarlo antes de que llegue al núcleo de WordPress.
Le mostraré cómo trabajar con la API de bloque y crearé sus propios bloques de contenido que puede usar para construir sus publicaciones y páginas..
Todavía no hay una fecha exacta para cuando se lanzará WordPress 5.0, pero debería ser en algún momento dentro de los próximos meses. Hasta entonces, Gutenberg está disponible como un complemento independiente..
Recomiendo probar el nuevo editor de Gutenberg si aún no lo ha hecho. Es muy fácil de instalar directamente desde tu administrador de WordPress. Sin embargo, debido a que todavía es una versión beta del nuevo editor, no se recomienda que lo use en sitios de producción todavía. Guárdelo para sitios de desarrollo local solo por ahora..
Además, tener Gutenberg instalado es clave si desea seguirlo junto con este tutorial. De esa manera, puedes experimentar creando tus propios bloques personalizados. El desarrollo del nuevo editor se ha acelerado rápidamente en los últimos meses, con varios lanzamientos ya en 2018. La última versión de Gutenberg es actualmente 2.7.0 en el momento de escribir este artículo..
Con cada lanzamiento, se agregan nuevas funciones y la interfaz del editor se mejora constantemente según los comentarios de los usuarios. Está empezando a verse y sentirse mucho más pulido que las versiones anteriores. Además, se han solucionado muchos errores, lo que ha hecho al editor mucho más robusto..
Gutenberg proporciona una nueva forma de crear contenido de publicaciones mediante "bloques", que se pueden apilar uno encima del otro para formar una página completa. Cada bloque individual existe independientemente de otros bloques y puede contener casi cualquier marca, estilo y JavaScript que desee.
A lo largo de este tutorial, cubriremos todo lo que necesita saber sobre la API de bloques para que pueda comenzar a crear sus propios bloques personalizados de inmediato. Una vez que haya dominado los fundamentos, crear bloques más complejos es más fácil de lo que cree.!
El proyecto Gutenberg es una gran noticia para WordPress por otra razón importante. Está construido sobre React. Así es, ¡por primera vez en WordPress, React se incluirá en el núcleo! Esta es una gran noticia para los desarrolladores de temas y complementos, ya que React se puede agregar fácilmente a cualquier página al aprovechar las bibliotecas React y ReactDOM incluidas con el núcleo de WordPress.
Muy pronto podrás crear componentes de UI para todos tus proyectos de WordPress directamente en React. Anteriormente, si quería usar las bibliotecas React y ReactDOM, tenía que incluirlas manualmente. Tenerlos en el núcleo lo hace mucho más conveniente.
Solo piense en lo increíble que sería crear una pantalla de opciones de plugin completamente en ¡Reaccionar! ¿O qué tal algunos controles de personalización avanzados geniales? Estas nuevas herramientas les darán a los desarrolladores mucha libertad y flexibilidad para crear excelentes interfaces de usuario interactivas.
Anticipo que el desarrollo de WordPress en los próximos años va a ser muy interesante y muy divertido también.!
El concepto de bloques en el nuevo editor es un cambio real del actual editor basado en TinyMCE, así que echemos un vistazo más de cerca a lo que es un bloque antes de sumergirnos en la API del bloque. Piense en los bloques como cajas negras, cada una con un montón de marcas, estilos y JavaScript envueltos en una entidad conveniente llamada "bloque".
Cuando se agrega un bloque al editor, muestra una vista previa de cómo se verá en la parte frontal. Casi todos los bloques tienen configuraciones para personalizar aún más su apariencia y / o comportamiento.
Algunos de los bloques disponibles por defecto en el nuevo editor son:
Esto le da una idea del tipo de contenido que puede agregar al editor utilizando los bloques incluidos con el nuevo editor. Todos estos tipos de bloques son útiles pero bastante básicos, así que espere que empiecen a aparecer muchos complementos con bloques mucho más completos para agregar casi cualquier tipo de contenido que pueda imaginar..
Es posible que ya haya pensado en algunos bloques de contenido que necesita para sus propios proyectos. Si ninguno de estos está disponible en Gutenberg, probablemente sean buenos candidatos para crear su propio bloque personalizado.
Recomiendo probar el código presentado en esta serie de tutoriales ya que es la mejor manera de aprender cómo crear sus propios bloques utilizando la API de bloques. De todos modos, lea el tutorial primero para familiarizarse con el funcionamiento de la API de bloqueo, pero vuelva y pruebe el código usted mismo y comience a crear algunos bloques.!
Esta es una serie de tutoriales de nivel medio a avanzado, por lo que se supone que no eres nuevo en el desarrollo de WordPress. Para aprovechar al máximo esta serie, debe tener al menos un conocimiento práctico de lo siguiente:
Si necesita repasar alguno de estos temas, puede ser una buena idea hacerlo antes de continuar. Explicaré los conceptos a medida que avanzamos, pero está fuera del alcance del tutorial explicar cada pequeño detalle..
Es una práctica común crear bloques personalizados en WordPress usando JSX, pero esto no es obligatorio. Si está acostumbrado a desarrollar componentes React en JavaScript de vainilla, también puede hacerlo en WordPress. La decisión es completamente tuya. Sin embargo, la mayoría del código de bloqueo que encontrará se escribirá en JSX (incluido este tutorial), por lo que le resultará más fácil entender los conceptos si también está utilizando JSX..
El proyecto Gutenberg sigue evolucionando mucho, por lo que algunas cosas pueden estar sujetas a cambios incluso al momento de leer este tutorial. Esto podría incluir cambios en la interfaz del editor, nuevos componentes centrales, etc..
Sin embargo, el nuevo editor es bastante estable ahora, y las características recientemente agregadas, como los bloques anidados y el reordenamiento de arrastrar y soltar son bastante emocionantes. Incluso si algunos de los detalles menores de cómo los bloques que implementes pueden cambiar, lo importante es recordar el concepto general de bloques y cómo puedes usarlos para crear cualquier tipo de contenido.
Si te quedas estancado, te recomiendo echar un vistazo al manual oficial de Gutenberg, que se mantiene actualizado con los últimos cambios. También puedes ver el proyecto Gutenberg en GitHub para inspeccionar el código fuente y registrar cualquier problema que puedas encontrar.
Esto solo ayudará a que el proyecto se haga más fuerte a medida que más personas lo prueben. Esta es otra gran razón para comenzar a desarrollar bloques ahora, antes de que sean oficialmente parte de WordPress!
Para seguir el código de este tutorial, necesitará lo siguiente:
Si aún no tiene configurado un entorno de desarrollo local, puede usar algo como Local by Flywheel o DesktopServer, ya que ambos tienen versiones gratuitas disponibles y son compatibles con varios sistemas operativos..
Asegúrese de que está ejecutando las últimas versiones de WordPress y el complemento Gutenberg para asegurarse de que está utilizando todas las características más recientes. Además, hay algunos excelentes editores de código, así que si aún no tiene uno instalado, eche un vistazo a los editores gratuitos como Visual Studio Code o Atom, que deberían ser más que suficientes.
Para crear nuevos bloques fácilmente, usaremos un conjunto de herramientas relativamente nuevo llamado crear-guten-block. Le permite girar rápidamente un nuevo complemento que contiene toda la configuración y el código de inicio necesarios para crear bloques. También es un kit de herramientas de configuración cero, por lo que funciona desde el primer momento de forma similar a la crear-reaccionar-aplicación Kit de herramientas para el andamiaje de nuevas aplicaciones React con un mínimo esfuerzo. Así que si alguna vez has usado crear-reaccionar-aplicación, sabrás qué esperar.
Veamos ahora cómo podemos usar esta herramienta para crear bloques de Gutenberg. Abra una ventana de terminal dentro de su carpeta de plugins (/ wp-content / plugins /) para su sitio de desarrollo local e ingrese lo siguiente:
npx create-guten-block my-custom-block cd my-custom-block npm start
(Nota: se requiere npm v5.2 + para usar el npx mando.)
Después de unos minutos, se creará un nuevo complemento dentro de una carpeta llamada mi-bloque personalizado que contiene todos los archivos y herramientas necesarios para crear bloques usando React! No esta mal eh?
El nombre del complemento en el administrador de WordPress será my-custom-block - CGB Gutenberg Block Plugin. Adelante, actívalo..
El complemento crea un nuevo bloque que está disponible para que lo usemos en el editor de Gutenberg. Para probar nuestro nuevo bloque, navegue hasta el editor de publicaciones y haga clic en el texto del marcador de posición etiquetado Escribe tu historia.
A continuación, pulsa la / tecla para mostrar un cuadro emergente que podemos usar para buscar todos los bloques disponibles.
Nota: hay otras formas de buscar un bloque, pero me gusta usar / para mostrar la ventana del bloque de búsqueda de forma bastante rápida y cómoda. Pero usa el método con el que te sientas más cómodo.
Con el cuadro de búsqueda abierto, empieza a escribir mi-bloque personalizado y seleccione my-custom-block - Bloque CGB. Esto mostrará nuestro bloque personalizado dentro de la ventana del editor..
En este momento es solo un bloque de repetición, que no hace nada más que mostrar el texto del marcador de posición dentro de un cuadro coloreado. Sin embargo, sí resalta un aspecto interesante de la creación de bloques..
Hacer clic Ver publicacion Para ver cómo se verá la publicación para los visitantes del sitio..
Como puede ver, tanto el contenido como los estilos del bloque renderizado son diferentes en el extremo delantero y en el extremo trasero. Esto también se aplica al código JavaScript, que también puede ser diferente para la interfaz.
El motivo de la diferencia en la representación se debe a que al crear bloques, se le exige que declare específicamente las funciones de representación de front-end y back-end separadas.
Esto se debe a que muchos bloques requieren elementos de IU adicionales para ser renderizados dentro del editor de publicación para ayudar a configurar los ajustes de bloque. Como esto solo es relevante para el editor de publicaciones, es completamente redundante al renderizar el bloque en el frente. Por lo tanto, especifica la salida que debe mostrarse en la parte delantera en una función de representación separada.
Si bien este enfoque tiene sentido y funciona bien, plantea problemas de duplicación de código. Si no tienes cuidado, podrías terminar con muchas definiciones duplicadas de contenido..
Siempre que sea posible, es una buena idea separar el contenido común de las funciones de procesamiento de aplicaciones para el usuario y servicios de fondo para ayudar a reducir la duplicación. Seguiremos este enfoque a lo largo de esta serie de tutoriales..
En este tutorial, introduje el concepto de qué es un bloque y por qué el nuevo editor de Gutenberg será una gran noticia cuando se distribuya con WordPress 5.0. Es un cambio real del actual editor basado en TinyMCE.
Para ayudar a crear bloques rápidamente, crear-guten-block es una herramienta muy útil que le permite crear un complemento completo que contiene un bloque de inicio que funciona listo para la personalización.
Redondeamos las cosas viendo cómo usar nuestro bloque personalizado dentro del nuevo editor de publicaciones, y descubrimos que la representación en la parte frontal y posterior puede verse muy diferente. En Gutenberg, no es necesario que coincida con la salida en absoluto!
En la parte 2, veremos las características específicas de la API de bloque y cómo puede aprovecharla para crear sus propios bloques personalizados.
Mientras tanto, echa un vistazo a algunos de nuestros otros mensajes sobre WordPress Gutenberg!
Accentsconagua