Problemas del nuevo editor de WordPress

A pesar de nuestras reticencias iniciales (cuesta mucho abandonar las viejas costumbres y, por tanto, dejar a un lado el anterior editor de WordPress), tenemos que decir, sin ninguna reserva, que el nuevo editor constituye un gran avance. Ahora bien, eso no significa que no existan diversas situaciones de uso que pueden ser conflictivas o problemáticas. En el presente artículo vamos a explorar algunas de estas situaciones, y a proponer posible soluciones.

1. Edición de contenidos publicados con versiones anteriores de WordPress

Tal como ya hemos explicado en artículos anteriores de este curso, las entradas y páginas elaboradas con versiones anteriores de WordPress se pueden editar perfectamente con el nuevo editor, ya que el contenido de los artículos antiguos es convertido automáticamente a un único bloque clásico.

Cuando se edita un artículo antiguo cuyo contenido se presenta como un bloque clásico, caben dos posibilidades: o bien convertir el bloque clásico a bloques convencionales, o bien seguir editando el bloque clásico tal como está. El comportamiento más aconsejable en cada caso depende de las circunstancias:

• Si el bloque clásico tiene una estructura y formato sencillos, de poca complejidad, conviene realizar la conversión, ya que ello asegura una mejor compatibilidad y una edición más sencilla en el futuro.
• Si el bloque clasico tiene un formato complejo, o se tiene algún indicio o sospecha de que la conversión puede no ser satisfactoria, es mejor no realizar la conversión, y seguir editando el contenido como un único bloque clásico.

A tenor de nuestra experiencia, hay pocos casos en que el usuario se vea obligado a adoptar la segunda alternativa, ya que el nuevo editor de WordPress realiza la conversión de bloques con gran precisión y un nivel de acierto más que satisfactorio.

Por otro lado, y al menos por el momento, no hay ninguna necesidad de convertir los antiguos artículos al nuevo sistema de bloques si aquellos no se van a editar y modificar. WordPress seguirá reconociendo el contenido y formato de esos artículos y los mostrará exactamente de la misma manera que lo hace con los nuevos.

2. Copiado y pegado de texto desde otros editores

Siempre hemos aconsejado que, cuando se copia y pega texto desde otros editores o procesadores de texto, se limpie el contenido y se eliminen todos los código de formato innecesarios. Hasta la llegada del nuevo editor de WordPress, esta operación se podía realizar utilizando la función de pegar en modo de texto plano, cuyo icono, en forma de una letra “T” mayúscula sobre un portapapeles, estaba disponible en la botonera de iconos del antiguo editor.

Pues bien, esa función ya no existe en el nuevo editor, tal vez porque los programadores de WordPress creen que no es necesaria. En efecto, nosotros hemos realizado bastantes operaciones de este tipo, entre varias instalaciones diferentes de WordPress y entre navegadores y procesadores de texto, por un lado, y WordPress, por otro, y podemos decir que los resultados han sido muy satisfactorios: en la mayoría de los casos, WordPress reconoce perfectamente el contenido, lo copia en el bloque que resulta idóneo, y limpia el formato.

Ahora bien, es muy posible que los usuarios tengan que afrontar situaciones en las que la operación de copiar y pegar sin formato no ofrece los resultados apetecidos. En tales casos, recomendamos las siguientes alternativas:

• Utilizar un editor de texto sin formato (nosotros recomendamos Notepad++) como elemento intermedio, para luego volver a copiar y pegar desde dicho editor.
• Copiar el texto, crear un bloque clásico, y utilizar la opción de pegar sin formato, que sí existe en este bloque. Una vez hecho esto, se puede convertir el bloque clásico a uno o varios bloques convencionales.
• En caso de que las alternativas anteriores fallen, se puede probar a activar el modo de “Editor de código”, y pegar directamente el código HTML en el lugar que corresponda. Es una opción poco recomendable, ya que requiere usuarios expertos, y además puede producir resultados inesperados.

3. Inserción de etiquetas HTML no disponibles en el editor

Existen multitud de ocasiones en que es necesario aplicar al contenido un formato o una etiqueta HTML espec’ifica que no están disponibles en el nuevo editor de WordPress. Para abordar tales situaciones, existen varias técnicas; a continuación las explicaremos una a una, con algunos ejemplos.

3.1. Editar directamente el código HTML

Si el usuario conoce las etiquetas HTML y se siente cómodo utilizándolas, esta es la mejor opción para la edición de elementos muy concretos. Por ejemplo, a continuación tenemos cuatro bloques de párrafo a los que hemos aplicado etiquetas HTML que no están disponibles en el nuevo editor de WordPress:

Texto con la etiqueta “code”

^{Texto con la etiqueta “sup”}. _{Texto con la etiqueta “sub”}

Esto es un párrafo, en el que hemos recuadrado algunos elementos en color rojo, otros en verde, otros en azul y otros en morado.

Y esto es un párrafo al que se le ha aplicado un sangrado de 30 píxeles, operación que en el bloque de párrafo del nuevo editor es imposible, a no ser que se utilice el bloque clásico o, como en este caso, se edite directamente el código HTML.

El código correspondiente a los cuatro ejemplos es el siguiente:

<p><code>Texto con la etiqueta “code”</code></p>

<p><sup>Texto con la etiqueta “sup”</sup>. <sub>Texto con la etiqueta “sub”</sub></p>

<p>Esto es un párrafo, en el que hemos recuadrado algunos elementos en <span style="color: #ff0000;">color rojo</span>, <span style="color: #008000;">otros en verde</span>, <span style="color: #0000ff;">otros en azul</span> y <span style="color: #800080;">otros en morado</span>.</p>

<p style="padding-left:30px;">Y esto es un párrafo al que se le ha aplicado un sangrado de 30 píxeles, operación que en el bloque de párrafo del nuevo editor es imposible, a no ser que se  utilice el bloque clásico o, como en este caso, se edite directamente el código HTML.</p>

3.2. Utilizar el bloque clásico

Si no se tiene costumbre de editar directamente el código HTML, se puede utilizar el bloque clásico, que dispone de varias funcionalidades que no están presentes en el bloque de párrafo por defecto ni en otros bloques. Por ejemplo:

• Asignar color a partes del texto.
• Pegar desde WordPress.
• Borrar formatos.
• Insertar caracteres especiales.
• Aplicar sangrías a los párrafos.

3.3. Utilizar plugins que mejoran el editor

Existen algunos plugins que añaden al editor de WordPress algunas de las capacidades de edición de formato de las que este carece. Solo comentaremos dos, a los que ya nos referimos en la sesión anterior del curso:

1. Advanced Rich Text Tools for Gutenberg. Este plugin añade al editor varios iconos para poder utilizar las etiquetas HTML<code>, <sub> y <sup>, así como una funcionalidad para eliminar el formato de un bloque en un solo paso. El plugin también permite aplicar colores de primer plano y de fondo a una parte del texto.
2. TinyMCE Advanced. Si hubiera que resumir las muchas virtudes de este plugin extraordinario en una frase lapidaria, diríamos que TinyMCE Advanced consigue que sea posible disfrutar de lo mejor de ambos mundos (el anterior editor de WordPress, y el nuevo), sin tener que renunciar a ninguna de sus respectivas ventajas.

4. Inserción de código procedente de WordPress o de otros servicios

A menudo es necesario copiar y pegar código procedente de otras fuentes, bien sean la instalación de WordPress en la que se está trabajando, otros sitios web o, lo que suele ser cada vez más habitual, servicios de terceros. Según los casos, conviene utilizar unas técnicas u otras.

4.1. Copiado y pegado de shortcodes

El nuevo editor de WordPress reconoce todos los shortcodes nativos de la aplicación y los que proporcionan otros plugins y temas. Por tanto, para insertarlos basta con copiar y pegar el shortcodes en el espacio del editor destinado a un nuevo bloque. WordPress reconocerá el código como un shortcode, y lo pegará en el bloque específico destinado a este tipo de elementos.

Si se desea obtener más precisión, también se puede seleccionar un bloque de shortcodes desde el insertador de bloques, y pegar el código en la caja disponible a tal efecto. El resultado será exactamente el mismo que en el caso anterior.

4.2. Copiado y pegado de contenido de terceros

WordPress dispone de más de 30 bloques para insertar contenido de terceros. Gracias al protocolo oEmbed, todos esos elementos se pueden incrustar mediante el siguiente procedimiento:

• Copiar la URL del contenido:
• Desde el insertador de bloques, ir a la sección “Incrustados” y seleccionar el bloque que corresponda.
• Pegar la URL.

¿Qué se puede hacer si el elemento que queremos incrustar no corresponde a ninguno de los bloques incrustados de WordPress? Hay dos posibilidades:

• Utilizar el bloque denominado “Incrustado”, que es un elemento genérico para incrustar contenido de terceros. Puede funcionar o no, según los casos. Por ejemplo, hemos intentado insertar la URL de un mapa de Google Maps, y no ha funcionado.
• Copiar el código HTML que proporciona el servicio cuyo contenido pretendemos incrustar, y pegarlo en WordPress mediante el bloque adecuado, que en este caso es el de HTML personalizado, de la sección “Formatos”. Los mapas de Google que aparecen en la parte inferior de la página Contacto de este sitio web se han incrustado con esta técnica.

Aviso importante: por motivos de seguridad, las instalaciones multisitio de WordPress no permiten incrustar ciertas etiquetas HTML (por ejemplo <script>, <iframe>, <object>, <embed>, y otras), a no ser que el usuario tenga el rol de superadministrador. Si un usuario con un rol inferior intenta copiar código que incluya dichas etiquetas, WordPress lo eliminará. Hay técnicas para solventar esta limitación, pero en este curso no nos vamos a ocupar de ellas.

5. Qué hacer cuando el editor no reconoce o rechaza el contenido de un bloque

En ocasiones, sobre todo cuando se copia y pega código procedente de otros servicios, o bien cuando se edita directamente el código HTML, el editor de WordPress muestra una advertencia con la leyenda «Este bloque contiene contenido inesperado o no válido», tras lo cual ofrece dos opciones: resolver el problema o convertir el bloque a HTML; si se pulsa sobre el icono de opciones del bloque, aparece una opción adicional, que permite convertirlo a un bloque clásico. Al preparar los materiales de este curso nos hemos enfrentado un par de veces a esta situación; un caso es el del cuarto ejemplo del epígrafe 3.1. de esta misma página , en el que el editor de WordPress no acepta de buen grado el estilo inline necesario para sangrar el párrafo.

Debido a la variedad de situaciones posibles, resulta difícil dar orientaciones sobre qué se debe hacer en estos casos. En efecto, los errores advertidos por el editor de WordPress pueden abarcar desde lo prácticamente irrelevante hasta lo casi catastrófico, por tanto, el comportamiento más adecuado puede ser, en ciertos casos, el de ignorar el aviso, mientras que en otros habrá que seleccionar alguna de las tres opciones existentes, siempre de acuerdo con las circunstancias. En el ejemplo que acabamos de describir, la opción más recomendable es la de convertir el bloque de párrafo a un bloque clásico, con lo cual desaparece la advertencia y el párrafo queda sangrado a la perfección.