WPLake > Blog > Blocchi ACF: Guida all’uso
  • English
  • Deutsch
  • Español
  • Français

Blocchi ACF: Guida all’uso

Tempo di lettura: 6 minuti

-

Aggiornato 25.08.23

-

ACF Plugin Tutorial
Scoprite come creare e utilizzare i blocchi ACF, i loro vantaggi rispetto ai meta-campi e i nativi di Gutenberg. Creare utilizzando il codice o l'interfaccia utente del componente aggiuntivo.
ACF Blocks is a powerful feature of the Advanced Custom Fields plugin

Indice dei Contenuti

Con ACF Blocks, la potente funzione del plugin Advanced Custom Fields, potete estendere la funzionalità del vostro sito web aggiungendo blocchi di contenuto unici e personalizzati per le vostre esigenze specifiche.

È importante ricordare che la funzione dei blocchi fa parte della versione di ACF Pro, quindi è disponibile solo per gli utenti di ACF Pro.

Vantaggi dell'approccio del blocco

#link copiato

L'approccio a blocchi in WordPress offre diversi vantaggi importanti rispetto ai metodi tradizionali, come i meta-campi e i page builder. Esploriamo i principali vantaggi dell'uso dei blocchi:

  • Riutilizzabili e flessibili
    Uno dei vantaggi principali è la riutilizzabilità. I blocchi possono essere facilmente utilizzati in tutte le pagine o anche nella stessa pagina. Questa flessibilità consente di creare elementi di contenuto coerenti che mantengono lo stesso design e la stessa funzionalità in tutto il sito web. In questo modo si risparmia tempo e si garantisce un'esperienza d'uso fluida ai visitatori.
  • Migliori prestazioni
    I blocchi offrono un modo più efficiente di gestire le risorse. A differenza degli approcci tradizionali, in cui tutte le risorse vengono caricate globalmente, le risorse dei blocchi vengono caricate solo dove il blocco viene utilizzato. Questo meccanismo di caricamento ottimizzato porta a tempi di caricamento della pagina più rapidi e riduce il sovraccarico di risorse non necessarie. Di conseguenza, il vostro sito web diventa più reattivo, soprattutto per gli utenti mobili, e ha prestazioni migliori nelle classifiche dei motori di ricerca.
  • Conflitti di stile mancanti
    In passato, i conflitti di stile erano un problema comune quando si lavorava con meta-campi personalizzati e modelli di temi. La natura modulare del blocco riduce notevolmente le possibilità di conflitti di stile. Ogni blocco ha il suo insieme separato di stili e script, riducendo al minimo la possibilità di conflitti con altri elementi della pagina. Questo isolamento garantisce un layout più stabile e prevedibile e migliora l'esperienza di sviluppo complessiva.

Quindi, l'approccio del blocco in WordPress presenta un modo moderno e potente di progettare e gestire i contenuti. Grazie alla riutilizzabilità, al miglioramento delle prestazioni e all'eliminazione dei conflitti, i blocchi sono diventati il metodo preferito da molti utenti e sviluppatori di WordPress.

ACF vs Blocchi nativi di Gutenberg

#link copiato

Prima di immergerci nei blocchi ACF, parliamo brevemente anche dei blocchi nativi di Gutenberg.

Integrato

#link copiato

Gutenberg è l'editor di blocchi predefinito di WordPress che fornisce una serie di blocchi di base come paragrafi, intestazioni, immagini e altro. Sebbene questi blocchi integrati siano utili, presentano alcune limitazioni quando si tratta di personalizzare il layout e aggiungere funzionalità avanzate.

Svantaggi dei blocchi nativi:

  • Opzioni di personalizzazione limitate
  • Impossibilità di creare layout di blocco complessi
  • Nessun modo intuitivo per includere campi personalizzati per contenuti più avanzati

Personalizzato

#link copiato

È essenziale notare che è possibile creare blocchi Gutenberg personalizzati senza plugin aggiuntivi. Tuttavia, questo processo richiede una buona conoscenza di React, la libreria JavaScript che alimenta Gutenberg. Inoltre, richiede un notevole investimento di tempo e fatica per sviluppare blocchi personalizzati.

Le sfide della creazione di blocchi Gutenberg personalizzati:

  • Conoscenza di React richiesta
    Lo sviluppo di blocchi Gutenberg personalizzati implica il lavoro con i componenti React, il che richiede un certo livello di esperienza nello sviluppo di JavaScript e React.
  • Richiede molto tempo
    Realizzare blocchi personalizzati da zero può richiedere molto tempo, soprattutto per chi è alle prime armi con React o con lo sviluppo di WordPress.
  • Complessità
    Lo sviluppo di blocchi personalizzati spesso comporta la gestione di stati e di contenuti dinamici.
  • Manutenzione
    Con l'evoluzione del nucleo di WordPress, i blocchi personalizzati possono richiedere aggiornamenti e adeguamenti per rimanere compatibili, aumentando il carico di manutenzione.

Sintesi

#link copiato

Al contrario, i blocchi ACF offrono un modo più accessibile e facile da usare per creare blocchi personalizzati senza dover approfondire lo sviluppo complesso di React. ACF offre un'interfaccia intuitiva per l'aggiunta di campi e la definizione di layout, consentendo agli utenti di qualsiasi livello di competenza di creare blocchi avanzati in modo rapido ed efficiente.

Dietro le quinte

#link copiato
For any developer important to know how any feature works behind the scenes
È importante per ogni sviluppatore sapere come funzionano le funzioni dietro le quinte

La funzione blocchi di ACF ci consente di creare blocchi e di collegarvi gruppi di campi. Poi ACF si occupa di tutto, rende i campi nell'interfaccia utente dell'amministratore e li salva. Così possiamo avere più campi di diverso tipo nel nostro blocco, compresi campi complessi, come gallery e repeater, senza dover ricorrere a una codifica approfondita.

Ma per gli sviluppatori è importante sapere non solo come creare i blocchi ACF, ma anche come funziona la funzione dietro le quinte. Diamo un'occhiata dietro le quinte per capire la magia che alimenta questi blocchi versatili e come si integrano perfettamente con l'editor nativo di Gutenberg.

La grande novità è che all'interno i blocchi ACF funzionano e si comportano come gli altri blocchi nativi di Gutenberg, ad esempio i paragrafi. Se avete mai visto il codice dei blocchi di Gutenberg, noterete che sono resi in HTML semplice e salvati nel campo post_content. Per esempio, il campo del paragrafo centrale si presenta così:

<!-- wp:paragraph -->
<p>Your text</p>
<!-- /wp:paragraph -->

E il blocco di intestazione si presenta così:

<!-- wp:heading -->
<h2 class="wp-block-heading">Your heading</h2>
<!-- /wp:heading -->

Come si vede, si tratta di semplice HTML, esteso dai commenti di WP. Il che consente agli sviluppatori di analizzare i blocchi in un secondo momento.

Quindi, ACF segue questo approccio e crea blocchi simili. La differenza principale è che i campi sono salvati come JSON nel commento HTML e il blocco non contiene il codice HTML stesso.

<!-- wp:acf/org-wplake-website-blocks-codesnippet-theme-classic-codesnippetthemeclassic 
{"name":"acf/org-wplake-website-blocks-codesnippet-theme-classic-codesnippetthemeclassic",
"data":{"local_code-snippet__code-snippet":"\u003c?php\r\necho 'hello world';",
"local_code-snippet__language":"php"},"mode":"edit"} /-->

È importante comprendere questo principio, ma non ci si deve preoccupare dell'implementazione. ACF se ne occupa da sola.

Suggerimento: Memorizzare i campi dei blocchi come json nel post_content è molto meglio per le prestazioni, rispetto all'approccio dei meta-campi. Ciò significa che le pagine costruite usando i blocchi ACF a volte si caricheranno più velocemente di quelle che usano semplici template e campi meta.

Stili e script del blocco

#link copiato

Nel capitolo Dietro le quinte abbiamo mostrato come funziona la funzione blocchi di ACF. Ma che dire degli stili e degli script? Dovete aggiungerli globalmente, come fareste normalmente? È possibile, ma fortunatamente esiste una soluzione migliore.

ACF Block gestisce stili e script in modo modulare ed efficiente. Ogni blocco ha i propri CSS e JavaScript, caricati solo quando quel blocco specifico appare in una pagina. Questo approccio migliora le prestazioni, evitando il caricamento di risorse non necessarie, con conseguenti tempi di caricamento delle pagine più rapidi e un'esperienza utente più fluida.

Suggerimento: se avete familiarità con la metodologia BEM, potreste avere l'idea che ACF Blocks sia un ottimo posto per usare il metodo e avreste ragione al cento per cento. L'uso del metodo BEM con ACF Blocks organizzerà il vostro CSS e il vostro markup, garantendo una migliore riutilizzabilità e manutenibilità del codice.

Come aggiungere blocchi

#link copiato

ACF ci semplifica la vita, occupandosi del rendering e del salvataggio dei campi. Ma questa funzione richiede comunque un po' di codifica. Ecco perché qui di seguito forniamo due modi per aggiungere i blocchi ACF nella libreria di Gutenberg: utilizzando un plugin (a pagamento, ma senza codifica) o manualmente, con codifica.

Preparazione. Creare un gruppo

#link copiato

Qualunque sia la scelta fatta, inizialmente è necessario creare un gruppo di campi per il blocco. Facciamolo subito. Nel nostro esempio, creeremo un blocco "Banner", quindi daremo lo stesso nome al gruppo.

ACF Group admin interface
Creare un gruppo ACF e aggiungere i campi di destinazione. Non impostare le regole di localizzazione in questo passaggio

Utilizzo di un plugin

#link copiato

ACF è famoso per i suoi componenti aggiuntivi. In questo caso, ne utilizzeremo uno. ACF Views è il plugin che consente di visualizzare i campi o i post di ACF selezionati in qualsiasi punto utilizzando gli shortcode; il markup HTML viene creato automaticamente dal plugin. Per saperne di più sui vantaggi dell'approccio del plugin rispetto alla codifica , si veda qui.

Il plugin ha molte funzioni nella versione Basic, ma la funzione che consente di creare blocchi ACF senza codifica fa parte della versione Pro.

Per seguirlo, è necessario acquistare e installare la versione Pro del plugin.

Prima di iniziare la creazione dei blocchi ACF, è necessario conoscere il termine ACF Views che utilizzeremo.
Il termine "View" è il nome dato al tipo di post speciale che il plugin fornisce. Ogni Vista è un elenco di campi ACF da visualizzare, quindi si possono avere molte Viste diverse per visualizzare campi diversi (o insiemi di campi) per diversi post/pagine.

Ora siamo pronti a creare il nostro primo blocco. Di seguito abbiamo allegato un video tutorial che vi guiderà. Non dimenticate di accedere alla modalità a schermo intero per vedere tutto nel dettaglio.

How to use the Gutenberg feature of ACF Views - video cover

In sintesi, è necessario ripetere i seguenti passaggi:

  1. Creare un gruppo ACF e aggiungere i campi di destinazione
  2. Creare una vista , selezionare i campi target del primo passo e pubblicare la vista .
  3. Nelle impostazioni della vista, attivare la casella di controllo 'Con blocco Gutenberg'.
  4. Fare clic su "Aggiorna" per salvare la vista .
  5. Modificare il post, la pagina o l'elemento CPT utilizzando l'editor di Gutenberg.
    Nota: è importante utilizzare l'editor di Gutenberg e non l'editor classico o l'elemento page builder, poiché il blocco generato è disponibile solo nella libreria dei blocchi di Gutenberg.
  6. Inserite un nuovo blocco, selezionando il blocco della vostra vista dall'elenco. Il nome del blocco sarà quello della vostra vista.
  7. Riempire i campi del blocco appena inserito.
  8. Fare clic su "Pubblica" per salvare il post, la pagina o l'elemento CPT.
  9. Visitare la pagina per vedere il risultato.

ACF Views genera automaticamente il markup, quindi non è necessario preoccuparsi dei tipi di campo e dei loro formati di ritorno. Ora, è possibile stilizzare l'output aggiungendo alcune regole CSS. È possibile aggiungerle facilmente utilizzando la scheda 'Avanzate' della propria vista.

Utilizzando il codice

#link copiato

Questo approccio offre una maggiore flessibilità rispetto al plugin, ma richiede uno sforzo maggiore.

Nota: di seguito è riportata la guida attuale per ACF v6+. Mostreremo il modo nuovo e consigliato di aggiungere i blocchi (usando JSON). Il vecchio modo, con una funzione php è stato deprecato con il rilascio della v6.

Passo 1. Dichiarazione JSON

#link copiato

È necessario creare una dichiarazione JSON per ogni blocco. La dichiarazione è un semplice file .json che contiene le informazioni necessarie sul blocco. È possibile posizionare questo file ovunque si voglia, all'interno del proprio tema o plugin.

{
    "name": "acf/banner",
    "title": "Banner",
    "description": "A custom banner block.",
    "style": [ "file:./banner.css" ],
    "category": "formatting",
    "icon": "admin-comments",
    "keywords": ["banner"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "banner.php"
    }
}

Passo 2. Caricamento dei blocchi

#link copiato

Ora dobbiamo comunicare a WordPress il blocco, utilizzando il seguente snippet:

<?php
add_action( 'init',function (){
    // fixme your path here to the folder with the JSON file
    register_block_type( __DIR__ . '/blocks/testimonial' );
} );

Passo 3. Attacco del gruppo

#link copiato

In questo passaggio, il blocco è già registrato e dobbiamo collegare il nostro gruppo ACF al blocco. Aprire il gruppo creato inizialmente e scegliere l'opzione Blocco nella selezione delle regole di localizzazione. Quindi, scegliere il blocco nella selezione a discesa e aggiornare il gruppo.

Location rules of ACF Group
Nelle regole di localizzazione è possibile "collegare" il gruppo di campi a qualsiasi blocco ACF.

Suggerimento: se non vedete il nome del vostro blocco nella selezione, assicuratevi di aver aggiunto il codice PHP dal passaggio 2 e di aver caricato il file.

Passo 4. Creare un modello

#link copiato

Ora tutto è pronto per creare il modello del blocco. Il template PHP restituirà il markup HTML del blocco, basato sui valori dei campi. È necessario controllare i nomi dei campi, i tipi e i formati di ritorno nel gruppo ACF, per creare il codice corretto.

Di seguito è riportato il codice del modello per il nostro blocco Banner. È necessario aggiungerlo al file PHP dichiarato nella sezione renderTemplate nella dichiarazione JSON del primo passo.

<?php
/**
 * Banner Block Template.
 *
 * @param array $block The block settings and attributes.
 * @param string $content The block inner HTML (empty).
 * @param bool $is_preview True during backend preview render.
 * @param int $post_id The post ID the block is rendering content against.
 *          This is either the post ID currently being displayed inside a query loop,
 *          or the post ID of the post hosting this block.
 * @param array $context The context provided to the block by the post or it's parent block.
 */


$title = get_field('title') ?: '';
$description = get_field('description') ?: '';
$image = get_field('image') ?: 0;
$linkData = get_field('link');
$link = '';

$image = $image ?
    wp_get_attachment_image($image, 'full', false, [
        'class' => 'banner__image',
    ]) :
    '';

if ($linkData) {
    // if the 'target' is presented, it's a bool. We've to convert it into the HTML format
    $target = isset($linkData['target']) && $linkData['target'] ?
        '_blank' :
        '_self';
    // Each %s in the string will be replaced with the related argument
    $link = sprintf(
        "<a class='banner__link' href='%s' target='%s'>%s</a>",
        esc_url($linkData['url']),
        esc_html($target),
        esc_attr($linkData['title'])
    );
}

?>
<div class="banner">
    <p class="banner__title"><?php
        echo esc_html($title); ?></p>

    <?php
    echo $image; ?>

    <div class="banner__description"><?php
        echo esc_html($description); ?></div>
    
    <?php
    echo $link ?>
</div>

Questo era l'ultimo passo, ora si può aprire l'editor di Gutenberg, trovare il nuovo blocco nella libreria e aggiungerlo nel posto desiderato. Quindi compilate i campi e premete il pulsante "Aggiorna" per salvare la pagina.

Admin UI of the ACF Block
UI amministrativa del blocco ACF

Visitare la pagina per vedere il risultato.

Banner, an example of the ACF block
Il blocco che abbiamo realizzato. Per questo blocco, abbiamo aggiunto alcuni stili di base. Si dovrà modellare il proprio blocco in base alle esigenze.

Per ulteriori informazioni, guardate il video qui sotto e leggete l'articolo ufficiale dell'ACF.

ACF Blocks with code, video cover

Conclusioni

#link copiato

I blocchi ACF, parte del plugin Advanced Custom Fields, vi permettono di estendere le funzionalità del vostro sito WordPress creando blocchi di contenuto personalizzati in base alle vostre esigenze. Offrono flessibilità e facilità d'uso, eliminando la complessità dello sviluppo React.

Capire come funzionano i blocchi ACF dietro le quinte è fondamentale per gli sviluppatori, poiché memorizzano i dati all'interno del post_content, velocizzando i tempi di caricamento delle pagine. È possibile sfruttare il plugin ACF Views per creare blocchi ACF senza sforzo e senza dover ricorrere a una codifica approfondita o all'approccio manuale.

Che siate uno sviluppatore professionista o un appassionato di WordPress, i blocchi ACF elevano la vostra creazione di contenuti e offrono un'esperienza di sito web coinvolgente. Liberate il pieno potenziale del vostro sito WordPress con i blocchi ACF oggi stesso!

Sull'autore
Maxim Akimov

Certified WordPress expert from Ukraine with over 7 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

Got it