<

Controlli

Ultima modifica: 27 Gennaio 2026

Nel wordpress Gpci framework sono presenti molti controlli addizionali che si dividono in 2 tipi:

  • InspectorControls - sono i controlli che compaiono nella barra laterale
  • BlockControls - sono i controlli che compaiono nella barra del blocco correntemente selezionato

Ogni controllo ha anche un tag dove è presente un a zona di templates a pulsanti.

La maggior parte dei controlli sono disponibili in tutti i blocchi in una delle due sezioni sopracitate. Vediamoli uno per uno:

Posizionamento
InspectorControl

Il gruppo posizionamento è un insieme di controlli basati sulla proprietà css display e quelle relative. L'obbiettivo è poter modificare con pochi click il tipo di layout, creando ad esempio delle flexbox o delle gridbox senza dover scrivere il codice per lo stile manualmente. L'idea generale è di considerare questo gruppo di controlli come una procedura guidata per i casi più comuni, come l'allineamento dei campi di un form o del blocco contenitore, in quanto per i casi più complessi esistono i gruppi style inline e css. Questo gruppo di controlli era nato proprio per questi due blocchi ma poi ho deciso di espanderlo a tutti i blocchi. Va specificato che le proprietà di questo gruppo sono sempre applicate al contenitore più esterno del blocco. I controlli disponibili sono:

Display

  • Tipo controllo: select
  • Nome attributo: LayoutDisplay

Selettore equivalente della proprietà css display, se vuoto (selezionare non usare) non verrà usato il gruppo. Di default non verrà utilizzato.

Gruppo dinamico

  • Tipo di controlli: gruppi di icone
  • Nome attributo: LayoutDefs
  • Tipo attributo: oggetto

Insieme di controlli variabile che vanno a popolare l'oggetto LayoutDefs. I nomi rispecchiano quelli delle proprietà css corrispondenti. Esempio:

"LayoutDefs":{
  FlexDirection:"row",
  AlignItems:"center",
  FlexWrap:"wrap",
  JustifyContent:"space-evenly"
}

Style inline
InspectorControl

Il gruppo style inline serve ad applicare liberamente al blocco le proprietà css inline. Anche in questo caso le proprietà di questo gruppo sono sempre applicate al contenitore più esterno del blocco. I controlli disponibili sono:

Style

  • Tipo controllo: textarea

Scrivere qui il css inline desiderato, è possibile andare a capo ogni proprietà per migliore leggibilità del codice, esempio:

position:relative;
margin-left:50px;

Il codice scritto in questa textarea ha priorità sui controlli layout in quanto viene processato dopo, quindi se in questa zona viene usata la proprietà display quella specificata in layout non avrà effetto. E' però possibile completare le proprietà css non esistenti nel gruppo precedente.

Disabilita nel backend

  • Tipo controllo: switch

Questo controllo serve a disabilitare lo style inline nel backend dato che potrebbe dare problemi di visualizzazione in certi contesti (come definizione di modal, flipbox, ecc..). Nel frontend lo style inline rimarrà sempre valido.

Condizioni di rendering
InspectorControl
TemplatesBtn

Il gruppo di controlli condizioni di rendering serve a imporre una condizione per cui il blocco sarà generato nel frontend, in caso contrario al posto del blocco sarà generata una stringa vuota. Può essere molto utile per nascondere porzioni di pagina a utenti che non hanno determinati permessi o disabilitare momentaneamente un blocco senza eliminarlo, fare apparire un blocco in certe date o altro. I controlli disponibili sono:

Operatore logico

Selezionare AND oppure OR in base a come si vuole verificare condizioni multiple, compare se sono presenti almeno 2 condizioni.

Campi ripetibili

Cliccando sul pulsante aggiungi condizione sarà possibile aggiungere una condizione specificandone i campi:

Disabilita

Disabilita la condizione, utile per disabilitare temporaneamente una condizione senza perderne la configurazione. Se abilitato la valutazione per questa condizione sarà semplicemente saltata.

Tipo di valore e valore 1

Conversione dinamica tra i 2 campi.

Comparatore

Selezionare il comparatore tra i 2 valori risultato.

Tipo di valore e valore 2

Conversione dinamica tra i 2 campi.

Va specificato che non ho introdotto la possibilità di inserire condizioni nested in quanto l'interfaccia sarebbe stata probabilmente disastrosa, è comunque possibile farlo utilizzando delle funzioni con conversione dinamica (ad esempio selezionando stringa php o funzione php) e annidare all'interno le condizioni.

Esempio

Non generare un blocco o gruppo di blocchi per utenti non autenticati:

  • tipo di valore 1: funzione php - valore 1: is_user_logged_in
  • comparatore: === ( uguale e stesso tipo )
  • tipo di valore 2: booleano - valore 2: true

Esempio TemplatesBtn

{
  "RenderingConditions":[
    {
      "icons":[ "hidden" ],
      "ButtonText":"",
      "TooltipText":"Disabilita",
      "content":[
        { "Cond1Type":"string" }, { "Cond1Value":"a" }, { "CondComparator":"==" }, { "Cond2Type":"boolean" }, { "Cond2Value":"false" }
      ]			
    },
    {
      "icons":[ "admin-users" ],
      "ButtonText":"",
      "TooltipText":"Genera solo per utenti registrati",
      "content":[
        { "Cond1Type":"function" }, { "Cond1Value":"is_user_logged_in" }, { "CondComparator":"===" }, { "Cond2Type":"boolean" }, { "Cond2Value":"true" }
      ]			
    }
  ]
}

Attributi
InspectorControl
TemplatesBtn

Il gruppo di controlli attributi è uno dei controlli più utili ed è utilizzato in vari patterns del framework. Serve ad applicare attributi html in due modi:

  • via html - gli attributi saranno aggiunti al wrapper del blocco tramite gutenberg, in questo caso nessun valore dinamico è ammesso
  • via php - gli attributi saranno aggiunti a un qualsiasi componente del blocco nel frontend, in questo caso sono ammessi valori dinamici

Leggere anche la parte riguardante gli attributi html personalizzati in quanto importante per la validazione html. Gli attributi via server sono applicati tramite wordpress HTML tag processor.

Processa via server

  • Tipo controllo: switch

Se abilitato ogni definizione dell'attributo avrà campi aggiuntivi che saranno utilizzati durante l'applicazione nel frontend.

Aggiungi attributo

  • Tipo controlli: vari e ripetibili

Ogni ripetizione è la definizione di un attributo, è possibile aggiungere attributi senza alcun limite.

I campi compilabili sono:

  • nome - nome dell'attributo
  • conversione dinamica (se attributi applicati via server)
  • valore - valore dell'attributo (eventualmente da convertire dinamicamente)
  • selettore (se attributi applicati via server) - tipo di selezione (tag, classi o attributi)
  • campo valore senza label (se attributi applicati via server) - inserire il valore riferito al campo precedente (il tag o le classi o l'attributo)
  • aggiungi valore (se attributi applicati via server) - se attivato antepone il valore dell'attributo aggiunto a quello esistente invece di sostituirlo
  • limite (se attributi applicati via server e selettore tag) - impostare a -1(default) per nessun limite, 0 per disabilitare temporaneamente, 1 o più per limitare il numero di elementi a cui verrà applicato l'attributo (esempio se si vuole solo il primo tag, ecc...)

Disabilita nel backend

  • Tipo controllo: switch

Compare solo se gli attributi non sono processati via server: se abilitato gli attributi non saranno applicati al backend.

Esempi

E' possibile trovare esempi praticamente in tutti i patterns del framework.

Sostituzioni
InspectorControl

Questo gruppo di controlli serve a sostituire codice html nel frontend subito prima del rendering, è la trasposizione in controlli della funzione php str_replace (il parametro $subject è sempre il contenuto del blocco corrente). Notare che al momento la sostituzione non funziona con gli shortcode in quanto vengono generati dopo, in futuro si vedrà se aggiungere un sistema per gli ordini di rendering. Qui abbiamo 2 tipi di controlli:

Aggiungi search

  • Tipo controllo: testo ripetibile

Inserire uno o più testi che saranno sostituiti dal controllo successivo.

Aggiungi replace

  • Tipo controlli: testo ripetibile con conversione dinamica

Inserire i contenuti che sostituiranno i search, qui abbiamo anche un gruppo di controlli per la conversione dinamica per sostituire qualcosa con il contenuto di un campo personalizzato, di uno shortcode, di una funzione, o altro. Notare che se esiste solo un parametro search e un replace saranno passati come stringhe, altrimenti saranno passati come array. Inoltre leggere bene come agisce la funzione php str_replace soprattutto per quanto riguarda gli array non a specchio.

Esempi

Sostituisce una stringa semplice con un'altra:

  • Stringa: Sono una PROVA
  • search: PROVA
  • replace: <b>sostituzione</b> (tipo di valore: stringa)

Risultato: Sono una sostituzione

Foreach
InspectorControl

Questo gruppo di controlli serve a sostituire il blocco corrente con una ripetizione dello stesso in base a un array o un numero intero di ingresso, riproducendo il foreach php, le cui chiavi e valori saranno visualizzate dallo shortcode global. Notare che se il valore di ingresso è un array vuoto oppure 0 il blocco non sarà generato. I controlli sono:

Valore di ingresso

Conversione dinamica che imposta un array oppure un numero intero nel quale il foreach itererà. Se impostato su non usare (che è il valore predefinito) il foreach non sarà applicato.


Id

Stringa in cui inserire un identificatore utilizzando lettere, numeri trattini e underscores. Sarebbe meglio che fosse unico nella pagina: questa regola è legge se i foreach sono nested e opzionale (anche se comunque consigliata) se i foreach sono paralleli, quindi non comunicano tra di loro. Il valore default è id.


Paginazione

Conversione dinamica che imposta un numero intero per indicare il numero di elementi per pagina. Lasciare vuoto oppure impostare a 0 per non utilizzare la paginazione. Un'eventuale paginazione verrà gestita tramite il blocco gutenberg paginazione. E' importante notare che la query string che gestirà la paginazione sarà sempre nel formato id-page=numero di pagina.


Esempi

Vedi shortcode global.


Risorse collegate:

Filtri contenuto
InspectorControl

Questo gruppo di controlli serve ad applicare uno o più filtri al blocco corrente; i filtri saranno applicati nel frontend tramite php. E' importante sapere che i parametri dei filtri saranno passati a questo controllo mediante le globali php $GLOBALS['gpci']['render']: i loro valori sono inizializzati all'applicazione del filtro e azzerati subito dopo (memorizzati per la durata del filtro nelle globali php $GLOBALS['gpci']['render']['callbacks']). Per modificare quindi il contenuto del blocco tramite questo controllo verranno sempre (escluse eccezioni) utilizzate le globali php che corrispondono ai parametri dell'hook selezionato (vedere tabelle ed esempi). I controlli sono:

Hook

Selezionare l'hook php tra:

- pre_render_block

Serve a modificare la stringa html del blocco prima che sia processato dal filtro render_block; se il filtro ritorna null (ossia il comportamento regolare) non verrà applicata alcuna modifica, altrimenti ritorneremo una stringa html e il filtro render_block non sarà processato. Probabilmente sarà usato molto raramente ma se il blocco deve diventare un contenuto fisso probabilmente questa è la scelta migliore. Questo filtro non è ripetibile ai blocchi interni. Tabella parametri e globale corrispondente:

ParametroGlobale
$pre_render$GLOBALS['gpci']['render']['pre_render']
$parsed_block$GLOBALS['gpci']['render']['parsed_block']
$parent_block$GLOBALS['gpci']['render']['parent_block']

- render_block_data

Serve a modificare la configurazione del blocco corrente (o eventualmente un blocco interno) prima che il codice html del blocco stesso sia generato; potrebbero ad esempio essere modificati gli attributi o eliminato un blocco interno. Ricordare che questo filtro deve ritornare un array che descrive la configurazione del blocco gutenberg e non è ripetibile ai blocchi interni. Tabella parametri e globale corrispondente:

ParametroGlobale
$parsed_block$GLOBALS['gpci']['render']['parsed_block']
$source_block$GLOBALS['gpci']['render']['source_block']
$parent_block$GLOBALS['gpci']['render']['parent_block']

- render_block

Serve a modificare la stringa html finale del blocco subito prima che sia inserito e probabilmente sarà il più utilizzato, potrebbero ad esempio essere eliminati degli shortcodes prima di essere convertiti a contenuto oppure eseguite delle modifiche alla fine. Questo filtro è ripetibile ai blocchi interni. Tabella parametri e globale corrispondente:

ParametroGlobale
$block_content$GLOBALS['gpci']['render']['block_content']
$block$GLOBALS['gpci']['render']['block']
$instance$GLOBALS['gpci']['render']['instance']

- query_loop_block_query_vars

Serve a modificare i parametri del blocco query loop e gpci query loop e compare soltanto se il blocco corrente è una query. Deve ritornare un array di parametri per la WP_Query (vedi esempi) e consente di specificare parametri non ancora esistenti oppure forzare una certa query a certi parametri. Questo filtro non è ripetibile ai blocchi interni. Tabella parametri e globale corrispondente:

ParametroGlobale
$query$GLOBALS['gpci']['render']['query']
$block$GLOBALS['gpci']['render']['block']
$page$GLOBALS['gpci']['render']['page']

- non usare

Non aggiunge il filtro: utile per disabilitare il filtro singolo temporaneamente senza perderne la configurazione.

Priorità

Priorità dell'hook, è possibile scegliere un numero tra 1 e 999. Tenere presente che come spiegato qui la maggior parte delle funzioni del framework avvengono a una priorità indicativa di 21 (11 o 31 per i moduli), quindi utilizzare delle priorità corrette in base al risultato desiderato (esempio 5 o 15 o 35). Ad esempio la conversione degli shortcodes avviene alla priorità di 21 nell'hook render_block.

Tipo di valore

Selettore per la conversione dinamica.

Valore di ingresso

Valore inerente la conversione dinamica. Tenere presente che il valore del ritorno sarà differente in base all'hook selezionato, per evitare errori critici o risultati assurdi nel frontend leggere gli esempi e ritornare il valore corretto. E' importante sapere che se la conversione dinamica ritorna null sarà utilizzato il valore del filtro originale: questo può essere utile ad eseguire azioni che non modificano il valore di ritorno (come potrebbe essere un accodamento di stili e script per un singolo blocco) senza stare a scrivere il codice necessario per ottenere il valore originale.

Limitare a questo blocco

Serve a rimuovere il filtro subito appena è stato applicato al blocco corrente per evitare di trascinarselo dietro e rieseguirlo per tutti gli innerBlocks, è selezionato come valore predefinito. In certi casi (come nella rimozione degli shortcodes a tutti i blocchi interni) potrebbe essere necessario invece non selezionarlo. E' utile praticamente soltanto nei blocchi contenitori altrimenti non dovrebbe avere alcun effetto in nessun caso.

Note

Oltre quelle specificate sopra, esistono altre globali php inerenti il render dei blocchi:

GlobaleDescrizione
$GLOBALS['gpci']['render']['block_filtered_id']Disponibile in render_block, il clientid del blocco che ha il filtro impostato.
$GLOBALS['gpci']['render']['current_hook']Hook corrente primario aggiunto dal filtro contenuto.

Esempi

Vediamo come ho generato i tag in questa pagina:

//funzione per le sostituzioni
function ReplaceTextWithTag(){
  $content = $GLOBALS['gpci']['render']['block_content'];
  $content = str_replace(
    $search = [
      'InspectorControl',
      'BlockControl',
      'TemplatesBtn'
    ],
    $replace = [ 
      '<div class="inspectorcontrol">InspectorControl</div>',
      '<div class="blockcontrol">BlockControl</div>',
      '<div class="templatesbtn">TemplatesBtn</div>'
    ],			
    $content
  );	
	
  return $content;
}

Configurazione filtro:

  • filtro: render_block
  • priorità: 25
  • tipo: funzione php
  • valore: ReplaceTextWithTag
  • limita a questo blocco: si

Applichiamo la funzione strip_shortcodes a un contenitore e tutti i blocchi interni:

Configuriamo il filtro nel blocco contenitore:

  • filtro: render_block
  • priorità: 15
  • tipo: funzione php
  • valore: strip_shortcodes,$block_content
  • non limitare al blocco corrente

equivalente di:

creare funzione php

function rimuoviShortcodes(){
  $block_content = $GLOBALS['gpci']['render']['block_content'];
  $block_content = strip_shortcodes( $block_content );	
  return $block_content;
}

configurazione filtro:

  • filtro: render_block
  • priorità: 15
  • tipo: funzione php
  • valore: rimuoviShortcodes
  • non limitare al blocco corrente

equivalente di:

configurazione filtro:

  • filtro: render_block
  • priorità: 15
  • tipo: stringa php
  • valore: strip_shortcodes( $GLOBALS['gpci']['render']['block_content'] )
  • non limitare al blocco corrente

Ora utilizziamo un filtro personalizzato: modifichiamo l'output dello shortcode render_data per il blocco selezionato e tutti gli interni poi ripristiniamo il rendering normale per i blocchi successivi (altrimenti andrebbe avanti per tutta la pagina). Qui sono utilizzati 2 filtri: uno per l'applicazione del filtro personalizzato e uno per la successiva rimozione:

Funzione php per l'applicazione:

function DisabilitaShortcodes(){
  add_filter( 'do_shortcode_tag', $GLOBALS['custom']['callbacks']['disabilita_shortcodes']=function( $output, $tag, $attr, $m ){
    if( $tag == 'render_data' ){ $output = 'Output personalizzato!'; }

    return $output;
  }, $priority=15, $accepted_args=4 );
}
  • filtro: render_block
  • priorità: 15
  • tipo: funzione php
  • valore: DisabilitaShortcodes
  • limitare a questo blocco: no (deve essere applicato a tutti i blocchi altrimenti il filtro sarebbe applicato solo al contenitore che come spiegato prima viene processato per ultimo)

Funzione php per la rimozione:

function RiabilitaShortcodes(){
  remove_filter( $hook_name='do_shortcode_tag', $callback=$GLOBALS['custom']['callbacks']['disabilita_shortcodes'], $priority=15 );
}
  • filtro: render_block
  • priorità: 25
  • tipo: funzione php
  • valore: RiabilitaShortcodes
  • limitare a questo blocco: no (deve essere applicato a tutti i blocchi altrimenti il filtro sarebbe aggiunto a tutti i blocchi interni e rimosso solo per il contenitore)

Modifichiamo una query al volo:

creare la funzione:

function parametriQueryModificata(){
  $query = $GLOBALS['gpci']['render']['query'];
  $query['post_type'] = ['post', 'page'];
  return $query;
}

configurazione filtro:

  • filtro: query_loop_block_query_vars
  • priorità: 35
  • tipo: funzione php
  • valore: parametriQueryModificata

Aggiungiamo codice javascript al blocco corrente senza scriverlo manualmente nel controllo dedicato:

function AggiungeCodiceJs(){
	$parsed_block = $GLOBALS['gpci']['render']['parsed_block'];
	$parsed_block['attrs']['JsBlock'] = "
...codice javascript...
";

return $parsed_block;
}

configurazione filtro:

  • filtro: render_block_data
  • priorità: 15
  • tipo: funzione php
  • valore: AggiungeCodiceJs
  • limitare al blocco corrente

Copiamo un attributo da un blocco contenitore a tutti i blocchi interni (anche interni di interni e cosi via). Copieremo l'attributo JsBlock e daremo a ogni blocco contenuto un colore di sfondo casuale (ma senza stare a inserire il codice javascript in ogni blocco):

inseriamo nel controllo Js del blocco più esterno il codice per assegnare al blocco corrente uno sfondo casuale:

colore = '#';
for( let i=0; i<6; i++ ){
  colore += Math.floor( Math.random() * 16 ).toString( 16 );
}
GetCurrentBlockFromCurrentScript().style.backgroundColor = colore;

creiamo la funzione php che contiene l'azione da eseguire e sfrutta la funzione del framework BlocksAction:

function CopyAttributeToInnerblocks(){
  $parsed_block = $GLOBALS['gpci']['render']['parsed_block'];
  $parsed_block = BlocksAction( $action='copy_attribute', $excludeCurrentBlock='notUsed', $updateInnerblocks='notUsed', $name='JsBlock', $value='notUsed' );
  return $parsed_block;
}

configurazione filtro:

  • filtro: render_block_data
  • priorità: 15
  • tipo: funzione php
  • valore: CopyAttributeToInnerblocks
  • limitare al blocco corrente in quanto si occupa BlocksAction di modificare i blocchi interni

Risorse collegate:

Avanzate
InspectorControl

Nel pannello avanzate ci sono vari controlli aggiuntivi:


Css

  • Tipo controllo: textarea

Questo controllo aggiunge un tag style prima del blocco corrente con il contenuto della textarea. Non inserire tag style in quanto è creato automaticamente sia nel backend che nel frontend. Se il blocco ha un id (ancora) assegnato il tag style avrà un id con suffisso -css, altrimenti sarà generico. Questo controllo è dotato di icona modal per scrivere il css a schermo grande con syntax highlighting (codemirror) applicato. Nelle ultime versioni di wordpress sembra ci siano state modifiche ai selettori gutenberg, quindi la congruenza tra backend e frontend è calata in precisione e le selezioni possono essere visibili anche nei controlli esterni (nel backend); per compensare momentaneamente, utilizzare selettori padri per applicare gli stili agli elementi figli, esempio per applicare lo style ai paragrafi:

.wp-block-group p{ background:green; }

Ricordarsi comunque che idealmente questa zona serve ad applicare lo stile al blocco corrente, quindi sarebbe ancora meglio assegnare un id ed usarlo come selettore per evitare qualsiasi problema.

Disabilita nel backend

  • Tipo controllo: switch

Se attivato lo switch: il css sarà disabilitato nel backend, nel frontend invece rimarrà invariato.


Js
TemplatesBtn

  • Tipo controllo: textarea

Questo controllo aggiunge un tag script dopo il blocco corrente con il contenuto della textarea. Non i nserire il tag script in quanto è creato automaticamente nel frontend. Come il controllo css se il blocco ha un id (ancora) assegnato il tag script avrà un id con suffisso -css, altrimenti sarà generico. Anche questo controllo è dotato di icona modal per scrivere il codice javascript a schermo grande con syntax highlighting (codemirror) applicato.

Rimuovi a capo

  • Tipo controllo: switch

Se attivato lo switch: rimuove gli a capo dal codice js nel frontend. Utile per scrivere stringhe umanamente leggibili magari mentre si sta testando il codice. Attenzione! non usare il commento \\ .


Non generare su telefono

  • Tipo controllo: switch

Il blocco non verrà generato sui dispositivi rilevati come telefoni. Nella pratica verrà rimosso da javascript se la funzione IsPhone restituisce true. E' pensato più che altro per immagini e colonne che non ha senso mostrare su smartphone (evitando anche lo scaricamento dei dati). Al momento non è compatibile con il controllo avanzate/javascript quindi se viene atttivato il controllo non generare su telefono non sarà possibile utilizzare il controllo js, verrà sistemato in un secondo momento o su richieste.

Non generare su tablet

  • Tipo controllo: switch

Come sopra ma per tablet, controllato dalla funzione IsTablet.

Non generare su desktop

  • Tipo controllo: switch

Come sopra ma per tablet, controllato dalla funzione IsDesktop.


Schema

  • Tipo controllo: textarea
  • Template btn id: ......

Questo controllo aggiunge un tag script di tipo application/ld+json prima del blocco corrente con il contenuto della textarea, del resto funziona come il controllo javascript. Qui può essere inserito un oggetto json con la definizione dei dati strutturati relativi al blocco corrente. E' dotato di modal e di una zona template btn.


Debug blocco

  • Tipo controllo: switch

Se attivato questo controllo il blocco corrente verrà sostituito con un print_r del blocco stesso per eventuale debug di codice. Sia i controllo che i risultato sono visibili soltanto agli amministratori.

AdminOnlySettings
BlockControl

Questo controllo serve ad attivare una modalità che consentire la modifica di un certo blocco solamente agli amministratori. Può essere attivato in 2 modi:

  • manualmente: è sufficiente cliccare sull'icona lucchetto per attivare la modalità. Utile per amministratori che inseriscono un blocco che non deve essere modificato da altri utenti.
  • automaticamente: in base ad altri controlli (come nel caso del selettore tipo di valore) la modalità viene attivata automaticamente. Questo serve ad impedire agli utenti di modificare parametri a cui non hanno accesso e a limitare le modifiche che andrebbero oltre i loro permessi.

Pulsante lucchetto

  • Nome attributo: AdminOnlySettings
  • Tipo attributo: array

E' possibile, per gli amministratori, monitorare lo stato della modalità semplicemente guardando l'icona lucchetto: se nera (come gli altri controlli) la modalità è attivata. L'attributo è un array perchè contiene tutte le ragioni per cui il blocco è in questa modalità. esempio se utilizziamo il selettore tipo di valore stringa php negli attributi, nelle sostituzioni, nelle condizioni di rendering e attiviamo anche il lucchetto manualmente, l'array AdminOnlySettings sarà:

"AdminOnlySettings":["AttributesDefinition","RenderingCondPhpGroup","ReplacementsDefs","AdminOnlySettingsBtn"]

Il lucchetto non è mai visibile agli utenti non amministratori e basta soltanto una ragione affinchè il blocco sia in questa modalità. Ma vediamo come funziona nella pratica:

In questa immagine l'utente corrente è amministratore e ha inserito una proprietà in condizioni di rendering selezionando funzione php. Nella zona BlockControls si è attivato il blocco di modifica da parte di utenti non amministatori.

In questa immagine invece l'utente corrente è editore, essendo il blocco in stato di locking non è possibile da parte di questo utente fare modifiche al blocco e viene visualizzato un messaggio informativo.

Barra laterale

Nelle schermate gutenberg è disponibile una barra laterale che contiene utilità, controlli e informazioni (raggruppati per contesto) che potrebbero essere utili a sviluppatori o utenti:

Convertitore blocco/shortcode (REVISIONARE)

Questo pulsante apre un modal per convertire uno o più blocchi gutenberg a shortcode render_blocks e viceversa in questo modo:

  1. inserire nella textarea superiore il contenuto da convertire
  2. selezionare la modalità (se si converte da blocchi a shortcode il codice è già pronto da inserire in html)
  3. cliccare sul pulsante converti
  4. copiare dalla textarea inferiore (manualmente o con l'apposito pulsante) il contenuto convertito

Ricordare che per copiare un blocco gutenberg è sufficiente utilizzare il pulsante copia presente in qualsiasi blocco (nel caso di blocchi multipli selezionare prima i blocchi). Il convertitore rimuoverà automaticamente gli attributi del blocco inutili o non supportati.


Css

Se attivato evidenzia tutti i blocchi nella pagina corrente che contengono codice css tramite l'apposito controllo.


Js

Se attivato evidenzia tutti i blocchi nella pagina corrente che contengono codice javascript tramite l'apposito controllo.


Attributi

Se attivato evidenzia tutti i blocchi nella pagina corrente che hanno attributi aggiuntivi tramite l'apposito controllo.


Condizioni di rendering

Se attivato evidenzia tutti i blocchi nella pagina corrente che hanno impostate condizioni di rendering tramite l'apposito controllo.


Sostituzioni

Se attivato evidenzia tutti i blocchi nella pagina corrente che hanno impostate sostituzioni tramite l'apposito controllo.


Foreach

Se attivato evidenzia tutti i blocchi nella pagina corrente che hanno impostato il foreach tramite l'apposito controllo.


Filtri contenuto

Se attivato evidenzia tutti i blocchi nella pagina corrente che hanno impostati uno o più filtri contenuto tramite l'apposito controllo.


Media

Questo gruppo contiene un modal al cui interno ci sono due tabelle relative alle grandezze media correnti. Una è relativa alle grandezze visibili nell'editor (quindi quelle selezionabili dal blocco immagine) e l'altra relativa alle grandezze media non visibili nell'editor (quindi quelle che saranno solo visualizzate tramite l'attributo html srcset).

Php

Questo gruppo contiene modals di informazioni su costanti, globals e shortcodes. Non ho inserito le costanti relative i moduli attivati in quanto inutili nella creazione di una pagina, inoltre possono essere già visualizzate nel footer di una zona admin.