{"id":228949,"date":"2022-10-14T10:54:00","date_gmt":"2022-10-14T07:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228949"},"modified":"2022-11-09T04:55:27","modified_gmt":"2022-11-09T01:55:27","slug":"una-panoramica-dello-script-di-creazione-blocco-di-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/una-panoramica-dello-script-di-creazione-blocco-di-wordpress\/","title":{"rendered":"Una panoramica dello script di creazione blocco di WordPress"},"content":{"rendered":"\n<p>Il team ufficiale di WordPress Editor (Gutenberg) ha fornito <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">un piccolo script accurato per creare un plug-in di blocco<\/a> con il loro <code>@wordpress\/create-block<\/code>script npm.<\/p>\n<p>Questo articolo fornisce una panoramica di WordPress Create Block Script, insieme ai dettagli di ci\u00f2 che genera.<\/p>\n<p><strong>NOTA: questo articolo \u00e8 per una versione precedente di Crea script di blocco<\/strong><\/p>\n<p>Sebbene la teoria possa ancora essere applicata, alcune delle informazioni in questo articolo potrebbero non essere pi\u00f9 compatibili con l&#8217;ultimo script create block. \u00c8 possibile <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">visualizzare la nostra Guida allo script per la creazione di blocchi aggiornata qui<\/a>.<\/p>\n<h2>Esecuzione dello script Crea blocco<\/h2>\n<p>La documentazione ufficiale fornisce alcuni parametri diversi da passare al <code>npm init @wordpress\/block<\/code>comando.<\/p>\n<p>Per la mia configurazione l&#8217;ho eseguito in modalit\u00e0 interattiva omettendo i parametri. Ho inserito il seguente comando nel mio terminale (mentre <code>cd<\/code>&#8216;ed nella mia <code>wp-content\/plugins<\/code>cartella):<\/p>\n<pre><code>npm init @wordpress\/block\n<\/code><\/pre>\n<p>Lo Script mi \u200b\u200bha posto alcune domande per aiutarmi a costruire il mio blocco.<\/p>\n<p>Volendo creare un blocco di partenza per un&#8217;idea di plugin che ho (&quot;Wholesome Notes&quot;) ho risposto alle domande come segue:<\/p>\n<ul>\n<li>\n<p><strong>Lo slug del blocco utilizzato per l&#8217;identificazione (anche il nome del plugin e della cartella di output):<\/strong> voglio che il mio blocco venga chiamato <code>Wholesome Notes<\/code>, quindi ho inserito <code>wholesome-notes<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Lo spazio dei nomi interno per il nome del blocco (qualcosa di unico per i tuoi prodotti):<\/strong> poich\u00e9 dovrebbe essere univoco per tutti i miei prodotti che ho inserito <code>wholesome-code<\/code>, poich\u00e9 questo \u00e8 il nome della mia azienda. Con il senno di poi, sarebbe meglio abbreviare in <code>wc<\/code>o <code>wcltd<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Il titolo visualizzato per il tuo blocco:<\/strong> ho inserito il titolo del plugin, <code>Wholesome Notes<\/code>.<\/p>\n<\/li>\n<li>\n<p>Una panoramica dello script Create Block di WordPress Non ero sicuro al 100% di cosa volevo scrivere qui, quindi ho appena inserito del testo che intendo modificare in seguito.<\/p>\n<\/li>\n<li>\n<p><strong>Il dashicon per semplificare l&#8217;identificazione del blocco (opzionale):<\/strong> aprendo rapidamente la <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">risorsa Dashicon di WordPress<\/a>, ho scelto <code>admin-comments<\/code>perch\u00e9 ha un&#8217;icona di stile nota.<\/p>\n<\/li>\n<li>\n<p><strong>Il nome della categoria per aiutare gli utenti a navigare e scoprire il tuo blocco (usa i tasti freccia):<\/strong> ho scelto <code>layout<\/code>, anche se a dire il vero questo tipo di blocco avrebbe probabilmente bisogno di una propria categoria. Questo \u00e8 qualcosa che posso modificare in un secondo momento.<\/p>\n<\/li>\n<\/ul>\n<p>In esecuzione<code>npm init @wordpress\/block<\/code><\/p>\n<p>Lo script \u00e8 quindi andato avanti e ha installato tutte le dipendenze di cui aveva bisogno tramite npm (a questo punto, installa semplicemente il <code>wp-scripts<\/code>pacchetto npm come dipendenza).<\/p>\n<h2>Ispezione dell&#8217;uscita<\/h2>\n<p>Con i comandi precedenti, lo script di creazione blocco di WordPress fornisce il seguente output:<\/p>\n<ul>\n<li>note salutari\n<ul>\n<li>costruire\n<ul>\n<li>index.asset.php<\/li>\n<li>index.js<\/li>\n<li>index.js.map<\/li>\n<\/ul>\n<\/li>\n<li>nodi_moduli<\/li>\n<li>src\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<\/li>\n<li>.editorconfig<\/li>\n<li>.gitignore<\/li>\n<li>editor.css<\/li>\n<li>pacchetto.json<\/li>\n<li>style.css<\/li>\n<li>note-sane.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 panoramica dello script di creazione blocco di WordPress\" \/><a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/blocco output<\/p>\n<p>Di seguito \u00e8 riportata una ripartizione di ciascuno di questi file e cartelle.<\/p>\n<p><code>wholesome-notes<\/code><\/p>\n<p>Questa \u00e8 la cartella principale del plugin, ha lo stesso nome di quella che ho inserito per lo &#8216;slug&#8217; nelle domande di installazione.<\/p>\n<p><code>\/build<\/code><\/p>\n<p>Questa \u00e8 la cartella build. Contiene tutte le risorse JavaScript e PHP generate dalla <code>\/src<\/code>cartella. Questi vengono accodati tramite il <code>wholesome-notes.php<\/code>file del caricatore principale.<\/p>\n<p><code>\/build\/index.assets.php<\/code><\/p>\n<p>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 plugin. Viene accodato tramite il <code>wholesome-notes.php<\/code>file del caricatore principale.<\/p>\n<p><code>\/build\/index.js<\/code><\/p>\n<p>Questo \u00e8 il file JavaScript compilato principale e viene accodato tramite il <code>wholesome-notes.php<\/code>file di caricamento principale.<\/p>\n<p><code>\/build\/index.js.map<\/code><\/p>\n<p>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 run build<\/code>quando si compilano le risorse. \u00c8 un file utile per i debugger JavaScript per aiutare a identificare i nomi dei file e i numeri di riga se si verificano errori.<\/p>\n<p><code>\/node_modules<\/code><\/p>\n<p>Questa \u00e8 la cartella in cui sono installate tutte le dipendenze JavaScript per il tuo plugin.<\/p>\n<p><code>\/src<\/code><\/p>\n<p>Questa \u00e8 la cartella che contiene tutte le risorse non compilate per il tuo plugin.<\/p>\n<p><code>\/src\/index.js<\/code><\/p>\n<p>Questo \u00e8 il principale file JavaScript non compilato per il blocco dell&#8217;editor di WordPress (Gutenberg). Inizialmente contiene tutta la logica per il blocco.<\/p>\n<p><code>\/.editorconfig<\/code><\/p>\n<p>Questo file contiene utili predefiniti per il tuo IDE (Integrated Development Environment), come Visual Studio Code.<\/p>\n<p><code>\/.gitignore<\/code><\/p>\n<p>Questo file dice a git di ignorare determinati file quando esegui il commit in un repository git (come GitHub).<\/p>\n<p><code>\/editor.css<\/code><\/p>\n<p>Gli stili in questo file vengono emessi solo nell&#8217;editor, viene accodato tramite il <code>wholesome-notes.php<\/code>file del caricatore principale.<\/p>\n<p><code>\/package.json<\/code><\/p>\n<p>Questo file contiene tutte le dipendenze npm per il plugin e i comandi che puoi eseguire. Nota che il plugin utilizza <code>wp-scripts<\/code>( <code>@wordpress\/scripts<\/code>) come base, quindi inizialmente le dipendenze caricate sono per quel pacchetto.<\/p>\n<p><code>\/style.css<\/code><\/p>\n<p>Gli stili in questo file vengono emessi nell&#8217;editor e sul front-end del sito, vengono accodati tramite il <code>wholesome-notes.php<\/code>file del caricatore principale.<\/p>\n<p><code>\/wholesome-notes.php<\/code><\/p>\n<p>Questo \u00e8 il file di caricamento principale per il plugin. Il suo nome \u00e8 stato impostato tramite lo &quot;slug&quot; che abbiamo inserito nello script di installazione iniziale. Accoda tutte le risorse JavaScript necessarie per il plugin.<\/p>\n<h2>Esplorazione del plug-in<\/h2>\n<p>Dopo aver creato il tuo plugin, se lo attivi e lo inserisci nell&#8217;editor apparir\u00e0 come le seguenti schermate (frontend e backend).<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807884c3f2.png\" alt=\"Una panoramica dello script di creazione blocco di WordPress\" \/>Crea script di blocco: front-end predefinito<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e807893d3d5.png\" alt=\"Una panoramica dello script di creazione blocco di WordPress\" \/>Crea script di blocco: back-end predefinito<\/p>\n<p>Come puoi vedere, il blocco ci fornisce alcuni output di base che possiamo facilmente modificare per implementare il nostro blocco.<\/p>\n<h3>Blocca CSS<\/h3>\n<p>Come puoi vedere dagli screenshot, il codice di esempio <code>editor.css<\/code>implementa un bordo rosso nell&#8217;editor, mentre gli stili di esempio <code>styles.css<\/code>vengono applicati sia al front-end che al back-end.<\/p>\n<h3>Blocca JavaScript<\/h3>\n<p>Il punto di ingresso per personalizzare il blocco appena creato \u00e8 il <code>\/src\/index.js<\/code>file.<\/p>\n<p>C&#8217;\u00e8 molta documentazione inline in questo file, che spiega perch\u00e9 vengono importate alcune funzioni come <code>registerBlockType<\/code>per la registrazione del blocco e <code>__<\/code>per il supporto della traduzione del testo di i18n.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078a4b117.png\" alt=\"Una panoramica dello script di creazione blocco di WordPress\" \/>Crea commenti in linea Block index.js<\/p>\n<p>Fornisce anche alcuni output di base per le funzioni <code>edit<\/code>e <code>save<\/code>che vengono passate nella registrazione del blocco.<\/p>\n<p><strong>Nota:<\/strong> nelle versioni successive dello script, questi sono stati estratti nei propri file e inclusi come moduli in questo file.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169222-61e8078b6b4b9.png\" alt=\"Una panoramica dello script di creazione blocco di WordPress\" \/>Crea Block index.js Modifica e salva<\/p>\n<h2>Costruire il blocco<\/h2>\n<p>Secondo la <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">documentazione create block npm<\/a>, puoi usare diversi comandi nel tuo terminale (dalla cartella principale del tuo plugin), per fare cose come controllare la qualit\u00e0 del codice o aggiornare i pacchetti.<\/p>\n<p>I comandi principali di cui avrai bisogno per costruire il blocco saranno <code>npm start<\/code>compilare il tuo plugin per lo sviluppo e <code>npm run build<\/code>compilare la versione finale.<\/p>\n<p><code>wp-scripts<\/code>(dal <code>@wordpress\/scripts<\/code>pacchetto npm) \u00e8 la dipendenza principale per il tuo plugin. Questa dipendenza astrae tutti gli strumenti per il tuo blocco, quindi puoi concentrarti solo sulla creazione di JavaScript.<\/p>\n<p>Dietro le quinte <code>wp-scripts<\/code>utilizza <code>webpack<\/code>per compilare tutte le tue risorse nel <code>\/build\/index.js<\/code>file.<\/p>\n<p>Puoi leggere ulteriori informazioni <code>wp-scripts<\/code>nel <a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Block Editor Handbook<\/a> e puoi scoprire di pi\u00f9 sull&#8217;impostazione della build del webpack nella sezione <a href=\"https:\/\/developer.wordpress.org\/block-editor\/tutorials\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">&#8216;JavaScript Build Setup&#8217; del Manuale.<\/a><\/p>\n<h3>Estensione della configurazione del pacchetto web Crea blocco<\/h3>\n<p>La base di codice per il tuo blocco pu\u00f2 estendersi su pi\u00f9 file, o anche avere un numero di sottoblocchi o contenere stili complessi. In momenti come questi potresti voler estendere la configurazione del webpack integrata in <code>wp-scripts<\/code>.<\/p>\n<p>Per ulteriori informazioni, vedere il mio articolo su come <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">estendere la <code>wp-scripts<\/code>configurazione<\/a> del pacchetto web o consultare 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\">sezione Script dei pacchetti del Manuale dell&#8217;editor blocchi<\/a> per indicazioni.<\/p>\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>Il team ufficiale dell&#8217;editor di WordPress (Gutenberg) ha fornito un piccolo script accurato per creare un plug-in di blocco con il loro script npm @wordpress\/create-block. Questo articolo fornisce &#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":[896,720,844,865],"tags":[1168],"class_list":["post-228949","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228949","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=228949"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228949\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224138"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=228949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=228949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=228949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}