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. 5.
  2. 7.
  3. 9.
  4. 10.
  5. 12.
  6. 15.
  7. 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:
  8. 18.
  9. 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:
  10. 20.
  11. 21.
  12. 22.
  13. 23.
  14. 25.

    all core blocks WooCommerce blocks Jetpack blocks form plugin blocks

    block collection blocks build your own blocks
  15. 27.
  16. 28.
  17. 29.

    IT’S A LOT! block patterns Global Styles Block-based themes Full

    Site editing React CSS grid CSS variables JavaScript
  18. 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
  19. 32.

    find your niche How do your customers want to use

    WordPress? Let’s be excited to create