All Automattic designers are tasked with rebuilding a Longreads article of their choice, using the latest and greatest version of WordPress’s next-gen editor, Gutenberg. Since I’ve worked on some videos for Gutenberg, this is not my very first time test driving it. BUT, as you might see from my sped up video, I am by no means an expert! The challenge has got me excited about the future of online publishing, in general. It’s pretty sweet.
The Gutenberg Experience
I’ve chose to recreate the article Who Does She Think She is? by Laurie Penny. I picked it because of the cool old-timey illustration and the use of quotes and various formatting in the article.
Here’s a sped up version of my walkthrough along with timecode to show the actual time. Clocking in at 26:09, not bad!
I thought the whole experience was quite easy. At first, I was copying the text and paragraphs one by one, then formatting them. But after a while, I got comfortable with it and tried copy-and-pasting larger chunks of text. Turned out Gutenberg detected most of the formatting over perfectly with the exception of the center-alignment of the *** dividers. Fancy!
I had the same issue as everyone else trying to recreate the funding section. I couldn’t have 2 blocks on the right of the icon, hence couldn’t format the text as I wanted. It’d be so nice to be able to select text within a block and do some custom formatting there.
Everything else went pretty smoothly nonetheless. No troubles there. Mostly just manually formatting things to match what I saw on the Longreads page.
But when I hit preview, things don’t look quite as good as the editor! The full-bleed image didn’t show up, everything was confined into a small column. I tried out a couple different themes and settled on Twenty Seventeen as that has a bigger column and everything looks the best considering. Obviously there’re a bit of custom CSS formatting work to do to match the Longreads page, but most of the structure is there.
To answer @joen‘s prompt of
if you could change only three things, what would those be, and why?
My top three:
- It’d be sweet to be able to select multiple non-sequenced blocks by cmd+click or ctrl+ click and format them together. It’d save a bit of time that way. 🙂
- OK I know this is going to be worked on in the next phase, but it’d be nice to have some indication of how the theme’s design is going to affect what you see in the editor. i.e. Closing the gap of how it looks in the editor and preview. If my theme doesn’t support full bleed images, perhaps it can be disabled in Gutenberg so I know not to use it. I know there’s some work around passing the theme’s CSS into Gutenberg like a WYSIWYG, and I WANT IT NOW with EVERY THEME! I know, I’m demanding.
- I mentioned it above when I was trying to build the funding section. It’d be nice to select a certain portion of a paragraph block and change the formatting of it. I know it’s defeating the purpose of a block a bit, it’d be useful for that instance.
Conclusion
I saw the future of WordPress. It’s quite a natural publishing experience after I got used to how it all works. I loved the way how people can interact with the blocks, insert blocks in-between, and manipulate blocks to make it how I wanted it. There’re just infinite possibilities of how we can extend the blocks. Kudos to the contributors of the project and looking forward to seeing it improve even more!
Photo by Morgan McDonald on Unsplash
Automattic Design 