Prepara il tuo tema a Gutenberg - Francesco Grasso

Nell'appuntamento di Settembre 2018 del WordPress Meetup Catania, Francesco Grasso ci ha parlato nuovamente di Gutenberg. Questa volta con un focus su alcune nuove funzionalità dell'editor. In particolare allineamenti immagini e possibilità di abilitare/disabilitare la gestione del colore per i testi.

Transcript

1. Prepara il tuo tema a Gutenberg Piccoli suggerimenti per far sopravvivere il tuo tema alla più grande rivoluzione degli ultimi anni di WordPress
2. Web Developer @yithemes.com Trainer @Your Inspiration WordPress Lover and Specialist WordPress Meetup Catania Organizer @francgrasso Francesco Grasso
3. Istruzioni per l’uso e la sopravvivenza WordPress & Gutenber
4. “ La creazione di contenuti di qualità è spesso vittima di layout che ci vanno “stretti” o sono troppo complessi da realizzare. Francesco Grasso
5. Cos’è Gutenberg? Francesco Grasso
6. Cos’è Gutenberg? Quando farà ufficialmente parte di WordPress? Francesco Grasso
7. Come funziona? E’ un page builder? Cos’è Gutenberg? Quando farà ufficialmente parte di WordPress? Francesco Grasso
8. Come funziona? E’ un page builder? Cos’è Gutenberg? Quando farà ufficialmente parte di WordPress? Il mio tema sarà compatibile? Francesco Grasso
9. Come funziona? E’ un page builder? Cos’è Gutenberg? Quando farà ufficialmente parte di WordPress? Il mio tema sarà compatibile? Perchè sono qui?! Francesco Grasso
10. Come funziona? E’ un page builder? Cos’è Gutenberg? Quando farà ufficialmente parte di WordPress? Il mio tema sarà compatibile? Come posso renderlo compatibile? Francesco Grasso
11. WordPress Gutenberg editor WordPress TinyMCE editor EDITOR A CONFRONTO Francesco Grasso
12. Quando farà ufficialmente parte di WordPress? Offerto attualmente sotto forma di plugin in stato di beta. Il suo rilascio ufficiale come parte del core è previsto con WordPress 5.0 Quando verrà rilasciato WordPress 5.0? Entro fine 2018. Nessuna data ufficiale. Lo sviluppo è in continua evoluzione. https://wordpress.org/about/roadmap/ Francesco Grasso
13. Ogni elemento è un blocco Tutti i blocchi si inseriscono alla stessa maniera Tutti i blocchi possono essere spostati e ordinati Ogni blocco ha delle opzioni per la sua personalizzazione Da codice possono essere inseriti blocchi custom (via plugin) Blocchi Come funziona? Francesco Grasso
14. Testo Immagini Video embeds Bottoni Widgets Tabelle Etc. Elementi disponibili Blocchi Francesco Grasso
15. Testo Immagini Video embeds Bottoni Widgets Tabelle Etc. Elementi disponibili Blocchi Francesco Grasso
16. Il mio tema non è stato aggiornato a Gutenberg...
17. wide full width Nuove opzioni di allineamento function my_gutenber() { add_theme_support( 'align-wide' ); } add_action( 'after_setup_theme', 'my_gutenber' ); Francesco Grasso
18. wide full width Nuove opzioni di allineamento @media only screen and (min-width: 768px) { .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: auto; max-width: 1000%; } .alignwide { margin-left: calc(25% - 25vw); margin-right: calc(25% - 25vw); width: auto; max-width: 1000%; } .alignwide img, .alignfull img { display: block; margin: 0 auto; } } Francesco Grasso
19. Colori definiti da tema Colori custom per l’utente Palette colori Francesco Grasso
20. Colori definiti da tema Colori custom per l’utente Palette colori add_theme_support( 'editor-color-palette', array( array( 'name' => __( 'Light gray', 'my_text_domain' ), 'slug' => 'light-gray', 'color' => '#f5f5f5', ), array( 'name' => __( 'Medium gray', 'my_text_domain' ), 'slug' => 'medium-gray', 'color' => '#999', ), array( 'name' => __( 'Dark gray', 'my_text_domain' ), 'slug' => 'dark-gray', 'color' => '#333', ), ) ); Francesco Grasso
21. Rimuovere il color picker per l’utente Palette colori add_theme_support( 'disable-custom-colors' ); Francesco Grasso
22. Rimuovere completamente i colori Palette colori add_theme_support( 'editor-color-palette' ); add_theme_support( 'disable-custom-colors' ); Francesco Grasso
23. https://wordpress.org/gutenberg/ https://wordpress.org/gutenberg/handbook/ https://wordpress.org/plugins/gutenberg/ https://make.wordpress.org/test/handbook/call-for-testing/gutenberg-testing/ https://github.com/WordPress/gutenberg/issues Link utili
24. Grazie! Domande?