El editor de bloques de WordPress, también conocido como Gutenberg por su nombre en clave, sigue acaparando gran parte de nuestras entradas del blog. Pero, ¿qué queréis que hagamos si cada día aparecen cosas nuevas sobre esto? ?
Nos prometieron que con Gutenberg todo sería más fácil. Pero si tienes un blog en el que más de una vez (y de dos) hablamos de temas técnicos en los que metemos fragmentos de código (PHP, JavaScript, y demás), ¿es esto ahora más fácil que con el editor clásico?
La respuesta depende del gusto del que escribe, pero en mi caso te diré que sí, hoy en día meter fragmentos de código en las entradas de nuestro blog es más sencillo que con el editor clásico. Pero también te diré que ha necesitado un esfuerzo previo por nuestra parte. Veamos a qué me refiero…
Para meter fragmentos de código dentro del editor clásico podías seguir varios caminos distintos. Uno de ellos era meter los fragmentos de código entre las etiquetas <pre> y </pre> de HTML. Esto para el caso de fragmentos de código que ocupan múltiples líneas.
Si sólo querías marcar añadir un trocito de código compuesto por pocas palabras, podías meter el código entre etiquetas <code> y </code>. Algo, por cierto, muy fácil de hacer seleccionado el código y utilizando el atajo de teclado ctrl + alt + x en Mac OS X (en Windows seguramente sea parecido).
Otra opción era utilizar un shortcode de terceros o algún plugin que nos ayudara a incluir fragmentos de código y a resaltar su sintaxis. Entre los plugins más populares para esto tenemos a Syntax Highlighter (ahora llamado Syntax Highlighter Evolved).
En su día recuerdo que habíamos usado este plugin en nuestra web para el resaltado de sintaxis de código. Lo bueno es que ahora se ha actualizado e incluye soporte para añadir bloques de código en el editor de bloques de WordPress.
Pero… ¿no incluye ya Gutenberg un bloque de código por defecto? La respuesta es que sí, pero este bloque de código que el editor de bloques trae no resalta la sintaxis de tu código. Simplemente utiliza una fuente mono-espaciada y no crea un nuevo bloque al pulsar la tecla intro. Pero por todo lo demás se comporta como un bloque de párrafo.
Si tienes la necesidad de añadir fragmentos de código en tus contenidos, es mucho más recomendable que utilices los bloques del plugin SyntaxHighlighter Evolved que los bloques de código por defecto de WordPress.
No quiero dejar de mencionar que el código original del plugin SyntaxHighlighter Evolved es de Alex Mills, que hace poco nos dejó después de perder la batalla contra la leucemia. La adaptación al editor de bloques la realizó Ian Dunn, como puedes ver aquí.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
¿Cómo añadimos fragmentos de código en Nelio?
Después de haber estado probando diferentes maneras de incluir fragmentos de código en WordPress a lo largo del tiempo, finalmente nos hemos decantado por escribir los fragmentos de código directamente en Gist y crear un tipo de bloque adicional para importar los Gists en el editor de bloques.
Gist es un servicio gratuito de GitHub para alojar fragmentos de código. Aquí tienes un ejemplo del resultado final de un bloque Gist que incluye código en PHP:
Lo que más nos gusta es el resaltado de sintaxis y que si hay que hacer cambios los podemos hacer directamente en el Gist (en la web de GitHub) y automáticamente se actualiza en nuestra web sin tener que hacer cambios allí.
En el editor de bloques, nuestro bloque Gist te permite incluir la URL del Gist y de ahí es capaz de sacar los diferentes fragmentos de código que el Gist contiene y mostrarlos todos o sólo uno de ellos. Todas las opciones las hemos metido en la barra lateral del bloque, como puedes ver a continuación:
Para la creación de este bloque de Gist nos hemos inspirado en la colección de bloques GhostKit, que tiene muchos otros tipos de bloque más. Te animo a probarlo.
Si quieres que subamos este bloque al repositorio de plugins de WordPress puedes meternos presión en la zona de comentarios. Y si metes código en tus contenidos de alguna otra forma, nos encantará que nos expliques cómo lo haces ?
Imagen destacada de Chris Ried en Unsplash.
Deja una respuesta