Il blocco gutenberg Campo del form è un blocco personalizzato del wordpress Gpci framework; nella maggior parte dei casi verrà utilizzato insieme a un blocco form ma è anche possibile utilizzarlo indipendentemente, ad esempio per avviare funzioni javascript basate sugli input o i click dell'utente. Il blocco è composto da un div html che racchiude label e campo ed è indicato utilizzare il gruppo di controlli posizionamento con proprietà css display:flex per definire istantaneamente la direzione e la posizione dei componenti.
Controlli del campo del form
Dopo avere inserito il blocco è necessario configurare alcuni controlli per definire il campo. Alcuni attributi sono comuni a tutti i tipi di campo, altri invece sono specifici per tipo (come textarea e select). Va specificato che quasi tutti i controlli specifici per questo blocco sono relativi al campo e non al div contenitore come nel caso del gruppo di controlli attributi.
Controlli comuni
I controlli comuni a tutti i tipi di campo sono subito visibili nella barra laterale InspectorControl:
Nome
Stringa che verrà usata come attributo name. Per poter usare il valore spedito tramite un form questo campo è obbligatorio. Come regola generale utilizzare lettere, trattini medi/bassi e numeri e iniziare con una lettera.
Tipo di valore
Eventuale conversione dinamica relativa l'attributo id. Utilizzare se il campo è all'interno di un ciclo query.
Id
Stringa che verrà usata come attributo id, aggiornerà automaticamente anche l'attributo ancora del blocco (in avanzate). Compilare se la label viene visualizzata ( per l'attributo for ) oppure il campo è all'interno di un ciclo query ( in questo caso convertire a valore dinamico ). Come regola generale utilizzare lettere, trattini medi/bassi e numeri e iniziare con una lettera.
Label
Stringa che verrà usata come contenuto del tag label: compilare sempre in quanto se nascosta verrà usata come attributo aria-label.
Nascondi label
Nasconde la label.
Tag
Selezionare il tag del campo compilabile.
Type
Compare se il tag lo richiede, selezionare l'attributo type per completare ad esempio il tag input.
Placeholder
Compare solo se inerente. Se compilato, aggiungerà l'attributo placeholder al tag del campo.
Required
Se true, aggiungerà l'attributo required al tag del campo e farà comparire il controlli successivi per Oninvalid.
Tipo di messaggio
Scegliere come i messaggio nel campo successivo verrà visualizzato tra le seguenti scelte:
- fumetto - classico messaggio del browser per campo invalido ma con un messaggio personalizzato. In questo caso verrà anche aggiunto automaticamente un attributo oninput per il ricontrollo automatico del campo
- alert - il messaggio verrà visualizzato in un alert
- codice personalizzato - inserire direttamente il codice javascript per visualizzare il messaggio secondo le proprie preferenze
Oninvalid
Inserire qui il messaggio o il codice javascript per far visualizzare un'eventuale notifica di campo invalido all'utente.
Disabled
Se true, aggiungerà l'attributo disabled al tag del campo.
Larghezza
Se compilato, verrà aggiunto al tag del campo un attributo style contenente la proprietà width definita. Questo controllo ha associato un gruppo di pulsanti con alcuni valori comuni preassegnati, è comunque sempre scrivibile manualmente.
Valore iniziale
Sono presenti due controlli:
- conversione dinamica del valore
- valore: assegnerà automaticamente al campo un valore predefinito appena caricata la pagina. Questo controllo è utile nei form php di tipo GET (quindi molto probabilmente nelle query php) per segnalare all'utente la ricerca correntemente impostata e nei form inviati via javascript per filtrare le query correttamente in certi contesti.
Controlli specifici per tipo di campo
Vari tipi di campo hanno attributi speciali richiesti o comunque utili al loro funzionamento. Questi controlli compaiono soltanto per i tipi di campo in cui possono essere utili. Tenere presente che per tutti gli attributi non ancora integrati qui è sempre possibile settarli manualmente utilizzando il gruppo di controlli attributi.
Checked
Per checkbox: se true la checkbox sarà spuntata di default.
Rows
Per textarea: setta l'attributo rows.
Cols
Per textarea: setta l'attributo cols.
Multiple
Per select: aggiunge l'attributo multiple.
Opzioni
Per select: configura le opzioni (fa comparire i controlli necessari). Le opzioni possono essere di due tipi attivabili contemporaneamente:
Opzioni statiche
E' possibile aggiungere opzioni a piacere cliccando sul pulsante aggiungi option. Per ogni opzione settare il value, il nome visibile e, se desiderato, anche l'attributo selected. L'attributo selected sarà applicato solo all'ultima opzione con l'attributo (per select senza attributo multiple) e a tutti i tag option (per select con attributo multiple)
Opzioni dinamiche
Le opzioni dinamiche possono essere attivate insieme alle statiche ma al momento compariranno sempre per ultime. Se attivate le opzioni dinamiche comparirà il controllo origine riempimento in cui è possibile decidere come le opzioni saranno configurate selezionando tra:
Campo metabox
Riempire i due campi seguenti:
- Id metabox: scrivere l'id dellla metabox (gruppo di campi) che contiene il campo personalizzato
- Id campo: scrivere l'id del campo personalizzato (il select) da cui ottenere le opzioni
Nome funzione
Scrivere nel campo apposito il nome della funzione senza argomenti, la funzione deve generare tutti i tags option desiderati. Esempio:
Nome funzione: ListaUtenti
function ListaUtenti() {
$users = get_users();
$option = '';
foreach( $users as $user ){
$option .= '<option value="'.$user->ID.'">'.$user->display_name.'</option>';
}
return $option;
}
Php
Scrivere nella textarea Il codice php per ritornare i tag option. Il codice sarà processato via eval quindi attenzione a cosa si scrive qui. Esempio (stesso risultato di prima):
$users = get_users();
$option = '';
foreach( $users as $user ){
$option .= '<option value="'.$user->ID.'">'.$user->display_name.'</option>';
}
//ritornare sempre i tags sottoforma di stringa
return $option;
Informazioni aggiuntive
Nel caso di campo del form per caricare file ( quindi input type=file ), ricordarsi di aggiungere al blocco form che lo contiene l'attributo enctype=multipart/form-data per caricare correttamente i files.