Tutorial Gutenberg, cómo programar tu primer bloque

En todos los lenguajes de programación siempre hay un «hola, mundo!», el típico «hello, world!«. Y en esto de programar bloques, se podría traducir a crear un bloque que muestre un texto que introduzcas. Esta, es la razón de que vayamos a programar un bloque de texto sencillo pero eficaz.

Creación del bloque

Partiendo de lo explicado en la entrada sobre la preparación de un espacio de trabajo, empecemos a configurar el bloque. Para esto, primero tendremos que abrir la carpeta de Brok Guten Block y abrir una terminal en ella. Luego, ejecutaremos el comando npm run crear nombre-bloque, donde nombre-bloque es el nombre del bloque que quieras crear.

Con esto, nos dirigiremos a la carpeta src/nombre-bloque y, una vez allí, tenemos que hablar ahora de algunos puntos. Expliquemos la estructura básica de un bloque, muy importante para aprender a programarlos
????. Todo bloque contiene normalmente como mínimo la siguiente estructura:

El archivo block.js, contenido público

El archivo block.js une toda la estructura unificando el código y configurando el bloque. También, especifica los atributos del mismo, el método registerGutenBlock y el contenido que verán del bloque los lectores. De lo anterior ya crearemos entradas independientes para el tutorial debido a su complejidad.

En este archivo, tendremos que rellenar la variable attrs con un atributo para almacenar el contenido de un párrafo. Simplemente, añadiendo este código, podremos generar un atributo que almacene el texto que introduzcamos en el párrafo:

/**
 * Atributos del bloque
 */

// Pasamos de esto
const attrs = {
  mwmAtributos, //Atributos de componentes internos de mowomo
};

// A esto otro
const attrs = {
  mwmAtributos,  //Atributos de componentes internos de mowomo
  parrafo: {
    type: "string",
    source: "html",
    selector: ".parrafo",
    default: "Texto del párrafo"
  }
};

Luego, en la función save(), cambiaremos varios puntos. Primero, agilizaremos el acceso a los atributos creando variables intermediarias entre ellos y la función save():

// Pasamos de esta línea
const { } = attributes;

// A esta otra
const { parrafo } = attributes;

Terminaremos creando dentro del return y del <fragment> interior un párrafo cuyo valor será el del atributo parrafo. Para ello nos serviremos del componente RichText.Content, que mostrará el contenido recogido por otro RichText.

/**
 * Contenido del front-end del bloque
 */
return (
  <Fragment>
    <div className={"bloque-parrafo"}>
      <RichText.Content
        tagName={"p"}
        className={"parrafo"}
        value={parrafo}
      />
    </div>
  </Fragment>
);

De forma que, al final, quede este código en la función save():

save(props) {
    /**
     * Variables
     */
    const { attributes } = props;
    const { parrafo } = attributes;

    const estilos = {};

    /**
     * Funcionalidades
     */

    /**
     * Contenido del front-end del bloque
     */
    return (
      <Fragment>
        <div className={"bloque-parrafo"}>
          <RichText.Content
            tagName={"p"}
            className={"parrafo"}
            value={parrafo}
          />
        </div>
      </Fragment>
    );
  }

Como resultado, ya tendremos la parte pública del bloque programada, por lo que nos queda aún la parte del editor. Venga, ya estamos a la mitad del proceso, no queda nada para terminar.

El archivo editor.js, contenido del editor

Empecemos abriendo el archivo editor.js dentro de la carpeta components. Este archivo será un componente de react, de lo que hablaremos en otra entrada, y nos mostrará la parte del bloque en el admin de WordPress.

Todo lo haremos dentro del método render() del archivo. Comenzaremos, pues, añadiendo el atributo parrafo a las variables del método sacadas del attributes. Con esto, agilizaremos el trabajo con el atributo.

// Pasamos de esto
const { } = attributes;

// A esto
const { parrafo } = attributes;

Luego, seguiremos creando un input, que no es más que una entrada de texto, dentro del return. Para ello, nos serviremos del componente RichText para recoger el código que tecleemos por pantalla:

// Pasamos de esto
<Fragment>
  <Controles {...this.props} />
  <Inspector {...this.props} />
  <div className={"bloque-parrafo"}>
    // Insertar el componente aquí
  </div>
</Fragment>

// A esto otro
<Fragment>
  <Controles {...this.props} />
  <Inspector {...this.props} />
  <div className={"bloque-parrafo"}>
    <RichText
      tagName={"p"}
      className={"parrafo"}
      value={parrafo}
      onChange={valor => setAttributes({parrafo: valor})}
      placeholder={__("Introduce un texto")}
    />
  </div>
</Fragment>

Acabaríamos teniendo todo este código:

render() {
  /**
   * Variables
   */
  const { attributes } = this.props;
  const { parrafo } = attributes;

  const estilos = {};
   /**
   * Funcionalidades
   */

  /**
   * Contenido del editor
   */

  return (
    <Fragment>
      <Controles {...this.props} />
      <Inspector {...this.props} />
      <div className={"bloque-parrafo"}>
        <RichText
          tagName={"p"}
          className={"parrafo"}
          value={parrafo}
          onChange={valor => setAttributes({ parrafo: valor })}
          placeholder={__("Introduce un texto")}
        />
      </div>
    </Fragment>
  );
}

El componente RichText se sirve del atributo interno onChange para convertir el texto introducido valor dentro del atributo externo parrafo a través del setAttributes. Luego, muestra el valor recogido mediante el atributo interno value.

Una vez hecho esto, ya tendremos una entrada de código lista desde el editor para que nuestro bloque guarde texto.

Usando el bloque

Ejecutaremos ahora el comando npm start desde la raíz del proyecto para que se compile todo el código en un plugin estable. Simplemente, con entrar dentro de una entrada o una página y buscar nuestro bloque, ya podríamos usarlo.

Con esto ya terminamos el artículo sobre cómo programar tu primer bloque en Gutenberg. Puede que haya sido algo complicado o que no lo entendieras todo pero, ánimo, poco a poco acabarás haciendo grandes bloques. Ya sabes, si te ha gustado el artículo y has aprendido algo nuevo, compártelo y escribe un comentario con tu experiencia. Hasta el próximo artículo del tutorial, un saludo ✋.