{"id":233518,"date":"2023-02-16T14:08:00","date_gmt":"2023-02-16T11:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233518"},"modified":"2022-11-11T00:08:00","modified_gmt":"2022-11-10T21:08:00","slug":"crear-bloque-de-gutenberg-personalizado-parte-1-configuracion-del-entorno-de-desarrollo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/crear-bloque-de-gutenberg-personalizado-parte-1-configuracion-del-entorno-de-desarrollo\/","title":{"rendered":"Crear bloque de Gutenberg personalizado – Parte 1: Configuraci\u00f3n del entorno de desarrollo"},"content":{"rendered":"\n

En la primera parte de esta serie de tutoriales sobre c\u00f3mo crear bloques personalizados de Gutenberg, debemos configurar nuestro entorno de desarrollo. Necesitamos un lugar donde podamos escribir nuestro c\u00f3digo en sintaxis ES6\/ESNext y compilarlo sobre la marcha. Es posible escribir bloques de Gutenberg personalizados usando la sintaxis de ES5 sin configurar Webpack y Babel. Pero el c\u00f3digo ser\u00e1 realmente engorroso de leer y escribir. Si no est\u00e1 seguro de por qu\u00e9 necesitamos hacer todo esto, o cu\u00e1l es la diferencia, lea mi publicaci\u00f3n que explica esto<\/a>. Puedo garantizarte que cuando regreses estar\u00e1s convencido de dar este paso adicional para escribir mejor c\u00f3digo.<\/p>\n

Supongo que ya tiene un WordPress local ejecut\u00e1ndose en una pila LAMP o similar. Y que est\u00e1s escribiendo un tema o un plugin. En cuanto a m\u00ed, estoy poniendo mi c\u00f3digo en un tema que he desarrollado awp-starter-theme<\/code>, ubicado en mi carpeta de temas de WordPress. Quiero separar mi desarrollo de Gutenberg de todos los dem\u00e1s archivos de temas, as\u00ed que creo un subdirectorio gutenberg-dev<\/code>dentro de la carpeta ra\u00edz de mi tema. Esa ser\u00e1 la carpeta de mi proyecto y la carpeta a la que me referir\u00e9 para el resto de la serie de tutoriales.<\/p>\n

Ya he escrito una gu\u00eda detallada sobre c\u00f3mo configurar un entorno de desarrollo para Gutenberg, as\u00ed que voy a seguir r\u00e1pidamente los pasos aqu\u00ed. Si nunca ha hecho esto antes, le recomiendo leer la publicaci\u00f3n vinculada a continuaci\u00f3n, \u00a1ya que contiene m\u00e1s informaci\u00f3n de la que encontrar\u00e1 aqu\u00ed!<\/p>\n

Configurar el proyecto con webpack<\/h2>\n

Usando la terminal (iOS terminal o Windows cmd funcionan bien) navegue a la carpeta de su proyecto (en mi caso awp-starter-theme\/gutenberg-dev<\/code>). Iniciamos un nuevo proyecto pidi\u00e9ndole a npm que genere un package.json<\/code>con contenido gen\u00e9rico.<\/p>\n

Creando paquete.json<\/h3>\n
npm init -y<\/code><\/pre>\n
A continuaci\u00f3n, instalar\u00e9 los scripts de WordPress que nos ayudar\u00e1n mucho con la configuraci\u00f3n con este comando (que agregar\u00e1 la subcarpeta node_modules<\/code>y package-lock.json<\/code>tambi\u00e9n):<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Abra el package.json<\/code>archivo en la carpeta de su proyecto en un editor y busque la scripts<\/code>propiedad. Lo reemplazamos con dos scripts del paquete de WordPress que acabamos de instalar:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
El script de "construcci\u00f3n" compilar\u00e1 mis archivos. Pero como tiene que ejecutarse manualmente cada vez que se realiza un cambio, preferiremos usar el script de "inicio" mientras desarrollamos. Luego iniciar\u00e1 un "modo de observaci\u00f3n" donde escucha a los cambios realizados en cualquiera de sus archivos de script y los vuelve a compilar cada vez que guarda los cambios.<\/p>\n
Configuraci\u00f3n del paquete web<\/h3>\n
El siguiente paso es crear un archivo de configuraci\u00f3n de paquete web. Hago esto porque no quiero usar la fuente predeterminada y los nombres de archivo y carpetas de salida. Quiero decidir por m\u00ed mismo d\u00f3nde est\u00e1n mis archivos fuente y d\u00f3nde deber\u00edan terminar los archivos compilados.<\/p>\n
Con la ayuda del @wordpress\/scripts<\/code>paquete que instalamos, podemos heredar la configuraci\u00f3n del paquete web de WordPress y anular solo las partes que queremos cambiar.<\/p>\n
En nuestra carpeta de proyecto, cree un nuevo archivo llamado webpack.config.js<\/code>y \u00e1bralo en un editor. Agrega este contenido:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-awhitepixel-myfirstblock': '.\/src\/block-awhitepixel-myfirstblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
Lo que esto hace es definir mi archivo de entrada (actualmente solo uno) en la entry<\/code>propiedad, ubicada en una subcarpeta src<\/code>en mi carpeta de proyecto, llamada block-awhitepixel-myfirstblock.js<\/code>. Obviamente, nombra tus archivos como quieras, pero recuerda cambiar tanto la clave como el valor. Porque en la output<\/code>propiedad le pido a webpack que compile mis archivos de entrada con la clave de entrada como nombre de archivo. En la path<\/code>propiedad, pido colocar todos los archivos compilados un paso fuera de la carpeta de mi proyecto y dentro de la assets\/js<\/code>carpeta del tema. Ajuste los nombres de archivo y la ubicaci\u00f3n para que se ajusten a su proyecto. Consulte mi gu\u00eda detallada<\/a> si est\u00e1 confundido.<\/p>\n
Cree una subcarpeta src\/<\/code>en la carpeta del proyecto y aqu\u00ed es donde colocaremos todos los archivos fuente. (Ajuste si cambi\u00f3 la entry<\/code>ubicaci\u00f3n en webpack.config.js<\/code>). Cree un archivo block-awhitepixel-myfirstblock.js<\/code>aqu\u00ed y d\u00e9jelo vac\u00edo por ahora.<\/p>\n
Hay un paso m\u00e1s, y esto va para nosotros que queremos usar las funciones m\u00e1s nuevas en ESNext. Lamentablemente, a la configuraci\u00f3n predeterminada de WordPress Babel le falta esto. Y como quiero usar funciones como las funciones de flecha, tambi\u00e9n necesito configurar Babel.<\/p>\n
Configurando Babel<\/h2>\n
Primero necesitamos instalar algunos paquetes para nuestra configuraci\u00f3n de Babel escribiendo este comando:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
Cuando haya terminado, cree un nuevo archivo .babelrc<\/code>en nuestra carpeta de proyecto. Aqu\u00ed es donde pondremos nuestra configuraci\u00f3n de Babel:<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
\u00a1Y eso es todo para la configuraci\u00f3n de nuestro entorno de desarrollo!<\/p>\n
Construir comandos<\/h2>\n
A lo largo del desarrollo, deber\u00e1 compilar sus archivos Javascript. En nuestro package.json<\/code>, agregamos dos scripts solo para esto.<\/p>\n
Siempre que queramos desarrollar en nuestros archivos Javascript, ejecutamos esto en la terminal:<\/p>\n
npm run build<\/code><\/pre>\n
Este comando realizar\u00e1 la compilaci\u00f3n cada vez que lo ejecute en la terminal. Pru\u00e9belo, y deber\u00eda ver que genera el archivo block-awhitepixel-myfirstblock.js<\/code>(junto con uno o dos otros archivos de "activos") en su carpeta de salida definida que defini\u00f3 en webpack.config.js<\/code>. En mi caso aparece en awp-starter-theme\/assets\/js\/<\/code>.<\/p>\n
Usar el comando anterior funciona bien, pero se vuelve molesto repetirlo cada vez que realiza cambios en sus archivos. Probablemente prefiera ejecutar este comando en su lugar:<\/p>\n
npm run start<\/code><\/pre>\n
Esto configurar\u00e1 su terminal en "modo de observaci\u00f3n", detectando cualquier cambio guardado en sus archivos Javascript y compil\u00e1ndolos sobre la marcha. Cada vez que sus archivos contengan errores, la terminal arrojar\u00e1 los mensajes de error. Presione CTRL + C para detener el proceso de visualizaci\u00f3n.<\/p>\n
\"Crear<\/a><\/p>\n
Como referencia, la carpeta de mi proyecto ahora se parece a la imagen. Prefiero separar todos los archivos de configuraci\u00f3n y especialmente la subcarpeta node_modules\/<\/code>(que contiene literalmente decenas de miles de archivos) del resto del c\u00f3digo de mi tema. Facilita la configuraci\u00f3n de reglas para ignorar, por ejemplo, compiladores SCSS o git ignore. Ya configuramos la configuraci\u00f3n del paquete web para compilar los archivos finales directamente awp-starter-theme\/assets\/js\/<\/code>junto con otros archivos Javascript para mi tema.<\/p>\n
Ahora estamos listos para la siguiente parte<\/a> donde comenzaremos con el registro de nuestro primer bloque personalizado.<\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
La primera parte de esta serie de tutoriales sobre c\u00f3mo crear bloques personalizados de WordPress Gutenberg, aprendemos c\u00f3mo configurar nuestro entorno de desarrollo.<\/p>\n","protected":false},"author":1,"featured_media":152983,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,810,935,935,1110,810,840,840,861,861],"tags":[1172],"class_list":{"0":"post-233518","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codigo","9":"category-complementos","10":"category-gutenberg-2","12":"category-n-a","14":"category-tutoriales","16":"category-wordpress-2","18":"tag-affiai-es"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233518"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233518\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/152983"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}