How to prepare a theme for Gutenberg

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.

49929fdd092d5461ff9dc2829d9738ef?s=128

Elmastudio

April 02, 2020
Tweet

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

  5. None
  6. Download Theme Unit Test xml file 2

  7. None
  8. Tutorials on Themeshaper blog 3

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

  12. None
  13. 2 Pimp your theme

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

  15. None
  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:
  18. None
  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:
  20. None
  21. None
  22. None
  23. None
  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

  27. None
  28. None
  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