Si usa WordPress 5.0 y superior, a menos que haya estado viviendo bajo una roca, sin duda habrá oído hablar de la actualización de Gutenberg que se fusionó con WordPress en diciembre de 2018^{(December 2018)} .

Entonces, si está usando la última versión de WP, ya está usando Gutenberg o ha seguido usando el editor clásico al instalar el complemento WordPress Classic Editor^{( WordPress Classic Editor plugin)} .

¿Por qué Gutenberg?^{(Why Gutenberg?)}

Muchos usuarios de WP no están listos para subirse al vagón de Gutenberg^{(on the Gutenberg wagon)} , pero algunos sí lo están, incluido este sitio web.

Algunas de las razones por las que podría querer usar Gutenberg son porque:

• Es el futuro para los desarrolladores de WP.
• Proporciona una mejor experiencia de usuario.
• Es más flexible que el editor original de WP ( TinyMCE ).
• Proporcionará un nuevo mercado para los desarrolladores.

¿Cuáles son las diferencias entre WordPress y Gutenberg?^{(What Are The Differences Between WordPress & Gutenberg?)}

El Editor clásico^{(Classic Editor)} de WP es un editor de texto y se parece mucho a Microsoft Word . Tiene un solo campo de edición como se ve en la captura de pantalla a continuación.

Gutenberg es un editor basado en bloques que se ve así:

Hay múltiples bloques para diferentes tipos de contenido que incluyen sus propias opciones de formato. Bloques como:

• Botón
• Imagen
• Mesa
• incrustaciones
• Lista
• Galería
• Audio
• Cotizaciones
• Título
• Código
• Verso
• HTML personalizado

Además, los temas y complementos ofrecen más bloques y widgets para que los use en sus publicaciones y páginas de WP.

¿Cómo se ven afectadas las páginas o publicaciones existentes?^{(How Are Existing Pages Or Posts Affected?)}

Después de actualizar y usar Gutenberg , sus páginas y publicaciones existentes deberían continuar mostrándose correctamente. 

Sin embargo, debe verificar sus códigos cortos y asegurarse de que los complementos que podría estar usando estén funcionando.

Cuando editas una página o publicación existente, se abrirá automáticamente en un único bloque clásico del editor de Gutenberg .

¿Estás listo para hacer el cambio?

Usar un sitio de ensayo^{(Use a Staging Site)}

Lo último que desea hacer es romper su sitio existente. La forma de evitar esto es activar Gutenberg en un sitio^{(a staging site)} de ensayo . Esta es una réplica exacta de su sitio web donde puede probar cosas sin dañar su sitio en vivo.

Los sitios de prueba incluyen su tema, complementos , opciones y contenido. Su empresa de alojamiento podría ofrecer sitios de prueba. Si no lo hacen, puede usar el complemento de ensayo de WordPress^{( WordPress Staging plugin)} .

Una vez que su sitio de prueba esté en funcionamiento, instale y active el complemento de Gutenberg^{( Gutenberg plugin)} y comience a probar. O instale una nueva instancia de WordPress en su computadora y pruebe allí.

Verifique sus complementos^{(Check Your Plugins)}

Los usuarios de WordPress están familiarizados con lo que sucede cuando los complementos no funcionan bien juntos. A veces se debe a la funcionalidad o al código en conflicto. Este es un excelente momento para ver si está utilizando todos los complementos que ha instalado. Si no lo eres, quítalos.

También desea ver qué complementos se utilizan cuando edita contenido en WordPress . Complementos específicos como Akismet , Contact Form 7 , Google Sitemap Generator y WP Super Cache no tienen nada que ver con el editor y no se verán afectados por el uso de Gutenberg .

Por otro lado, cualquier complemento que agregue funcionalidad o cambie la apariencia del editor clásico de WP podría no ser compatible con Gutenberg . En particular, los complementos que generaron códigos cortos, agregaron estilos personalizados o no se actualizaron recientemente, generalmente entran en conflicto y causan problemas.

Gutenberg solía tener una base de datos activa de compatibilidad de complementos^{(Plugin Compatibility)} . Sin embargo, se ha cerrado porque ya no se mantiene activamente.

Puede revisar los datos finales y descargar la base de datos^{( download the database)} como un archivo CSV . Sin acceso a una base de datos activa de compatibilidad de complementos, tendrá que probar manualmente cada complemento que use.

Intente crear una nueva publicación en su sitio de prueba. Verás que estás en el editor de Gutenberg y te parecerá diferente. Cuando empiezas a escribir, estás creando automáticamente un bloque de párrafo. No tienes que agregar un nuevo bloque cuando agregas un nuevo párrafo. Simplemente^(Just) presione enter o la tecla de retorno.

Ya que está tratando de ver si sus complementos actuales funcionarán, intente recrear cómo usó cada uno y vea si todavía funciona.

Si no es así, busque la misma funcionalidad en el bloque predeterminado de Gutenberg , agregue ese bloque y agregue su contenido.

Asegúrese de mantener una lista de los complementos que no funcionan correctamente para que pueda eliminarlos cuando publique Gutenberg .

¿Qué pasa si no hay un bloque predeterminado para la funcionalidad que necesita?^{(What If There Is No Default Block For The Functionality You Need?)}

Verifique todos los bloques para ver si la funcionalidad que necesita se encuentra dentro de otro bloque. Si no puede encontrar algo que funcione, puede comunicarse con los autores del complemento y preguntarles si planean actualizarlo para que sea compatible con Gutenberg .

Si todo lo demás falla, intente encontrar un complemento de Gutenberg^{( Gutenberg plugin)} que haga lo que necesita. Elimine los complementos que no funcionan de su sitio de ensayo.

Va en directo^{(Going Live)}

Antes de hacer CUALQUIER COSA en su sitio en vivo, haga una copia de seguridad completa de todo su sitio en caso de que se haya perdido algo al verificar la compatibilidad u ocurra otro error.

Es posible realizar todos los cambios necesarios en su sitio de prueba y enviarlos a su sitio en vivo. Sin embargo, esto requiere algunos conocimientos técnicos. Entonces, a menos que sea un desarrollador o tenga uno que funcione para usted, es mejor hacer los cambios manualmente.  

Comience por eliminar los complementos que no funcionaron y agregue los nuevos que encontró para reemplazarlos. Si los complementos antiguos están procesando datos para publicaciones y páginas existentes y no rompen los nuevos, puede dejarlos instalados.

¿Quieres convertir tus publicaciones y páginas antiguas en bloques de Gutenberg?^{(Do You Want To Convert Your Old Posts & Pages To Gutenberg Blocks?)}

Abra cada página y publique desde el menú de bloqueo^{(Block Menu)} clásico . Haga clic^(Click) en los tres puntos para ver las opciones^{(view options)} . Seleccione en el menú desplegable Convertir en bloques^{(Convert to Blocks)} .

Después de que WP convierta su contenido al sistema de bloques de Gutenberg , debe revisar cada bloque. Use Bloquear navegación^{(Use Block Navigation)} (desde íconos) para ver todas las partes de su publicación o página.

Como puede ver en la captura de pantalla anterior, cada párrafo, imagen, lista y encabezado ahora está en su propio bloque. Convertir páginas y publicaciones existentes al nuevo sistema Gutenberg es rápido y fácil.

Puede tomar varias horas probar sus complementos y encontrar otros nuevos, pero solo tiene que hacerlo una vez. Asegúrese de seguir los pasos sugeridos anteriormente para que su cambio a Gutenberg sea fácil y sin errores.

How To Transition From The Classic WordPress Editor To Gutenberg

If you use WordРress 5.0 and highеr, unless you have been living under a rock, you will have undoubtedly heard of the Gutenberg updatе which was merged into WordPress in December 2018.

So if you are using the latest version of WP, you are either already using Gutenberg or have continued using the classic editor by installing the WordPress Classic Editor plugin.

Why Gutenberg?

Many WP users are not ready to jump on the Gutenberg wagon, but some are, including this website.

A few of the reasons why you might want to use Gutenberg are because it:

• Is the future for WP developers.
• Provides a better user experience.
• Is more flexible that WP’s original editor (TinyMCE).
• Will provide a new market for developers.

What Are The Differences Between WordPress & Gutenberg?

WP’s Classic Editor is a text editor and looks very much like Microsoft Word. It has a single editing field as seen in the screenshot below.

Gutenberg is a block-based editor that looks like this:

There are multiple blocks for different types of content that include their own formatting options. Blocks such as:

• Button
• Image
• Table
• Embeds
• List
• Gallery
• Audio
• Quotes
• Heading
• Code
• Verse
• Custom HTML

Also, themes and plugins offer more blocks and widgets for you to use in your WP posts and pages.

How Are Existing Pages Or Posts Affected?

After upgrading and using Gutenberg, your existing pages and posts should continue to display correctly. 

However, you should check your shortcodes and make sure that the plugins you might be using are working.

When you edit an existing page or post, it will automatically open in a single new Gutenberg editor classic block.

Are you ready to make the switch?

Use a Staging Site

The last thing you want to do is break your existing site. The way to avoid this is to activate Gutenberg on a staging site. This is an exact replica of your website where you can test things out without doing any damage to your live site.

Test sites include your theme, plugins, options, and content. Your hosting company might offer staging sites. If they don’t, you can use the WordPress Staging plugin.

After your staging site is up and running, install and activate the Gutenberg plugin and start testing. Or install a brand new instance of WordPress on your computer and test on there.

Check Your Plugins

WordPress users are familiar with what happens when plugins don’t play nice together. Sometimes it’s due to the functionality or conflicting code. This is an excellent time to see if you are using all the plugins you have installed. If you aren’t, remove them.

You also want to see which plugins are being used when you are editing content in WordPress. Specific plugins such as Akismet, Contact Form 7, Google Sitemap Generator, and WP Super Cache have nothing to do with the editor and will not be affected by using Gutenberg.

On the other hand, any plugin that adds functionality or changes the way the WP classic editor looks might not be compatible with Gutenberg. In particular, plugins that generated shortcodes, adds custom styles, or haven’t been updated recently, usually conflict and cause problems.

Gutenberg used to have an active Plugin Compatibility database. However, it has been shut down because it is no longer actively maintained.

You can review the final data and download the database as a CSV file. Without access to an active plugin compatibility database, you are going to have to manually test each plugin you use.

Try creating a new post on your test site. You will see that you are in the Gutenberg editor and it will look different to you. When you start typing, you are automatically creating a paragraph block. You don’t have to add a new block when you add a new paragraph. Just hit enter or the return key.

Since you are trying to see if your current plugins will work, try to recreate how you used each one and see if it still works.

If it doesn’t, look for the same functionality in the default Gutenberg block, add that block, and add your content.

Be sure to keep a list of the plugins that don’t work correctly so you can remove them when going live with Gutenberg.

What If There Is No Default Block For The Functionality You Need?

Check all the blocks to see if the functionality you need lives inside another block. If you can’t find something that will work, you can contact the plugin authors and ask them if they are planning to update it to be compatible with Gutenberg.

If all else fails, try to find a Gutenberg plugin that does what you need. Delete the plugins that don’t work from your staging site.

Going Live

Before you do ANYTHING to your live site, make a complete backup of your entire site in case you missed something when checking for compatibility or another error occurs.

It is possible to make all the necessary changes on your test site and push them to your live site. However, this requires some technical knowledge. So, unless you are a developer or have one that works for you, it is better to make the changes manually.  

Start by deleting the plugins that didn’t work and adding the new ones you found to replace them. If old plugins are processing data for existing posts and pages and do not break new ones, you can leave them installed.

Do You Want To Convert Your Old Posts & Pages To Gutenberg Blocks?

Open each page and post from the Classic Block Menu. Click the three dots to view options. Select from the drop-down menu Convert to Blocks.

After WP converts your content to the Gutenberg block system, you should review each block. Use Block Navigation (from icons) to see all the parts of your post or page.

As you can see in the above screenshot, every paragraph, image, list, and heading is now in its own block. Converting existing pages and posts to the new Gutenberg system is quick and easy.

It might take several hours to test your plugins and find new ones, but you only have to do this once. Make sure to follow the steps suggested above to make your move to Gutenberg painless and error-free.

Related posts

• Tutorial de WordPress Gutenberg: Cómo usar el nuevo editor

• Cómo mover WordPress site de un anfitrión a otro

• Cómo instalar y configurar WordPress en Microsoft Azure

• Cómo ejecutar extraordinariamente rápido WordPress en Microsoft Azure

• Cómo configurar Privacy en WordPress y por qué es importante

• Cómo acelerar un sitio de WordPress en 11 pasos

• Cómo comprobar si se ha prohibido un sitio web de AdSense

• Cómo proteger con contraseña las páginas de su sitio web de WordPress

• Cómo configurar su propio sitio web similar a Twitter usando el tema P2 de WordPress

• Mostrar el extracto en la página de inicio de WordPress blog

• Cómo configurar manualmente WordPress en un dominio

• Cómo instalar WordPress en Google Cloud Platform

• Must Have WordPress Yoast SEO Settings 2021

• 10 complementos esenciales de WordPress para un sitio web de pequeñas empresas

• Cómo editar el pie de página en WordPress

• 7 consejos de WordPress para un sitio web compatible con dispositivos móviles

• Cómo encontrar su inicio de sesión de administrador de WordPress

• Reseña del libro: Cree su propio sitio web: una guía cómica de HTML, CSS y Wordpress

• ¿Qué es AMP para WordPress y cómo instalarlo?

• Cómo hacer una copia de seguridad de su sitio de WordPress