Afortunadamente, el equipo de desarrollo de WordPress tiene un npm script útil para que pueda crear un complemento de bloque que crea un bloque de inicio para que pueda comenzar a funcionar rápidamente.

Por defecto, el tipo de complemento de WordPress que esto crea es un ‘bloque’, pero también nos brinda un buen punto de partida para otros tipos de complementos de Gutenberg.

requisitos previos

El nodo debe estar instalado en su máquina para que pueda usar el npmcomando (que significa Node Package Manager)
Instalación de WordPress
Editor de código
Acceso a la Terminal

Crea tu Complemento

Después de haber instalado el nodo en su máquina, debería tener acceso al npmcomando en su terminal.

Abra su terminal y asegúrese de tener cd‘d (Directorio cambiado) en la carpeta de complementos en su instalación de WordPress (por ejemplo, cd wp-content/plugins).

Una vez allí ejecuta el siguiente comando:

npm init @wordpress/block

Esto descargará todo lo que el script necesita para iniciar la compilación. Una vez que haya terminado, el script le hará una serie de preguntas que son necesarias para configurar su complemento.

Uso de la terminal para ejecutar el script de creación

Preguntas de configuración

El script hará las siguientes preguntas, aquí están mis respuestas de ejemplo:

El slug de bloque utilizado para la identificación (también el complemento y el nombre de la carpeta de salida): quiero que mi bloque se llame Wholesome Plugin, así que ingresé wholesome-plugin.
El espacio de nombres interno para el nombre del bloque (algo único para sus productos): como debería ser único para todos mis productos, ingresé wholesomecode, ya que este es el nombre de mi empresa.
El título de visualización para su bloque: ingresé el título del complemento, Wholesome Plugin.
La breve descripción de su bloque (opcional): ingresé " An example plugin to demonstrate the create-block-script".
El dashicon para que sea más fácil identificar su bloque (opcional): al mostrar rápidamente el recurso de WordPress Dashicons, lo elegí admin-pluginsporque tiene un ícono de complemento. Recuerde omitir dashicon- del prefijo dashicon al hacer esto.
El nombre de la categoría para ayudar a los usuarios a navegar y descubrir su bloque (use las teclas de flecha): elegí design. Aunque una categoría personalizada probablemente encajaría mejor.
El nombre del autor del complemento (opcional). Se pueden enumerar varios autores usando comas: ingresé wholesomecode.
El nombre corto de la licencia del complemento (opcional): presioné enter para aceptar GPL v2.0 o posterior.
Un enlace al texto completo de la licencia (opcional): presioné Intro para insertar la URL de la licencia GPL v2.0.
El número de versión actual del complemento: presioné enter para insertar 0.1.0.

Preguntas de configuración de secuencias de comandos

El script terminará de ejecutarse.

¿Lo que acaba de suceder?

Algunas cosas suceden mientras se ejecuta el script, estas son:

Crea la carpeta del plugin,
Genera todos los archivos del complemento (consulte la exploración del complemento para conocer los detalles de lo que hacen )
Instala las dependencias que necesita, incluido el @wordpress/scriptspaquete (esto hace el trabajo pesado en términos de construir el complemento)
Compila el código
Muestra una lista de comandos que puede usar

Comandos de compilación

Exploraremos estos más en la sección de exploración del complemento.

Uso del complemento

Antes de que pueda usar el complemento, deberá activarlo. Puede hacer esto eligiendo Pluginsdesde el menú de administración de WordPress y luego seleccionando activatebajo el nombre del complemento.

Activar el complemento

Ahora necesita editar una publicación en WordPress e insertar el complemento usando el editor de Gutenberg.

Insertar el bloque en una publicación

Tenga en cuenta que el complemento no hace mucho por defecto, solo crea un bloque. Sin embargo, proporciona un marco para que lo use para crear su propio complemento.

Visualización del bloque en el front-end

De forma predeterminada, el bloque se ve así en la parte delantera. Tenga en cuenta que tiene una apariencia ligeramente diferente, esto es deliberado para que pueda familiarizarse con el CSS en el frente y el backend de WordPress.

El bloque en la parte delantera

Explorando el complemento

Todo el propósito de Create Block Script es que usted cree su propio complemento. Exploremos los archivos que generó con más detalle:

Archivos generados

wholesome-plugin— Esta es la carpeta raíz del complemento, tiene el mismo nombre que el que ingresé para el ‘slug’ en las preguntas de configuración.

**/build**— Esta es la carpeta de compilación. Contiene todos los activos de JavaScript y PHP generados a partir de la /srccarpeta. Estos se ponen en cola a través del wholesome-notes.phparchivo del cargador principal.

**/build/index.assets.php**— Este archivo PHP se genera automáticamente cuando /srcse compila la carpeta. Contiene una variedad de todas las decencias de JavaScript del Editor de WordPress (Gutenberg) utilizadas por su complemento. Se pone en cola a través del wholesome-plugin.phparchivo del cargador principal.

**/build/index.css**— Este es el archivo CSS del editor y se pone en cola a través del wholesome-plugin.phparchivo del cargador principal.

**/build/index.js**— Este es el archivo JavaScript compilado principal y se pone en cola a través del wholesome-plugin.phparchivo del cargador principal.

**/build/style-index.css**— Este es el archivo CSS de front-end y se pone en cola a través del wholesome-plugin.phparchivo del cargador principal.

**/build/index.js.map**— Este archivo solo se genera cuando está compilando los activos para el modo de desarrollo (es decir, lo ejecuta npm starty no npm buildcuando está compilando sus activos). Es un archivo útil para los depuradores de JavaScript para ayudar a identificar los nombres de los archivos y los números de línea si se producen errores.

**/node_modules**— Esta es la carpeta en la que están instaladas todas las dependencias de JavaScript para su complemento.
**/src**— Esta es la carpeta que contiene todos los activos sin compilar para su complemento.
**/src/edit.js**— Esta es la función de edición del bloque y controla cómo se muestra el bloque en el editor de bloques cuando está en modo de edición.
**/src/editor.scss**— Este es el SCSS sin compilar para el editor, se compilará en /build/index.css.
**/src/index.js**— Este es el principal archivo JavaScript sin compilar para su bloque del Editor de WordPress (Gutenberg). Registra el bloque y contiene la configuración predeterminada.
**/src/save.js**— Esta es la función de guardado del bloque y controla el marcado del bloque cuando se guarda.
**/src/style.scss**— Este es el SCSS sin compilar para el front-end, se compilará en /build/style-index.css.
**/.editorconfig**— Este archivo contiene ajustes preestablecidos útiles para su IDE (Entorno de desarrollo integrado), como Visual Studio Code.
**/.gitignore**— Este archivo le dice a git que ignore ciertos archivos cuando se compromete con un repositorio de git (como GitHub).
**/editor.css**— Los estilos en este archivo se generan solo en el editor, se ponen en cola a través del wholesome-notes.phparchivo del cargador principal.
**/block.json**— Este archivo define el complemento para que pueda ser descubierto por la biblioteca de bloques de WordPress. Si realiza cambios en el complemento, asegúrese de que este archivo esté actualizado. En las versiones más recientes del script NPM, este archivo se usa en lugar de /src/index.jspara registrar su bloque.
**/package.json**— Este archivo contiene todas las dependencias de npm para el complemento y los comandos que puede ejecutar. Tenga en cuenta que el complemento utiliza wp-scripts( @wordpress/scripts) como base, por lo que inicialmente las dependencias cargadas son para ese paquete.
**/readme.txt**— Este archivo es un archivo Léame del repositorio de complementos de WordPress, que es necesario si desea que el bloque se incluya en el repositorio de complementos.
**/wholesome-plugin.php**— Este es el archivo principal del cargador del complemento. Su nombre se estableció mediante el ‘slug’ que ingresamos en el script de configuración inicial. Pone en cola todos los activos de JavaScript necesarios para el complemento.

Explorando los comandos de compilación

Antes de que podamos ejecutar nuestros comandos de compilación, debemos asegurarnos de que estamos en la carpeta del complemento. En este ejemplo, ejecutaríamos cd wholesome-pluginen la terminal para cambiar el directorio a nuestra carpeta de complementos.

Entonces podemos ejecutar los siguientes comandos:

**npm start**— Inicia la compilación para el desarrollo. Si realiza un cambio en el complemento, debe hacerlo para que se muestren los cambios (es probable que también deba actualizar su navegador).
**npm run build**— Construye el código para la producción. Haga esto si está creando una versión de lanzamiento del complemento.
**npm run format:js**— Formatea automáticamente los archivos JavaScript, utilizando las mejores prácticas.
**npm run lint:css**— Pelusas (busca errores en) archivos CSS.
**npm run lint:js**— Pelusas (busca errores en) archivos JavaScript.
**npm run packages-update**— Actualiza los paquetes de WordPress a la última versión.

Usaremos uno o más de estos al modificar el complemento.

Modificando el complemento

Comencemos por hacer que nuestro bloque sea editable.

Agregar atributos a`/src/index.js`

Ábralo /src/index.jsen su editor y agregue lo siguiente dentro de la registerBlockTypefunción, en apiVersion:

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Esto nos dará un lugar para almacenar los datos en nuestro complemento llamado blockTextaccesible a través de la attributespropiedad (prop). Tenga en cuenta que le hemos dado un valor predeterminado del texto original generado por el script de creación del complemento.

Agregar texto enriquecido a`/src/edit.js`

Ábralo /src/edit.jsen su editor y reemplace la importación por useBlockPropslo siguiente:

import { RichText, useBlockProps } from '@wordpress/block-editor';

Esto nos permitirá usar el componente RichText en nuestro método de procesamiento de edición.

Luego cambie toda la función Editar a lo siguiente:

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Esto establece que el valor del RichTextcomponente sea el mismo que el almacenado en el blockTextatributo, y la onChangepropiedad establece el blockTextatributo a lo que se haya ingresado en el RichTextcomponente.

Salida de los atributos en`/src/save.js`

Ábralo /src/save.jsen su editor y reemplace la savefunción con lo siguiente:

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

Esto simplemente genera el valor de blockTexten el párrafo.

Compilando el complemento

Abra la terminal, asegúrese de estar en el directorio raíz de su complemento y ejecute el siguiente comando:

El script se compilará. Si tiene algún error, la terminal debe informarle cuáles son.

Construyendo el complemento

Insertar el complemento

Asegúrate de haber actualizado tu publicación. La versión anterior del bloque ahora puede estar rota, esto está bien, simplemente elimínelo e inserte uno nuevo.

Inserte el bloque usando el símbolo más de la parte superior izquierda del editor, y cuando esté insertado, haga clic en su texto. Debería. ahora podrá editar el texto.

Insertar el bloque editable

Ver el complemento

Guarde la publicación y mírela en la parte frontal del sitio web, el texto que modificó debe mostrarse en lugar del texto original.

Bloque editable en la parte delantera del sitio web

Si desea que sus bloques aparezcan en una categoría de bloque personalizada, simplemente agregue el siguiente código a la raíz de su complemento (en este caso wholesome-plugin.php:

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Esto registrará una categoría de bloque personalizado en su insertador de bloques.

Luego, todo lo que necesita hacer es ajustar el categoryargumento de la registerBlockTypefunción /src/index.jspara referirse a su categoría de bloque y volver a compilar:


category: 'wholesome-blocks',

Ahora, cuando venga a insertar su bloque, lo encontrará en su categoría de bloque recién creada:

Categoría de bloque personalizado en el insertador de bloques

Eche un vistazo al uso de PHP para representar su bloque con bloques dinámicos
Mire el uso de metacampos de publicación como atributos en su bloque
Agregue una barra lateral de bloque con InspectorControls
Amplíe su complemento agregando puntos de entrada adicionales al archivo webpack.config

Fuente de grabación: wholesomecode.ltd