npm<\/code> script \u00fatil para que pueda crear un complemento de bloque<\/a> que crea un bloque de inicio para que pueda comenzar a funcionar r\u00e1pidamente.<\/p>\nPor defecto, el tipo de complemento de WordPress que esto crea es un ‘bloque’, pero tambi\u00e9n nos brinda un buen punto de partida para otros tipos de complementos de Gutenberg.<\/p>\n
requisitos previos<\/h2>\n\n- El nodo debe estar instalado en su m\u00e1quina<\/a> para que pueda usar el
npm<\/code>comando (que significa Node Package Manager)<\/li>\n- Instalaci\u00f3n de WordPress<\/li>\n
- Editor de c\u00f3digo<\/li>\n
- Acceso a la Terminal<\/li>\n<\/ul>\n
Crea tu Complemento<\/h2>\n
Despu\u00e9s de haber instalado el nodo en su m\u00e1quina, deber\u00eda tener acceso al npm<\/code>comando en su terminal.<\/p>\nAbra su terminal y aseg\u00farese de tener cd<\/code>‘d (Directorio cambiado) en la carpeta de complementos en su instalaci\u00f3n de WordPress (por ejemplo, cd wp-content\/plugins<\/code>).<\/p>\nUna vez all\u00ed ejecuta el siguiente comando:<\/p>\n
npm init @wordpress\/block\n<\/code><\/pre>\nEsto descargar\u00e1 todo lo que el script necesita para iniciar la compilaci\u00f3n. Una vez que haya terminado, el script le har\u00e1 una serie de preguntas que son necesarias para configurar su complemento.<\/p>\n
Uso de la terminal para ejecutar el script de creaci\u00f3n<\/p>\n
Preguntas de configuraci\u00f3n<\/h3>\n
El script har\u00e1 las siguientes preguntas, aqu\u00ed est\u00e1n mis respuestas de ejemplo:<\/p>\n
\n- \n
El slug de bloque utilizado para la identificaci\u00f3n (tambi\u00e9n el complemento y el nombre de la carpeta de salida)<\/strong>: quiero que mi bloque se llame Wholesome Plugin<\/code>, as\u00ed que ingres\u00e9 wholesome-plugin<\/code>.<\/p>\n<\/li>\n- \n
El espacio de nombres interno para el nombre del bloque (algo \u00fanico para sus productos)<\/strong>: como deber\u00eda ser \u00fanico para todos mis productos, ingres\u00e9 wholesomecode<\/code>, ya que este es el nombre de mi empresa.<\/p>\n<\/li>\n- \n
El t\u00edtulo de visualizaci\u00f3n para su bloque<\/strong>: ingres\u00e9 el t\u00edtulo del complemento, Wholesome Plugin<\/code>.<\/p>\n<\/li>\n- \n
La breve descripci\u00f3n de su bloque (opcional)<\/strong>: ingres\u00e9 " An example plugin to demonstrate the create-block-script<\/code>".<\/p>\n<\/li>\n- \n
El dashicon para que sea m\u00e1s f\u00e1cil identificar su bloque (opcional)<\/strong>: al mostrar r\u00e1pidamente el recurso de WordPress Dashicons<\/a>, lo eleg\u00ed admin-plugins<\/code>porque tiene un \u00edcono de complemento. Recuerde omitir dashicon- del prefijo dashicon al hacer esto.<\/p>\n<\/li>\n- \n
El nombre de la categor\u00eda para ayudar a los usuarios a navegar y descubrir su bloque (use las teclas de flecha)<\/strong>: eleg\u00ed design<\/code>. Aunque una categor\u00eda personalizada probablemente encajar\u00eda mejor.<\/p>\n<\/li>\n- \n
El nombre del autor del complemento (opcional). Se pueden enumerar varios autores usando comas<\/strong>: ingres\u00e9 wholesomecode<\/code>.<\/p>\n<\/li>\n- \n
El nombre corto de la licencia del complemento (opcional)<\/strong>: presion\u00e9 enter para aceptar GPL v2.0 o posterior.<\/p>\n<\/li>\n- \n
Un enlace al texto completo de la licencia (opcional)<\/strong>: presion\u00e9 Intro para insertar la URL de la licencia GPL v2.0.<\/p>\n<\/li>\n- \n
El n\u00famero de versi\u00f3n actual del complemento<\/strong>: presion\u00e9 enter para insertar 0.1.0<\/code>.<\/p>\n<\/li>\n<\/ul>\n![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d770fb3.png\")
Preguntas de configuraci\u00f3n de secuencias de comandos<\/p>\n
El script terminar\u00e1 de ejecutarse.<\/p>\n
\u00bfLo que acaba de suceder?<\/h3>\n
Algunas cosas suceden mientras se ejecuta el script, estas son:<\/p>\n
\n- Crea la carpeta del plugin,<\/li>\n
- Genera todos los archivos del complemento (consulte la exploraci\u00f3n del complemento para conocer los detalles de lo que hacen<\/a> )<\/li>\n
- Instala las dependencias que necesita, incluido el
@wordpress\/scripts<\/code>paquete (esto hace el trabajo pesado en t\u00e9rminos de construir el complemento)<\/li>\n- Compila el c\u00f3digo<\/li>\n
- Muestra una lista de comandos que puede usar<\/li>\n<\/ul>\n
![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d865300.png\")
Comandos de compilaci\u00f3n<\/p>\n
Exploraremos estos m\u00e1s en la secci\u00f3n de exploraci\u00f3n del complemento<\/a>.<\/p>\nUso del complemento<\/h2>\n
Antes de que pueda usar el complemento, deber\u00e1 activarlo. Puede hacer esto eligiendo Plugins<\/code>desde el men\u00fa de administraci\u00f3n de WordPress y luego seleccionando activate<\/code>bajo el nombre del complemento.<\/p>\n![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d958ea6.gif\")
Activar el complemento<\/p>\n
Ahora necesita editar una publicaci\u00f3n en WordPress e insertar el complemento usando el editor de Gutenberg.<\/p>\n
![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0db497f6.gif\")
Insertar el bloque en una publicaci\u00f3n<\/p>\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.<\/p>\n
Visualizaci\u00f3n del bloque en el front-end<\/h3>\n
De forma predeterminada, el bloque se ve as\u00ed 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.<\/p>\n
![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0dd10fa2.png\")
El bloque en la parte delantera<\/p>\n
Explorando el complemento<\/h2>\n
Todo el prop\u00f3sito de Create Block Script es que usted cree su propio complemento. Exploremos los archivos que gener\u00f3 con m\u00e1s detalle:<\/p>\n
![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0de1777f.png\")
Archivos generados<\/p>\n
wholesome-plugin<\/code><\/strong>\u2014 Esta es la carpeta ra\u00edz del complemento, tiene el mismo nombre que el que ingres\u00e9 para el ‘slug’ en las preguntas de configuraci\u00f3n.<\/p>\n**\/build**<\/code>\u2014 Esta es la carpeta de compilaci\u00f3n. Contiene todos los activos de JavaScript y PHP generados a partir de la \/src<\/code>carpeta. Estos se ponen en cola a trav\u00e9s del wholesome-notes.php<\/code>archivo del cargador principal.<\/p>\n**\/build\/index.assets.php**<\/code>\u2014 Este archivo PHP se genera autom\u00e1ticamente cuando \/src<\/code>se 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\u00e9s del wholesome-plugin.php<\/code>archivo del cargador principal.<\/p>\n**\/build\/index.css**<\/code>\u2014 Este es el archivo CSS del editor y se pone en cola a trav\u00e9s del wholesome-plugin.php<\/code>archivo del cargador principal.<\/p>\n**\/build\/index.js**<\/code>\u2014 Este es el archivo JavaScript compilado principal y se pone en cola a trav\u00e9s del wholesome-plugin.php<\/code>archivo del cargador principal.<\/p>\n**\/build\/style-index.css**<\/code>\u2014 Este es el archivo CSS de front-end y se pone en cola a trav\u00e9s del wholesome-plugin.php<\/code>archivo del cargador principal.<\/p>\n**\/build\/index.js.map**<\/code>\u2014 Este archivo solo se genera cuando est\u00e1 compilando los activos para el modo de desarrollo (es decir, lo ejecuta npm start<\/code>y no npm build<\/code>cuando est\u00e1 compilando sus activos). Es un archivo \u00fatil para los depuradores de JavaScript para ayudar a identificar los nombres de los archivos y los n\u00fameros de l\u00ednea si se producen errores.<\/p>\n\n- \n
**\/node_modules**<\/code>\u2014 Esta es la carpeta en la que est\u00e1n instaladas todas las dependencias de JavaScript para su complemento.<\/p>\n<\/li>\n- \n
**\/src**<\/code>\u2014 Esta es la carpeta que contiene todos los activos sin compilar para su complemento.<\/p>\n<\/li>\n- \n
**\/src\/edit.js**<\/code>\u2014 Esta es la funci\u00f3n de edici\u00f3n del bloque y controla c\u00f3mo se muestra el bloque en el editor de bloques cuando est\u00e1 en modo de edici\u00f3n.<\/p>\n<\/li>\n- \n
**\/src\/editor.scss**<\/code>\u2014 Este es el SCSS sin compilar para el editor, se compilar\u00e1 en \/build\/index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/src\/index.js**<\/code>\u2014 Este es el principal archivo JavaScript sin compilar para su bloque del Editor de WordPress (Gutenberg). Registra el bloque y contiene la configuraci\u00f3n predeterminada.<\/p>\n<\/li>\n- \n
**\/src\/save.js**<\/code>\u2014 Esta es la funci\u00f3n de guardado del bloque y controla el marcado del bloque cuando se guarda.<\/p>\n<\/li>\n- \n
**\/src\/style.scss**<\/code>\u2014 Este es el SCSS sin compilar para el front-end, se compilar\u00e1 en \/build\/style-index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/.editorconfig**<\/code>\u2014 Este archivo contiene ajustes preestablecidos \u00fatiles para su IDE (Entorno de desarrollo integrado), como Visual Studio Code.<\/p>\n<\/li>\n- \n
**\/.gitignore**<\/code>\u2014 Este archivo le dice a git que ignore ciertos archivos cuando se compromete con un repositorio de git (como GitHub).<\/p>\n<\/li>\n- \n
**\/editor.css**<\/code>\u2014 Los estilos en este archivo se generan solo en el editor, se ponen en cola a trav\u00e9s del wholesome-notes.php<\/code>archivo del cargador principal.<\/p>\n<\/li>\n- \n
**\/block.json**<\/code>\u2014 Este archivo define el complemento para que pueda ser descubierto por la biblioteca de bloques de WordPress. Si realiza cambios en el complemento, aseg\u00farese de que este archivo est\u00e9 actualizado. En las versiones m\u00e1s recientes del script NPM, este archivo se usa en lugar de \/src\/index.js<\/code>para registrar su bloque.<\/p>\n<\/li>\n- \n
**\/package.json**<\/code>\u2014 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<\/code>( @wordpress\/scripts<\/code>) como base, por lo que inicialmente las dependencias cargadas son para ese paquete.<\/p>\n<\/li>\n- \n
**\/readme.txt**<\/code>\u2014 Este archivo es un archivo L\u00e9ame del repositorio de complementos de WordPress, que es necesario si desea que el bloque se incluya en el repositorio de complementos.<\/p>\n<\/li>\n- \n
**\/wholesome-plugin.php**<\/code>\u2014 Este es el archivo principal del cargador del complemento. Su nombre se estableci\u00f3 mediante el ‘slug’ que ingresamos en el script de configuraci\u00f3n inicial. Pone en cola todos los activos de JavaScript necesarios para el complemento.<\/p>\n<\/li>\n<\/ul>\nExplorando los comandos de compilaci\u00f3n<\/h3>\n
Antes de que podamos ejecutar nuestros comandos de compilaci\u00f3n, debemos asegurarnos de que estamos en la carpeta del complemento. En este ejemplo, ejecutar\u00edamos cd wholesome-plugin<\/code>en la terminal para cambiar el directorio a nuestra carpeta de complementos.<\/p>\nEntonces podemos ejecutar los siguientes comandos:<\/p>\n
\n- \n
**npm start**<\/code>\u2014 Inicia la compilaci\u00f3n para el desarrollo. Si realiza un cambio en el complemento, debe hacerlo para que se muestren los cambios (es probable que tambi\u00e9n deba actualizar su navegador).<\/p>\n<\/li>\n- \n
**npm run build**<\/code>\u2014 Construye el c\u00f3digo para la producci\u00f3n. Haga esto si est\u00e1 creando una versi\u00f3n de lanzamiento del complemento.<\/p>\n<\/li>\n- \n
**npm run format:js**<\/code>\u2014 Formatea autom\u00e1ticamente los archivos JavaScript, utilizando las mejores pr\u00e1cticas.<\/p>\n<\/li>\n- \n
**npm run lint:css**<\/code>\u2014 Pelusas (busca errores en) archivos CSS.<\/p>\n<\/li>\n- \n
**npm run lint:js**<\/code>\u2014 Pelusas (busca errores en) archivos JavaScript.<\/p>\n<\/li>\n- \n
**npm run packages-update**<\/code>\u2014 Actualiza los paquetes de WordPress a la \u00faltima versi\u00f3n.<\/p>\n<\/li>\n<\/ul>\nUsaremos uno o m\u00e1s de estos al modificar el complemento.<\/p>\n
Modificando el complemento<\/h2>\n
Comencemos por hacer que nuestro bloque sea editable.<\/p>\n
Agregar atributos a\/src\/index.js<\/code><\/h3>\n\u00c1bralo \/src\/index.js<\/code>en su editor y agregue lo siguiente dentro de la registerBlockType<\/code>funci\u00f3n, en apiVersion<\/code>:<\/p>\nattributes: {\n blockText: {\n default: 'Wholesome Plugin \u2013 hello from the editor!',\n type: 'string',\n },\n},\n<\/code><\/pre>\nEsto nos dar\u00e1 un lugar para almacenar los datos en nuestro complemento llamado blockText<\/code>accesible a trav\u00e9s de la attributes<\/code>propiedad (prop). Tenga en cuenta que le hemos dado un valor predeterminado del texto original generado por el script de creaci\u00f3n del complemento.<\/p>\nAgregar texto enriquecido a\/src\/edit.js<\/code><\/h3>\n\u00c1bralo \/src\/edit.js<\/code>en su editor y reemplace la importaci\u00f3n por useBlockProps<\/code>lo siguiente:<\/p>\nimport { RichText, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\nEsto nos permitir\u00e1 usar el componente RichText en nuestro m\u00e9todo de procesamiento de edici\u00f3n.<\/p>\n
Luego cambie toda la funci\u00f3n Editar a lo siguiente:<\/p>\n
export default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps() }>\n <RichText\n className=\"block__text\"\n keepPlaceholderOnFocus\n onChange={ (blockText) => setAttributes( { blockText }) }\n placeholder={ __( 'Block Text', 'wholesome-plugin') }\n tagName=\"span\"\n value={ blockText }\n \/>\n <\/p>\n );\n}\n<\/code><\/pre>\nEsto establece que el valor del RichText<\/code>componente sea el mismo que el almacenado en el blockText<\/code>atributo, y la onChange<\/code>propiedad establece el blockText<\/code>atributo a lo que se haya ingresado en el RichText<\/code>componente.<\/p>\nSalida de los atributos en\/src\/save.js<\/code><\/h3>\n\u00c1bralo \/src\/save.js<\/code>en su editor y reemplace la save<\/code>funci\u00f3n con lo siguiente:<\/p>\nexport default function save( { attributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps.save() }>\n { blockText }\n <\/p>\n );\n}\n<\/code><\/pre>\nEsto simplemente genera el valor de blockText<\/code>en el p\u00e1rrafo.<\/p>\nCompilando el complemento<\/h3>\n
Abra la terminal, aseg\u00farese de estar en el directorio ra\u00edz de su complemento y ejecute el siguiente comando:<\/p>\n
El script se compilar\u00e1. Si tiene alg\u00fan error, la terminal debe informarle cu\u00e1les son.<\/p>\n
![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0df5e2a4.gif\")
Construyendo el complemento<\/p>\n
Insertar el complemento<\/h3>\n
Aseg\u00farate de haber actualizado tu publicaci\u00f3n. La versi\u00f3n anterior del bloque ahora puede estar rota, esto est\u00e1 bien, simplemente elim\u00ednelo e inserte uno nuevo.<\/p>\n
Inserte el bloque usando el s\u00edmbolo m\u00e1s de la parte superior izquierda del editor, y cuando est\u00e9 insertado, haga clic en su texto. Deber\u00eda. ahora podr\u00e1 editar el texto.<\/p>\n
![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e151e82.gif\")
Insertar el bloque editable<\/p>\n
Ver el complemento<\/h3>\n
Guarde la publicaci\u00f3n y m\u00edrela en la parte frontal del sitio web, el texto que modific\u00f3 debe mostrarse en lugar del texto original.<\/p>\n
![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e327430.png\")
Bloque editable en la parte delantera del sitio web<\/p>\n
Si desea que sus bloques aparezcan en una categor\u00eda de bloque personalizada, simplemente agregue el siguiente c\u00f3digo a la ra\u00edz de su complemento (en este caso wholesome-plugin.php<\/code>:<\/p>\nfunction wholesomecode_wholesome_plugin_block_categories( $categories) {\n return array_merge(\n $categories,\n [\n [\n 'slug' => 'wholesome-blocks',\n 'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),\n ],\n ]\n );\n}\nadd_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );\n<\/code><\/pre>\nEsto registrar\u00e1 una categor\u00eda de bloque personalizado en su insertador de bloques.<\/p>\n
Luego, todo lo que necesita hacer es ajustar el category<\/code>argumento de la registerBlockType<\/code>funci\u00f3n \/src\/index.js<\/code>para referirse a su categor\u00eda de bloque y volver a compilar:<\/p>\n\ncategory: 'wholesome-blocks',\n<\/code><\/pre>\nAhora, cuando venga a insertar su bloque, lo encontrar\u00e1 en su categor\u00eda de bloque reci\u00e9n creada:<\/p>\n
![\"Creaci\u00f3n](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e40fe2e.png\")
Categor\u00eda de bloque personalizado en el insertador de bloques<\/p>\n
\n- Eche un vistazo al uso de PHP para representar su bloque con bloques din\u00e1micos<\/a><\/li>\n
- Mire el uso de metacampos de publicaci\u00f3n como atributos en su bloque<\/a><\/li>\n
- Agregue una barra lateral de bloque con InspectorControls<\/a><\/li>\n
- Ampl\u00ede su complemento agregando puntos de entrada adicionales al archivo webpack.config<\/a><\/li>\n<\/ul>\n