Saltar al contenido

Cómo crear bloques de Gutenberg personalizados

WordPress 5.0 ya está aquí y trae a todos los diseñadores web novedades y dolor por partes iguales.

Las novedades son varias, pero la más llamativa es el ya famoso editor por bloques llamado Gutenberg.

Bienvenido a WordPress 5.0

¿Qué es el editor Gutenberg?

 

Digamos que antes de la versión 5.0 teníamos un editor con dos pestañas: la de edición wysiwyg donde podíamos introducir código como si utilizásemos un editor de texto tradicional. Y la pestaña HTML donde podíamos introducir código HTML.

Hasta la versión 5.0 y mientras Gutenberg se desarrollaba, teníamos un plugin para poder utilizar dicho editor Guternberg o por el contrario, utilizar la vista tradicional.

Con la versión 5.0, ya solo tenemos disponible Gutenberg apareciéndonos los post y páginas antiguas como si de un bloque html se tratase.

Porque Gutenberg nos trae los bloques. Y también dolor, porque puede que nuestros temas o extensiones se rompan y veamos páginas web caídas o todas descolocadas.

Y es que muchos diseñadores de páginas (también conocidos como builders) pueden dejar de funcionar.

¿Es tan horrible como parece? Quizá lo mejor, es que nos familiaricemos primero con Gutenberg, esperemos a que todos los desarrolladores de plugins y temas se adapten a este nuevo sistema, y luego, cuando se vayan puliendo errores, ya pensar en actualziar a WordPress 5.0.

Hasta entonces, quizá mejor no actualizar.

Y mientras tanto, vamos aprendiendo un poco más sobre Gutenberg.

Nota: El tema no es tan horrible, siempre podremos volver al viejo editor instalando el plugin “diseñadores web”. Al menos hasta 2021.

Este blog ya está con la versión 5.0 y como verás, no hay nada roto.

¿Qué son los bloques de Gutenberg?

 

Una imagen es un bloque. Una cita es un bloque, un párrafo es un bloque, una lista es un bloque, etc. Y lo que haremos, es ir añadiendo bloques para ir configurando una página o post.

Añadir Bloque Gutenberg
Añadir Bloque Gutenberg

¿Cómo crear un bloque de Gutenberg?

 

Tenemos dos opciones, crearlo como un plugin de WordPress creado por nosotros o utilizar un plugin ya diseñado para tal función.

Vamos a ver las dos opciones.

Crear un bloque personalizado por nosotros mismos

Podemos crear bloques sencillos, por ejemplo, un párrafo con un texto estático, o bloques de complejidad media, como podría ser un bloque de cita donde podremos editar el texto. Y también podremos crear bloques complejos donde podríamos añadir textos, estilos e incluso imágenes.

De hecho, a lo largo de los próximos años, WordPress se nos llenará de plugins y temas con bloques de todo tipo. Por ejemplo, cuadros para precios, tarjetas de presentación o de opiniones, etc.

De momento, y existiendo varias extensiones que nos permiten crear bloques personalizados sin introducir código, sólo vamos a ver la creación de un bloque sencillo dejando los más complejos para la extensión profesional.

Nos ponemos a ello…

 

El plugin con el bloque personalizado

 

Un bloque personalizado es un plugin con código de backend y código de frontend (para el editor). El primero en PHP y el segundo en javascript.

Los bloques de Guternberg se crean con React y sintaxis de react JSX aunque nosotros utilizaremos ES5 para no tener que transpilar.

Los bloques se crean como un plugin donde existirán todos los ficheros necesarios.

Podemos utilizar el editor de código que más nos guste: Brackets, Visual Studio Code, Sublime Text, etc.

Desde un punto de vista técnico, un bloque es un simple objeto Javascript que consta de las siguientes propiedades:

  • title
  • icon
  • category
  • attributes
  • edit
  • save
Categoría

El título y el icono son bastante auto-explicativos, sin embargo, los atributos restantes son más interesantes.

La categoría de un bloque determina dónde aparecerá en el menú “Agregar bloque”, las opciones actualmente incluyen: Más utilizados, comunes, Formatos, Elementos de Diseño, widgets e incrustados.

Atributos

Los atributos de un bloque representan los datos reales que el bloque manipulará. Por defecto, estos metadatos se serializan en la salida en formato JSON en post_content.

Gutenberg también nos permite especificar fuentes alternativas tales como el metadatos de la publicación o desde el propio contenido. Además del nombre y la fuente, también se pueden proporcionar datos como tipos y valores predeterminados de un atributo para ayudar en la inicialización y validación.

Edit y Save

Ambos atributos son funciones, el método edit devuelve una plantilla que mostrará cómo aparecerá el bloque dentro del editor de WordPress. El método save devuelve una plantilla que muestra cómo se emitirá el bloque en el post_content.

Registro de bloques personalizados de Gutenberg

Los bloques Gutenberg deben estar registrados tanto desde el front-end en Javascript como desde el backend en PHP. Para registrar un bloque en el lado Javascript debemos llamar a la función registerBlockType desde el espacio de nombres wp.blocks y pasarle el nombre de bloque precedido por un espacio de nombres y su objeto de bloque.

Contenido de un bloque.

No es más que una extensión con el fichero php que define la extensión y el fichero en javascript para que funcione en el editor.

A mayores, podemos crear carpetas con recursos como fuentes, imágenes, estilos. Nosotros no nos complicaremos tanto y haremos algo sencillo que se pueda entender.

Crear bloque con contenido estático

Vamos a lo práctico y dejaremos la teoría por ahora. Es todo un logro que aun sigas aquí 😉

Crearemos el directorio del plugin en la carpeta de nuestro WordPress.

Más en concreto, dentro de /wp-content/plugins

Por ejemplo, la llamaremos mi-bloque

carpeta plugin
carpeta plugin

 

y dentro de este nuevo directorio, crearemos el fichero principal del plugin y lo guardaremos como mi-bloque.php.

Este archivo contendrá los detalles del plugin usado por WordPress para identificar el plugin, así como el código que usamos para cargar nuestro archivo Javascript.

?php
/**
 * Plugin Name: Bloque Gutenberg: Mi Bloque
 * Plugin URI: https://bitbucket.org/danimardo/bloque-gutenberg
 * Description: Un ejemplo de un bloque muy simple: Un párrado con un texto
 * Author: mardomingo
 * Author URI: https://mardomingo.es
 * Version: 1.0.0
 * License: GPL2+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
// Salimos si se accede directamente.
if ( ! defined( 'ABSPATH' ) ) {
   exit;
}
 
/**
  * Encola en el editor los recursos del bloque.
 * wp-blocks: registerBlockType() Es el método para registar bloques.
 * wp-element: wp.element.createElement() es el método para crear elementos.
 * wp-i18n:    __() es un método para la internacionalización.
 *
 */
function mdlr_static_block_example_backend_enqueue() {
   wp_enqueue_script(
      'mdlr-static-block-example-backend-script', // Manejador único
      plugins_url( 'bloque.js', __FILE__ ), // bloque.js: Es aquí donde registramos el bloque
      array( 'wp-blocks', 'wp-i18n', 'wp-element' ), // Dependencias
      filemtime( plugin_dir_path( __FILE__ ) . 'bloque.js' )
 
   );
}
add_action( 'enqueue_block_editor_assets', 'mdlr_static_block_example_backend_enqueue' );

Como se puede ver, este archivo comienza con los detalles del plugin y luego contiene una breve comprobación para asegurarse de que el plugin se está utilizando en su contexto correcto y no se está accediendo directamente. Finalmente, contiene el código para cargar el archivo Javascript que contendrá el resto del código para nuestro bloque personalizado de Gutenberg. O sea, cargará bloque.js.

Por lo tanto, creamos bloque.js y ponemos este código:

/**
 * Ejemplo de bloque estático
 *
 * https://bitbucket.org/danimardo/bloque-gutenberg/src/master/bloque.js
 */
( function() {
    var __ = wp.i18n.__; //  __() Para la internacionalización
    var createElement = wp.element.createElement; // wp.element.createElement() sirve para crear elementos
    var registerBlockType = wp.blocks.registerBlockType; // registerBlockType() sirve para registrar bloques/**
     * Registrar bloque
     *
     * @param  {string}   name     Nombre del bloque.
     * @param  {Object}   parámetros de configuración del bloque.
     * @return {?WPBlock}          El bloque en si mismo, si se registra correctamente,
     *                             de otra forma "undefined".
     */
 
    registerBlockType(
        'mi-bloque/bloque-estatico', // El nombre del bloque. Es una cadena que contiene un namespace como prefijo. Por ejemplo: mi-bloque/bloque-estatico.
        {
            title: __( 'Bloque estático de ejemplo' ), // Titulo que veremos. la función __() permite la internacionalización.
            icon: 'dashicons-smiley', // icono de Dashicons. https://developer.wordpress.org/resource/dashicons/.
            category: 'common', // Caegoría del bloque. Puede ser: common, formatting, layout widgets, embed.// Define el bloque para el editor
            edit: function( props ) {
                return createElement(
                    'p', // Tipo de tag. En este caso un párrafo
                    {
                        className: props.className,  // Nombre de la clase que es generada utilizando el nombre del bloque como frefijo con wp-block-, y en vez de utilizar el / del namespace se utiliza -.
                    },
                    'Wordpress con Gutenberg es maravilloso' // Contenido del bloque
                );
            },// Definimos la forma de guardar
            save: function( props ) {
                return createElement(
                    'p', // Tipo de tag. En este caso un párrafo
                    {
                        className: props.className,  // Nombre de la clase que es generada utilizando el nombre del bloque como frefijo con wp-block-, y en vez de utilizar el / del namespace se utiliza -.
                    },
                    'Wordpress con Gutenberg es maravilloso' // Contenido del bloque
                );
            },
        }
    );
})();

Lo explicamos un poco:

var __ = wp.i18n.__; – Podemos usar esta función para permitir que las cadenas dentro de nuestro plugin se traduzcan automáticamente.

var createElement = wp.element.createElement;  – Podemos utilizar esta función para crear fácilmente elementos que se emitirán tanto en el editor como en el contenido del mensaje guardado.

var registerBlockType = wp.blocks.registerBlockType; – Esta es la función que usamos para registrar nuestro bloque personalizado de Gutenberg.

A continuación, registramos nuestro bloque personalizado usando registerBlockType(). Esta función acepta dos parámetros:

  • Nombre del bloque – Esta es una cadena que contiene el nombre de nuestro bloque personalizado con un prefijo de espacio de nombres. Por ejemplo: mi plugin/mi bloque personalizado.
  • Configuración del bloque – Este es un objeto que maneja todo lo demás sobre nuestro bloque personalizado y que es todo el código que va dentro de los corchetes y que paso a explicar ahora:

 

Configuración del bloque

El objeto de configuración del bloque es donde se realiza el trabajo real. Empezamos por definir algunas opciones para nuestro bloque personalizado. Estos ajustes ayudan a identificar nuestro bloque dentro del editor y a definir dónde debe encontrarse. Aquí están los ajustes más básicos:

title – El título del bloque se usará para identificar nuestro bloque dentro del editor.

El icono del bloque ayuda a identificar más fácilmente nuestro bloque.

category – La categoría de bloque se utiliza para agrupar nuestro bloque junto con otros basados en rasgos comunes (común, formato, widgets de diseño, incrustar).

Ahora ya podemos activar el plugin

 

Activar plugin
Activar plugin

He aquí cómo se ve nuestro bloque con esta configuración cuando vamos a añadir un nuevo bloque dentro del editor de Gutenberg:

Nuevo bloque

 

Y el contenido se verá así:

Bloque añadido
Bloque añadido

 

Que traducido a código html sería:

<p class=”wp-block-mi-bloque-bloque-estatico”>Wordpress con Gutenberg es maravilloso</p>

 

Vamos a ver más en profundidad las funciones edit y save.

 

Función edit

Teníamos la función edit así:

 edit: function( props ) {
                return createElement(
                    'p', // Tipo de tag. En este caso un párrafo
                    {
                        className: props.className,  // Nombre de la clase que es generada utilizando el nombre del bloque como frefijo con wp-block-, y en vez de utilizar el / del namespace se utiliza -.
                    },
                    'Wordpress con Gutenberg es maravilloso' // Contenido del bloque
                );
            },

La función de edición define cómo se comporta nuestro bloque en el editor.

En este ejemplo, nuestra función de edición devuelve un solo elemento. Estamos utilizando la función createElement mencionada anteriormente para crear este elemento. La función createElement acepta tres parámetros:

  • Tipo de etiqueta – El tipo de etiqueta HTML que se debe crear. En este caso p
  • Ajustes – Cualquier ajuste asociado con este elemento. En este caso, sólo el nombre de la clase. Hay muchos otros ajustes disponibles, algunos de los cuales se tratarán más adelante en este tutorial.
  • Contenido – El contenido dentro del elemento

 

Función save

 Teníamos la función save así:

save: function( props ) {
                return createElement(
                    'p', // Tipo de tag. En este caso un párrafo
                    {
                        className: props.className,  // Nombre de la clase que es generada utilizando el nombre del bloque como frefijo con wp-block-, y en vez de utilizar el / del namespace se utiliza -.
                    },
                    'Wordpress con Gutenberg es maravilloso' // Contenido del bloque
                );
            },

Definir cómo se guarda un bloque de Gutenberg es similar a definir cómo se edita. Debido a que se trata de un bloque estático sin edición de contenido, las funciones de edición y guardado son exactamente las mismas. En la siguiente sección habrá diferencias entre las funciones de edición y guardado.

 

Y hasta aquí como crear un bloque por nosotros mismos. Ahora vamos a ver algo mucho más sencillo y apasionante: crearlos con un plugin gráfico. Este nos dará un montón de funcionalidades que seguro te van a gustar.

 

En desarrollo…

Download Premium WordPress Themes Free
Download Premium WordPress Themes Free
Premium WordPress Themes Download
Free Download WordPress Themes
udemy paid course free download