Skip to toolbar

Tips, tips y recursos para aprender Gutenberg [última actualización: 15-9-2020]

Tips, tips y recursos para aprender Gutenberg   [última actualización: 15-9-2020]

Translating…

¡Aprende Gutenberg ahora! Desde que salió la nueva versión del editor de bloques en WordPress, en Blogpocket hemos venido publicando contenidos para aprender Gutenberg.

Actualizado: 15 de septiembre de 2020

Gutenberg evoluciona muy deprisa. Estamos emocionados con eso y, en Blogpocket, queremos que no te quedes atrás en el aprendizaje de esta maravillosa herramienta. ¡Aprende Gutenberg ahora! Por ello, este post se actualiza a menudo durante los meses de julio y agosto de 2020. Lee las noticias de última hora en el apartado Más recursos y novedades.

Contra las primeras reacciones contrarias (algunas voces tacharon al nuevo editor de virus), Gutenberg se está consolidando como lo mejor que le ha ocurrido a WordPress en muchos años. No te quedes atrás y aprende Gutenberg ahora con nosotros.

En Blogpocket, apostamos desde el primer momento por Gutenberg, no solo para la composición de páginas (como muchos recomendaban únicamente) sino también para elaborar las entradas del blog. El tiempo nos ha dado la razón y hoy ya no tiene ningún sentido la convivencia del editor clásico con Gutenberg ni, por supuesto, banear al editor de bloques. Con proyectos como Iceberg, se demuestra que quedarse parado en el editor clásico es un error, aunque no te guste Gutenberg (no encuentro razones por las que no te pueda gustar). Las posibilidades son infinitas.

Cómo aprender Gutenberg

En este artículo pasaremos revista a recursos extraordinarios que te servirán para aprender Gutenberg e implementar un sitio web de WordPress de estilo profesional por ti mism@ usando el editor de bloques.

Aprende Gutenberg con las Guías de Blogpocket: ¿Qué es Gutenberg y cómo funciona?

Naturalmente, el primer paso es repasar las guías de Blogpocket para aprender Gutenberg, cuyo propósito es que te hagas una idea general del editor de bloques, qué es y cómo funciona.

Aprende Gutenberg con los Webinars en Noches de Blogging

El livestreaming de Noches de Blogging es un buen lugar para aprender Gutenberg. Noches de Blogging es un late show, coproducido por Alberto Gómez y Antonio Cambronero que busca educar, evangelizar y divulgar temas relacionados con el blogging y la publicación digital. Hazte miembro para recibir nuestras noticias y disfrutar de muchas más ventajas y aprende Gutenberg ya.

En Noches de Blogging hay varios webinars en los que hemos hablado de Gutenberg.

Recursos para aprender Gutenberg

Por supuesto, los recursos básicos están en Recursos y trucos de Gutenberg: 10 maneras de exprimirlo a fondo pero queremos que este artículo que estás leyendo se mantenga permanentemente actualizado y te sirva también para aprender Gutenberg con los últimos recursos que vamos encontrando y probando. Evidentemente, solo aquellos que pasen la certificación Blogpocket serán incluidos aquí.

Iceberg

¿De verdad, no te gusta Gutenberg? No lo entiendo pero, por favor, ¡no te quedes en el editor clásico! Si prefieres una experiencia de escritura realmente más bonita y simple dentro de WordPress, entonces prueba Iceberg.

Los autores del plugin son Rich Tabor y Jeffrey Caradang, el mismo equipo detrás de CoBlocks, así que hay cierta garantía de la calidad del producto.

«Iceberg presenta un editor minimalista con cuatro temas de color, la capacidad de crear un tema personalizado y un conjunto de controles de tipografía. Al cambiar a Iceberg, no falta mucho del editor de bloques predeterminado que sería necesario para escribir. Los usuarios pueden arrastrar y soltar medios en Iceberg y el comando de barra invertida funciona para activar el insertador de bloque. También incluye una tabla de contenido, recuento de palabras y caracteres, tiempo de lectura, atajos de teclado y soporte para emoji.» (WordPress Tavern)

Si quieres escribir con Markdown en tu WordPress, abandonar el editor clásico y no editar tus posts con Gutenberg, esta es tu herramienta 😉

Gutenberg en números

Se intuye que Gutenberg comienza a ser de uso masivo pero ¿hasta qué punto? En esta página hay estadísticas recientes.

Las estadísticas de publicaciones en esta página se obtienen de los sitios de WordPress.com y los sitios que ejecutan Jetpack, que informan si Gutenberg se utilizó para crear la publicación. Las estadísticas de publicaciones solo incluyen publicaciones creadas desde fines de agosto de 2018. El número real es mayor.

Genesis X y Genesis Pro

En Blogpocket estamos casados con Genesis Framework y este sistema de themes es una de las herramientas o pilares fundamentales para crear una web profesional de WordPress bien construida mediante el Método Blogpocket.

En la guía Cómo configurar un theme de StudioPress con bloques de Gutenberg tienes los pasos básicos para aprender a configurar un theme de Genesis con bloques de Gutenberg.

Y en la guía Recursos y trucos de Gutenberg: 10 maneras de exprimirlo a fondo descubrirás que Genesis se adelantó mucho en la adaptación de themes de WordPress a Gutenberg implicándose en la colección de bloques Atomic Blocks y desarrollando la plantilla Revolution Pro.

«En junio de 2018 WP Engine adquirió StudioPress, los creadores de Genesis Framework Pocos meses después compraron el plugin Atomic Blocks, un plugin de colección de bloques, junto a Array Themes, incorporando a sus creadores al equipo. Más recientemente han adquirido a Block Labs, un plugin que te permite crear bloques personalizados de forma sencilla, sumando también a sus desarrolladores. En definitiva, WP Engine ha conseguido reunir 3 herramientas excepcionales sobre las que pretende construir su visión del futuro de los temas para WordPress.» (Código Genesis)

Código Genesis nos desvela los planes de WP Engine respecto a la evolución de Genesis Framework. En resumen, ellos mismos explican qué será Genesis X y Genesis Pro, las dos vertientes del futuro Genesis Framework.

  • Genesis X  es la transformación del tema padre Genesis Framework a plugin.
  • Genesis Pro es la evolución de Atomic Blocks Pro y un constructor de visual de bloques.

Pero no se van a pasar las funcionalidades del theme padre Genesis a Genesis Pro. sino que dichas funcionalidades se van a portar a Genesis X, que será un plugin gratuito en el repositorio de WordPress.

Iremos informando sobre la evolución de este proyecto que va a ser determinante en la manera en la que se diseñarán los sitios web del futuro inmediato.

Novedades (15-9-2020):

Edición completa del sitio

Te han dicho ¡aprende Gutenberg! y dentro de poco, WordPress será GutenPress 😉 Eso hay que solucionarlo y para eso está Blogpocket.

Esta es una parte muy interesante de Gutenberg. Lo que viene es la edición completa del sitio mediante la adopción en el core de WordPress de lo que ahora está en desarrollo. Los planes son incorporar esta función en la fase 2 del proyecto prevista para finales de 2020.

Los detalles técnicos no entran dentro del propósito de este artículo que estás leyendo (si te interesa, en Ayuda WP hay una buena introducción). Lo que debes saber es que vas a poder diseñar desde cero tu theme de WordPress con Gutenberg. ¿Fantástico, no?

Pero hemos hecho un par de ilustraciones para que te detengas un momento a pensar qué es diseñar un theme, qué es lo que podías hacer en la era pre-Gutenberg, qué puedes hacer ahora (en la era Post-Gutenberg) y qué podrás hacer después.

Tips, consejos y recursos para aprender Gutenberg
[última actualización: 15-9-2020]” loading=”lazy” width=”1024″ height=”512″ src=”https://www.blogpocket.com/wp-content/uploads/2020/06/Estructura-web.png” alt=”Estructura-web Tips, consejos y recursos para aprender Gutenberg
[última actualización: 15-9-2020]” class=”wp-image-63663″ srcset=”https://www.blogpocket.com/wp-content/uploads/2020/06/Estructura-web.png 1024w, https://www.blogpocket.com/wp-content/uploads/2020/06/Estructura-web-300×150.png 300w, https://www.blogpocket.com/wp-content/uploads/2020/06/Estructura-web-768×384.png 768w” sizes=”(max-width: 1024px) 100vw, 1024px”/>
Las páginas de una web pueden tener un diseño compuesto por Cabecera, Contenido, Sidebar y Footer. Una landing page puede carecer de Cabecera y Footer. Cualquier combinación es posible pero los themes de WordPress, en la era pre-Gutenberg, se personalizaban solo mediante las áreas de widgets que encajaban en esos apartados.
Tips, consejos y recursos para aprender Gutenberg
[última actualización: 15-9-2020]” loading=”lazy” width=”1024″ height=”512″ src=”https://www.blogpocket.com/wp-content/uploads/2020/06/Pre-Gutenberg.png” alt=”Pre-Gutenberg Tips, consejos y recursos para aprender Gutenberg
[última actualización: 15-9-2020]” class=”wp-image-63662″ srcset=”https://www.blogpocket.com/wp-content/uploads/2020/06/Pre-Gutenberg.png 1024w, https://www.blogpocket.com/wp-content/uploads/2020/06/Pre-Gutenberg-300×150.png 300w, https://www.blogpocket.com/wp-content/uploads/2020/06/Pre-Gutenberg-768×384.png 768w” sizes=”(max-width: 1024px) 100vw, 1024px”/>
En la era Post-Gutenberg podemos personalizar la home de un theme de WordPress con Gutenberg sin necesidad de usar áreas de widgets. Incluso, en las áreas de widgets preparadas para el sidebar y los footers podemos utilizar bloques de Gutenberg mediante el uso de bloques reutilizables y el plugin Reusable Blocks Extended. En el futuro podremos editar el sitio completo con bloques de Gutenberg.

Así que, centrándonos en lo que se puede hacer ahora con Gutenberg, tenemos dos ubicaciones de un theme dónde poder actuar y cómo:

  • Home. En la era Pre-Gutenberg estábamos muy limitados por lo que el desarrollador había preparado en el área de widgets del theme. Hoy, podemos «limpiar» la home y diseñarla a nuestro gusto con el editor de bloques. Por ejemplo, en Genesis Framework y en los themes que son compatibles con Gutenberg, puedes optar por importar la demo para modificar la home según tus necesidades o partir de una home vacia para rellenarla a tu gusto.
  • Áreas de widgets. ¿Y cómo puedo personalizar las áreas de widgets previstas en un theme con bloques de Gutenberg? En este webinar de Noches de Blogging se explica pero fundamentalmente se trata de instalar y activar el plugin Reusable Blocks Extended. Este plugin hace una cosa maravillosa: incorpora un nuevo widget a los disponibles en Apariencia > Widgets para que se pueda añadir bloques reutilizables en cualquier área de widgets del theme.

De esta manera, excepto en la cabecera podemos diseñar casi todo el theme de WordPress a nuestro gusto con Gutenberg. Esta es la idea que quisimos plasmar de manera práctica, y a modo de aula didáctica en Lanzatu.blog con nuestro theme Blogpocket Nineteen (en dos sabores: Genesis y para todos los públicos) 🙂

Te invito a leer Cómo crear y diseñar una web de WordPress eficiente en tan solo dos pasos, donde se explica el concepto de desarrollo de un sitio web basado en crear primero una web inicial de WordPress eficiente y, después, aplicar Gutenberg para conseguir los contenidos y el diseño completo del sitio.

«La edición completa del sitio cambiará la forma en que todos usan los temas y cómo los construimos«, ha escrito Carolina Nymark en su sitio web. Ella es miembro del equipo de themes de WordPress y acaba de publicar un curso gratuito sobre un tema basado en bloques de construcción y prepararlos para la edición completa del sitio con Gutenberg: Full site editing will change how everyone uses themes and how we build them.

Gutenberg Hub

Gutenberg Hub es muy recomendable si quieres diseñar tu web con el editor de bloques y sin necesidad de tirar ni una sola línea de código. El concepto se aleja mucho de la típica colección de bloques en forma de plugin. Con Gutenberg Hub es solo cuestión de copiar y pegar con un clic el código necesario sobre un bloque de párrafo vacio. Gutenberg Hub es otro de los recursos imprescindible para resolver el problema denominado «aprende Gutenberg».

En este vídeo te explico cómo funciona Gutenberg Hub.

El código HTML que pegas, lleva asociado un código CSS pero no hace falta que copies dicho código. Gutenberg Hub trabaja con el plugin Editor Plus que se encarga de hacer transparente para ti el CSS de las plantillas de bloques.

Hay un truco extraordinario por si quieres ver el código CSS correspondiente a una plantilla de bloques de Gutenberg Hub: instala y activa el plugin Blocks CSS: CSS Editor for Gutenberg Blocks. Con este plugin activo, se añade una nueva sección en la columna derecha (pestaña Bloque) denominada «Custom CSS».

Et Voilà. ¡Pan comido diseñar tu web con Gutenberg sin saber código!

El kit de desarrollo para la edición completa del sitio y aprende Gutenberg ahora

Antes de que podamos disfrutar de la edición completa del sitio de manera nativa, algo que va democratizar el diseño de sitios web, y que me emociona; te recomiendo el siguiente kit de desarrollo, ideado en Blogpocket.

Con este kit y tu imaginación como único techo, tienes la oportunidad de convertirte en diseñador web y crear un sitio web por ti mism@. ¿No es genial?

Sorta Brilliant

Nick Hamze es el alma mater de un sitio brillante que se denominó Sorta Brilliant (ya no está disponible) y su misión en la vida es aprovechar al máximo el editor de bloques de WordPress. Anota su nombre cerca de ti porque realmente nos va a hacer la vida mucho más fácil con sus desarrollos relacionados con Gutenberg 🙂

Los bloques de Sorta Brilliant son simplemente geniales y sorprendentes y ahora siguen descargables en Github (actualizado 15-9-2020).

Mission Ctrl

Radio Blogpocket Episodio 4: Gutenberg, Nick Hamze, Sorta Brilliant y Mission Ctrl

Pero Nick Hamze tiene otro plugin más reciente y también brillante que seguramente te va a gustar sobre todo si implementas sitios web para clientes.

Mission Ctrl convierte la página de inicio del escritorio de WordPress en un panel de mando basado en Gutenberg. ¿Ya estás pensando que eso es fantástico de cara a tus clientes? ¿Te imaginas poder colgar en la página de inicio del escritorio vídeos de capacitación o información útil para ellos?

El plugin crea un nuevo tipo de post denominado «Board» dentro del escritorio que se gestiona como si fuese un post o una página editable con Gutenberg. Pero con la ventaja de que esos nuevos boards pueden añadirse a la página de inicio del escritorio.

Las posibilidades son infinitas sobre todo si hay otros usuarios en tu wordpress o, como indiqué antes, para preparar una página de inicio personalizada para cada cliente. Incluso, por ejemplo, para insertar anuncios, avisos o mensajes informativos.

Lee más sobre este plugin en Blockify the WordPress Dashboard with the Mission Ctrl Plugin.

Más recursos y novedades [última actualización: 15 de septiembre de 2020]

Estamos dispuestos a que el imperativo ¡aprende Gutenberg! no se te atragante.

  • Nuevos bloques avanzados en Stackable. Se han agregado dos nuevos bloques muy interesantes en Stackable: el bloque de Encabezado avanzado y el bloque de Texto avanzado. Todo esto está disponible en la versión 2.6.0. Stackable es una de las colecciones de bloques recomendadas y que con estos dos nuevos bloques se convierte todavía más en esencial para diseñar nuestra web.
  • AsBlocks.com. El equipo de Gutenberg está actualmente inmerso en brindar capacidades de edición de sitio completo al editor de bloques como parte de la Fase 2 en la hoja de ruta a largo plazo del proyecto . Mientras tanto, el ingeniero de Gutenberg, Riad Benguella, ha estado experimentando con ideas para las características de colaboración que vendrán en la Fase 3, que tiene como objetivo ofrecer una forma más intuitiva de contenido de coautor. Benguella presentó un prototipo de escritura colaborativa llamado AsBlocks que se construye utilizando el editor Gutenberg. Es un ejemplo del editor que trabaja fuera de WordPress. AsBlocks proporciona un  entorno de escritura cifra do de extremo a extremo que se puede compartir con otros usuarios con un enlace, mientras que el servidor en sí no puede descifrar el contenido. Más información: El proyecto AsBlocks utiliza Gutenberg para crear un entorno de escritura colaborativo . Fuente: Birgit Pauli-Haack @bph ( GutenbergTimes )
  • 5 maneras de construir sitios web sin código usando Gutenberg de WordPress . En este tutorial, Lisa Poor nos muestra «5 formas en que un diseñador web con experiencia en codificación limitada puede aprovechar Gutenberg para crear los tipos de sitios web personalizados que buscan las empresas». Fuente: Birgit Pauli-Haack @bph ( GutenbergTimes )
  • Un plugin para enviar newsletter a MailChimp desde WordPress . Este plugin se está desarrollando desde Automattic, en principio para su proyecto Newspack. Pero espero con todas mis ganas que se deposite en el repositorio de plugins de WordPress y pueda ser usado libremente 😉. [añadido el 22 de junio de 2020]
  • Preguntas y respuestas en vivo: Temas de WordPress basados ​​en bloques / Edición completa del sitio . Como parte del trabajo de divulgación de la edición completa del sitio mediante Gutenberg que se está efectuando; los desarrolladores de WordPress, Carolina Nymark (del equipo de Temas y creadora del curso Curso de edición de sitio completo ) , Kjell Rigstad (director de diseño en Automattic y principal desarrollador en Gutenberg) y Eileen Violini (desarrollador en el equipo de Gutenberg y diseñador de Sidetrack Studio), participan en vivo en este webinar. Después de las presentaciones, Kjell Rigstad demostró la creación de una parte de plantilla de encabezado en la edición completa del sitio para un tema existente. Un vídeo muy interesante para aprender Gutenberg y acerca de lo que se podrá hacer pronto en WordPress para diseñar un tema desde cero con bloques de Gutenberg. [añadido el 27 de junio de 2020]
  • Munir Kamal está desarrollando herramientas muy interesantes para Gutenberg . Munir Kamal es Desarrollador Web y Estratega de Negocios y entre sus trabajos destaca dos grandes herramientas: Gutenberg Hub y Acfblocks. Su más reciente aportación es el plugin EditorPlus que añade grandes posibilidades en el diseño al editor de bloques de Gutenberg. Se prepara también una nueva actualización en Gutenberg Hub para usar junto EditorPlus , lo que sin duda -a tenor de lo que se puede ver en este tweet – supondrá mayores facilidades para diseñar nuestras páginas web con Gutenberg 🙂. Este complemento se actualiza a menudo y se incorporan nuevas e interesantes opciones. [añadido el 4 de julio de 2020, modificado el 15 de septiembre de 2020]
  • Gutenberg Hub lanzó su última versión mejor estructurada y más fácil de usar . Esta fantástica herramienta, que forma parte del kit de desarrollo recomendado en Blogpocket, funciona ahora integrada con el plugin EditorPlus . Munir Kamal publicó este plugin que extiende los bloques centrales con una tonelada de configuraciones y opciones adicionales. Él lo llama el editor de estilo visual ‘NoCode’. [añadido el 12 de julio de 2020]
  • La mejor versión del editor de bloques llegará a WordPress con 5.5. WordPress 5.5. Beta 2 salió y desde beta 1, se han solucionado 48 errores. «Teniendo suficientes ojos, todos los errores son superficiales «. – Eric S. Raymond. ¡Sigue probando! Hay un complemento Beta Tester en el repositorio de WordPress que permite actualizar a Beta y lanzar la versión candidata (RC) automáticamente. Fuente: Birgit. / a>. [añadido el 18 de julio de 2020]
  • El plugin Formularios de Gutenberg de Munir Kamal ahora integrado con MailPoet y MailChimp. Una buena alternativa a Formulario de contacto 7. Léelo en Lanza Tu Blog: Gutenberg integrado con MailPoet y MailChimp [añadido el 21 de julio de 2020]
  • La versión esperada # WordPress 5.5 llega el 11 de agosto. Estas son las novedades . [añadido el 2 de agosto de 2020]
  • Notas de lanzamiento de WooCommerce Blocks 3.1 . WordPress 5.5 se lanzará en unas pocas semanas, WooCommerce Blocks 3.1 agrega compatibilidad con esta versión, lo que significa actualizar algunos puntos finales de la API y garantizar que no haya regresiones en otras partes de la base de código. [añadido el 2 de agosto de 2020]
  • Las principales novedades de WordPress 5.5 . En esta entrada de Lanzatu.Blog, el spinoff de Blog se resumen las novedades más importantes de WordPress 5.5, de cara al ususario final [añadido el 15 de agosto de 2020] .
  • Pegamento del boletín . Un plugin con el que puedes enviar tus newletters de MailChimp directamente desde una entrada de WordPress. ¡Esto es fantástico! Conectas a MailChimp, editas con Gutenberg y listo. [añadido el 24 de agosto de 2020]
  • 17 consejos para publicar boletines con el editor de WordPress Gutenberg como un profesional . Lesley Sim divide sus consejos en secciones para principiantes, intermedios y avanzados para que sean más fáciles de leer e implementar. ¡Écha un vistazo, ahora que será cada vez más importante construir relaciones con clientes y visitantes a través del correo electrónico. [añadido el 29 de agosto de 2020]
  • La extensión para Chrome de Guenberg Hub . Tras la enorme respuesta a la biblioteca de plantillas de Gutenberg , lanzada en agosto, se presenta la extensión del navegador Chrome. Por ahora, esta extensión te permite navegar por la biblioteca de plantillas, pero hay que estar atento a más funciones agregadas a esta extensión. [añadido el 24 de agosto de 2020]
  • Tema y bloques Aino . El plugin de bloques de Aino nos ofrece una colección de bloques de creación de páginas para el editor Gutenberg. Con los bloques Aino y el tema Aino gratuito, puedes crear diseños de página en el editor de WordPress. [añadido el 29 de agosto de 2020]
  • Lista de recursos sobre Block Patterns . Presentado a los escritosres, desarrolladores de temas e implementadores de WordPress en la versión 5.5 de WordPress, Block Patterns, probado en los complementos de Gutenberg desde su versión 7.7, llegó a todos los sitios de WordPress. Abren la puerta para ser creativos con bloques y ponen a disposición de los creadores de contenido y editores de sitios diseños creativos sin utilizar más que los bloques principales. Aquí está su lista de recursos para explorar la creación de patrones de bloques pequeños o grandes y cómo hacerlos disponibles en sus temas o complementos. [añadido el 5 de septiembre de 2020]

Aprende Gutenberg ahora con la información que te damos en Blogpocket.

Aprender Gutenberg: Conclusiones

Me gusta Gutenberg y me gusta que te guste Gutenberg 😉 Te dijeron «aprende Gutenberg» y ahora lo tienes más claro.

Mi misión es que Blogpocket te sirva para aprender Gutenberg, así que aquí estoy para ello.

Esta guía contiene suficientes recursos para que sepas cómo funciona Gutenberg y lo apliques en tu web; pero estoy atento a tus comentarios.

¿Estás buscando hosting?

SiteGround es el hosting en el que está alojado Blogpocket . Consigue un alojamiento web de alto rendimiento, seguridad y optimización para WordPress .

Consejos, consejos y recursos para aprender Gutenberg
[última actualización: 15-9-2020] “loading =” lazy “width =” 377 “height =” 188 “src =” https://www.blogpocket.com/wp- content / uploads / 2020/05 / BIG-SHOES-PODCAST.png “alt =” BIG-SHOES-PODCAST Consejos, consejos y recursos para aprender Gutenberg
[última actualización: 15-9-2020] “class =” wp-image-63500 “srcset =” https://www.blogpocket.com/wp-content/uploads/2020/05 /BIG-SHOES-PODCAST.png 377w, https://www.blogpocket.com/wp-content/uploads/2020/05/BIG-SHOES-PODCAST-300×150.png 300w “tamaños =” (ancho máximo: 377px ) 100vw, 377px “/>

Related Articles