Configurare correttamente la classe “alignfull” di Gutenberg in presenza di scrollbar laterali

Forse questo articolo è un po’ tardivo in quanto siamo ormai alla versione 5.4 di Gutenberg, che è diventato l’editor di testi nativo di WordPress già ormai dalla fine del 2018, ma è però anche vero che una soluzione perfetta alla gestione della classe “alignfull” non è mai stata trovata in forma ufficiale, e questo accade perchè di per se Gutenberg fornisce supporto all’applicazione di questa classe su tutti i blocchi che si vogliono estendere fino a riempire la dimensione dello schermo, ma come strutturare la classe è cosa che ogni tema grafico deve gestire da se.

A cosa serve la classe “alignfull”?

La classe “alignfull” è quella che ci permette di forzare la larghezza del contenitore e di riempire completamente la larghezza delle finestra del browser in tutti quei casi in cui un template contiene la pagina impedendo che i propri contenuti si allarghino a tutto schermo. Gutenberg è nato con l’intento di sopperire ai limiti del vecchio editor, il TinyMCE, il quale obbligava all’inserimento di testi e immagini in un’unico “elemento”.

Gutenberg ha introdotto il concetto di scrittura “a blocchi” per cui ora esistono tanti elementi di tipo specifico che possono essere impaginati sequenzialmente a proprio piacimento, permettendo cosi di realizzare pagine dalla struttura molto più flessibile, ad esempio suddividendo la larghezza della pagina in più colonne, o appunto anche facendo in modo che alcuni elementi si estendano a tutto schermo a differenza di altri.

Come deve essere scritto lo stile CSS della classe “alignfull”?

Il trucchetto è possibile con pochissime righe di CSS, con l’ausilio della funzione “calc” e aggiungendo un margine negativo su entrambi i lati del blocco che si vuole allargare, come da esempio:

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: calc(100vw);
}

Questo dice al browser di calcolare il 50% della larghezza del suo contenitore e sottrarre da esso la meta (50vw) della larghezza della finestra (l’unità vw sta per “viewport width” e tutta la larghezza della finestra è pari a 100vw). Ciò si traduce in un margine negativo che tira l’elemento verso i bordi dello schermo.

Correggere il problema della classe “alignfull” in presenza di scrollbar verticale

La cosa sarebbe finita qui se non fosse che purtroppo quando i browser considerano la larghezza della finestra non tengono in considerazione la presenza di eventuali scrollbar verticali, per cui, la larghezza con o senza barra di scroll è sempre calcolata nel medesimo modo, e quindi identica. Questo fa si che la classe “alignfull” appena realizzata non sia più performante in presenza di una scrollbar verticale visto che il difetto introdotto dalla presenza dello spessore della scrollbar invalida i nostri calcoli, facendo apparire una scrollbar orizzontale nella finestra.

Ora, quando una soluzione non può essere valida in tutti i casi in cui cui la si può applicare, allora è perlomeno utile cercare di capire in quale contesto è più utile e gestire quello, riducendo cosi al minimo le possibilità si presenti il problema. La mia esperienza mi dice che molto raramente una pagina di un sito web è cosi corta da non presentare una scrollbar laterale, per cui, la nostra classe “alignfull” dovrà considerare nei suoi calcoli di sottrarre anche i 20px che sono in linea di massima lo spessore della scrollbar di un browser.

Il nostro stile “alignfull” verrà quindi modificato come segue:

.alignfull {
    margin-left: calc(50% - 50vw + 10px);
    margin-right: calc(50% - 50vw - 10px);
    width: 100vw;
    max-width: calc(100vw - 20px);
}

Fix della dimensione della scrollbar verticale nella classe “alignfull” nei dispositivi mobili

Se è vero che abbiamo trovato come compensare la presenza della scrollbar nel calcolo della dimensione nella classe “alignfull” dobbiamo però sapere che i browser di smartphone e tablet hanno una scrollbar diversa da quella dei pc desktop, e nel caso dei dispositivi mobili la scrollbar non va a togliere spazio alla larghezza della finestra perchè viene semplicemente visualizzata in sovrapposizione ai contenuti, quindi, nuovamente, ci troviamo uno stile CSS che potrebbe potenzialmente fallire in alcuni casi.

Come possiamo gestire la cosa? Beh, la prima soluzione è molto semplice, ed è quella di fare in modo, attraverso una media query, che lo stile “alignfull” venga attivato esclusivamente al di sopra di una certa larghezza della finestra, ad esempio:

@media only screen
and (min-width:780px) {
    .alignfull {
        margin-left: calc(50% - 50vw + 10px);
        margin-right: calc(50% - 50vw - 10px);
        width: 100vw;
        max-width: calc(100vw - 20px);
    }
}

oppure, se non vi appare troppo invasivo l’utilizzo di codice javascript, controllando se siamo in presenza di un dispositivo mobile verificando il comportamento con l’elemento ontouchstart e applicando una classe specifica che appare solo in presenza di dispositivi “touch” (tutti i dispositivi mobili).

Il seguente script aggiunge al tag <HTML> la classe “is-touch”:

var touchsupport = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
if (touchsupport){ // browser doesn't support touch
      document.documentElement.className += " is-touch"
}

Lo stile del CSS “alignfull” a questo punto potrà essere diversificato a seconda che a visualizzare la pagina sia un computer desktop o un dispositivo mobile:

.alignfull {
        margin-left: calc(50% - 50vw + 10px);
        margin-right: calc(50% - 50vw - 10px);
        width: 100vw;
        max-width: calc(100vw - 20px);
}

.is-touch .alignfull {
     margin-left: calc(50% - 50vw);
     margin-right: calc(50% - 50vw);
     width: 100vw;
     max-width: 100vw;
}

Spero che questo semplice trucchetto possa esservi di aiuto!