Header Ads Widget

Ticker

6/recent/ticker-posts

Cree un bloque Gutenberg personalizado mínimo en WordPress

 Empecé a jugar con el nuevo editor de Gutenberg en WordPress, y la experiencia es mucho más moderna que la del antiguo editor de TinyMCE que existe desde hace unos buenos 15 años (¡y he tenido blogs durante casi ese tiempo!).

En lugar de editar todo el contenido de la publicación a la vez, el editor de Gutenberg trabaja con bloques de contenido que se pueden reordenar, con un aspecto limpio similar al editor de Medium.

WordPress viene con muchos bloques de forma predeterminada para elementos estándar como listas, botones o galerías de imágenes (consulte https://gogutenberg.com/blocks/  para ver  todos los bloques que vienen integrados). También puede guardar los bloques que ha usado en una publicación para reutilizarlos en otras publicaciones.

Para un flujo de trabajo de blogs realmente efectivo, necesitará crear nuevos bloques para ampliar las funcionalidades del editor. Para otro blog que poseo ( https://robotsbench.com/ ), quería usar la etiqueta HTML <aside> que no está disponible en los bloques predeterminados para poder darle un estilo específico en mi tema.

Implicó más código del que esperaba y hay muchos pasos. Aún así, una buena sorpresa es que la mayoría del código del complemento está en React (JavaScript) en lugar de los scripts PHP utilizados para los complementos estándar. Aún necesitará un poco de PHP para empaquetarlo como un complemento de WordPress, pero es principalmente un texto estándar que se puede generar.

Este tutorial lo guiará a través de la creación de un complemento para usar la etiqueta <aside>. Veremos como:

  • Configurar las herramientas adecuadas para comenzar.
  • Cree el texto estándar para el complemento.
  • Agrega un campo de texto enriquecido para agregar contenido al bloque.
  • Agrega estilos CSS al bloque.

Configurar el entorno

Antes de que comencemos a crear la plantilla del complemento, deberá instalar lo siguiente en su computadora para seguir adelante.

Ya tendrá todo esto si ya está desarrollando en JavaScript y es dueño de un blog, pero aquí está para completarlo:

  • Un  editor de código  para editar archivos PHP, JavaScript y CSS. En este momento, mi favorito es Visual Studio Code en  https://code.visualstudio.com/ .
  • npm versión 5.3 o más  para crear la plantilla, obtenga las dependencias necesarias y empaque el complemento en  https://www.npmjs.com/get-npm .
  • Una  instalación en vivo o local de WordPress con el editor Gutenberg  para probar el complemento. El editor de Gutenberg ahora viene habilitado de forma predeterminada en WordPress. Usé Local by Flywheel para hacer esto.

Generar una plantilla de complemento vacía

Vamos a utilizar una herramienta llamada  create-guten-block  ( https://github.com/ahmadawais/create-guten-block ) para crear una plantilla para nuestro nuevo complemento y subirla a su blog para probar todo el proceso primero . Solo contendrá un bloque en este tutorial, pero puede agregar todos sus bloques personalizados en un solo complemento.

En la línea de comando, use el siguiente comando para generar un complemento llamado  cp-aside-gutenberg-block .

1
npx create-guten-block cp-aside-gutenberg-block

Su complemento recién creado estará en una   subcarpeta cp-aside-gutenberg-block de la carpeta actual. Para preparar su complemento para cargarlo en su instalación de WordPress, navegue hasta la carpeta del complemento y compílelo.

1
2
cd cp-aside-gutenberg-block
npm run build

Para implementar el complemento, agregue los siguientes archivos en la   carpeta cp-aside-gutenberg-block a un archivo .zip:

1
2
3
\dist
\src
plugin.php

Puede incluir todos los demás archivos para tener el código fuente completo de su complemento en su blog, pero WordPress no los utilizará. Si los incluye, ignore la   carpeta \ node_modules : es una carpeta bastante grande y siempre puede descargar el contenido nuevamente usando el  comando npm install si necesita volver a crearlo  .

Impleméntelo como lo haría con cualquier otro complemento, usando el  menú Complementos / Agregar nuevo  en WordPress y haciendo clic en el botón  Cargar complemento  para seleccionar el archivo .zip que acaba de crear. Actívelo y ahora debería aparecer como activo en su lista de complementos.

A partir de ahí, el nuevo bloque aparecerá en la lista de bloques cuando edites una publicación.

El bloque se puede representar de manera diferente en el editor y en la publicación final del blog. Con el texto estándar, se mostrará en el editor de la siguiente manera:

Y en la publicación real (o en la vista previa de la publicación):

¿Qué hay en el Boilerplate?

La plantilla ha generado muchos archivos para el complemento. Esto es lo que se incluye en el complemento que acabamos de probar con la plantilla generada:

Muchas cosas aquí le resultarán familiares si ha trabajado anteriormente en una aplicación React. Aquí están las partes más interesantes:

  • / dist:  Los archivos frontend que creamos con el  comando npm run build  y que deben implementarse.
  • / src:  contiene todo el código fuente del complemento (tanto el frontend en JavaScript como el backend en PHP).
  • package.json:  describe las diversas dependencias necesarias y los comandos que se pueden ejecutar. Solo necesitará editarlo si necesita dependencias de JavaScript adicionales. De forma predeterminada, solo depende de la  biblioteca cgb-script  que extrae todo lo demás.
  • plugin.php:  el archivo estándar necesario para un complemento de WordPress.

La parte más interesante es el   archivo src / block / block.js que contiene el JavaScript para el complemento:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
import './style.scss';
import './editor.scss';
 
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
 
registerBlockType('cgb/block-cp-aside-gutenberg-block', {
   title: __('cp-aside-gutenberg-block'),
   icon: 'shield', // Icon used for the block from Dashicons
   category: 'common',
   edit: function(props) {
      return (
         <div className={ props.className }>Hello from the backend.</div>
         );
   },
   save: function(props) {
      return (<div>Hello from the frontend.</div>);
   },
} );

La API de bloques de Gutenberg utilizada para ampliar el editor hace que el  método registerBlockType  esté disponible para agregar sus propios bloques. El  método registerBlockType  describe el bloque y lo que sucede cuando se muestra para el editor o desde una publicación.

Incluye metadatos sobre el bloque como su  título ,  icono  y  categoría  en el editor. También incluye las siguientes dos funciones donde vive la mayor parte de la lógica del bloque:

  • editar : Los campos que se muestran en el editor de Gutenberg para modificar el contenido del bloque.
  • guardar : Los componentes que describen cómo renderizar el bloque en la publicación. El marcado renderizado se serializa y guarda con el resto de la publicación, por lo que React no es necesario al mostrar la publicación.

Agregar un campo de texto enriquecido

Ahora que hay un bloque básico disponible, modifiquémoslo para mostrar el contenido como una etiqueta HTML <aside>. Al mismo tiempo, también agregaremos un campo de texto enriquecido editable para que podamos agregar este contenido desde el editor.

Para agregar el campo editable, el bloque ahora debe almacenar un valor en el bloque, ya que necesita renderizarlo. En Block API, los valores se registran como una lista de atributos en el  método registerBlockType  .

Los atributos se comportan de manera similar al estado en React, pero contienen información adicional para que puedan ser administrados por Block API. La definición del atributo especifica cómo asignar el contenido renderizado guardado en el bloque al contenido.

Este bloque tendrá un solo atributo llamado  contenido . Este atributo buscará los hijos dentro del elemento descrito por el  selector .cp-aside-gutenberg-block-content  . El tipo de contenido es una matriz porque el bloque contendrá muchos párrafos (<p>) creados por el editor de texto enriquecido.

1
2
3
4
5
6
7
attributes: {
    content: {
        type: 'array',
        source: 'children',
        selector: '.cp-aside-gutenberg-block-content'
    }
},

La siguiente documentación incluye todos los tipos de datos admitidos por la   propiedad de atributos :  https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/ .

Editando el contenido del bloque

Al editar la publicación en Gutenberg, el  método de edición  recibirá el valor actual de los  atributos  como parámetro para que pueda mostrar los controles necesarios para editarlos. También recibe un  setAttributes  para actualizar el valor actual de los atributos cuando se edita el control.

01
02
03
04
05
06
07
08
09
10
11
12
13
edit: ({ attributes, setAttributes }) => {
    const updateContent = (value) => {
        setAttributes({content: value})
        }
 
    return (
        <RichText tagName="aside"
                  multiline="p"
                  value={attributes.content}
                  className="cp-aside-gutenberg-block-content"
                  onChange={updateContent} />
    );
}

Esos valores se usarán para inicializar el  control RichText  ya disponible con Gutenberg (vea el ejemplo completo en la parte inferior de la publicación para ver cómo importarlo en su bloque).

Como es un control React, el nombre del atributo para la clase CSS del control es  className en  lugar de  class  en HTML. También puede especificar qué tipo de etiqueta es el padre del control, por lo que en ese caso usaremos <aside> para obtener el resultado que deseamos.

Cuando cambia el contenido del editor, se llama al método especificado en el  atributo onChange  del  control RichText  y se actualiza el valor actual.

Guardar el contenido del bloque

Cuando  se llama al método save  para representar el control y guardar el resultado, también recibe el valor actual de los  atributos  como parámetro (pero no el  método setAttributes  ya que no cambiará el valor actual).

1
2
3
4
5
6
7
save: (props) => {
    return (
        <RichText.Content tagName="aside"
                          value={props.attributes.content}
                          className="cp-aside-gutenberg-block-content" />
    );
}

Luego usa el  control RichText.Content  para representar el valor correctamente como texto enriquecido para que se pueda mostrar más tarde, de modo que los parámetros sean similares al  control del editor RichText  .

CSS para el bloque

Para completar el complemento, agreguemos este pedacito de CSS en  src \ block \ style.scss  para mostrar un pequeño borde alrededor del bloque lateral . Lo he mantenido simple ya que lo más probable es que se edite a nivel de tema.

Este estilo se aplica en el editor y en la vista previa de la publicación; También hay un   archivo src \ block \ editor.scss ya creado para estilos específicos del editor.

1
2
3
4
5
6
.cp-aside-gutenberg-block-content {
  border:3px dashed #160c28;
  margin: 1.5em 3em 1.5em 3em;
  padding: 1em;
  background-color: #e1efe6;
}

Versión final del bloque

Aquí está el complemento completo. Observe la importación para poder usar el  control RichText  que mencioné anteriormente.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import './style.scss';
import './editor.scss';
 
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;
 
registerBlockType('com-cindypotvin/cp-aside-gutenberg-block', {
    title: 'Aside Box',
    description: 'Block showing a <aside> HTML element.',
    icon: 'editor-justify',
    category: 'formatting',
    attributes: {
      content: {
          type: 'array',
          source: 'children',
          selector: '.cp-aside-gutenberg-block-content'}
    },
    edit: ({ attributes, setAttributes }) => {
        const updateContent = (value) => {
            setAttributes({content: value})
            }
        return (
            <RichText tagName="aside"
                      multiline="p"
                      value={attributes.content}
                      className="cp-aside-gutenberg-block-content"
                      onChange={updateContent} />
        );
    },
    save: (props) => {
        return (
            <RichText.Content tagName="aside"
                              value={props.attributes.content}
                              className="cp-aside-gutenberg-block-content" />
        );
    }
});

Publicar un comentario

0 Comentarios