<

Controlli

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

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 casi 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:

Selettore Display

  • Nome attributo: LayoutDisplay
  • Tipo attributo: stringa

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

Gruppo dinamico

  • Nome attributo: LayoutDefs
  • Tipo attributo: oggetto

Insieme di controlli che vanno a popolare l'oggetto LayoutDefs. I tipi degli attributi sono perlopiù stringhe e 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:

Textarea Style

  • Nome attributo: styleInline
  • Tipo attributo: stringa

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.

Toggle per disabilitare

  • Nome attributo: styleInlineBackendDisable
  • Tipo attributo: booleano

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.

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.