{"id":233799,"date":"2023-02-21T13:11:00","date_gmt":"2023-02-21T10:11:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233799"},"modified":"2022-11-11T12:29:51","modified_gmt":"2022-11-11T09:29:51","slug":"come-aggiungere-stili-di-blocco-personalizzati-ai-blocchi-gutenberg-di-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-aggiungere-stili-di-blocco-personalizzati-ai-blocchi-gutenberg-di-wordpress\/","title":{"rendered":"Come aggiungere stili di blocco personalizzati ai blocchi Gutenberg di WordPress"},"content":{"rendered":"\n

Una caratteristica un po’ meno conosciuta in Gutenberg \u00e8 la possibilit\u00e0 di impostare stili diversi per i blocchi. Puoi registrare tanti stili diversi su qualsiasi tipo di blocco per dare allo stesso blocco design diversi. Gli stili possibili per i blocchi vengono visualizzati come una sezione nella parte destra dell’editor. Ogni stile ha la sua anteprima. Se stai gestendo correttamente gli stili, il passaggio da uno stile all’altro dovrebbe aggiornare immediatamente il design all’interno dell’editor e nel frontend.<\/p>\n

La documentazione di WordPress per questa funzione<\/a> non \u00e8 attualmente cos\u00ec completa e informativa come potrebbe essere. Quindi in questo post daremo uno sguardo dettagliato a come aggiungere i tuoi stili di blocco personalizzati e come dovresti gestire lo stile per loro.<\/p>\n

\"Come<\/a><\/p>\n

Il modo in cui funziona questa funzione \u00e8 che ogni volta che Gutenberg rileva che un tipo di blocco \u00e8 stato registrato come minimo uno stile, la casella "Stili" apparir\u00e0 automaticamente nella parte destra dell’editor. Al suo interno l’editor pu\u00f2 scegliere tra lo stile predefinito o qualsiasi stile di blocco che \u00e8 stato aggiunto.<\/p>\n

Nelle versioni precedenti (almeno prima di WordPress 5.3) la registrazione di uno stile personalizzato richiedeva di registrare anche lo stile predefinito ("nessuno stile"). Fortunatamente questo \u00e8 stato risolto nelle versioni pi\u00f9 recenti di WordPress, quindi ora devi solo registrare i tuoi stili personalizzati e WordPress aggiunger\u00e0 automaticamente lo stile predefinito.<\/p>\n

Puoi registrare stili di blocco personalizzati in due modi; con PHP o con Javascript. Daremo un’occhiata a entrambi. Ma prima alcuni a-ha per quanto riguarda la gestione dei tuoi stili.<\/p>\n

Una nota sugli stili di accodamento per Gutenberg<\/h2>\n

Potrebbe esserci una certa confusione su come e dove aggiungere i tuoi stili (file CSS); solo all’editor, al frontend o un foglio di stile per entrambi. Uno degli scopi principali dell’editor Gutenberg \u00e8 assicurarsi di poter visualizzare in anteprima correttamente l’aspetto del contenuto del tuo post, all’interno dell’editor. Quindi ti consigliamo di assicurarti che i tuoi stili personalizzati vengano applicati nell’editor e nel frontend.<\/p>\n

Il modo in cui lo gestisci dipende davvero dal tuo progetto e dalla configurazione del foglio di stile esistente. Se stai sviluppando un tema completo, probabilmente includi gi\u00e0 lo stile dei blocchi nel foglio di stile del frontend. Potresti considerare di aggiungere un foglio di stile separato che accoderai solo per l’editor. Ma questo potrebbe essere difficile da mantenere se aggiungi molti stili diversi. Dovresti aggiornare i tuoi stili in due punti e assicurarti che i risultati siano gli stessi. La soluzione sarebbe quella di mantenere un foglio di stile da accodare sia per l’editor che per il frontend. Ma poi il tuo frontend dovrebbe caricare almeno due fogli di stile separati e questo potrebbe non essere l’ideale.<\/p>\n

Un’altra soluzione \u00e8 usare ad esempio SCSS o LESS e impostare @imports<\/code>in modo tale che sia necessario scrivere gli stili di blocco solo una volta, e viene applicato sia all’editor che al frontend. Come vedrai di seguito quando usi PHP per registrare stili di blocco personalizzati, hai ancora un’altra opzione; per aggiungere stili in linea. Questi stili verranno applicati sia nell’editor che nel frontend. Nel frontend verranno aggiunti da WordPress come inline personalizzati <style type=\"text\/css\">...<\/style><\/code>all’interno dell’intestazione.<\/p>\n

Comunque tu scelga di risolverlo, sappi che ci sono un paio di nuovi hook per gli stili di registro (e gli script) per Gutenberg. Se vuoi accodare un foglio di stile sia per il frontend che per l’editor, usa l’hook enqueue_block_assets<\/code>. Se vuoi aggiungere un foglio di stile solo per l’editor, accodalo all’interno dell’hook enqueue_block_editor_assets<\/code>.<\/p>\n

Come applicare lo stile agli stili di blocco personalizzati<\/h2>\n

Gli stili di blocco personalizzati verranno aggiunti come classe di un determinato modello sul tag HTML pi\u00f9 esterno per il blocco.<\/p>\n

La classe CSS per gli stili di blocco viene aggiunta sotto forma di ” is-style-<stylename><\/code>“. Se ad esempio dai un nome al tuo stile ” outline<\/code>“, il blocco otterr\u00e0 la classe ” is-style-outline<\/code>“.<\/p>\n

Tuttavia, potresti riscontrare che l’editor di Gutenberg in alcuni casi sovrascriver\u00e0 il tuo stile. Ti consiglio di anteporre lo stile del tuo editor al selettore editor-styles-wrapper<\/code>per assicurarti che i tuoi stili "vincano". Tieni presente che questa classe non esiste nel frontend, quindi per sicurezza potresti dover aggiungere due selettori, in questo modo (se stai utilizzando lo stesso foglio di stile sia per l’editor che per il frontend):<\/p>\n

.is-style-colored-bottom-border, \n.editor-styles-wrapper .is-style-colored-bottom-border { \n    border-bottom: 2px solid purple;\n}<\/code><\/pre>\n
Aggiunta di stili di blocco personalizzati con PHP<\/h2>\n
Per aggiungere un tipo di blocco personalizzato usando PHP utilizziamo la funzione [register_block_style](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_style\/)()<\/code>. La documentazione purtroppo \u00e8 priva di informazioni in quale hook dovremmo usare, ma ho avuto fortuna con l’hook init<\/code>.<\/p>\n
Devi conoscere il nome dello spazio dei nomi Gutenberg del tuo tipo di blocco per aggiungere uno stile personalizzato su di esso. Tutti i blocchi standard di WordPress hanno lo spazio dei nomi ” core<\/code>" seguito da a \/<\/code>e una versione slug del loro nome. Ad esempio, il nome di Gutenberg per il blocco di paragrafo standard \u00e8 core\/paragraph<\/code>.<\/p>\n
La registrazione di uno stile di blocco personalizzato viene eseguita nella sua forma pi\u00f9 semplice in questo modo:<\/p>\n
add_action('init', function() {\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n    ]);\n});<\/code><\/pre>\n
Il codice precedente aggiunge uno stile di blocco personalizzato al tipo di blocco Intestazione, che risulterebbe nella classe is-style-colored-bottom-border<\/code>su qualsiasi Intestazione che ha scelto questo stile.<\/p>\n
Questa funzione ti fornisce due metodi per aggiungere il tuo CSS (se non lo hai aggiunto in altro modo); sia fornendo CSS in linea come stringa, sia fornendo un handle di foglio di stile registrato che WordPress metter\u00e0 in coda per te se necessario.<\/p>\n
Se desideri aggiungere uno stile in linea (ricorda, ci\u00f2 influenzer\u00e0 sia l’editor che il frontend), aggiungi l’elemento ‘ inline_style<\/code>‘ alla chiamata di funzione e scrivi il CSS completo come stringa come valore:<\/p>\n
add_action('init', function() {\n    $inline_css = '.is-style-colored-bottom-border, .editor-styles-wrapper .is-style-colored-bottom-border { border-bottom: 2px solid purple; }';\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'inline_style' => $inline_css\n    ]);\n});<\/code><\/pre>\n
Se preferisci fare in modo che la funzione accoda un foglio di stile, fornisci il suo handle all’elemento ‘ style_handle<\/code>‘.<\/p>\n
add_action('init', function() {\n    wp_register_style('awp-block-styles', get_template_directory_uri(). '\/assets\/css\/custom-block-style.css', false);\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'style_handle' => 'awp-block-styles'\n    ]);\n});<\/code><\/pre>\n
Regola la posizione del tuo foglio di stile per adattarlo al tuo progetto. Il foglio di stile verr\u00e0 applicato sia all’editor che al frontend, ma questa volta il frontend far\u00e0 una richiesta separata per includere questo foglio di stile. Questo metodo non \u00e8 consigliato se si aggiungono pi\u00f9 stili di blocco. Il frontend sar\u00e0 notevolmente rallentato richiedendo un intero gruppo di fogli di stile separati.<\/p>\n
Aggiunta di stili di blocco personalizzati con Javascript<\/h2>\n
Se preferisci aggiungere i tuoi stili di blocco usando Javascript, questo \u00e8 facile come con PHP.<\/p>\n
Avrai bisogno di accodare un file Javascript sull’editor solo hook: enqueue_block_editor_assets<\/code>. Il tuo script probabilmente non avr\u00e0 bisogno di dipendenze, ma preferisco aggiungere almeno ‘ wp-blocks<\/code>‘ come dipendenza.<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks']\n    );\n});<\/code><\/pre>\n
Regola il nome del file e la posizione per adattarli al tuo progetto.<\/p>\n
Nel tuo file Javascript usi la funzione registerBlockStyle()<\/code>all’interno wp.blocks<\/code>dell’oggetto per registrare stili di blocco personalizzati. L’aggiunta dello stesso stile di blocco che abbiamo fatto in PHP sopra sarebbe simile a:<\/p>\n
wp.blocks.registerBlockStyle('core\/heading', {\n    name: 'colored-bottom-border',\n    label: 'Colored bottom border'\n});<\/code><\/pre>\n
E questo \u00e8 tutto! Vai tranquillo.<\/p>\n
Annullamento della registrazione degli stili di blocco<\/h2>\n
Proprio come puoi registrare uno stile di blocco, anche uno stile di blocco pu\u00f2 essere annullato. Forse vuoi rimuovere alcuni degli stili di blocco predefiniti di WordPress? Come per la registrazione di stili di blocco, puoi anche annullare la registrazione di stili di blocco con PHP o Javascript. Ma la scelta tra questi due metodi non \u00e8 pi\u00f9 una scelta di preferenza.<\/p>\n
Non puoi annullare la registrazione di un blocco con PHP se \u00e8 stato registrato con Javascript e viceversa. Quindi devi capire come \u00e8 stato registrato lo stile che desideri rimuovere e abbinarlo con PHP o Javascript. Credo che tutti gli stili di blocco di WordPress siano aggiunti con Javascript (non citarmi su questo!). Quindi, se vuoi rimuoverne alcuni, dovrai seguire il percorso Javascript.<\/p>\n
L’annullamento della registrazione di uno stile di blocco con PHP viene eseguito chiamando la funzione unregister_block_style()<\/code>, fornendo il tipo di blocco e il nome di stile che si desidera rimuovere. Ad esempio, annullare la registrazione dello stile aggiunto sopra in questo post (supponendo che sia stato registrato con PHP) sarebbe simile a questo:<\/p>\n
add_action('init', function() {\n    unregister_block_style('core\/heading', 'colored-bottom-border');\n});<\/code><\/pre>\n
L’annullamento della registrazione di uno stile di blocco con Javascript viene eseguito in modo simile con la funzione unregisterBlockStyle()<\/code>all’interno wp.blocks<\/code>dell’oggetto. Tuttavia, con Javascript c’\u00e8 una questione di quale script deve essere eseguito per primo e potresti riscontrare problemi quando lo script viene eseguito prima della registrazione. Per risolvere questo problema utilizziamo l’equivalente di Gutenberg di "document ready" (jQuery(document).ready(function() { ... });<\/code>) di jQuery e aggiungiamo anche un’altra dipendenza al tuo script.<\/p>\n
Iniziamo aggiungendo una nuova dipendenza di script sul tuo file Javascript che si accoda a ‘ wp-edit-post<\/code>‘:<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks', 'wp-edit-post']\n    );\n});<\/code><\/pre>\n
E all’interno del tuo file Javascript, avvolgi la tua chiamata di funzione unregister all’interno wp.domReady(function() { ... })<\/code>, in questo modo:<\/p>\n
wp.domReady(function() {\n    wp.blocks.unregisterBlockStyle('core\/quote', 'large');\n});<\/code><\/pre>\n
Come mostra il codice sopra, con Javascript ora siamo in grado di rimuovere lo stile "Grande" di WordPress sul blocco Preventivo. Se provassi a fare lo stesso con PHP, non funzionerebbe.<\/p>\n
Una nota a margine sull’annullamento della registrazione degli stili di blocco<\/h3>\n
Potresti notare che anche se hai rimosso con successo qualsiasi stile di blocco personalizzato su un blocco, la casella "Stili" nell’editor non scomparir\u00e0. Rimane con solo la scelta "Predefinito" al suo interno. Se vuoi rimuovere completamente la casella "Stili" per non confondere gli editor, puoi semplicemente annullare la registrazione dello stile predefinito (es wp.blocks.unregisterBlockStyle('core\/quote', 'large')<\/code>. ). Questo rimuover\u00e0 completamente la casella "Stili" dall’editor di Gutenberg.<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Questo post spiega come impostare gli stili di blocco per i blocchi in Gutenberg, con PHP o Javascript, e tocca le idee per risolvere i fogli di stile.<\/p>\n","protected":false},"author":1,"featured_media":220825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,896,720,835,939,939,1110,804,804,814,814,835,720,844,844,865,865],"tags":[1168],"class_list":["post-233799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-guida-per-principianti","category-gutenberg-6","category-n-a","category-php-6","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233799","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=233799"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233799\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}