Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Elmastudio

April 02, 2020
Tweet

More Decks by Elmastudio

Other Decks in Technology

Transcript

  1. /* 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:
  2. // 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:
  3. all core blocks WooCommerce blocks Jetpack blocks form plugin blocks

    block collection blocks build your own blocks
  4. IT’S A LOT! block patterns Global Styles Block-based themes Full

    Site editing React CSS grid CSS variables JavaScript
  5. 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
  6. find your niche How do your customers want to use

    WordPress? Let’s be excited to create