wp<\/code>El paquete global y la desestructuraci\u00f3n<\/h2>\nCuando estamos en un archivo Javascript en cola en el editor Gutenberg, tenemos acceso a un objeto\/paquete global: wp<\/code>. Este es un objeto Javascript muy, muy grande y contiene un mont\u00f3n de componentes y funciones \u00fatiles que usaremos para crear bloques. Al escribir Javascript para bloques personalizados, se referir\u00e1 a wp<\/code>bastante.<\/p>\nPor lo tanto, es com\u00fan, tanto en Javascript moderno como en React, desestructurar lo que queremos usar de \u00e9l. B\u00e1sicamente, solo significa que definimos variables locales a partir de partes de una estructura m\u00e1s grande. Por ejemplo, la primera funci\u00f3n que usaremos es registerBlockType()<\/code>la que existe dentro de wp.blocks<\/code>. Podr\u00edamos invocar la funci\u00f3n as\u00ed:<\/p>\nwp.blocks.registerBlockType();<\/code><\/pre>\nPero es m\u00e1s f\u00e1cil desestructurarlo as\u00ed:<\/p>\n
const { registerBlockType } = wp.blocks;\nregisterBlockType();<\/code><\/pre>\nAhora puede hacer referencia a la funci\u00f3n directamente sin prefijarla con su estructura. Se vuelve mucho m\u00e1s \u00fatil cuando nos referimos a funciones o componentes que repetiremos a menudo.<\/p>\n
Haremos reestructuraciones en esta serie y, a medida que avancemos en el tutorial, veremos cu\u00e1nto m\u00e1s legible y m\u00e1s corto se vuelve nuestro c\u00f3digo.<\/p>\n
Registro de un nuevo bloque<\/h2>\n
La funci\u00f3n para registrar un nuevo bloque personalizado est\u00e1 registerBlockType()<\/code>disponible en el wp.blocks<\/code>paquete. Acepta dos par\u00e1metros; primero una cadena con el espacio de nombres y el nombre del bloque, y segundo un objeto con la configuraci\u00f3n completa del bloque.<\/p>\nGutenberg espera que todos los bloques tengan un espacio de nombres y un nombre, definido con una barra inclinada en el medio. El espacio de nombres es para garantizar que el nombre de su bloque no entre en conflicto con ning\u00fan otro bloque que pueda usar el mismo nombre. Todos los bloques en WordPress usan el espacio de nombres core<\/code>. Por ejemplo, el bloque de p\u00e1rrafo est\u00e1ndar en WordPress tiene el nombre core\/paragraph<\/code>. Si elige otro espacio de nombres, tambi\u00e9n puede crear un bloque llamado p\u00e1rrafo sin causar ning\u00fan problema.<\/p>\nDecida un espacio de nombres de versi\u00f3n slug que sea \u00fanico para usted. Usar\u00e9 el espacio de nombres awp<\/code>(versi\u00f3n corta de A White Pixel) en esta serie.<\/p>\nAbra el archivo fuente que creamos en el \u00faltimo paso; src\/block-awhitepixel-myfirstblock.js<\/code>, en un editor. Primero llamaremos registerBlockType<\/code>desde desestructurados wp.blocks<\/code>, con el nombre awp\/firstblock<\/code>. Ajuste su nombre y espacio de nombres sobre la marcha.<\/p>\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n \/\/ Your block configuration and code here\n});<\/code><\/pre>\nEn el segundo par\u00e1metro, el objeto de configuraci\u00f3n del bloque, necesitamos definir algunas propiedades para que se registre correctamente. Recuerde que la configuraci\u00f3n del bloque es un objeto, lo que significa que debe escribir todo como pares clave + valor, separados por comas. Hay bastantes propiedades de configuraci\u00f3n posibles, as\u00ed que repasemos estas y veremos el c\u00f3digo final al final.<\/p>\n
Requerido: t\u00edtulo<\/h3>\n
La primera propiedad requerida es title<\/code>. Este es el nombre que aparecer\u00e1 cuando seleccione entre bloques. Establezca esta propiedad como cualquier nombre que desee en una cadena.<\/p>\nA\u00f1adiremos lo siguiente como t\u00edtulo:<\/p>\n
title: 'My first block',<\/code><\/pre>\nPD: Revisaremos c\u00f3mo escribimos todas las cadenas en nuestro bloque para asegurarnos de que se puedan traducir en la parte 8. Pero por ahora lo mantendremos simple y simplemente escribiremos cadenas.<\/p>\n
Requerido: categor\u00eda<\/h3>\n
La propiedad category<\/code>define en qu\u00e9 categor\u00eda de bloque aparecer\u00e1 su bloque cuando seleccione bloques para insertarlos en el editor. Los valores posibles son common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, embed<\/code>.<\/p>\nPong\u00e1moslo en common<\/code>, la primera categor\u00eda de bloque.<\/p>\ncategory: 'common',<\/code><\/pre>\nOpcional: icono<\/h3>\n
Si ha usado Gutenberg, probablemente haya notado que todos los bloques tienen \u00edconos. Puede agregar un \u00edcono a su bloque con una cadena que se refiera a cualquiera de los Dashicons de WordPress<\/a>, o puede proporcionar un svg<\/code>elemento personalizado.<\/p>\nElegir\u00e9 uno de los dashicons de WordPress, el emotic\u00f3n, pero<\/a> puedes elegir el que quieras. Tenga en cuenta que omite incluir "dashicons-" en su nombre de clase de icono.<\/p>\nicon: 'smiley',<\/code><\/pre>\nOpcional: descripci\u00f3n<\/h3>\n
Puede proporcionar una descripci\u00f3n que se mostrar\u00e1 en la barra lateral de Configuraci\u00f3n (en el lado derecho) cuando el bloque est\u00e9 activo.<\/p>\n
Solo agregar\u00e9 un texto r\u00e1pido como ejemplo:<\/p>\n
description: 'Learning in progress',<\/code><\/pre>\nOpcional: palabras clave<\/h3>\n
Gutenberg admite una funci\u00f3n de b\u00fasqueda al elegir tipos de bloques. Puede proporcionar una matriz de posibles coincidencias en la propiedad keywords<\/code>. Sin keywords<\/code>usted, solo encontrar\u00eda su bloque buscando su nombre.<\/p>\nAgregar\u00e9 example<\/code>y test<\/code>para que podamos encontrar f\u00e1cilmente nuestro bloque personalizado cuando comencemos a escribir una de estas palabras clave.<\/p>\nkeywords: ['example', 'test'],<\/code><\/pre>\nOpcional: atributos<\/h3>\n
La propiedad attributes<\/code>es una propiedad muy importante que revisaremos con bastante frecuencia en esta serie de tutoriales. Aqu\u00ed es donde almacena sus datos estructurados y la informaci\u00f3n ingresada por el usuario para su bloque. Puedes imaginarlo como variables. No lo agregaremos por ahora, pero definitivamente volveremos a esto muy pronto.<\/p>\n(M\u00e1s o menos) obligatorio: editar y opcional: guardar<\/h3>\n
Dentro edit<\/code>de save<\/code>las propiedades es en realidad donde agregar\u00e1 todo su c\u00f3digo tanto para la salida del editor como para el procesamiento de la interfaz. Ambas propiedades esperan una funci\u00f3n que deber\u00eda devolver alg\u00fan resultado.<\/p>\nLa propiedad edit<\/code>describe la estructura de su bloque dentro del editor. La save<\/code>propiedad maneja b\u00e1sicamente dos cosas; la salida de su bloque en la interfaz, pero tambi\u00e9n la estructura de c\u00f3mo se guarda su bloque en la base de datos. Trabajar\u00e1 principalmente edit<\/code>porque aqu\u00ed es donde agrega entradas para ingresar o elegir cosas y actualizar los datos del bloque. La save<\/code>funci\u00f3n no debe actualizar ni editar los datos de ninguna manera, solo debe generar una salida.<\/p>\nGutenberg necesita poder reconstruir su bloque con todas sus configuraciones en el editor a partir de lo que se genera en la save<\/code>funci\u00f3n (y atributos). Si Gutenberg alguna vez abre una publicaci\u00f3n en la que la salida del bloque guardado previamente difiere (aunque sea un poco) de lo que se defini\u00f3 al guardar, su bloque dejar\u00e1 de ser v\u00e1lido.<\/p>\n![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d21609214.png\")
<\/a><\/p>\nPuedo garantizarle que se encontrar\u00e1 con esto muchas veces al desarrollar bloques personalizados. Cuando esto sucede, debe eliminar el bloque (de los puntos en la barra de herramientas) y volver a agregarlo. Tambi\u00e9n recomiendo actualizar el navegador (F5 o CTRL+R).<\/p>\n
WordPress tiene una p\u00e1gina de documentaci\u00f3n<\/a> dedicada a las funciones de edici\u00f3n y guardado del bloque si desea obtener m\u00e1s informaci\u00f3n.<\/p>\nEn cuanto a nuestro primer bloque, generemos algo b\u00e1sico. Devolveremos lo mismo para ambos edit<\/code>y save<\/code>; un ":)" envuelto en <div><\/code>. Despu\u00e9s de todo, el \u00edcono del bloque es un emotic\u00f3n.<\/p>\nedit:() => { \n return <div>:)<\/div> \n},\nsave:() => { \n return <div>:)<\/div> \n}<\/code><\/pre>\nOtras propiedades<\/h3>\n
Hay propiedades m\u00e1s opcionales para registerBlockType<\/code>; parent<\/code>, supports<\/code>, transforms<\/code>, example<\/code>y styles<\/code>. Omitiremos estos por ahora, ya que la mayor\u00eda son para la construcci\u00f3n de bloques m\u00e1s avanzada o personalizada. Si est\u00e1 interesado en leer m\u00e1s sobre esto, eche un vistazo a la documentaci\u00f3n de WordPress<\/a>.<\/p>\nC\u00f3digo de bloque de registro final<\/h2>\n
Nuestro c\u00f3digo ahora se parece a esto.<\/p>\n
const { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n title: 'My first block',\n category: 'common',\n icon: 'smiley',\n description: 'Learning in progress',\n keywords: ['example', 'test'],\n edit: () => { \n return <div>:)<\/div> \n },\n save: () => { \n return <div>:)<\/div> \n }\n});<\/code><\/pre>\nCon esto tenemos suficiente para que nuestro bloque sea registrado exitosamente como bloque personalizado. Ve\u00e1moslo en la pr\u00e1ctica dentro del editor Gutenberg.<\/p>\n
\u00bfTe acordaste de compilar tu Javascript? En el paso anterior aprendimos que no podemos cargar este archivo Javascript en Gutenberg; necesitamos la versi\u00f3n compilada. Por lo general, se desarrollar\u00eda npm run start<\/code>ejecut\u00e1ndose en segundo plano, o simplemente puede ejecutar npm run build<\/code>una vez ahora. Eso deber\u00eda compilar nuestro Javascript fuente y colocarlo donde lo defini\u00f3 para colocarlo y nombrarlo en su archivo webpack.config.js<\/code>.<\/p>\nLa parte PHP de registrar un bloque<\/h2>\n
Para cada bloque, debe registrar el archivo Javascript y esto es lo mismo que registrar\u00eda cualquier otro script en WordPress, utilizando [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>. Tenga en cuenta que registramos el script, no lo ponemos en cola. Esto se debe a que tambi\u00e9n necesitamos llamar a una funci\u00f3n de PHP para registrar cada bloque personalizado, y esa funci\u00f3n es responsable de poner en cola el script cuando sea necesario.<\/p>\nPrefiero mantener el c\u00f3digo relacionado con Gutenberg en un archivo separado en mis temas. Pero puede, y lo haremos en este tutorial, simplemente escribir todo el c\u00f3digo PHP directamente dentro del tema functions.php<\/code>por simplicidad.<\/p>\nRecomiendo usar el init<\/code>gancho para su funci\u00f3n, y no enqueue_block_assets<\/code>. Podemos juntar tanto el registro del script como el registro del bloque.<\/p>\nadd_action('init', function() {\n wp_register_script('awp-myfirstblock-js', get_template_directory_uri(). '\/assets\/js\/gutenberg\/block-awhitepixel-myfirstblock.js');\n\u00a0\n register_block_type('awp\/firstblock', [\n 'editor_script' => 'awp-myfirstblock-js',\n ]);\n});<\/code><\/pre>\nLa funci\u00f3n de PHP que usaremos para registrar un nuevo bloque es [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. De manera similar a Javascript, registerBlockType()<\/code>acepta dos par\u00e1metros; el espacio de nombres y el nombre del bloque, y una matriz con argumentos. Aseg\u00farese de proporcionar exactamente el mismo espacio de nombres y nombre en PHP que en Javascript.<\/p>\nEn el segundo argumento hay algunos argumentos posibles (a algunos de los cuales volveremos m\u00e1s adelante en esta serie). Pero el m\u00e1s importante es editor_script<\/code>donde proporciona el identificador (primer par\u00e1metro de wp_register_script()<\/code>) del script registrado.<\/p>\n\u00a1Y eso es!<\/p>\n
Nuestro bloque en el editor de Gutenberg<\/h2>\n
Ahora, cuando actualice su editor en alguna publicaci\u00f3n, deber\u00eda encontrar nuestro bloque, ya sea abriendo la categor\u00eda Com\u00fan o buscando cualquiera de las palabras clave o el nombre que proporcion\u00f3.<\/p>\n
![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d216d1cdb.png\")
<\/a>![\"Crear](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d217e1762.gif\")
<\/a><\/p>\nNuestro bloque representa un simple ":)" tanto en el editor como en la interfaz. A partir de ahora, no puede editar nada en el bloque, \u00a1pero eso es lo que aprenderemos en los pr\u00f3ximos pasos!<\/p>\n