Design for Gutenberg – WordCamp London

Following on from her successful talk, ‘What does Gutenberg mean for design?’ at WordCamp London, Nicola’s slides are now available for viewing on SlideShare (and embedded below).

To the uninitiated as to what Gutenberg actually is – in short, it is the new editor for managing content in WordPress, and therefore something that will eventually change the way we all use WordPress. We covered it last year in this post, when Gutenberg first became available for Beta testing. Whilst it looks like project Gutenberg will be released closer towards the end of the year than the initially conceived Spring-time release, for those leaving things a bit late, it leaves them with additional time to prepare.

A very brief roundup of some of what Nicola presented are below, but we do recommend checking them out.

• The important thing is not to panic. Although April was suggested the intention is to release Gutenberg when it is ready and not a moment beforehand. Work is still ongoing with Gutenberg so they have answered a huge amount of initial concerns and queries that people had from beta testing, and there shouldn’t be anything that you NEED to do in order for it to work on your new and old sites.

The new interface is very different from the old WYSIWYG editor. With Gutenberg, every element you add to the page will now be done by clicking to add an individual ‘block’ to the page. Examples of types of ‘blocks’ include,

• ‘common blocks’ – e.g. paragraphs, headings, subheadings, images, blockquotes
• ‘Formatting’ blocks e.g. pull quotes or tables.
• Layout blocks such as separators, columns or buttons
• Embeds e.g. video, social, slides
• widgets e.g. latest posts or categories.

The styling will be as per the Gutenberg default aside from aspects such as fonts already specified in the CSS, so if you want your new and old sites to have a design fully cohesive with the rest of the site you’re going to need to supply styling for a lot of elements

• What’s great about this is that you can easily include a lot of the features it’s nice to put into your article designs, and it’s more likely that clients will make use of them when they don’t have to recall multiple various ways to do so.
• E.g. dropcap – can’t use due to legacy content, difficulty remembering method or new web editor.
• However, having a whole host of features so prominently displayed might lead to a situation where unexperienced designers make choices that a professional might not make.
• E.g. the prioritisation of the look of a stand-alone piece of content at the expense of how it relates to the experience the user has of the site as a whole.
• You’re going to want to consider how you approach this with your clients – how you’ll respond to questions and what services you might offer.
• Lastly, and perhaps most importantly – Don’t pay too much attention to naysayers, you simply have to try it for yourself. To do just that, check this link.

Gutenberg is a hugely exciting step forwards for how our clients will be able to craft content in the future through WordPress, and we’re already well underway with implementing it into our projects.