Hackeando el Editor de WordPress

Tiempo de lectura aprox: 5 minutos, 59 segundos

Hackeando el editor de WordPress o Mejorando el editor de WordPress.

En muchas ocasiones, el editor interno de WordPress es suficiente para realizar las tareas normales en la publicación de tu bitácora.

Pero hay ocasiones en las que se queda, hmmmm, corto. Me refiero a que algunos de nosotros, usamos formas de destacar ciertas palabras o grupos de
palabras, dentro de un mismo párrafo.

Lo que existe

El editor está pensado para que un usuario escriba contenido, sin involucrarse mucho en la maquetación, es decir, en lo bonito o adecuado a la estética del grupo.

Y para eso propósito, funciona bastante bien, tanto en el formato de escritura Visual, como en escritura en HTML.

Pero como las modas cambian, a ese editor se le conoce ahora como «Editor Clásico» y se ha presentado un nuevo editor conocido con el nombre en clave de «Gutenberg» o «Editor de Bloques».

En ocasiones sin embargo, el escritor es a la vez editor y, debe preocuparse de todos los aspectos de la escritura, incluido su aspecto visual, la maquetación.

Para muestra, un botón

Si estás usando el editor clásico y quieres escribir una línea como:

Parece fácil ¿verdad? Hay una palabra resaltada en un tono más oscuro, letras «más gordas», lo que los que están habituados a la maquetación llaman «negrita». Eso es fácil, el editor Visual dispone de un botón en su barra de herramientas, como ves en esta imagen.

Ahora viene lo interesante, hay dos palabras que aparecen en color rojo (máxima legibilidad), que es como han decidido los creadores de la identidad corporativa que deben aparecer las palabras importantes.

Por más que te esfuerces, no hay un botón en el editor que te permita pintar de rojo una o más palabras. ¡Ups! no es cierto, si hay un botón que te permite pintar de color el texto, se llama color de texto, como se ve en la imagen.

Pero … ¿Qué pasaría si los creadores de la identidad corporativa deciden que las palabras resaltadas deben estar en una tipografía distinta y un color distinto y un tamaño distinto?

Hackeando el editor.

Pues resulta que ya no es tan sencillo, el tipo de fuente tipográfica está definido para un tipo de bloque y, el bloque mínimo que contempla el editor es el párrafo.

Si deseas hacer cambio en medio de un párrafo, tienes que usar el editor HTML y definir tu mismo, las reglas. Si sabes un poco de maquetación, sabrás que esta inserción se realiza mediante la etiqueta <span></span>, y dentro de esa etiqueta, el atributo class=.

O sea, deberías poner, por ejemplo: <span class=»resaltado»>máxima legibilidad</span> y luego, hay que complementar eso con el estilo en la hoja de estilos del Tema, en donde los desarrolladores han definido el estilo. Por ejemplo:

.resaltado {
  color: rgb(255, 113, 57);
  font-weight: bold;
  font-family: monospace;
  font-size: 1.5rem;
}

Y sí, ya estás listo, si escribes el párrafo:

El lector de tu blog verá:

Bueno, pues si este es tu caso, voy a contarte cómo puedes crear un nuevo botón para el editor clásico, de forma que puedas aplicar el estilo deseado a una sección del párrafo.

¿Cómo funciona?

El editor en WordPress (recuerda, hablo del Editor Clásico) es bastante sencillo en su funcionamiento y basa su operación en dos partes básicas, la parte de presentación visual del contenido y la parte de entrada de texto.

Hago esta diferenciación para visualizar los dos entornos, el local (en el servidor) de representación del contenido de la base de datos y, el remoto (en el dispositivo del usuario) que recoge el texto y lo envía al servidor para que se convierta en el contenido de la base de datos.

Esto es explicado a grandes rasgos y seguro que alguno podréis decir: ¡no es cierto, no es así …! pero os ruego que me permitáis esta «licencia» para que nos entendamos todos.

Siguiendo con esta separación, tenemos dos puntos de acción:

1. La parte local, el archivo functions.php de tu Tema (preferiblemente, tu Tema Hijo).
2. La parte remota, un programa en JavaScript, que interactúa con el servidor, para que el editor te ofrezca una opción que no te ofrece normalmente.

¡Empezamos!

Hackeando el editor.

En el servidor

Para el funcionamiento del editor, tenemos que decirle a WordPress que realice un pequeño cambio y que aplique una modificación en su comportamiento. El código que debemos insertar en el archivo functions.php es:

/* ************************************ */
/* add custom button in mce editor */
function slwp_add_mce_button() {
  if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
    return;
  }
  if ( 'true' == get_user_option( 'rich_editing' ) ) {
    add_filter( 'mce_external_plugins', 'slwp_add_tinymce_plugin' );
    add_filter( 'mce_buttons', 'slwp_register_mce_button' );
  }
}
add_action('admin_head', 'slwp_add_mce_button');

function slwp_add_tinymce_plugin( $plugin_array ) {
  $plugin_array['style_select'] = get_stylesheet_directory_uri() .'/js/tiny_estilos.js';
  return $plugin_array;
}

function slwp_register_mce_button( $buttons ) {
  array_push( $buttons, 'style_select' );
  return $buttons;
}

Estas tres funciones realizan las labores de:

slwp_add_mce_button()

Comprueba si el usuario tiene facultad para editar y, si es así, invoca a las otras funciones.

slwp_add_tinymce_plugin( $plugin_array )

Define el botón en el editor que, en este caso, es un campo de selección cuyos valores están definidos en el archivo del programa en JavaScript

slwp_register_mce_button( $buttons )

Crea el botón en el editor, insertando un arreglo con la definición del botón.

Hackeando el editor.

En el dispositivo remoto

Me refiero al dispositivo remoto, porque puede ser un PC, una Tablet, un Smartphone. Lo único necesario es que cuente con un navegador de Internet que entienda el lenguaje JavaScript (y esté en disposición de hacer uso de él 😜).

Por supuesto, no tenemos acceso a ese dispositivo, y no podemos instalar en él una aplicación, pero si podemos enviarle un archivo con el código JavaScript que ha de ejecutar.

Para eso, almacenamos en el servidor el archivo con el código y se lo enviamos a cualquier dispositivo que esté intentando realizar labores de edición.

Recuerda que en la función slwp_add_tinymce_plugin(), le decimos a WordPress qué archivo queremos que envíe, en este caso: tiny_estilos.js, que está alojado en el directorio «js» del directorio del Tema.

El contenido del archivo tiny_estilos.js es:

/* insertar desplegable en tiny_mce */
(function() {
  var estilos = ['resaltado', 'resaltado1', 'resaltado2', 'negrita', 'italica'];
  
  tinymce.PluginManager.add( 'style_select', function( editor ){
    
    var items = [];

    tinymce.each( estilos, function( styleName ){
      items.push({
        text: styleName,
        onclick: function(){
          var content = tinyMCE.activeEditor.selection.getContent();
          editor.insertContent( '' + content + '' );
        }
      });
    });

    editor.addButton( 'style_select', {
      type: 'menubutton',
      text: 'Estilo',
      menu: items
    });

  });
})();

Este pequeño programa instruye al editor Tiny_MCE, el «Editor Clásico» de WordPress, para que incluya entre sus opciones, un desplegable con las opciones de estilo que necesitamos.

En este caso concreto, las opciones son las que se recogen en la matriz «estilos» y que son: ‘resaltado’, ‘resaltado1’, ‘resaltado2’, ‘negrita’, ‘italica’.

Ahora depende de cómo se definan cada uno de esos estilos, en el correspondiente archivo style.css del Tema en uso. Por ejemplo como se dice más arriba, para la definición del estilo primero:

...
.resaltado {
  color: rgb(255, 113, 57);
  font-weight: bold;
  font-family: monospace;
  font-size: 1.5rem;
}
...

Hackeando el editor.

Truco

Uno de los mayores inconvenientes del modo de edición Visual, es que no se consigue apreciar los cambios de letra, color, u otra característica, salvo las funciones básicas como negrita o cursiva.

Para poder ver los estilos que se han diseñado y has aplicado a los párrafos, debes guardar como borrador lo que has escrito y hacer clic sobre el enlace que te aparece al principio de la entrada: «Borrador de entrada actualizado. Vista previa de la entrada».

Pero existe una forma de «engañar» al editor, para que represente (en su forma «Visual») los estilos que queramos definir. Se trata de la creación de un archivo con el nombre de custom-editor-style.css.

Este archivo contiene la hoja de estilo con las definiciones que queramos que use el editor, estos estilos pueden contener la definición de cómo queremos ver los encabezados «h» o la definición de «resaltado», entre otros.

Para que funcione, has de subir al servidor el archivo de estilo, en el mismo directorio del Tema (junto a la otra hoja de estilos «style.css» 😉).

El editor de Bloques

Todo lo que hemos dicho hasta ahora sobre la separación de funciones y entornos, es cierto en cualquier caso, pero el Editor de Bloques tiene un comportamiento distinto del Editor Clásico, por lo que requiere un tratamiento distinto.

En el servidor

Las funciones que debemos insertar en el archivo functions.php son:

function slwp_span_guten(){
    wp_enqueue_script(
        'span_guten',
        plugins_url('span_guten.js'),
        array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-editor'),
    '1.0', true
        //filemtime(plugin_dir_path( __FILE__ ).'span_guten.js') 
    );
}
add_action('enqueue_block_editor_assets', 'span_guten');

Mientras que el archivo JavaScript necesario, contiene:

const { createElement, Fragment } = window.wp.element
const { registerFormatType, toggleFormat } = window.wp.richText
const { RichTextToolbarButton, RichTextShortcut } = window.wp.editor;
[
  {
    name: 'resaltado',
    title: 'Resaltado',
    lang: 'class',
  icon: 'format-chat',
  },
  {
    name: 'resaltado1',
    title: 'Resaltado1',
    lang: 'class',
  icon: 'format-chat',
  },
   {
    name: 'resaltado2',
    title: 'Resaltado2',
    lang: 'class',
  icon: 'format-chat',
  },
   {
    name: 'centrado',
    title: 'Centrado',
    lang: 'class',
  icon: 'format-chat',
  },
   {
    name: 'italica',
    title: 'Italica',
    lang: 'class',
  icon: 'format-chat',
  }
].forEach( ({ name, title, lang, icon} ) => {
  const type = "advanced/${name}" registerFormatType(type, { title, tagName: 'span', className: lang, edit ({ isActive, value, onChange }) { const onToggle = () => onChange(toggleFormat(value, { type })) return ( createElement(Fragment, null, createElement(RichTextToolbarButton, { title, icon: icon, onClick: onToggle, isActive, className: "toolbar-button-with-text toolbar-button__advanced-${name}" }) ) ) } }) })

Y al igual que en el caso del Editor Clásico, tu hoja de estilos deberá contener las definiciones de estilo que hayas incluido, como:

...
.resaltado {
  color: rgb(255, 113, 57);
  font-weight: bold;
  font-family: monospace;
  font-size: 1.5rem;
}
...

Hackeando el editor.

Conclusión

Ahora que está de moda usar el anglicismo de Hackear (incorrecto, por otro lado) para decir «Mejorar» o «Alterar», no vamos a ser menos y, por otro lado, siempre viene bien adquirir nuevos conocimientos. 😜

Recuerda que puedes también ampliar las capacidades de editor, instalando algún plugin de los que encuentras en el repositorio oficial de WordPress.

Mientras tanto, recuerda, #UsaMascarilla, #LavateLasManos, juega, experimenta y, sobre todo, ¡divertirte!

---

¡Gracias por leernos!

¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!