Il blocco Button è un blocco gutenberg personalizzato del wordpress Gpci framework. E' un blocco molto semplice che contiene un pulsante singolo senza alcun contenitore esterno e può essere utilizzato sia come pulsante normale che come elemento di invio/reset per un form o una query. Ho inserito tra parentesi gpci per evitare di confonderlo con il blocco pulsante definito nel core di wordpress.
Controlli
Il blocco gutenberg button ha pochi controlli esclusivi, è comunque pienamente personalizzabile utilizzando i controlli generali. Appena inserito questo blocco gli viene automaticamente assegnata la classe wp-element-button per uniformare lo stile con gli altri pulsanti. Se non si desidera utilizzare questa classe rimuoverla da controlli/avanzate/classi.
Type
Selezionare il valore dell'attributo type che verrà applicato al tag button. I valori selezionabili sono 3:
- Button - valore di default; probabilmente ci sarà un'azione javascript personalizzata che avviene al click del pulsante.
- Submit - inserire all'interno di un form per inviare le informazioni
- Reset - inserire all'interno di un form per resettarne i valori
Azioni predefinite
Le azioni predefinite aggiungono codice al pulsante in base al tipo di pulsante e all'azione selezionata. Non sono obbligatorie in quanto il pulsante è pienamente configurabile, ma servono a evitare di scrivere codice per le azioni più comuni. Se utile questa funzionalità in futuro verrà espansa ad azioni personalizzate o snippet di codice. Le azioni predefinite sono:
Vai a url (type=button)
Al click del pulsante il browser andrà all'url risultato di una conversione dinamica. E' quindi possibile utilizzarlo sia nelle queries che nelle pagine singole. E' possibile anche scegliere se aprire il link in una nuova scheda.
Reset campi (type=reset)
Il comportamento normale del pulsante type=reset è riportare i campi del form ai valori iniziali; selezionando questa azione invece tutti i campi di tipo input, textarea e select ma esclusi gli hidden saranno riportati a valori vuoti. E' possibile anche scegliere se resettare le richieste di tipo $_GET nell'url e ricaricare la pagina corente alla posizione corrente tramite location.reload().
Contenuto pulsante
Textarea in cui inserire il contenuto sotto forma di html, è possibile utilizzare anche icone e immagini.
Esempi
Pulsante che quando cliccato sostituisce se stesso con un messaggio: