How to prepare a theme for Gutenberg

Talk during the WPBlockTalk online event on April 2nd, 2020. Presented by Ellen Bauer, Front-end developer at Elmastudio.

Transcript

1. WPBlockTalk, April 2nd 2020 HOW TO PREPARE A THEME FOR GUTENBERG Case Study:
2. twitter @ellenbauer wp @elmastudio web elmastudio.de/en ELLEN BAUER Front-end developer @Elmastudio
3. 1 How to get started?
4. Theme Support Block Editor Handbook ⟶ 1
6. Download Theme Unit Test xml file 2
8. Tutorials on Themeshaper blog 3
11. Look at other themes, e.g. Twenty Twenty, Go 4
13. 2 Pimp your theme
14. Add your editor styles add_theme_support( 'editor-styles' ); add_editor_style( 'style-editor.css' );
16. Add wide and full-width alignment to blocks add_theme_support( 'align-wide' );
17. /* Main column width */ .wp-block { max-width: 680px; } /* Width of "wide" blocks */ .wp-block[data-align="wide"] { max-width: 1200px; } /* Width of "full-wide" blocks */ .wp-block[data-align="full"] { max-width: none; } in your style-editor.css:
19. // Add custom editor font sizes. add_theme_support( 'editor-font-sizes', array( array( 'name' => __( 'Small', 'aino' ), 'shortName' => __( 'S', 'aino' ), 'size' => 14, 'slug' => 's', ), array( 'name' => __( 'Large', 'aino' ), 'shortName' => __( 'L', 'aino' ), 'size' => 26, 'slug' => 'l', ), ) ); Add custom font sizes:
24. 3 WHICH BLOCKS TO SUPPORT?
25. all core blocks WooCommerce blocks Jetpack blocks form plugin blocks block collection blocks build your own blocks
26. Create block style variations
29. IT’S A LOT! block patterns Global Styles Block-based themes Full Site editing React CSS grid CSS variables JavaScript
30. How to stay up-to-date? 4
31. Install Gutenberg plugin and test regularly 1 Read Make WordPress Gutenberg updates 2 Listen to Gutenberg Changelog podcast 3 Join WordPress Slack channel 4 Follow the Gutenberg plugin development on GitHub 5
32. find your niche How do your customers want to use WordPress? Let’s be excited to create
33. Helpful skills: React, JavaScript CSS Grid CSS variables Thank you and #staysafe