Talk WordCamp Rotterdam 2019: Maak een Gutenberg-compatibel thema (basics & the quest)

dd 2019/04/12 we did a talk about creating a Gutenberg compatible theme (in Dutch) on WordCamp Rotterdam.

Short intro:

WordPress 5.0 is voor thema-bouwers een game changer. Wij gingen begin 2019 een eerste keer de uitdaging aan: een maatwerk WordPress website met Gutenberg als editor en op basis van aangeleverd design.

In deze talk delen we onze ervaring: we geven quick wins voor hoe je een thema Gutenberg-ready kan maken en delen welke consequenties en mogelijkheden Gutenberg heeft voor maatwerk sites. (spoilers: Learn JS and/or CSS Deeply & re-educate your designers)

The slides:

View on Google Slides

Resources we link to:

The Gutenberg Handbook

• The Gutenberg Handbook
• Theme Support Overview
  • Wide Alignment
  • Block Color Palettes
  • Block Font Sizes
  • Default block styles
  • Editor styles
  • Dark backgrounds
  • Responsive embedded content
• Block Templates

Gutenberg on GitHub

• Gutenberg repo on GitHub
• All core blocks (GitHub, cheat sheet for the slugs)
• Issue ‘Styles variations don’t work for blocks using `InnerBlocks`’ (GitHub, #9897)
• Discussion ‘Image classes missing in render’ (GitHub, #11603)
• Discussion ‘Gallery: choosing thumbnail size’ (GitHub, #1450)

Boilerplate, plugins & blogposts

• Block Boilerplate create-guten-block from Ahmad Awais
• Advanced Custom Fields
  • Announcement post ACF 5.8 – Introducing ACF Blocks for Gutenberg
  • Announcement post ACF 5.8.0 RC
• Plugin Block Unit Test for Gutenberg
• Plugin Block Lab (not tested/used by us)
• Blogpost: Using Block Templates with Gutenberg (Bill Erickson)

Learn React

• https://reactforbeginners.com/ & https://advancedreact.com/ from Wes Bos
• https://www.udemy.com/react-the-complete-guide-incl-redux/ from Maximilian Schwarzmüller

Starter Themes

• https://github.com/WordPress/gutenberg-starter-theme
• https://github.com/WordPress/twentynineteen/

Learn Block development?

• Learning Gutenberg on CSS-tricks.com (series)
• Gutenberg Block Development (Zac Gordon)
• Advanced Gutenberg Block Development (Zac Gordon)
• Fronteers WordPress Gutenberg Workshop (Luc Princen)

 

PS Want more links? We did a Gutenberg Theme Night at Antwerp WordPress Meetup in January, together with Csaba Varszegi: more about Gutenberg ready-themes and Twenty Nineteen. Afterwards we published the slides & links on wpbelgium.be.

 

—picture by Vevida,

Volle bak! @veerleverbert gaat het over #Gutenberg hebben. #WCRTM pic.twitter.com/xrG77v9S9z

— VEVIDA (@vevida) April 12, 2019