{"id":228420,"date":"2022-10-18T16:21:00","date_gmt":"2022-10-18T13:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228420"},"modified":"2022-11-09T02:20:31","modified_gmt":"2022-11-08T23:20:31","slug":"agregar-puntos-de-entrada-al-script-de-creacion-de-bloques-de-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/agregar-puntos-de-entrada-al-script-de-creacion-de-bloques-de-wordpress\/","title":{"rendered":"Agregar puntos de entrada al script de creaci\u00f3n de bloques de WordPress"},"content":{"rendered":"\n<p>Cuando crea un bloque por primera vez con el script de creaci\u00f3n de bloques de WordPress, su uso <code>npm init @wordpress\/block<\/code>le proporciona un punto de entrada a <code>\/src\/index.js<\/code>, que puede usar para compilar todos sus activos y estilos basados \u200b\u200ben bloques.<\/p>\n<p>A veces, desea agregar otros puntos de entrada, por ejemplo, es posible que desee usar los bloques del Editor de bloques de WordPress (Gutenberg) en otra parte del editor, por ejemplo, <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">en una p\u00e1gina de configuraci\u00f3n<\/a> o en el personalizador.<\/p>\n<p>Esta gu\u00eda lo ayuda a ampliar el script de creaci\u00f3n de bloque de WordPress <code>webpack.config<\/code>para que pueda agregar esos puntos de entrada adicionales.<\/p>\n<h2>requisitos previos<\/h2>\n<ul>\n<li>Familiar\u00edcese con <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la creaci\u00f3n de complementos para WordPress Gutenberg con el script de creaci\u00f3n de bloques<\/a><\/li>\n<\/ul>\n<h2>Crea tus archivos<\/h2>\n<p>Siguiendo con la <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda de creaci\u00f3n de secuencias de comandos de bloques<\/a>, vamos a crear algunos archivos en nuestra soluci\u00f3n:<\/p>\n<h3>Crear<code>\/src\/admin.js<\/code><\/h3>\n<p>Este archivo ser\u00e1 el punto de entrada principal para cualquier React que deseemos agregar a la pantalla de administraci\u00f3n de WordPress (por ejemplo, si quisi\u00e9ramos <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">crear una p\u00e1gina de opciones para controlar nuestra configuraci\u00f3n con los componentes de Gutenberg<\/a>.<\/p>\n<p>Cree el archivo <code>\/src\/admin.js<\/code>y pegue el siguiente c\u00f3digo:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport api from '@wordpress\/api';\n\nimport '.\/admin.scss';\n<\/code><\/pre>\n<p>Realmente no estamos haciendo nada en este archivo todav\u00eda, eso ser\u00e1 el tema de gu\u00edas posteriores. Por ahora solo estamos ingresando algo de c\u00f3digo para poder probar la salida.<\/p>\n<p>Sin embargo, importa el <code>\/src\/admin.scss<\/code>archivo, que se compilar\u00e1 para contener todo nuestro CSS personalizado para el administrador de WordPress.<\/p>\n<h3>Crear<code>\/src\/admin.scss<\/code><\/h3>\n<p>Cree el archivo <code>\/src\/admin.scss<\/code>y agregue algunos SCSS de prueba:<\/p>\n<pre><code>body {\n  background: pink;\n}\n<\/code><\/pre>\n<p>Nuevamente, este c\u00f3digo no sirve para nada, aparte de probar si el SCSS se compila.<\/p>\n<h3>Crear<code>\/webpack.config.js<\/code><\/h3>\n<p>Cree un archivo en la ra\u00edz de su complemento llamado <code>webpack.config.js<\/code>, cubriremos qu\u00e9 poner en este archivo en breve.<\/p>\n<h2>Edite el archivo PHP ra\u00edz del complemento<\/h2>\n<p>Si ha estado siguiendo la gu\u00eda anterior, ese complemento se llamar\u00e1 <code>wholesome-plugin.php<\/code>.<\/p>\n<p>En este archivo queremos registrar los scripts para el \u00e1rea de administraci\u00f3n, que ser\u00e1n generados por la configuraci\u00f3n de nuestro paquete web. Agregue la siguiente funci\u00f3n al final de ese archivo:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_admin_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/admin.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $admin_js     = 'build\/admin.js';\n    $script_asset = require( $script_asset_path );\n    wp_register_script(\n        'wholesomecode-wholesome-plugin-admin-editor',\n        plugins_url( $admin_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    $admin_css = 'build\/admin.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-admin',\n        plugins_url( $admin_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$admin_css\") );\n}\nadd_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );\n<\/code><\/pre>\n<p>Pr\u00e1cticamente hemos copiado el c\u00f3digo del bloque de puesta en cola anterior, pero lo hemos hecho relevante para nuestros archivos de salida esperados de <code>\/build\/admin.js<\/code>y <code>\/build\/admin.css<\/code>. Tenga en cuenta que tambi\u00e9n estamos cargando el <code>\/build\/admin.asset.php<\/code>archivo especialmente generado, que agregar\u00e1 autom\u00e1ticamente todas las dependencias del editor de bloques de WordPress (Gutenberg) para nuestro script de administraci\u00f3n.<\/p>\n<h2>Editar el<code>webPack.config<\/code><\/h2>\n<p>En el paso 2 creamos el archivo <code>webpack.config.js<\/code>, en este archivo agregamos el siguiente c\u00f3digo:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst path = require( 'path' );\n\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        ...defaultConfig.entry,\n        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),\n    }\n};\n<\/code><\/pre>\n<p>Este c\u00f3digo importa el <code>webpack.config<\/code>de <code>@wordpress\/scripts<\/code>. Este es el c\u00f3digo que se ejecuta cada vez que ejecuta <code>npm start<\/code>su soluci\u00f3n.<\/p>\n<p>Todo lo que estamos haciendo es tomar esta configuraci\u00f3n y agregar otro punto de entrada, con la l\u00ednea <code>admin: path.resolve( process.cwd(), 'src', 'admin.js' ),<\/code>.<\/p>\n<p>El resto del c\u00f3digo simplemente le dice a webpack que use la configuraci\u00f3n que ya est\u00e1 establecida (por ejemplo <code>...defautConfig<\/code>, <code>...defaultConfig.entry<\/code>).<\/p>\n<h2>Compilar el c\u00f3digo<\/h2>\n<p>Compile su complemento con el <code>npm start<\/code>comando y veamos qu\u00e9 sucede:<\/p>\n<p>Compilaci\u00f3n del c\u00f3digo con el nuevo punto de entrada<\/p>\n<p>El script ahora genera algunos archivos nuevos para nosotros:<\/p>\n<ul>\n<li>\n<p><code>\/build\/admin.assets.php<\/code>\u2014 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 nuevo punto de entrada. Se <code>wholesome-plugin.php<\/code>pone en cola a trav\u00e9s del archivo del cargador principal a trav\u00e9s de la funci\u00f3n adicional que implementamos.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css<\/code>\u2014 Este es el archivo CSS de administraci\u00f3n y se <code>wholesome-plugin.php<\/code>pone en cola a trav\u00e9s del archivo del cargador principal a trav\u00e9s de la funci\u00f3n adicional que implementamos.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js<\/code>\u2014 Este es el archivo JavaScript compilado principal y se <code>wholesome-plugin.php<\/code>pone en cola a trav\u00e9s del archivo del cargador principal a trav\u00e9s de la funci\u00f3n adicional que implementamos.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css.map<\/code>\u2014 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 build<\/code>cuando est\u00e1 compilando sus activos). Es un archivo \u00fatil para que los depuradores ayuden a identificar los nombres de los archivos y los n\u00fameros de l\u00ednea en el CSS si se producen errores.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js.map<\/code>\u2014 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 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<\/li>\n<li>\n<p>Mire el uso <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de metacampos de publicaci\u00f3n en bloques de Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Mire el uso de <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">opciones y configuraciones en bloques de Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Mire la creaci\u00f3n <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de cajas meta personalizadas en Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Mire la creaci\u00f3n de una <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e1gina de opciones y configuraciones usando componentes de Gutenberg<\/a><\/p>\n<\/li>\n<\/ul>\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>Cuando crea un bloque por primera vez con el script de creaci\u00f3n de bloque de WordPress usando npm init @wordpress\/block, le proporciona un punto de entrada a \/src\/index.js, que puede usar para compilar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,747,914,779,840],"tags":[1172],"class_list":["post-228420","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-fuente-abierta","category-otro","category-software-de-codigo-abierto","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228420","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=228420"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228420\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}