Todo lo que necesitas para empezar con WordPress Gutenberg

Publicado: 2018-01-23

En 2018, WordPress apunta a modernizar y simplificar la experiencia de creación de contenido con Gutenberg. Su nombre proviene de Johannes Gutenberg, el fundador de la imprenta. Este se considera uno de los mayores cambios para la experiencia del usuario de WordPress y el flujo de trabajo de desarrollo de temas.

¿Qué es Gutenberg?

La mayoría de nosotros pensamos que Gutenberg es solo un nuevo editor, pero no es solo eso. Si bien el editor está enfocado en este momento, el proyecto finalmente afectará toda la experiencia de publicación, incluida la personalización.

Hasta ahora, editar una página significaba modificar su título, cuerpo y campos personalizados. Con Gutenberg, esta lógica cambia por completo e introduce el concepto de bloques . Los bloques son componentes de interfaz de usuario independientes, aislados y dinámicos que se agregan dinámicamente a través de wp-admin. No daré más detalles sobre esto, ya que el siguiente video explica todo en detalle.

Presentación de Matt Mullenweg Gutenberg sobre el Estado de la Palabra 2017

Gutenberg ya está disponible como complemento y se integrará en WordPress 5.0, cuyo lanzamiento está previsto para abril de 2018. El equipo detrás de él se centra actualmente en la experiencia de posedición. Pero a partir de ese momento, ampliará su enfoque para incluir la creación de plantillas, la creación de sitios y más. Para que la transición a Gutenberg sea más fluida, hay un complemento llamado Editor clásico que permite a los equipos usar el editor actual mientras trabajan en sus migraciones.

¿Por qué Gutenberg es bueno para mí y qué significa esto para el futuro de WordPress?

Gutenberg es sin duda un cambio importante y muchos desarrolladores tendrán que adaptarse a él. Sin embargo, en mi opinión, este es uno de los mejores cambios que ha experimentado WordPress. Porque moderniza el proceso de desarrollo de temas y lo hace más modular con una base de código más limpia, mejor mantenimiento y edición. Ofrece más confiabilidad y se deshace de su antiguo enfoque monolítico pirateable.

Con el uso de bloques, optimiza y simplifica todas las formas en que construimos una página (códigos cortos, widgets, HTML personalizado, medios, formato de texto, incrustaciones y metaboxes). Como Matt explica en su publicación:

  • Los desarrolladores y las agencias podrán crear plantillas interactivas que los clientes pueden actualizar fácilmente sin romper cosas ni lidiar con tipos de publicaciones personalizadas.
  • Los desarrolladores de complementos podrán integrarse completamente en cada parte de WordPress. Incluya publicaciones, páginas, tipos de publicaciones personalizadas y barras laterales sin tener que piratear TinyMCE o exprimir todas sus funciones detrás de un botón de la barra de herramientas.
  • Los desarrolladores de temas no necesitarán agrupar toneladas de complementos o crear sus propios creadores de páginas. Habrá una forma estándar y portátil de crear diseños enriquecidos para publicaciones y guiar a las personas a través de la configuración directamente en la interfaz. No se necesitan tutoriales de 20 pasos o videos largos.
  • Los desarrolladores principales podrán trabajar con tecnologías modernas y no preocuparse por los 15 años de compatibilidad con versiones anteriores.
  • Los usuarios finalmente podrán crear los sitios que construyen con su imaginación. Podrán hacer cosas en el móvil que nunca antes habían hecho. Nunca más tendrán que ver un shortcode. El texto pegado desde Word se limpiará y se convertirá en bloques de forma automática e instantánea.

Demostraciones y ejemplos

En esta charla de WordCamp US 2017, Morten explica en qué deben enfocarse los desarrolladores de WordPress y cómo se transformará WordPress con Gutenberg.

Morten Rand-Hendriksen: Gutenberg y el WordPress del mañana

En este screencast, Human Made demuestra una serie de implementaciones avanzadas de bloques de Gutenberg.

Cómo empezar

Juega con Frontenberg , una demostración en vivo de frontend limitada del editor de Gutenberg que te ayudará a familiarizarte con el entorno de edición de Gutenberg.

Frontenberg: un patio de recreo de Gutenberg desconectado para pruebas instantáneas

Lea el siguiente artículo de Matias Ventura Bausero, uno de los ingenieros principales detrás de Gutenberg .

Gutenberg o el barco de Teseo: ¿cómo puede un sistema evolucionar fundamentalmente sin cambiar drásticamente?

Juega con estos símbolos de Sketch e intenta diseñar tus propios bloques personalizados.

Automattic/gutenberg-themes-sketch – gutenberg-themes-sketch – Un conjunto de archivos de Sketch para ayudarlo a diseñar temas de WordPress basados ​​en bloques

Lea el manual oficial para desarrolladores en wordpress.org . Es limpio, fácil de leer y evoluciona constantemente. También debe suscribirse a su lista de correo para recibir sus actualizaciones.

Introducción: "Gutenberg" es el nombre en clave del enfoque del editor de WordPress de 2017.

Profundice en ReactJS ya que Gutenberg está construido sobre él.

React: una biblioteca de JavaScript para crear interfaces de usuario: una biblioteca de JavaScript para crear interfaces de usuario

Consulte estos ejemplos de Gutenberg creados por el equipo central de WordPress.

WordPress/gutenberg-examples = gutenberg-examples – Ejemplos para extender WordPress/Gutenberg con bloques

Lea este libro electrónico detallado de Human Made (una de las mejores agencias de desarrollo de WP) .

Gutenberg, el nuevo editor de WordPress (informe técnico): este informe técnico cubre los desafíos clave en la implementación y adopción, así como consejos sobre cómo las empresas pueden actuar ahora.

Consulte este curso de desarrollo de Zac Gordon, educador en algunas de las plataformas educativas más populares FrontendMasters, Treehouse y Udemy.

El curso de desarrollo de Gutenberg de Zac Gordon – Gutenberg Courses

Finalmente, instale este kit de herramientas de desarrollo de configuración cero para crear complementos de bloque de WordPress Gutenberg por Ahmad Awais

ahmadawais/create-guten-block – Un kit de herramientas de desarrollo #0CJS de configuración cero para construir bloques de WordPress Gutenberg.

Eso es todo por ahora, muchas gracias por leer esta publicación y por favor deje un comentario si tiene alguna idea, pregunta o sugerencia.

Si usted es una agencia, una empresa o un desarrollador de WordPress que busca mejorar el rendimiento, la seguridad y la experiencia de alojamiento de su sitio web, hable con nuestro equipo de ingenieros. Nuestra plataforma de alojamiento de WordPress administrada se considera una de las mejores de su industria con un rendimiento, confiabilidad y soporte técnico al cliente incomparables.

Nuestro equipo tiene la misión de redefinir la forma en que los desarrolladores de WordPress construyen, alojan y escalan sus sitios web, así que manténgase en contacto y no dude en hablar con nosotros.