Apple ha da pochi giorni rilasciato MacOS Sequoia e Safari 18 (quest’ultimo anche su Sonoma). Tre le tante migliorie e le nuove features, ecco un fastidiosissimo bug se stiamo utilizzando il backend di WordPress, specialmente WooCommerce.

L’ho riscontrato anche io a poche ore dall’update, quando sono andato ad aggiornare un sito su cui è installato WooCommerce. Tutti i blocchi che solitamente sono situati nel centro della schermata erano nella colonna di destra (quella dove si trova il bottone per salvare un post o un prodotto, per capirci).

Cercando di riposizionare tutto, finivo in un loop all’apertura successiva della pagina, dove di nuovo tutto era sfasato. Nel mentre ho quindi utilizzato Mozilla Firefox come alternativa.

Stasera ho fatto qualche ricerca, ed in realtà un paio di soluzioni sono uscite.

Prima di tutto: il bug di Safari 18 con il Classic Editor di WordPress è già stato segnalato nel bugtracker di Apple (l’avrei fatto anche io se avessi avuto tempo…) e confermano il problema, che verrà risolto in uno dei prossimi aggiornamenti. Colpa di un errore in WebKit che non riconosce alcune regole CSS.

Soluzione n.1 (specifica per Safari stesso)

Creiamo un file .css (ad esempio, chiamiamolo fixSafari.css), salviamolo da qualche parte nel nostro hard disk (io l’ho salvato in Documenti) ed al suo interno scriviamo queste righe:

#postbox-container-2 { clear: left; }

.index-php #postbox-container-2 { clear: none; }

Apriamo Safari, e andiamo in Impostazioni > Avanzate e dalla tendina Foglio di stile andiamo a selezionare il nostro file. La pagina di WordPress si vedrà correttamente, ma la fix è solo sul nostro browser. Utile se siamo gli unici a trafficare sul sito, un po’ meno se ci sono altri Admin con Safari 18.

Soluzione n.2 (CSS sul sito via Snippet)

All’interno del file functions.php del tema, o meglio ancora, tramite plugin CodeSnippets, inseriamo questo hook:

add_action('admin_head', 'my_custom_css');

function my_custom_css() {
	echo '<style>
		#postbox-container-2 { clear: left; }
		.index-php #postbox-container-2 { clear: none; }
	</style>';
}

Questo risolve lato sito, che forse è anche meglio della soluzione n.1

Soluzione n.3 (per i pigri o se non si può accedere al file functions.php o a CodeSnippets)

Un utente ha rilasciato un plugin, installabile sul sito e che risolve fino a che Apple non correggerà il bug. Il plugin è gratuito e si trova a questo link su GitHub: https://github.com/aaronmeder/wp-classic-editor-safari-18-fix

Il plugin dovrebbe essere sicuro, ma ricordo che è do terze parti, per cui l’installazione è a proprio rischio e pericolo. Nel caso, un’occhiata al codice sorgente può comunque tranquillizzarci.

C’è chi dice sia colpa di Safari, ma pare ci sia anche chi incolpa WordPress, adducendo il fatto che negli anni, molti bug di CMS o plugin saltassero all’occhio solo dopo l’update di uno o più browser, che con l’aggiornamento diventavano meno tolleranti verso tag non chiusi o codice obsoleto.

Per adesso l’importante è che ci sia una fix (anche perchè secondo me Safari ha una console per l’analisi del CSS migliore di Firefox e Chrome).

Happy coding!