FSE – FULL SITE EDITING IN WORDPRESS, CHE COSA E’?

CHE COS’E’ WORDPRESS FULL SITE EDITING?


sei incuriosito da un nuovissimo full site editor di siti e vorresti saperne di più, questo post è per te. In questo articolo spiegheremo cos’è la modifica del sito completo di WordPress e daremo un’occhiata a ciascuno dei suoi componenti.

WORDPRESS FULL SITE EDITING – INTRODUZIONE

attualmente. Un tipico sito WordPress è composto da due elementi distinti: elementi globali e di pagina.

ELEMENTI GLOBALI

Come suggerisce il nome, gli elementi globali sono di natura globale, il che significa che sono gli stessi in tutto il sito web. Gli esempi più comuni di elementi globali sono l’intestazione e il piè di pagina del sito, generalmente generati dal tema.

L’intestazione di un sito contiene il titolo del sito, il logo, lo slogan e il menu di navigazione, mentre il piè di pagina è costituito da aree widget in cui è possibile aggiungere widget come mappa del sito, informazioni di contatto, posizione, icone social e così via.

Per personalizzare gli elementi globali puoi usare il tema Customizer. Contiene tutte le impostazioni e le opzioni di personalizzazione e consente di modificare ogni aspetto degli elementi globali..

Default WordPress Customizer

ELEMENTI DI PAGINA

Gli elementi di pagina si riferiscono a tutti gli elementi diversi dagli elementi globali che compongono una determinata pagina. A differenza degli elementi globali, gli elementi di pagina sono specifici di una determinata pagina e contengono contenuti diversi per pagine diverse.

Esempi di elementi della pagina includono testo, post, immagini, gallerie, testimonianze, animazioni, inviti all’azione e così via. Gli elementi di pagina sono fondamentalmente il nucleo di qualsiasi pagina e differiscono da pagina a pagina poiché ogni pagina è creata per uno scopo specifico. In genere, un sito web ha pagine per casa, informazioni, servizi, post, negozio, contatti, prodotti e altro.

Default Gutenberg Editor

Gli altri elementi globali e di pagina sono separati l’uno dall’altro ma devono essere usati insieme per costruire un sito web tradizionale. Tuttavia, le cose cambieranno con il rilascio di Full Site Editing.

Il problema principale è che entrambi i tipi di elementi richiedono flussi di lavoro diversi. Questo è uno dei principali vantaggi di Full Site Editing.

Ora che abbiamo compreso meglio la differenza tra elementi globali e di pagina, diamo un’occhiata a cos’è la modifica del sito completo di WordPress e ai suoi componenti principali.

FULL SITE EDITING

Lo svantaggio principale del sistema attuale è che richiede due flussi di lavoro separati per gli elementi Global e Page. Questo non è l’ideale in quanto sono entrambe parti dello stesso sito Web e dovrebbero essere riunite in un unico flusso di lavoro. WordPress lo sa ed è per questo che hanno trovato una soluzione.

Gutenberg, WordPress ha voluto fornire ai propri utenti un sistema più coerente per creare e modificare i propri siti web. Questo sistema si chiama Modifica completa del sito e riunisce tutti i diversi elementi del sito in un’unica interfaccia.

La modifica completa del sito si riferisce alla centralizzazione di tutti gli elementi del sito per rendere il processo di sviluppo web più intuitivo e senza interruzioni. Gli elementi globali e gli elementi pagina vengono uniti in un’unica interfaccia, dove possono essere gestiti tramite l’editor di blocchi, ad esempio Gutenberg. In questo modo, sarai in grado di apportare modifiche a qualsiasi parte del tuo sito Web direttamente tramite l’editor Gutenberg.

WordPress Full Site Editing

COMPONENTI DELLA MODIFICA DEL SITO COMPLETO WORDPRESS

I siti web realizzati con il nuovo Full Site Editor saranno costituiti da diversi componenti:

  1. Blocchi
  2. Modelli di blocco
  3. Blocchi riutilizzabili
  4. Modelli di blocco e parti del modello
  5. Temi di blocco
  6. Stili globali

1. BLOCCHI

Gutenberg Blocks

L’editor di siti completi di WordPress si basa molto sul concetto di blocchi. Tutti gli elementi del sito sono divisi in blocchi. Ci sono blocchi per tutto, incluso il titolo del sito, il logo, il menu di navigazione, i post, le immagini, la galleria, il testo, i pulsanti e molti altri.

Il concetto di blocchi è stato introdotto per la prima volta dall’editor Gutenberg rilasciato nella fase 1 del progetto WordPress Gutenberg. Gutenberg è un editor basato su blocchi che contiene blocchi per più elementi di pagina come testo, immagine, galleria e pulsanti.

Tuttavia, al momento i blocchi di Gutenberg sono limitati solo agli elementi della pagina. Gli elementi globali come intestazione e piè di pagina sono ancora controllati dal tema, che puoi personalizzare tramite il personalizzatore del tema.

Ma le cose cambieranno con il rilascio del nuovo Full Site Editor (FSE). L’FSE aggiunge più blocchi all’editor Gutenberg per gestire elementi globali come titolo, logo, tagline, intestazione, piè di pagina, menu di navigazione e altro. In questo modo, sarai in grado di modificare sia gli elementi globali che quelli di pagina tramite un singolo editor, rendendo il processo molto più semplice.

TIPI DI BLOCCHI

Esistono due tipi di blocchi: statici e dinamici.

Blocchi statici: i blocchi statici contengono contenuti statici, ovvero contenuti che non cambieranno sul front-end. Conosciamo già il contenuto al momento della pubblicazione e viene visualizzato così com’è. Esempi di blocchi statici possono includere un blocco paragrafo, un blocco immagine e così via.

Blocchi: contengono contenuti non predeterminati. Il contenuto da visualizzare viene invece calcolato in fase di esecuzione. Esempi di blocchi dinamici includono il blocco shortcode e il blocco degli ultimi post.

Con WordPress Full Site Editor, gli sviluppatori saranno in grado di creare siti Web tramite un’unica interfaccia utilizzando blocchi per tutto. Sono tutti blocchi!

2. BLOCCHI PATTERNS

Block Patterns

I modelli a blocchi sono layout predefiniti che fungono da modelli di partenza. Questi non sono modelli a pagina intera, ma sezioni di una pagina. I modelli di blocco combinano più blocchi utilizzati di frequente insieme in un unico gruppo, che funge quindi da layout pronto per l’uso.

L’editor del sito completo di WordPress viene fornito con un’ampia varietà di modelli di blocco come immagini sovrapposte, immagini e testo sovrapposti, elenchi di portfolio, informazioni di contatto e molti altri. Invece di creare un sito da zero, puoi semplicemente utilizzare Block Patterns, aggiungere i tuoi contenuti e modificare il loro design in modo che corrisponda all’aspetto del tuo sito.

Inoltre, vale la pena notare che i modelli di blocco, quando aggiunti a una pagina, vengono trattati come elementi locali. Ciò significa che qualsiasi modifica apportata a un modello di blocco si applicherà solo a quel particolare modello senza modificare altri blocchi sulla pagina.

3. BLOCCHI RIUTILIZZABILI

Reusable Blocks

Inoltre, vale la pena notare che i modelli a blocchi, quando aggiunti a un blocco riutilizzabile, funzionano in modo simile ai modelli a blocchi. Ti consentono di creare i tuoi layout pronti per l’uso raggruppando più blocchi individuali e salvandoli come un singolo blocco riutilizzabile. Dopo aver creato un Blocco riutilizzabile, puoi aggiungerlo ovunque sul tuo sito.

A differenza dei modelli di blocco, i blocchi riutilizzabili sono di natura globale. Supponiamo di avere più istanze di un blocco riutilizzabile sul tuo sito web, ad esempio un pulsante di invito all’azione. Apportare modifiche a una singola occorrenza di quel pulsante aggiornerà automaticamente tutte le altre istanze.

Se utilizzare i blocchi riutilizzabili o i modelli di blocco è solo una questione di comodità. Ad esempio: per aggiungere un pulsante di invito all’azione su più pagine, i blocchi riutilizzabili hanno più senso poiché è necessario apportare modifiche solo una volta e verranno replicate in altre istanze. D’altra parte, i modelli a blocchi funzionano meglio quando hai solo bisogno di un modello di partenza da modificare e utilizzare come elemento locale.

4. TEMPLATES E TEMPLATE PARTI

14. Templates and Template Parts

I modelli di WordPress sono file che contengono codice che definisce il modo in cui i contenuti verranno visualizzati sul sito. I modelli sono generalmente forniti dal tema o dal plug-in e controllano il modo in cui pagine, post e altri contenuti vengono visualizzati sul sito web in base alla gerarchia dei modelli di WordPress.

Rispetto ai modelli WordPress, le parti modello sono parti di codice che definiscono le singole parti del sito. Le parti del modello sono porzioni di codice riutilizzabili che puoi utilizzare per visualizzare un particolare blocco di contenuto più volte sul tuo sito web. Buoni esempi di parti del modello sono l’intestazione e il piè di pagina.

Tradizionalmente, i modelli WordPress e le parti dei modelli sono scritti in PHP e possono contenere alcuni markup HTML. Di solito, i normali modelli di WordPress hanno la seguente gerarchia:

theme 
|----template-parts
     |----content.php
     |----entry-header.php
     |----(...)
|----templates
     |----template-cover.php
     |----template-full-width.php
|----index.php
|----style.css

Contrariamente ai normali modelli e parti di modelli, la modifica del sito completo di WordPress utilizza modelli di blocchi e parti di modelli di blocchi poiché tutto è costituito da blocchi. Inoltre, i modelli di blocco sono file HTML che contengono markup a blocchi anziché codice PHP.

WordPress Block Template

Rispetto alla struttura dei modelli normali, la struttura dei modelli di blocco ha un aspetto simile a questo:

theme
|----block-template-parts
     |----footer.html 
     |----header.html
|----block-templates
     |----index.html
     |----page.html
     |----(...)
|----functions.php
|----style.css
|----theme.json

Inoltre, gli utenti hanno anche la possibilità di definire i propri modelli. Utilizzando l’editor del sito completo, un utente può creare un gruppo di più blocchi e salvarlo come un nuovo modello di blocco o una parte del modello di blocco. In questo modo, gli utenti saranno in grado di creare modelli personalizzati senza molta conoscenza della codifica.

Questi modelli creati dall’utente sono archiviati nel database del sito e possono essere riutilizzati sullo stesso sito Web e su altri siti.

5. BLOCK-BASED THEMES

TT1 Block Theme

Un tema a blocchi o un tema basato su blocchi è un tema WordPress composto interamente da blocchi.

l’intero sito Web utilizzando blocchi, comprese aree come intestazione e piè di pagina che non sono basate su blocchi nei temi normali.

I temi dei blocchi differiscono dai temi normali nel modo in cui sono strutturati. Mentre i temi normali si basano su modelli e parti di modelli per visualizzare il contenuto, i temi di blocchi utilizzano modelli di blocchi e parti di modelli di blocchi.

Al momento della stesura di questo post, sono disponibili solo una manciata di temi di blocco. Tuttavia, sempre più temi di blocco appariranno presto poiché WordPress ha già annunciato che è la via da seguire.

Per ora, puoi provare uno dei seguenti temi di blocco per avere un assaggio dell’esperienza di modifica completa del sito:

6. STILI GLOBALI

Global Styles - Full Site Editor

L’editor Gutenberg di WordPress supporta lo stile solo per i singoli blocchi al momento. Ad esempio, per un blocco di intestazione, è possibile selezionarne il carattere, modificarne la dimensione, impostare il livello dell’intestazione, l’allineamento e così via. Tuttavia, le modifiche allo stile verranno applicate solo a quel particolare blocco.

Nel nuovo editor del sito completo sono presenti Stili globali. Gli stili globali vengono utilizzati per impostare elementi di stile predefiniti come tipografia, colori e impostazioni di layout per l’intero sito. Una volta impostati, gli stili globali verranno applicati in tutto il tuo sito web per impostazione predefinita.

Inoltre, gli stili globali consentono di personalizzare l’aspetto dei singoli tipi di blocchi. Ad esempio, puoi cambiare il colore del blocco dei pulsanti e verrà applicato a tutti i pulsanti del tuo sito web.

Attualmente, gli elementi globali (intestazione, piè di pagina, ecc.) e gli stili globali sono gestiti dal personalizzatore del tema. Tuttavia, con il rilascio di FSE, sia Global Elements che Global Styles diventeranno parte del nuovo editor per offrire agli utenti un’esperienza unificata.

Si ipotizza che questa mossa possa porre fine al Customizer, anche se al momento sembra improbabile.

BLOCK-BASED PLUGINS

Block based Plugins - Genesis Blocks

I plug-in basati su blocchi non sono un componente della modifica del sito completo di WordPress. Sono strumenti di terze parti che forniscono a FSE funzionalità aggiuntive tramite widget di blocco. Puoi aggiungere questi widget trascinandoli in qualsiasi area della pagina e quindi usarli come qualsiasi normale blocco Gutenberg.

WordPress ha introdotto il concetto di blocchi con il rilascio dell’editor Gutenberg in WordPress 5.0 nel dicembre 2018. L’editor Gutenberg offre una gamma di blocchi utili come paragrafi, testo, immagini, galleria, post e shortcode che puoi utilizzare per creare un sito completamente funzionante.

Tuttavia, i blocchi Gutenberg predefiniti potrebbero non essere sufficienti per soddisfare ogni esigenza. Sebbene sia dotato di tutti i blocchi necessari, non include blocchi con funzionalità avanzate. È qui che entrano in gioco i plugin di blocco.

Come i normali blocchi di Gutenberg. Ad esempio, Genesis Blocks è un plugin molto popolare che aggiunge circa 15 nuovi blocchi all’editor Gutenberg. Allo stesso modo, più altri plugin di blocco estendono le capacità dell’editor Gutenberg.

COME ACCEDERE ALLA MODIFICA COMPLETA DEL SITO DI GUTENBERG

le speranze di ottenere FSE con WordPress 5.8 erano piuttosto alte, sfortunatamente, ciò non è accaduto. Tuttavia, con il rilascio di WordPress 5.9 nel dicembre 2021, speriamo di vedere in azione l’editor completo del sito completo.

Ad ogni modo, se sei ancora curioso e non puoi aspettare così tanto tempo per provare il nuovo editor del sito, continua a leggere.

Nella sua sezione, ti mostreremo come accedere alla versione beta dell’editor del sito Gutenberg e provarlo su un ambiente di staging o localhost.

FASE 1: INSTALLA E ATTIVA IL PLUGIN GUTENBERG

Per attivare Full Site Editor sul tuo sito di staging WordPress o sul tuo sito locale, devi prima installare il plug-in Gutenberg. Se lo hai già installato, assicurati che sia aggiornato.

Altrimenti, nella tua dashboard di amministrazione di WP, vai su Plugin > Aggiungi nuovo e cerca il plug-in Gutenberg. Fai clic sul pulsante Installa ora e quindi su Attiva.

Install and Activate Gutenberg Plugin

FASE 2: INSTALLA E ATTIVA UN TEMA A BLOCCHI

Una volta installato il plug-in, è necessario un tema a blocchi. Per questo tutorial, utilizzeremo il tema TT1 Blocks, che è una versione basata su blocchi del tema Twenty-Twenty-One predefinito.

Per installare il tema TT1 Blocks sul tuo sito WordPress, vai alla pagina GitHub Esperimenti sul tema WordPress. Fai clic sul pulsante Codice e quindi premi Scarica zip. Questo scaricherà un file zip che contiene tutto il contenuto.

WordPress Theme Experiments GitHub Page

Quindi, decomprimi il file theme-experiments-master.zip e individua la cartella TT1 Blocks. Crea un nuovo archivio zip solo per quella cartella. Questo sarà il tuo file tt1-blocks.zip. Successivamente, devi caricare questo file su WordPress.

TT1 Blocks Theme zip archive

Vai alla Dashboard di amministrazione del tuo sito e vai a Aspetto > Temi. Fai clic su Aggiungi nuovo per aggiungere un nuovo tema, quindi premi il pulsante Carica tema. Scegli il file zip e premi Installa ora per installare il tema.

Upload TT1 Blocks Themes

è installato, vai a WP Admin Dashboard > Aspetto > Temi. Lì, trova il tema Blocchi TT1 e attiva il tema sul tuo sito.

Activate TT1 Blocks Theme

P 3: ACCEDI ALL’EDITOR COMPLETO DEL SITO

Dopo che il tema è stato installato e attivato correttamente, una nuova voce, Editor del sito (beta), apparirà nella Dashboard di amministrazione.

Site Editor Beta

Premi l’opzione Editor del sito e verrai indirizzato a una nuova pagina in cui vedrai l’Editor del sito completo.

WordPress Full Site Editing

Congratulazioni! Hai attivato l’editor completo del sito sul tuo sito! Ora puoi giocare con il nuovo editor di blocchi e sperimentarlo prima del suo lancio ufficiale.

Accedi gratis nei nostri gruppi di supporto su Facebook

Gruppo Facebook - Supporto WordPress

Supporto WordPress

Il gruppo dove trovi supporto su WordPress. Entra ora!

Potrebbe interessarti…

Problemi con il tuo sito? Contattaci subito e ottieni assistenza immediata o un preventivo su misura per te.

Contattaci subito e ottieni un preventivo di intervento su misura per te.

RICHIEDI LA NOSTRA ASSISTENZA