Gutenberg Theme Night

We have organised a theme night on 17 January 2019 focusing on Gutenberg, the new block editor in WordPress. We have had a lot of attendees that are WP users, but also a couple of developers.

We (Csaba Varszegi & Veerle Verbert) would like to share our slides and the links we’ve collected when preparing for this night.

Gutenberg theme night

Thursday, Jan 17, 2019, 7:00 PM

Via Via Café
Wolstraat 43 Antwerpen, BE

32 WordPress Enthusiasts Went

Vanavond short talks en demo’s over Gutenberg-ready thema’s: over Twenty Nineteen, over hoe je een thema Gutenberg compatibel maakt, over Gutenberg starter thema’s en voorbeelden. Met ruimte voor Q&A. Timing: 19:00 – +/-21:30 Programma: – Csaba Varszegi over “De mogelijkheden van WordPress in Twenty Nineteen” + Q&A Met de release van WordPress 5.0 …

Check out this Meetup →

The presentations

“The possibilities of WordPress in Twenty Nineteen” — Csaba Varszegi

With the release of WordPress 5.0 we have a new default editor (aka the Block Editor, aka Gutenberg). And we got a new default WordPress theme: Twenty Nineteen. Twenty Nineteen makes full use of the new possibilities of Gutenberg. Csaba briefs us about the choices made in the (ultra-short) development process of Twenty Nineteen and guides us through the theme.

“Make your theme Gutenberg-compatible (basics)” — Veerle Verbert

Starter tips to make an existing or new theme Gutenberg-ready. With lots of references to starter themes, tutorials and documentation.

Our Gutenberg link list

The links mainly focus on Gutenberg ready themes, Twenty Nineteen and getting your own theme ready for Gutenberg (basics).

Gutenberg ready themes

• https://wptavern.com/full-gutenberg-compatibility-coming-soon-to-automattics-free-themes-on-wordpress-org-including-storefront-for-woocommerce (25/11/2018)
• https://wptavern.com/wordpress-theme-developers-begin-marketing-themes-as-gutenberg-compatible (27/09/2018
• https://wordpress.org/themes/twentynineteen/ (partial compatibility for earlier default themes)
• https://wordpress.org/themes/atomic-blocks/ + extra blocks with https://wordpress.org/plugins/atomic-blocks/
• https://www.codeinwp.com/blog/best-gutenberg-compatible-themes/ (??)
• https://colorlib.com/wp/wordpress-themes-compatible-with-gutenberg/ (mainly themeforest themes, affiliate links)
• https://richtabor.com/coblocks-wordpress-theme/
• http://www.andersnoren.se/teman/ (info: http://www.andersnoren.se/the-gutenberg-update/)
• https://wordpress.org/themes/editor-blocks/
• https://wordpress.com/theme/business/
• https://themeshaper.com/2018/05/22/music-a-gutenberg-powered-theme/ (might not be up-to-date)
• https://themegrill.com/themes/zakra/
• https://gutenberghub.com/category/gutenberg-plugins-themes/gutenberg-themes/
• https://wptavern.com/clean-blocks-a-free-multipurpose-wordpress-theme-compatible-with-gutenberg

Twenty Nineteen

• 16/10/2018: https://wptavern.com/first-look-at-the-twenty-nineteen-default-theme
• https://codex.wordpress.org/Twenty_Nineteen

Example sites running on Twenty Nineteen

• https://2019.wordpress.net/
• ma.tt
• newspack.blog
• joost.blog
• wpgovernance.com

Starter themes

• https://github.com/WordPress/gutenberg-starter-theme
• for Drupal: https://www.drupal.org/project/gutenberg_starter
• Twenty Nineteen (GitHub) (check https://github.com/WordPress/twentynineteen/blob/master/CONTRIBUTING.md for local dev setup)

Starter content

• https://wordpress.org/gutenberg/ (= live demo)
• https://testgutenberg.com/ (= live demo)
• https://wordpress.org/plugins/block-unit-test/
• https://sridharkatakam.com/dummy-content-for-gutenberg/

Documentation

The Gutenberg handbook is probably the first source you need to look at. It has a couple of interesting sections:

• Designer & Developer Handbook
• Theme support
• Block templates
• Converting Meta Boxes

Some other useful links, especially for users are:

• https://codex.wordpress.org/Gutenberg
• https://gogutenberg.com/
• List of all default Gutenberg Blocks in WordPress 5.0

Courses & tutorials

• Gutenberg Theme Development (Zac Gordon)
• WordPress 5: essential training (Morten Rand-Hendriksen)
• Gutenberg for Newbies: How to Handle the Upcoming WordPress 5.0 Update
• How To Convert Existing WordPress Posts to Gutenberg Blocks (iThemes)
• Introductie van het Twenty Nineteen Theme (Theming for Gutenberg) (Kinsta)
• Styling Themes for Gutenberg (ThemeShaper)
• Enqueueing Scripts and Styles for Gutenberg Blocks
• Fronteers WordPress Gutenberg Workshop (Luc Princen)

Block & advanced courses & tutorials

• Learning Gutenberg (Series on CSS-Tricks.com)
• How to Create Custom Gutenberg Blocks for WordPress (Alessandro Castellani, 7-part YouTube series)
• Embracing Gutenberg In Existing Code (Alain Schlesser, also available on WordPress.tv)
• Gutenberg Block Development (Zac Gordon)
• Advanced Gutenberg Block Development (not ready yet, Zac Gordon)

Gutenberg ready plugins

You can find plugins in the WP repository that offer blocks for the block-based editor via this link: https://wordpress.org/plugins/browse/blocks/.

Jumpstarters custom blocks

• Create-Guten-Block developer toolkit (@AhmadAwais)
• Plugin Block Lab
• ACF Blocks for Gutenberg (in beta)
• & check the comparison posts Block building without JavaScript: Testing ACF, Block Lab, and Lazy Blocks from Birgit Pauli-Haack on the WP Tavern