Una descripción general del script de creación de bloques de WordPress

El equipo oficial del editor de WordPress (Gutenberg) ha proporcionado un pequeño script para que pueda crear un complemento de bloque con su @wordpress/create-blockscript npm.

Este artículo brinda una descripción general de WordPress Create Block Script, junto con detalles de lo que genera.

NOTA: Este artículo es para una versión anterior de Create Block Script

Aunque la teoría aún se puede aplicar, es posible que parte de la información de este artículo ya no sea compatible con el último script de creación de bloques. Puede ver nuestra guía actualizada de creación de secuencias de comandos de bloques aquí.

Ejecutar el script de creación de bloque

La documentación oficial le brinda algunos parámetros diferentes para pasar al npm init @wordpress/blockcomando.

Para mi configuración, lo ejecuté en modo interactivo omitiendo los parámetros. Ingresé el siguiente comando en mi terminal (mientras estaba cden mi wp-content/pluginscarpeta):

npm init @wordpress/block

El Script me hizo algunas preguntas para ayudarme a construir mi bloque.

Queriendo crear un bloque de inicio para una idea de complemento que tengo (‘Notas saludables’), respondí las preguntas de la siguiente manera:

• 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 Notes, así que ingresé wholesome-notes.

• 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é wholesome-code, ya que este es el nombre de mi empresa. En retrospectiva, sería mejor acortarlo a wco wcltd.

• El título de visualización para su bloque: Ingresé el título del complemento, Wholesome Notes.

• Una descripción general de la secuencia de comandos Create Block de WordPress No estaba 100% seguro de lo que quería escribir aquí, así que solo ingresé un texto que tengo la intención de modificar más adelante.

• El dashicon para que sea más fácil identificar su bloque (opcional): Abriendo rápidamente el recurso WordPress Dashicons, lo elegí admin-commentsporque tiene un icono de estilo de nota.

• El nombre de la categoría para ayudar a los usuarios a navegar y descubrir su bloque (utilice las teclas de flecha): yo elegí layout, aunque, para ser honesto, este tipo de bloque probablemente necesite su propia categoría. Eso es algo que puedo modificar en una fecha posterior.

Corrernpm init @wordpress/block

Luego, el script siguió adelante e instaló todas las dependencias que necesitaba a través de npm (en este punto, solo instala el wp-scriptspaquete npm como una dependencia).

Inspección de la salida

Con los comandos anteriores, WordPress Create Block Script le brinda el siguiente resultado:

• notas-saludables
  • construir
    • índice.activo.php
    • índice.js
    • index.js.mapa
  • node_modules
  • origen
    • índice.js
  • .editorconfig
  • .gitignore
  • editor.css
  • paquete.json
  • estilo.css
  • notas-saludables.php

@wordpress /bloquear salida

El siguiente es un desglose de cada uno de esos archivos y carpetas.

wholesome-notes

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-notes.phparchivo del cargador principal.

/build/index.js

Este es el principal archivo JavaScript compilado y se pone en cola a través del wholesome-notes.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 run 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 se instalan todas las dependencias de JavaScript para su complemento.

/src

Esta es la carpeta que contiene todos los activos sin compilar para su complemento.

/src/index.js

Este es el principal archivo JavaScript sin compilar para su bloque del Editor de WordPress (Gutenberg). Inicialmente contiene toda la lógica del bloque.

/.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.

/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.

/style.css

Los estilos en este archivo se muestran en el editor y en la parte frontal del sitio, se ponen en cola a través del wholesome-notes.phparchivo del cargador principal.

/wholesome-notes.php

Este es el archivo del cargador principal para el 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 el complemento

Una vez que haya creado su complemento, si lo activa y lo inserta en el editor, se verá como las siguientes capturas de pantalla (frontend y backend).

Crear secuencia de comandos de bloque: front-end predeterminado

Crear secuencia de comandos de bloque: back-end predeterminado

Como puede ver, el bloque nos proporciona una salida básica que podemos modificar fácilmente para implementar nuestro propio bloque.

Bloquear CSS

Como puede ver en las capturas de pantalla, el código de ejemplo editor.cssimplementa un borde rojo en el editor, mientras que los estilos de ejemplo styles.cssse aplican tanto al frente como al backend.

Bloquear JavaScript

El punto de entrada para personalizar el bloque recién creado es el /src/index.jsarchivo.

Hay mucha documentación en línea en este archivo, que explica por qué se importan ciertas funciones, como registerBlockTypeel registro del bloque y el __soporte de traducción de texto i18n.

Crear bloque index.js Comentarios en línea

También le brinda una salida muy básica para las funciones edity saveque se pasan al registro del bloque.

Nota: En versiones posteriores del script, estos se extrajeron en sus propios archivos y se incluyeron como módulos en este archivo.

Crear bloque index.js Editar y guardar

Construyendo el bloque

Según la documentación de create block npm, puede usar varios comandos en su terminal (desde la carpeta raíz de su complemento), para hacer cosas como verificar la calidad del código o actualizar paquetes.

Los comandos principales que necesitará para construir el bloque serán npm startcompilar su complemento para el desarrollo y npm run buildcompilar la versión final.

wp-scripts(del @wordpress/scriptspaquete npm) es la dependencia principal de su complemento. Esta dependencia abstrae todas las herramientas para su bloque, por lo que solo puede concentrarse en construir el JavaScript.

Detrás de escena se wp-scriptsutiliza webpackpara compilar todos sus activos en el /build/index.jsarchivo.

Puede obtener más información wp-scriptsen el manual del editor de bloques y puede obtener más información sobre la configuración de compilación del paquete web en la sección "Configuración de compilación de JavaScript" del manual.

Ampliación de la configuración del paquete web Create Block

El código base de su bloque puede abarcar varios archivos, o incluso tener varios subbloques, o contener estilos complejos. En momentos como estos, es posible que desee ampliar la configuración del paquete web integrado en wp-scripts.

Para obtener más información, consulte mi artículo sobre cómo ampliar la wp-scriptsconfiguración del paquete web o consulte la sección Scripts del paquete del Manual del editor de bloques para obtener orientación.