We tried converting a bespoke website design in WordPress with Gutenberg

and this is what happened

Marie Manandise
Jun 18, 2018 · 20 min read
Image for post
Image for post
Photo by Iker Urteaga on Unsplash

This is what we asked Marie to do


TL;DR


The Gutenberg exercise

More details on what we need to achieve and how we’ve done it so far

Getting prepared — A skill set U-turn

‘Easing’ into it

“These […] hooks are still being optimized, so this might change slightly in the future.”

Building MY simple block (as opposed to ANY simple block)

The shared CSS delusion — Workload multiplication

“Setting up the block styles for the back-end editing experience was more involved than any of us had anticipated. It’s very much like adding editor styles to the current TinyMCE editor, but some Gutenberg blocks have very specific classes that needed to be overridden.”

Laurel Fulford of ThemeShaper.com, the Automattic Theme Division

Image for post
Image for post
Every time I wanted to preview edited block markup…

The spacing conundrum — more code planning

Image for post
Image for post
A lead paragraph block?
Image for post
Image for post
Top half of a webpage section

The final straw: the Block Inspector


Image for post
Image for post
The block inspector that appears on the right-hand side, under the ‘Block’ tab, when editing a Gutenberg block.

Things I knew I couldn’t achieve anyway

Image for post
Image for post
This is not Simon Jones
Image for post
Image for post
Teasers leading to other pages of content

Main conclusions

Studio 24

Articles on digital technology from agency Studio 24

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store