Il blocco Dettagli è una delle ultime novità introdotte sull’editor a blocchi di WordPress ed è molto comodo quando vuoi inserire numerosi contenuti in una pagina senza occupare troppo spazio.
L’aspetto e le funzionalità standard di questo blocco sono però un po’ limitate. Però, come ti mostro in questo video è molto semplice migliorare l’aspetto e potenziare le funzionalità del blocco Dettagli senza installare alcun plugin aggiuntivo.
Nel video ti mostro come, inserendo una piccola quantità di codice JavaScript è possibile rendere automaticamente collassabili gli accordion del blocco Dettagli. In pratica, ogni volta che apri un dettaglio, gli altri si chiudono. Questo permette di evitare che troppi blocchi Dettagli aperti vadano ad occupare uno spazio eccessivo.
Inoltre, con l’aggiunta di codice CSS è possibile andare a personalizzare l’aspetto del blocco dettagli, evitando che i vari blocchi siano troppo vicini tra loro.
Ho utilizzato la funzione Elementi del tema GeneratePress per aggiungere il codice personalizzato alla pagina contenente i blocchi Dettagli. Puoi inserire lo stesso codice in molti modi diversi. Ad esempio, creando una funzione ad hoc da inserire nel file functions.php del tuo tema child, oppure utilizzando plugin come WP Code o Code Snippets che ti permettono di aggiungere codice personalizzato al sito.
Qui di seguito ti fornisco gli snippet di codice utilizzati nel video. Ovviamente, dovrai personalizzarli se desideri modificare l’aspetto e le funzionalità del blocco.
Ecco il codice JavaScript utilizzato nel video:
const details = Array.from(document.querySelectorAll('details'))
details.forEach((detail) => {
detail.addEventListener('click', (e) => {
const active = details.find(d => d.open)
if (!e.currentTarget.open && active) {
active.open = false
}
})
})Questo invece è il codice CSS utilizzato nel video:
.wp-block-details {
border: 1px solid #d1dfee;
margin-bottom: 20px;
background-color: #fdfeff;
padding: 1rem;
}
.wp-block-details summary {
font-size: 1.125rem;
font-weight: bold;
}
.wp-block-details p:last-child {
margin-bottom: 0;
}