{"id":228242,"date":"2022-10-14T10:52:00","date_gmt":"2022-10-14T07:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228242"},"modified":"2022-11-09T01:28:07","modified_gmt":"2022-11-08T22:28:07","slug":"una-descripcion-general-del-script-de-creacion-de-bloques-de-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/una-descripcion-general-del-script-de-creacion-de-bloques-de-wordpress\/","title":{"rendered":"Una descripci\u00f3n general del script de creaci\u00f3n de bloques de WordPress"},"content":{"rendered":"\n<p>El equipo oficial del editor de WordPress (Gutenberg) ha proporcionado <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">un peque\u00f1o script para que pueda crear un complemento de bloque<\/a> con su <code>@wordpress\/create-block<\/code>script npm.<\/p>\n<p>Este art\u00edculo brinda una descripci\u00f3n general de WordPress Create Block Script, junto con detalles de lo que genera.<\/p>\n<p><strong>NOTA: Este art\u00edculo es para una versi\u00f3n anterior de Create Block Script<\/strong><\/p>\n<p>Aunque la teor\u00eda a\u00fan se puede aplicar, es posible que parte de la informaci\u00f3n de este art\u00edculo ya no sea compatible con el \u00faltimo script de creaci\u00f3n de bloques. Puede <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ver nuestra gu\u00eda actualizada de creaci\u00f3n de secuencias de comandos de bloques aqu\u00ed<\/a>.<\/p>\n<h2>Ejecutar el script de creaci\u00f3n de bloque<\/h2>\n<p>La documentaci\u00f3n oficial le brinda algunos par\u00e1metros diferentes para pasar al <code>npm init @wordpress\/block<\/code>comando.<\/p>\n<p>Para mi configuraci\u00f3n, lo ejecut\u00e9 en modo interactivo omitiendo los par\u00e1metros. Ingres\u00e9 el siguiente comando en mi terminal (mientras estaba <code>cd<\/code>en mi <code>wp-content\/plugins<\/code>carpeta):<\/p>\n<pre><code>npm init @wordpress\/block\n<\/code><\/pre>\n<p>El Script me hizo algunas preguntas para ayudarme a construir mi bloque.<\/p>\n<p>Queriendo crear un bloque de inicio para una idea de complemento que tengo (&#8216;Notas saludables&#8217;), respond\u00ed las preguntas de la siguiente manera:<\/p>\n<ul>\n<li>\n<p><strong>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 <code>Wholesome Notes<\/code>, as\u00ed que ingres\u00e9 <code>wholesome-notes<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>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 <code>wholesome-code<\/code>, ya que este es el nombre de mi empresa. En retrospectiva, ser\u00eda mejor acortarlo a <code>wc<\/code>o <code>wcltd<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>El t\u00edtulo de visualizaci\u00f3n para su bloque:<\/strong> Ingres\u00e9 el t\u00edtulo del complemento, <code>Wholesome Notes<\/code>.<\/p>\n<\/li>\n<li>\n<p>Una descripci\u00f3n general de la secuencia de comandos Create Block de WordPress No estaba 100% seguro de lo que quer\u00eda escribir aqu\u00ed, as\u00ed que solo ingres\u00e9 un texto que tengo la intenci\u00f3n de modificar m\u00e1s adelante.<\/p>\n<\/li>\n<li>\n<p><strong>El dashicon para que sea m\u00e1s f\u00e1cil identificar su bloque (opcional):<\/strong> Abriendo r\u00e1pidamente el <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">recurso WordPress Dashicons<\/a>, lo eleg\u00ed <code>admin-comments<\/code>porque tiene un icono de estilo de nota.<\/p>\n<\/li>\n<li>\n<p><strong>El nombre de la categor\u00eda para ayudar a los usuarios a navegar y descubrir su bloque (utilice las teclas de flecha):<\/strong> yo eleg\u00ed <code>layout<\/code>, aunque, para ser honesto, este tipo de bloque probablemente necesite su propia categor\u00eda. Eso es algo que puedo modificar en una fecha posterior.<\/p>\n<\/li>\n<\/ul>\n<p>Correr<code>npm init @wordpress\/block<\/code><\/p>\n<p>Luego, el script sigui\u00f3 adelante e instal\u00f3 todas las dependencias que necesitaba a trav\u00e9s de npm (en este punto, solo instala el <code>wp-scripts<\/code>paquete npm como una dependencia).<\/p>\n<h2>Inspecci\u00f3n de la salida<\/h2>\n<p>Con los comandos anteriores, WordPress Create Block Script le brinda el siguiente resultado:<\/p>\n<ul>\n<li>notas-saludables\n<ul>\n<li>construir\n<ul>\n<li>\u00edndice.activo.php<\/li>\n<li>\u00edndice.js<\/li>\n<li>index.js.mapa<\/li>\n<\/ul>\n<\/li>\n<li>node_modules<\/li>\n<li>origen\n<ul>\n<li>\u00edndice.js<\/li>\n<\/ul>\n<\/li>\n<li>.editorconfig<\/li>\n<li>.gitignore<\/li>\n<li>editor.css<\/li>\n<li>paquete.json<\/li>\n<li>estilo.css<\/li>\n<li>notas-saludables.php<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e80786cc626.png\" alt=\"Una descripci\u00f3n general del script de creaci\u00f3n de bloques de WordPress\" \/><a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/bloquear salida<\/p>\n<p>El siguiente es un desglose de cada uno de esos archivos y carpetas.<\/p>\n<p><code>wholesome-notes<\/code><\/p>\n<p>Esta es la carpeta ra\u00edz del complemento, tiene el mismo nombre que el que ingres\u00e9 para el &#8216;slug&#8217; en las preguntas de configuraci\u00f3n.<\/p>\n<p><code>\/build<\/code><\/p>\n<p>Esta es la carpeta de compilaci\u00f3n. Contiene todos los activos de JavaScript y PHP generados a partir de la <code>\/src<\/code>carpeta. Estos se ponen en cola a trav\u00e9s del <code>wholesome-notes.php<\/code>archivo del cargador principal.<\/p>\n<p><code>\/build\/index.assets.php<\/code><\/p>\n<p>Este archivo PHP se genera autom\u00e1ticamente cuando <code>\/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 <code>wholesome-notes.php<\/code>archivo del cargador principal.<\/p>\n<p><code>\/build\/index.js<\/code><\/p>\n<p>Este es el principal archivo JavaScript compilado y se pone en cola a trav\u00e9s del <code>wholesome-notes.php<\/code>archivo del cargador principal.<\/p>\n<p><code>\/build\/index.js.map<\/code><\/p>\n<p>Este archivo solo se genera cuando est\u00e1 compilando los activos para el modo de desarrollo (es decir, lo ejecuta <code>npm start<\/code>y no <code>npm run 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<p><code>\/node_modules<\/code><\/p>\n<p>Esta es la carpeta en la que se instalan todas las dependencias de JavaScript para su complemento.<\/p>\n<p><code>\/src<\/code><\/p>\n<p>Esta es la carpeta que contiene todos los activos sin compilar para su complemento.<\/p>\n<p><code>\/src\/index.js<\/code><\/p>\n<p>Este es el principal archivo JavaScript sin compilar para su bloque del Editor de WordPress (Gutenberg). Inicialmente contiene toda la l\u00f3gica del bloque.<\/p>\n<p><code>\/.editorconfig<\/code><\/p>\n<p>Este archivo contiene ajustes preestablecidos \u00fatiles para su IDE (Entorno de desarrollo integrado), como Visual Studio Code.<\/p>\n<p><code>\/.gitignore<\/code><\/p>\n<p>Este archivo le dice a git que ignore ciertos archivos cuando se compromete con un repositorio de git (como GitHub).<\/p>\n<p><code>\/editor.css<\/code><\/p>\n<p>Los estilos en este archivo se generan solo en el editor, se ponen en cola a trav\u00e9s del <code>wholesome-notes.php<\/code>archivo del cargador principal.<\/p>\n<p><code>\/package.json<\/code><\/p>\n<p>Este archivo contiene todas las dependencias de npm para el complemento y los comandos que puede ejecutar. Tenga en cuenta que el complemento utiliza <code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>) como base, por lo que inicialmente las dependencias cargadas son para ese paquete.<\/p>\n<p><code>\/style.css<\/code><\/p>\n<p>Los estilos en este archivo se muestran en el editor y en la parte frontal del sitio, se ponen en cola a trav\u00e9s del <code>wholesome-notes.php<\/code>archivo del cargador principal.<\/p>\n<p><code>\/wholesome-notes.php<\/code><\/p>\n<p>Este es el archivo del cargador principal para el complemento. Su nombre se estableci\u00f3 mediante el &#8216;slug&#8217; que ingresamos en el script de configuraci\u00f3n inicial. Pone en cola todos los activos de JavaScript necesarios para el complemento.<\/p>\n<h2>Explorando el complemento<\/h2>\n<p>Una vez que haya creado su complemento, si lo activa y lo inserta en el editor, se ver\u00e1 como las siguientes capturas de pantalla (frontend y backend).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807884c3f2.png\" alt=\"Una descripci\u00f3n general del script de creaci\u00f3n de bloques de WordPress\" \/>Crear secuencia de comandos de bloque: front-end predeterminado<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807893d3d5.png\" alt=\"Una descripci\u00f3n general del script de creaci\u00f3n de bloques de WordPress\" \/>Crear secuencia de comandos de bloque: back-end predeterminado<\/p>\n<p>Como puede ver, el bloque nos proporciona una salida b\u00e1sica que podemos modificar f\u00e1cilmente para implementar nuestro propio bloque.<\/p>\n<h3>Bloquear CSS<\/h3>\n<p>Como puede ver en las capturas de pantalla, el c\u00f3digo de ejemplo <code>editor.css<\/code>implementa un borde rojo en el editor, mientras que los estilos de ejemplo <code>styles.css<\/code>se aplican tanto al frente como al backend.<\/p>\n<h3>Bloquear JavaScript<\/h3>\n<p>El punto de entrada para personalizar el bloque reci\u00e9n creado es el <code>\/src\/index.js<\/code>archivo.<\/p>\n<p>Hay mucha documentaci\u00f3n en l\u00ednea en este archivo, que explica por qu\u00e9 se importan ciertas funciones, como <code>registerBlockType<\/code>el registro del bloque y el <code>__<\/code>soporte de traducci\u00f3n de texto i18n.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078a4b117.png\" alt=\"Una descripci\u00f3n general del script de creaci\u00f3n de bloques de WordPress\" \/>Crear bloque index.js Comentarios en l\u00ednea<\/p>\n<p>Tambi\u00e9n le brinda una salida muy b\u00e1sica para las funciones <code>edit<\/code>y <code>save<\/code>que se pasan al registro del bloque.<\/p>\n<p><strong>Nota:<\/strong> En versiones posteriores del script, estos se extrajeron en sus propios archivos y se incluyeron como m\u00f3dulos en este archivo.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078b6b4b9.png\" alt=\"Una descripci\u00f3n general del script de creaci\u00f3n de bloques de WordPress\" \/>Crear bloque index.js Editar y guardar<\/p>\n<h2>Construyendo el bloque<\/h2>\n<p>Seg\u00fan la <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documentaci\u00f3n de create block npm<\/a>, puede usar varios comandos en su terminal (desde la carpeta ra\u00edz de su complemento), para hacer cosas como verificar la calidad del c\u00f3digo o actualizar paquetes.<\/p>\n<p>Los comandos principales que necesitar\u00e1 para construir el bloque ser\u00e1n <code>npm start<\/code>compilar su complemento para el desarrollo y <code>npm run build<\/code>compilar la versi\u00f3n final.<\/p>\n<p><code>wp-scripts<\/code>(del <code>@wordpress\/scripts<\/code>paquete 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.<\/p>\n<p>Detr\u00e1s de escena se <code>wp-scripts<\/code>utiliza <code>webpack<\/code>para compilar todos sus activos en el <code>\/build\/index.js<\/code>archivo.<\/p>\n<p>Puede obtener m\u00e1s informaci\u00f3n <code>wp-scripts<\/code>en el <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">manual del editor de bloques<\/a> y puede obtener m\u00e1s informaci\u00f3n sobre la configuraci\u00f3n de compilaci\u00f3n del paquete web en la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">secci\u00f3n &quot;Configuraci\u00f3n de compilaci\u00f3n de JavaScript&quot; del manual.<\/a><\/p>\n<h3>Ampliaci\u00f3n de la configuraci\u00f3n del paquete web Create Block<\/h3>\n<p>El c\u00f3digo 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\u00f3n del paquete web integrado en <code>wp-scripts<\/code>.<\/p>\n<p>Para obtener m\u00e1s informaci\u00f3n, consulte mi art\u00edculo sobre c\u00f3mo <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ampliar la <code>wp-scripts<\/code>configuraci\u00f3n<\/a> del paquete web o consulte la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/#provide-your-own-webpack-config\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">secci\u00f3n Scripts del paquete del Manual del editor de bloques<\/a> para obtener orientaci\u00f3n.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El equipo oficial del editor de WordPress (Gutenberg) ha proporcionado un peque\u00f1o script para que pueda crear un complemento de bloque con su script @wordpress\/create-block npm. Este art\u00edculo brinda&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224138,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,840,861],"tags":[1172],"class_list":["post-228242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228242","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=228242"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228242\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224138"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}