Sustituir KingComposer es necesario desde que fue retirado del directorio de plugins de WordPress el 02.02.2022 debido a un problema de seguridad. Mala noticia para miles de empresas y particulares que habían confiado en este editor visual para la construcción de su sitio web. Sin embargo, también puede ser una oportunidad para romper con el «vendor lock-in» de los editores visuales externos y «saltar» al editor de bloques estándar de WordPress, Gutenberg.
Si no tienes más tiempo: resumen en 100 palabras
En este post te explicamos el porqué hay que sustituir KingComposer debido a su falta de actualización y al problema de seguridad que representar, y las alternativas actuales que existen para ello. Un aspecto muy importante a tener en cuenta es entender qué significa el concepto de «Vendor lock-in» o «dependencia del proveedor» que es común a cualquier editor visual externo. Abiertamente, te recomendamos Gutenberg, el editor de bloques de WordPress, como la opción más segura y eficiente en el largo plazo desde nuestro punto de vista: por las ventajas de formar parte del propio núcleo de WordPress, su tecnología de última generación y por estar en el centro mismo del «roadmap» tecnológico de WordPress.
¿Por qué sustituir KingComposer? Problemas de seguridad en KingComposer
KingComposer fue retirado el 02.02.2022 del directorio de plugins de WordPress debido a que se identificó un problema de seguridad en dicho plugin. Esto significa que unos meses antes, el equipo de seguridad de WordPress detectó un problema de seguridad en el plugin, lo reportó a su desarrollador, pero este último no preparó una solución para el problema en el plazo que suele marcar el equipo de seguridad de WordPress en este tipo de situaciones (2-3 meses), con lo que el plugin fue cerrado definitivamente.
Al ser retirado del directorio de plugins, KingComposer lleva cerca de dos años sin actualizarse en el momento que escribimos esta entrada. Esta es la razón por la que hay que sustituir KingComposer, porque supone una amenaza para la seguridad de cualquier instalación WordPress que lo mantenga desactualizado.
Enlace al directorio de plugins de WordPress: KingComposer.
Alternativas para sustituir KingComposer
Los editores visuales ayudan al usuario con rol de editor o autor a maquetar el contenido de páginas y entradas de la instalación. Normalmente, utilizando funcionalidad de tipo “Drag & Drop” (arrastrar y colocar) y, en base, a un directorio de elementos (bloques) y plantillas (templates = layouts = patrones) que ayudan a conseguir una presentación atractiva del contenido.
Editores visuales externos a WordPress para sustituir a KingComposer
Tradicionalmente (antes de 2018), WordPress solo ofrecía un “editor clásico” muy básico, prácticamente un editor de texto. Si se quería construir una maquetación de cierto nivel había que recurrir a un editor HTML pensado para usuarios con un cierto conocimiento técnico. Esta es la principal justificación por la que en WordPress han existido tradicionalmente numerosos editores visuales “externos” al propio núcleo de WordPress.
Los editores visuales “externos” a WordPress más populares actualmente son los plugins Elementor y Divi.
Vendor lock-in: el mayor problema de utilizar un editor visual externo
Es importante tener en cuenta que cualquier editor “externo” añade una “capa de código adicional” que aporta la maquetación del contenido. Esta “capa de código adicional” utiliza un formato específico de cada plugin, o sea, no es compatible con otros editores de código, de forma que, para cambiar de un editor “externo” a otro, normalmente es necesario re-maquetar el contenido.
Si el contenido de la instalación es abundante, el esfuerzo necesario para cambiar de editor introduce un importante “Vendor lock-in”, que podemos traducir como «dependencia del proveedor» o «barrera al cambio».
Es cierto que el uso de cualquiera de los plugins más populares en el universo WordPress también va a suponer una barrera al cambio, pero normalmente no se puede comparar a la barrera que supone sustituir la solución sobre la que hemos construido todo el contenido de nuestra instalación. El contenido es el «corazón» de cualquier blog y la «esencia» de la reputación de cualquier empresa. Probablemente, el «Vendor lock-in» de los editores visuales es el mayor que existe entre la gran variedad de soluciones en WordPress.
Gutenberg: el editor visual «estándar» de WordPress para sustituir a KingComposer
Un poquito de historia
En el año 2018, el equipo de desarrolladores de WordPress lanzó Gutenberg, que es el editor visual “estándar” de WordPress, también conocido como el “editor de bloques” de WordPress. Actualmente, se trata de un editor ya maduro que ofrece un conjunto amplio de funcionalidades de edición.
El editor ofrece un conjunto de bloques (elementos) y de patrones (plantillas) que sirven para crear contenido enriquecido en páginas y entradas.
Si quieres probar el editor de bloques, puedes hacerlo a través de esta demo oficial de WordPress: https://wordpress.org/gutenberg/
¿Qué significa que sea el editor «estándar» de WordPress?
Que el editor de bloque Gutenberg sea “estándar” quiere decir que el código del “editor de bloques” forma parte del propio núcleo de WordPress y se instala por defecto desde la versión WordPress v5.0.
Las ventajas de formar parte del «estándar»
Esto se traduce en que:
- WordPress garantiza la evolución del propio editor, tanto funcional como tecnológicamente.
- Al no necesitar la “capa de código adicional”, cualquier página o entrada construida con el editor de bloques, va a “pesar” menos y a cargarse más rápido que si se utiliza cualquier otro “editor externo”. Esto se traduce en una mejor experiencia de usuario y en un mejor posicionamiento SEO.
- La propia filosofía “modular” de los bloques garantiza mejores tiempos de respuesta, ya que el código que corresponde a un bloque solo se carga si el bloque se utiliza en la página que se visita. El resultado son páginas “más ligeras” que cargan más rápido.
- Por otra parte, el “editor de bloques” introduce un número sustancial de mejoras en la accesibilidad de los contenidos.
La aportación de la Comunidad de desarrolladores de WordPress
La comunidad de desarrolladores de WordPress invierte activamente en ampliar las posibilidades del editor:
- Directorio de bloques: además de los bloques “estándar” (+90 actualmente), los desarrolladores ofrecen bloques adicionales que están disponibles a través del directorio de bloques. Este directorio es accesible desde dentro del propio “editor de bloques”. Los nuevos bloques se instalan como plugins en la instalación, así que para su elección deberían aplicarse los mismos criterios que se utilizan a la hora de escoger instalar un plugin determinado. Información sobre cómo utilizar el directorio de bloques: link.
- Directorio de patrones: los patrones son “plantillas” que agrupan varios bloques en una maquetación determinada. Existe un directorio de patrones en el que los editores comparten maquetaciones atractivas. El contenido del directorio de patrones puede consultarse a través de este link. Utilizar un patrón del directorio de patrones es tan sencillo como copiar el patrón desde el directorio y pegarlo en nuestra entrada o página.
El Editor de Bloques: una aplicación con tecnología de última generación
El “editor de bloques” de WordPress está desarrollado con tecnología de última generación (ReactJS) que es similar a la que utilizan aplicaciones populares tales como facebook o Instagram.
Desde el año 2018, WordPress ha venido mejorando sustancialmente su “editor de bloques”, hasta convertirlo en el núcleo de su “roadmap” tecnológico. Es decir, la mayor inversión de esfuerzo que se está realizando y se va a realizar en WordPress en los próximos años, estará centrada con gran probabilidad en su tecnología de bloques.
De hecho, desde la versión WordPress v5.9, existe una nueva generación de temas denominados “temas de bloques” que permiten la edición completa del sitio (FSE = full site edition) utilizando el “editor de bloques”. Esta nueva generación de “temas de bloques” se basa en plantillas que se construyen específicamente con tecnologías 100% web (HTML, JavaScript y CSS), utilizando poco o nada de PHP. Este planteamiento tecnológico se traduce en la oportunidad de mejorar sustancialmente los tiempos de carga y, en consecuencia, la experiencia de usuario.
En concreto, la rama actual de WordPress v6, contiene más de 1.000 cambios dirigidos en su mayoría a soportar mejor la nueva generación de “temas de bloques”. No obstante, WordPress seguirá soportando los “temas clásicos” durante un tiempo ya que los “temas de bloques” se consideran una actualización progresiva.
Sustituir KingComposer por el Editor de Bloques de WordPress
En esta sección te explicamos las principales pautas y líneas de trabajo a tener en cuenta para sustituir KingComposer por Gutenberg.
Cuidado con el tema de la instalación
Según como esté construida la instalación es posible que al desactivar el plugin puedan producirse errores fatales si el tema de la instalación incluye alguna llamada a funciones del plugin (p.ej. para cambiar el directorio de plantillas del plugin). Habrá que identificar qué llamadas se utilizan y retirarlas para que al sustituir KingComposer no se genere error.
Evolucionar el tema de la instalación para que funcione con el Editor de Bloques
Vamos a dar por supuesto que la instalación está construida utilizando un «tema clásico» (la generación anterior al lanzamiento de los «temas de bloques»). Si es así, antes de poder utilizar el Editor de Bloques, habrá que asegurar que el tema «activa» los soportes adecuados para trabajar con el Editor de Bloques. Tampoco hay que olvidar encolar los recursos adecuados (ej. tipografías utilizadas en la instalación) y que queramos que sean visibles en el propio Editor de Bloques.
Normalmente, un aspecto esencial en esta línea de trabajo será diseñar e implementar el archivo «theme.json«. Este archivo ofrece un mayor control sobre las opciones de configuración del editor de bloques, y simplifica la forma en que se definen los estilos en la instalación. La existencia de este archivo en la instalación es esencial para poder habilitar la “edición completa del sitio” en el futuro.
Re-editar los contenidos existentes
Esta línea de trabajo es el «grueso» del contenido del trabajo para sustituir KingComposer por Gutenberg.
Normalmente, en el caso de KingComposer, nos encontraremos con un tema cuyas plantillas no estarán construidas utilizando los recursos de KingComposer (aunque no se puede descartar que exista alguna llamada a sus recursos). Esto significa que, habitualmente, podremos dejar de lado las plantillas y centrarnos en el contenido de la instalación: páginas y entradas. Si no fuera así, habría que revisar el código de las plantillas para asegurar que no incluyen llamadas a funciones o recursos de KingComposer.
Estrategias para re-editar contenidos en el Editor de Bloques
Habrá que re-editar los contenidos utilizando el propio Editor de Bloques. En función de cómo esté maquetado cada contenido existen varias estrategias posibles:
- Editar desde cero con el Editor de Bloques: editar completamente esa sección utilizando el Editor de Bloques. Esta es la opción más eficiente, o sea, la que menos código adicional va a añadir al resultado y, por tanto, la que llevará a una página que cargue más rápido.
- Truco: prueba a copiar y pegar el contenido HTML directamente desde el navegador al Editor de Bloques. No funciona en el 100% de los casos, pero si el contenido es extenso te puede ahorrar y solucionar automáticamente buena parte del trabajo.
- Copiar el marcado HTML del contenido: consiste en utilizar bloques («Grupo», «Fila», «Pila») para replicar el marcado HTML del contenido de «KingComposer». Probablemente, es la opción que permite conseguir resultados más parecidos visualmente, pero hay que tener en cuenta que no es la más eficiente. Otro aspecto importante es que si vamos a replicar el marcado HTML, habrá que encolar también los estilos necesarios en el Editor para que el resultado «mimetice» la presentación de «KingComposer».
- Truco: para encolar estilos en el Editor de bloques, comienza probando con los estilos del tema o del tema hijo de la instalación.
- Mantener el contenido en un bloque clásico: es la opción más rápida, no hacer nada. Dejar el contenido de KingComposer en un bloque clásico. Eso sí, para que el contenido en el front-end siga siendo igual al anterior, habrá que traspasar los estilos de KingComposer al tema de la instalación.
¿Y si tenemos elementos de diseño que no encajan con los bloques estándar?
Por otra parte, habrá que resolver el problema de contar con bloques que sustituyan elementos de diseño específicos en el contenido (ej. sliders, navegadores de pestañas, …). Si no bastan los bloques estándar, tenemos el directorio de bloques para buscar alternativas teniendo la precaución de no instalar ningún bloque sin analizar antes la «calidad» del plugin que lo contiene. Si no encontramos nada parecido a lo que buscamos en el directorio podemos plantear una solución a medida para ese elemento, que puede pasar desde desarrollar un bloque propio, o utilizar otros recursos de programación que sean compatibles con el propio Editor de Bloques.
¿Cómo podemos ayudarte?
Podemos ayudarte a plantear la mejor alternativa técnica para sustituir KingComposer en tu instalación y que comiences a trabajar con el Editor de Bloques de WordPress, migrando gradualmente tus contenidos, para que puedas sacar todo el provecho de esta potente tecnología sin necesidad de largas esperas.
