{"id":229166,"date":"2022-10-18T16:44:00","date_gmt":"2022-10-18T13:44:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229166"},"modified":"2022-11-09T05:47:57","modified_gmt":"2022-11-09T02:47:57","slug":"aggiungi-punti-di-ingresso-allo-script-crea-blocco-di-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/aggiungi-punti-di-ingresso-allo-script-crea-blocco-di-wordpress\/","title":{"rendered":"Aggiungi punti di ingresso allo script Crea blocco di WordPress"},"content":{"rendered":"\n<p>Quando crei un blocco per la prima volta con lo script di creazione blocco di WordPress che utilizza <code>npm init @wordpress\/block<\/code>, ti fornisce un punto di ingresso a <code>\/src\/index.js<\/code>, che puoi utilizzare per compilare tutte le tue risorse e stili basati su blocchi.<\/p>\n<p>A volte vuoi aggiungere altri punti di ingresso, ad esempio, potresti voler utilizzare i blocchi di WordPress Block Editor (Gutenberg) altrove nell&#8217;editor, ad esempio <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">in una pagina delle impostazioni<\/a> o nel personalizzatore.<\/p>\n<p>Questa guida ti aiuta a estendere lo script di creazione blocco di WordPress <code>webpack.config<\/code>in modo da poter aggiungere quei punti di ingresso aggiuntivi.<\/p>\n<h2>Prerequisiti<\/h2>\n<ul>\n<li>Acquisisci familiarit\u00e0 con <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la creazione di plug-in per WordPress Gutenberg con lo script di creazione del blocco<\/a><\/li>\n<\/ul>\n<h2>Crea i tuoi file<\/h2>\n<p>Seguendo la <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida allo script di creazione del blocco<\/a>, creeremo alcuni file nella nostra soluzione:<\/p>\n<h3>Creare<code>\/src\/admin.js<\/code><\/h3>\n<p>Questo file sar\u00e0 il punto di ingresso principale per qualsiasi React che desideriamo aggiungere alla schermata di amministrazione di WordPress (ad esempio, se volessimo <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">creare una pagina di opzioni per controllare le nostre impostazioni con Gutenberg Components<\/a>.<\/p>\n<p>Crea il file <code>\/src\/admin.js<\/code>e incolla il codice seguente:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport api from '@wordpress\/api';\n\nimport '.\/admin.scss';\n<\/code><\/pre>\n<p>Non stiamo ancora facendo nulla in questo file, che sar\u00e0 oggetto di guide successive. Per ora stiamo solo inserendo del codice in modo da poter testare l&#8217;output.<\/p>\n<p>Tuttavia, importa il <code>\/src\/admin.scss<\/code>file, che verr\u00e0 compilato per contenere tutti i nostri CSS personalizzati per l&#8217;amministratore di WordPress.<\/p>\n<h3>Creare<code>\/src\/admin.scss<\/code><\/h3>\n<p>Crea il file <code>\/src\/admin.scss<\/code>e aggiungi alcuni SCSS di prova:<\/p>\n<pre><code>body {\n  background: pink;\n}\n<\/code><\/pre>\n<p>Anche in questo caso, questo codice non serve a nulla, se non per verificare se l&#8217;SCSS viene compilato.<\/p>\n<h3>Creare<code>\/webpack.config.js<\/code><\/h3>\n<p>Crea un file nella radice del tuo plug-in chiamato tratteremo <code>webpack.config.js<\/code>a breve cosa inserire in questo file.<\/p>\n<h2>Modifica il file PHP radice del plugin<\/h2>\n<p>Se hai seguito la guida precedente, quel plugin si chiamer\u00e0 <code>wholesome-plugin.php<\/code>.<\/p>\n<p>In questo file vogliamo registrare gli script per l&#8217;area di amministrazione, che verranno emessi dalla configurazione del nostro webpack. Aggiungi la seguente funzione in fondo a quel file:<\/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>Abbiamo praticamente copiato il codice dal precedente blocco di accodamento, ma l&#8217;abbiamo reso rilevante per i nostri file di output previsti di <code>\/build\/admin.js<\/code>e <code>\/build\/admin.css<\/code>. Nota che stiamo anche caricando il <code>\/build\/admin.asset.php<\/code>file appositamente generato, che aggiunger\u00e0 automaticamente tutte le dipendenze dell&#8217;editor di blocchi di WordPress (Gutenberg) per il nostro script di amministrazione.<\/p>\n<h2>Modifica il<code>webPack.config<\/code><\/h2>\n<p>Nel passaggio 2 abbiamo creato il file <code>webpack.config.js<\/code>, in questo file aggiungiamo il seguente codice:<\/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>Questo codice importa <code>webpack.config<\/code>da <code>@wordpress\/scripts<\/code>. Questo \u00e8 il codice che viene eseguito ogni volta che esegui <code>npm start<\/code>la tua soluzione.<\/p>\n<p>Tutto ci\u00f2 che stiamo facendo \u00e8 prendere questa configurazione e aggiungere un altro punto di ingresso, con la linea <code>admin: path.resolve( process.cwd(), 'src', 'admin.js' ),<\/code>.<\/p>\n<p>Il resto del codice sta solo dicendo a webpack di utilizzare le impostazioni che sono gi\u00e0 in atto (ad esempio <code>...defautConfig<\/code>, <code>...defaultConfig.entry<\/code>).<\/p>\n<h2>Compila il codice<\/h2>\n<p>Compila il tuo plug-in con il <code>npm start<\/code>comando e diamo un&#8217;occhiata a cosa succede:<\/p>\n<p>Compilazione del Codice con il Nuovo Punto di Entrata<\/p>\n<p>Lo script ora genera per noi alcuni nuovi file:<\/p>\n<ul>\n<li>\n<p><code>\/build\/admin.assets.php<\/code>\u2014 Questo file PHP viene generato automaticamente quando la <code>\/src<\/code>cartella viene compilata. Contiene un array di tutte le decenze JavaScript di WordPress Editor (Gutenberg) utilizzate dal tuo nuovo punto di ingresso. Viene accodato tramite il <code>wholesome-plugin.php<\/code>file del caricatore principale tramite la funzione aggiuntiva che abbiamo messo in atto.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css<\/code>\u2014 Questo \u00e8 il file CSS di amministrazione e viene accodato tramite il <code>wholesome-plugin.php<\/code>file di caricamento principale tramite la funzione aggiuntiva che abbiamo messo in atto.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js<\/code>\u2014 Questo \u00e8 il file JavaScript compilato principale e viene accodato tramite il <code>wholesome-plugin.php<\/code>file di caricamento principale tramite la funzione aggiuntiva che abbiamo messo in atto.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.css.map<\/code>\u2014 Questo file viene generato solo quando si compilano le risorse per la modalit\u00e0 di sviluppo (IE lo si esegue <code>npm start<\/code>e non <code>npm build<\/code>quando si compilano le risorse. \u00c8 un file utile per i debugger per aiutare a identificare i nomi dei file e i numeri di riga nel CSS se si verificano errori.<\/p>\n<\/li>\n<li>\n<p><code>\/build\/admin.js.map<\/code>\u2014 Questo file viene generato solo quando si compilano gli asset per la modalit\u00e0 di sviluppo (IE lo si esegue <code>npm start<\/code>e non <code>npm build<\/code>quando si compilano gli asset. \u00c8 un file utile per i debugger JavaScript per aiutare a identificare i nomi dei file e i numeri di riga in caso di errori.<\/p>\n<\/li>\n<li>\n<p>Guarda l&#8217;utilizzo <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dei meta campi dei post nei blocchi di Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Guarda l&#8217;utilizzo di <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">opzioni e impostazioni nei blocchi di Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Guarda come creare <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">meta box personalizzati in Gutenberg<\/a><\/p>\n<\/li>\n<li>\n<p>Guarda la creazione di una <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pagina di opzioni e impostazioni utilizzando i componenti Gutenberg<\/a><\/p>\n<\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando crei per la prima volta un blocco con lo script di creazione blocco di WordPress usando npm init @wordpress\/block, ti \u200b\u200bfornisce un punto di ingresso a \/src\/index.js, che puoi usare per compilare&#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":[918,896,751,783,720,844],"tags":[1168],"class_list":["post-229166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-open-source-projektmanagement-3","category-software-open-source","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=229166"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}