{"id":233494,"date":"2023-02-14T12:17:00","date_gmt":"2023-02-14T09:17:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233494"},"modified":"2022-11-11T00:00:14","modified_gmt":"2022-11-10T21:00:14","slug":"come-creare-blocchi-gutenberg-personalizzati-con-advanced-custom-fields-pro","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-creare-blocchi-gutenberg-personalizzati-con-advanced-custom-fields-pro\/","title":{"rendered":"Come creare blocchi Gutenberg personalizzati con Advanced Custom Fields Pro"},"content":{"rendered":"\n

Dalla versione 5.8<\/a> di Advanced Custom Fields (ACF) Pro puoi utilizzare ACF per creare blocchi Gutenberg personalizzati. Tutto ci\u00f2 che devi gestire sono i modelli PHP. Questo rende molto facile per gli sviluppatori che non hanno ancora esperienza nel moderno Javascript necessario creare blocchi personalizzati per Gutenberg con nessuno dei tipi di campo che ACF ha da offrire. Tieni presente che questa funzionalit\u00e0 \u00e8 disponibile solo nella versione a pagamento (Pro<\/a>) di Advanced Custom Fields. Non \u00e8 disponibile nella versione gratuita, quindi dovrai acquistare una licenza.<\/p>\n

Se sei un editor di WordPress o un webmaster che non vuole approfondire la programmazione, questo post \u00e8 sicuramente per te. Tuttavia, se vuoi essere uno sviluppatore di temi o plugin per WordPress, ti consiglio di eseguire il passaggio per imparare a creare i tuoi blocchi personalizzati. Tuttavia, l’utilizzo di campi personalizzati avanzati per la creazione di blocchi pu\u00f2 fornire una buona introduzione alla gestione dei blocchi personalizzati in Gutenberg.<\/p>\n

Crea un blocco Gutenberg con ACF<\/h2>\n

Ci sono fondamentalmente tre semplici passaggi per creare un blocco Gutenberg personalizzato con Advanced Custom Fields. Il primo \u00e8 facile e probabilmente familiare; impostando i campi (impostazioni) che desideri avere nel tuo blocco. Il secondo passaggio consiste nell’usare la funzione di ACF per registrare un blocco Gutenberg. E il terzo passaggio \u00e8 scrivere il modello PHP per il blocco. Scrivi semplicemente l’HTML e gestisci le impostazioni proprio come faresti con i campi ACF altrimenti. E questo \u00e8 tutto! (Okay, forse c’\u00e8 un quarto passaggio; modellare il tuo blocco. Ma non ne parler\u00f2 in questo post).<\/p>\n

Crea le tue impostazioni \/ campi<\/h3>\n

Se hai utilizzato i campi personalizzati avanzati prima probabilmente sai come impostare i campi. Puoi utilizzare l’interfaccia utente di amministrazione di Advanced Custom Field per farlo. Oppure, se vuoi che le impostazioni del blocco siano incorporate nel tuo plugin o tema, scrivi le impostazioni con PHP. Ho un post di riferimento completo su come aggiungere le impostazioni ACF con PHP<\/a>.<\/p>\n

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

La cosa fondamentale che devi fare con il tuo gruppo \u00e8 impostare la posizione su "Blocca". Ma poich\u00e9 non abbiamo ancora registrato il nostro blocco, sar\u00e0 predefinito fino a "Tutto". Lascialo cos\u00ec, salva i tuoi campi e procediamo a registrando il nostro blocco.<\/p>\n

Registra un blocco Gutenberg<\/h3>\n

Nel codice del tuo tema functions.php<\/code>o plugin devi scrivere una funzione agganciata a acf\/init<\/code>e chiamare [acf_register_block](https:\/\/www.advancedcustomfields.com\/resources\/acf_register_block_type\/)()<\/code>per registrare un blocco. Poich\u00e9 questa funzione \u00e8 piuttosto nuova in ACF e dipende da un plug-in da attivare, ti consiglio di racchiudere il tuo codice all’interno di un controllo if per assicurarti che il tuo tema o plug-in non vada in crash il tuo WordPress.<\/p>\n

add_action('acf\/init', function() {\n    if (function_exists('acf_register_block')) {\n        acf_register_block([\n            'name' => 'yourblock',\n            'title' => __('Name of your block', 'txtdomain'),\n            'description' => __('Optional description', 'txtdomain'),\n            'category' => 'formatting',\n            'icon' => 'admin-comments',\n            'render_callback' => 'my_acf_block_render_callback',\n        ]);\n    }\n});<\/code><\/pre>\n
La registrazione di un blocco con ACF \u00e8 in realt\u00e0 simile a come registreremmo manualmente un blocco Gutenberg personalizzato. Con ACF devi fornire un nome slugified univoco per il tuo blocco in name<\/code>. Raccomando di utilizzare un nome autoesplicativo, ad esempio cta<\/code>per un blocco Call to action, o author-card<\/code>per un blocco che mostra autori o simili. Se hai una certa familiarit\u00e0 con Gutenberg, potresti essere consapevole del fatto che tutti i blocchi devono essere registrati con uno spazio dei nomi, a \/<\/code>, e quindi il loro nome slug. Ad esempio lo spazio dei nomi di WordPress \u00e8 core<\/code>, quindi ad esempio il blocco di paragrafo in WordPress \u00e8 chiamato core\/paragraph<\/code>. Con ACF lo spazio dei nomi sar\u00e0 acf, quindi ad esempio il blocco sopra sar\u00e0 registrato all’interno di Gutenberg come acf\/yourblock<\/code>. Se stai registrando i tuoi campi con PHP, come vedrai pi\u00f9 avanti, dobbiamo ricordarlo.<\/p>\n
In category<\/code>tu definisci in quale categoria Gutenberg vuoi che appaia il tuo blocco. Al momento i valori possibili sono common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>o embed<\/code>. Se crei categorie Gutenberg personalizzate, puoi aggiungerle a quelle se lo desideri. Per quanto riguarda icon<\/code>fornire qualsiasi nome di icona da WordPress Dashicons<\/a> (meno il).<\/p>\n
Per informare ACF su come eseguire il rendering di questo blocco, hai due scelte: fornire un nome di funzione alla chiave render_callback<\/code>(come sopra) o fornire un nome di modello nel tuo tema alla chiave render_template<\/code>. Quindi, se preferisci fare riferimento direttamente a un modello, ad esempio template-parts\/block-yourblock.php<\/code>nel tuo tema, fallo semplicemente in questo modo e rimuovi render_callback<\/code>:<\/p>\n
'render_template' => 'template-parts\/block-yourblock.php',<\/code><\/pre>\n
Collega il tuo gruppo di campi al blocco registrato<\/h2>\n
Quando sei soddisfatto del tuo codice di registrazione del blocco, \u00e8 il momento di collegare il tuo blocco alle impostazioni che hai effettuato in precedenza. Se hai creato i campi in admin, torna indietro e scegli il tuo blocco in Posizione. E se hai aggiunto il gruppo di campi con PHP, in posizione fornisci il valore ‘ acf\/yourblock<\/code>‘ dove yourblock<\/code>\u00e8 quello che hai fornito come name<\/code>sopra.<\/p>\n
Scrivi il modello<\/h2>\n
Il passaggio finale, e il pi\u00f9 divertente, \u00e8 scrivere il modello per l’output del blocco!<\/p>\n
La posizione dell’output di rendering del blocco dipende da ci\u00f2 che hai deciso di utilizzare nella registrazione del blocco render_callback<\/code>o render_template<\/code>.<\/p>\n
Se hai fornito un nome di funzione, render_callback<\/code>devi definire questa funzione nel functions.php<\/code>codice del tuo tema o plugin. Ottieni quattro parametri per la tua funzione, come vedrai di seguito:<\/p>\n
function my_acf_block_render_callback($block, $content = '', $is_preview = false, $post_id = 0) {\n    $className = 'your_block';\n    if (!empty($block['className'])) {\n        $className .= ' '. $block['className'];\n    }\n\u00a0\n    \/\/ Example of fetching a field value:\n    $my_text = get_field('my_textfield');\n\u00a0\n    ?><div class=\"<?php echo $className; ?>\">\n        <?php \/\/ echo your output here ?>       \n    <\/div><?php\n}<\/code><\/pre>\n
Il primo parametro, $block<\/code>, contiene alcune informazioni di Gutenberg. Ad esempio, ogni blocco Gutenberg avr\u00e0 quasi sempre className<\/code>, che dovresti impostare come classe sul tuo wrapper pi\u00f9 esterno. $block['align']<\/code>per l’allineamento potrebbe anche essere impostato e qualcosa che vuoi aggiungere. Il secondo parametro, $content<\/code>, sar\u00e0 sempre vuoto con ACF (questo verrebbe popolato se si aggiungessero blocchi nidificati, ma non \u00e8 possibile con ACF). Il booleano $is_preview<\/code>sar\u00e0 vero se stiamo attualmente guardando il rendering del blocco in modalit\u00e0 anteprima nell’editor Gutenberg. E infine $post_id<\/code>\u00e8 il post in cui viene aggiunto questo blocco.<\/p>\n
Per quanto riguarda i campi, recuperi i campi come faresti normalmente, con get_field()<\/code>. L’output HTML dipende completamente da te e da come desideri generare i tuoi campi.<\/p>\n
Se render_template<\/code>invece hai fornito un file modello, crea semplicemente il file nella posizione specificata nel tuo tema. Al suo interno hai accesso alle stesse identiche variabili globali della funzione sopra (ad esempio $block<\/code>). Per esempio:<\/p>\n
$className = 'your_block';\nif (!empty($block['className'])) {\n    $className .= ' '. $block['className'];\n}\n\u00a0\n\/\/ Example of fetching a field value:\n$my_text = get_field('my_textfield');\n\u00a0\n?><div class=\"<?php echo $className; ?>\">\n    <?php \/\/ echo your output here ?>       \n<\/div><?php<\/code><\/pre>\n
E questo \u00e8 tutto quello che c’\u00e8 da fare. Ecco com’\u00e8 semplice creare i tuoi blocchi Gutenberg personalizzati con ACF.<\/p>\n
Conclusione<\/h2>\n
Per quanto sia stato facile, fare affidamento su un plug-in, in particolare a pagamento, non \u00e8 una buona soluzione finale se si desidera sviluppare temi o plug-in. Tieni presente che i tuoi blocchi smetteranno di funzionare se sposti il \u200b\u200bcodice del tuo tema in un altro WordPress senza ACF Pro. O dove le tue impostazioni sul campo non sono state configurate (a meno che tu non le abbia incorporate nel tuo codice con PHP o assicurati di esportarle e importarle). Come sviluppatore di temi (o plugin) che distribuisce codice, non puoi aspettarti che ogni utente acquisti la propria licenza di ACF Pro per far funzionare il tuo tema! Ma questa \u00e8 una buona soluzione temporanea per coloro che non possono o non avranno bisogno di programmare.<\/p>\n
Se sei convinto di dover fare il passo e imparare Javascript e Gutenberg, dai un’occhiata alla mia introduzione al post di Gutenberg<\/a> o alla categoria Gutenberg<\/a> su questo sito per saperne di pi\u00f9.<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Questo post spiega come utilizzare ACF per creare blocchi Gutenberg personalizzati in cui tutto ci\u00f2 che devi gestire sono i modelli PHP. Nessun Javascript necessario!<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[918,896,896,720,835,918,1110,814,814,835,720,844,844,865,865],"tags":[1168],"class_list":["post-233494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-sviluppatore","category-guida-per-principianti","category-n-a","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233494","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=233494"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233494\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}