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:
   

   View Slide

2. twitter @ellenbauer
   wp @elmastudio
   web elmastudio.de/en
   ELLEN BAUER
   Front-end developer
   @Elmastudio
   

   View Slide

3. 1
   How to get
   started?
   

   View Slide

4. Theme Support Block Editor Handbook
   ⟶
   1
   

   View Slide

5. View Slide

6. Download Theme Unit Test xml file
   2
   

   View Slide

7. View Slide

8. Tutorials on Themeshaper blog
   3
   

   View Slide

9. View Slide

10. View Slide

11. Look at other themes, e.g. Twenty Twenty, Go
    4
    

    View Slide

12. View Slide

13. 2
    Pimp your theme
    

    View Slide

14. Add your editor styles
    add_theme_support( 'editor-styles' );
    add_editor_style( 'style-editor.css' );
    

    View Slide

15. View Slide

16. Add wide and full-width alignment to blocks
    add_theme_support( 'align-wide' );
    

    View Slide

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:
    

    View Slide

18. View Slide

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:
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. 3
    WHICH BLOCKS
    TO SUPPORT?
    

    View Slide

25. all core blocks
    WooCommerce blocks
    Jetpack blocks
    form plugin blocks
    block collection blocks
    build your own blocks
    

    View Slide

26. Create block style variations
    

    View Slide

27. View Slide

28. View Slide

29. IT’S A LOT!
    block patterns
    Global Styles
    Block-based themes
    Full Site editing
    React
    CSS grid
    CSS variables
    JavaScript
    

    View Slide

30. How to stay
    up-to-date?
    4
    

    View Slide

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
    

    View Slide

32. find your niche
    How do your customers
    want to use WordPress?
    Let’s be excited
    to create
    

    View Slide

33. Helpful skills:
    React, JavaScript
    CSS Grid
    CSS variables
    Thank you and #staysafe
    

    View Slide