Designing a Gutenberg Block

A screenshot of the Classic editor in WordPress, featuring a speaker shortcode. The shortcode reads: [speakers show_avatars="true" speaker_link="permalink" avatar_size="300"].
The existing Speaker shortcode

As part of an effort to add full Gutenberg support to WordCamp.org, I’ve been looking at converting WordCamp shortcodes into Gutenberg blocks.



Project Goals

This project had two goals:

  • Make it easier for organizers to add WordCamp-specific content to their sites.
  • Review how the community uses the existing shortcodes. For examples, are there any settings we can deprecate or combine with other settings? Is anything missing? Has anyone put together their own “hacks” to make the shortcodes accomplish something they weren’t designed for?

For the sake of scope, I limited the first round to the Organizers, Schedule, Sessions, Speakers, and Sponsors shortcodes.

Process

I started the project with some lo-fi research. I reached out to WordCamp organizers via the Make/Community p2 and asked a small series of questions about their experiences with the shortcode. I was aiming for just enough research to get myself started.

I was happy to receive a great deal of helpful feedback from organizers. There were several comments that led to illuminating conversations about how people customize and curate their WordCamp websites that are very different from how my organizing team sets up our website. I went in with a bunch of assumptions, and while some of them were validated, some of my assumptions were, naturally, not in line with other organizers. This is why having these basic research conversations is so important — even if I didn’t have the time or a longer research process, chatting with other organizers via p2 provided a wonderful array of thoughts and opinions that gave me a better sense of the project.

A screenshot of the InVision Freehand I put together for this project. It's zoomed out so you can see most of the board. On the left is text which is too small to read, and on the right are diagrams showing interaction patterns.

After I gathered feedback, I started outlining the settings for each existing shortcode in an InVision Freehand. I then started consolidating, removing, and adding any necessary settings. The Freehand was nice because I could throw in a bunch of text along with some super basic sketches. This allowed me to better communicate what I was thinking, and get early feedback from both WordCamp organizers and the developers planning on building the blocks.

After establishing what I thought was a good initial scope, I started mocking up one of the more complicated blocks: Speakers. I decided to go straight into higher-fidelity visual work because the majority of patterns already existed within a Sketch library, which meant putting together a block was quick and easy.

Gutenberg Block Guidelines

Gutenberg blocks have a couple key design principles: 

  1. The primary interface for a block is the content area of the block
  2. The block toolbar is a secondary place for required options & controls
  3. The block sidebar should only be used for advanced, tertiary controls

Let’s apply these principles to the Speakers block.

I started with this scope:

  • The block is dynamic — it draws content from the Speakers custom post type (CPT) and displays that content on the page.
  • While I’d like content to be directly editable via the block, instead of solely through the CPT, that will take a great more effort and is better off being explored in a future version of the block. So, none of the actual content inside the block will be directly editable — just the display of existing content.
  • You should be able to select either the entire Speaker list, or individual Speakers.
    • Speakers are often announced in posts ahead of time; it would make it easier for organizers to craft these posts if they’re able to select a few speakers to dynamically display via block.
  • You need to be able to control the following settings:
    • Show or hide avatar, and corresponding size and alignment;
    • Show or hide session details;
    • Show or hide biography;
    • Where their name links to;
    • How they’re sorted.
  • Personally, I felt that speakers should be able to be arranged in a list, or in a grid. It’s a common design pattern for conferences.

What belongs in the block?

Because the block pulls in dynamic content, the only setup it requires is whether or not it should display all speakers, or individual speakers. This information is necessary to show the block, so it needs to be gathered via a placeholder when you add the block to your page or post.

If you can provide good default content, and that default content is easy to customize, you don’t need to use a placeholder. However, if there isn’t a clear default state that would work for most people, it might make sense to use a placeholder to gather that information.

In the case of Speakers, the smart default could be “List all speakers” — but that block will already be pre-generated on the Speakers page. Thus, the majority of use-cases will probably be on custom pages or posts. It makes sense, in this case, to expose all of the selection options in the placeholder.

A screenshot which shows the Speakers block placeholder, which contains the block name and its block icon (a megaphone), a button that reads "List all speakers," and a search field with "select" button labelled "Or, select individual speakers."
The Speakers block placeholder

That’s all this placeholder needs. Once you select the list of all speakers or an individual speaker, there are no other primary settings required for the block to be correctly configured — it just works.

What belongs in the block toolbar?

Any secondary settings get shown within the block toolbar, with one caveat:

One notable constraint with the block toolbar is that it is icon-based UI, so any controls that live in the block toolbar need to be ones that can effectively be communicated via an icon or icon group.

The Gutenberg Handbook

Within the above scope, the only setting which seems important and can easily be represented is the layout — so, whether Speakers are shown in a list, or in a grid. 

A screenshot of a selected Speakers block, where the toolbar is visible. It contains icons for either list or grid view.
The Speakers block toolbar

Note: the live version will also show the block icon in the leftmost position in the toolbar.

What belongs in the sidebar?

What I’ve designed thus far for the Speakers block is totally usable. You could plop this down into a page or post, publish, and call it a day — no customization required.

However, we have a diverse community with a wide variety of design needs. They might want to customize the block to suit their particular speakers and their WordCamp site design.

That where the sidebar comes in — it houses all of the optional block settings. Because people can close the sidebar, and might never see these settings, they have to be optional. 

Think of the sidebar as something that only power users may discover.

The Gutenberg Handbook

These guidelines helped me decide that these settings should be optional:

  • Show or hide avatar, and corresponding size and alignment;
  • Show or hide session details;
  • Show or hide biography;
  • Where their name links to;
  • How they’re sorted.

I decided to organize them into three panels: photo settings (all the avatar settings), content settings (biography, speaker information, and speaker link), and Sorting and Filtering (sorting like alphabetical, date, etc., along with the number of columns if you’re displaying speakers in a grid). 

I also took the liberty of rewriting and regrouping some of the settings to make (what I thought was) more sense. I didn’t just want to copy the shortcode into a block — I wanted to improve on the experience for WordCamp organizers. These particular groupings and names went through lots of iteration.

Iteration

Nothing is perfect on the first try. When I had a block design that felt presentable, I used InVision to turn it into a simple static prototype and presented it to the community. The feedback I received from organizers was vital. How could I succeed without input from the people who are going to use the block?

A bunch of micro-discussions resulted — some focused more broadly on the block, others narrowed on specific features. I did some quick back-and-forth iterations with organizers, posting small mockups to help us communicate. Some of these conversations branched across the various block discussions, so before I published the final mockups, I did a round of consistency updates to make sure the patterns matched on each block.

Result

Adding all speakers
Adding individual speakers
Adding groups of speakers

Once the feedback trickled down and I revised the blocks, I published them all in a post. I’m hoping that once the blocks get built, we’ll be able to get some more feedback from upcoming camps and fine-tune any weird or unexpected behavior.

This project was really fun. It’s been a while since I’ve had time to work on WordPress community projects — I’ve been so focused on the core software lately. And honestly, shortcodes are a terrible experience. I need to constantly try to memorize, or look up (and figure out how to understand!) the various parameters a shortcode takes. Blocks provide a really exciting opportunity to make it way easier to add all kinds of content. I’m already starting to see a ton of cool blocks enter the ecosystem. Maybe I’ll have a chance to write about that next. 😁

3 responses to “Designing a Gutenberg Block”

  1. WordPress 5.0 introduces a new editor based around blocks. The editor is the first phase of a larger project developed under the Gutenberg name.

    This post is part three in my unplanned series:

    Part I – Creating a Gutenberg Block from October 2017 covers how to extend Gutenberg with a basic block. I wrote a follow up Gutenberg blocks without the build step which simplifies block creation.
    Part II – Gutenberg can do that! from April 2018 covers a few of the new features and power the editor brings.
    In this post I want to highlight the power of blocks, and hopefully stimulate your mind to see how you might use blocks as the primary extension of WordPress editing.

    Background

    First up, if you haven’t used the Block Editor, here is a taste of what it looks like.

    You can also try it live at https://wordpress.org/gutenberg/.

    Template Blocks

    One of the most useful cases for blocks is custom placeholder blocks. There are countless needs for a simplified interface to enter info and create structured content.

    A great example of a placeholder block is this WordCamp Speaker Block created by Mel Choyce.

    You can imagine just about every site has a custom piece of content they want displayed the same way, it could be recipe cards, captioning photos, or if you use P2 maybe bug reports, or requests.

    Unifying Interfaces

    Another powerful feature of Gutenberg is its ability to simplify and unify what used to be different user experiences into a common interface. One obvious example is blocks replacing shortcodes, however there is even more. Blocks can be used to replace different post types, or other confusing taxonomy things.

    Here’s an example from 10up creating a Podcasting Block, so instead of trying to remember what tag, post type, or category you’re supposed to use, you simply drop in a block.

    Cool Ideas

    Here are a few other cool ideas to see what people are creating with Gutenberg.

    Block Gallery is an advanced gallery block that allows you to create multiple different photo galleries from a masonry layout to carousel.

    Drop It a plugin which allows you to embed Giphy or Unsplash images straight from a block.

    Gradient Blocks an advanced interface showing what you can do using the sidebar space for controls.
    Saving the best for last, check out Shape & Patten Backgrounds via Blocks. It is a demo video showing using a custom block to create, style, and insert background shapes into a page.
    Summary

    In summary, just a few of the cool things people are starting to make with the new WordPress Block Editor. I’m excited for the launch and to see in the years to come all the great new content tools the amazing and creative community will build.

    The future is definitely bright.

    Like this:

    Like Loading…

  2. Bienvenidos a la edición número 25 de Aprende Gutenberg, la newsletter para estar al día sobre el nuevo editor de bloques de WordPress.

    Esta newsletter está patrocinada por http://www.cursogutenberg.com

    Utiliza el cupón APRENDEGUTENBERG en el carrito de http://www.cursogutenberg.com y obtendrás un 10% de descuento.

    Gutenberg

    Todavía no tenemos fecha definitiva de salida de WordPress 5.0 y por tanto del nuevo editor, pero lo que si está ya al alcance de todos desde este pasado viernes es la versión Release Candidate 2 de la que será la nueva versión de WordPress

    Con este lanzamiento, lo que también se ha actualizado ha sido el plugin de Gutenberg que llega ya a su versión 4.6.1 y cuyas modificaciones y cambios podéis consultar en este artículo de What`s new in gutenberg del blog de Make WordPress.

    Finalizamos la sección con un artículo redactado por el propio Matt Mullenweg, en el que hace un repaso profundo a WordPress 5.0, al proyecto de Gutenberg, deja claro que Automattic pagará una auditoria sobre el nuevo editor, que este una vez este en el core simplemente se llamará “nuevo editor de WordPress” y que habrá versiones menores de WordPress aproximadamente cada dos semanas.

    Artículos & Tutoriales

    Los artículos de esta semana son todos en castellano, en concreto se han redactado cuatro artículos y todos están en cierta medida relacionados entre sí ya que tratan de la inminente llegada de WordPress 5.0. Comenzamos con Cómo actualizar a WordPress 5.0 de forma segura del blog personal de Javier Casares, seguimos con Cómo preparar nuestras instalaciones de WordPress para Gutenberg de Fernán Díez en el blog de Betabeers, continuamos con Todo lo que necesitas saber sobre Gutenberg, el nuevo editor de WordPress de David Aguilera para el blog de Nelio Content y finalizamos con WordPress 5.0 – Todas las novedades y dudas razonables antes de actualizar de Fernando Tellado para Ayuda WordPress.

    Los tutoriales sin embargo son ambos en inglés, por un lado tenemos Create Style Variations for WordPress Gutenberg Blocks: Part 1 de David Gwyer, en el que nos enseña cómo crear variaciones de estilos para los bloques del nuevo editor y Designing a Gutenberg Block de Mel Choyce, en el que describe el proceso de creación del bloque de Speakers para las WordCamps.

    Plugins

    El plugin SyntaxHighlighter Evolved desde su versión 3.3.2 es plenamente compatible con el nuevo editor, mientras que la versión 6.8 de Jetpack es la primera en incorporar bloques de mapa, formulario, markdown, pago y el regreso de Publicar y Compartir nuestras entradas en redes sociales.

    Buceando en github.com he encontrado dos proyectos interesantes, el primero Gutenberg Block Boilerplate que como su nombre indica nos servirá para crear un bloque personalizado desde cero, mientras que el otro proyecto es Gutenberg Fields Middleware que nos permitirá registrar campos en nuestros bloques personalizados con menos código repetitivo.

    Cerramos la sección con Scratchpad de Sorta Brilliant que es un bloque que nos permitirá tomar notas para un futuro uso o como recordatorio y mostrarlas en los ajustes de bloque, algo así como tener un post-it fijo en nuestra sidebar del administrador de bloques de WordPress.

    Temas

    Neve es un nuevo tema gratuito de Theme Isle que podéis utilizar para vuestras nuevas instalaciones de WordPress 5.0

    Si utilizáis los temas de Genesis Framework os recomiendo que visitéis Código Genesis, el membership site de Nahuai Badiola, en el que está comenzando a subir snippets para hacer compatibles los temas de Genesis con Gutenberg.

    Vídeos

    El vídeo de esta entrega de Aprende Gutenberg, es el vídeo de Gutenberg Times en el que Birgit Pauli-Haack “entrevista” a Joen Asmussen, Tammie Lister y Matías Ventura, los líderes de la fase 1 de Gutenberg.

    PodCast

    En la entrega número #110 de WordPress desde Zero, podéis escucharme hablando sobre las últimas novedades del nuevo editor y a Dani Serrano dejar claro que WordPress será seguro antes y después de Gutenberg.

    ¡Esto es todo amig@s! Hasta aquí llego la edición #25 de Aprende Gutenberg, nos leemos en aproximadamente una semana 😀

    Recordar que si tenéis cualquier tipo de duda acerca de Gutenberg, puedo ayudaros, tan solo tenéis que escribirme.

    Anteriormente en Aprende gutenberg

    Aprende gutenberg #24Aprende gutenberg #23Aprende gutenberg #22Aprende gutenberg #21Aprende gutenberg #20Aprende gutenberg #19Aprende gutenberg #18Aprende gutenberg #17Aprende gutenberg #16Aprende gutenberg #15Aprende gutenberg #14

  3. I am writing this from the Southwest Florida Airport on my way to Nashville, TN, the Music City. About 1800 people will descend for WordCamp US, Mullenweg’s State of the Word and Contributor Day, starting Friday. Finally we have a new release date for WordPress 5.0 – tomorrow (Thursday). Read Matt Mullenweg’s post and you will also find his interview with Adam Presser of WPCrafter YouTube Channel interesting. Also on YouTube the Gutenberg Times Live Q & A with design and tech leads, Tammie Lister, Matias Ventura and Joen Asmussen. A lot more blocks popped up for content creators using Gutenberg and more tools for plugins developers to create blocks for the new editor. About to board my plane now. 🛫✈️Hope to see some of you at WordCamp US (Livestream tickets are free) 💕 Birgit

    If it weren’t for the last minute, nothing would get done
    Anonymous

    Table of Contents

    WordPress 5.0 / Gutenberg Development
    Using Gutenberg w/ WordPress 5.0
    Blocks & Plugins
    Development & Designer Resources for the new Block Editor, Gutenberg
    Photos around the World

    WordPress 5.0 / Gutenberg Development

    New 5.0 Target Date

    [youtube https://www.youtube.com/watch?v=HnMSJIdNu6A?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent&w=640&h=360%5D

    Wellp, I was not expecting this but it looks like Matt Mullenweg will be our guest on WordPress Weekly today at 3PM Eastern. I’m typically not nervous about these conversations but I am today.— Jeff (@jeffr0) December 5, 2018

    [youtube https://www.youtube.com/watch?v=X8Op-q_8s6M?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent&w=640&h=360%5D

    Gutenberg is Coming to WordPress’ Mobile Apps, Beta Version Expected February 2019

    Using Gutenberg w/ WordPress 5.0

    WordPress 5.0 arrives Thursday!From experimenting with Gutenberg in staging, to our update timeline, here’s what you need to know about the latest version of WordPress: https://t.co/JJLCQxB6Tk pic.twitter.com/Xqy6YO8OTT— WP Engine (@wpengine) December 4, 2018

    The new #WordPress 5.0 release is coming up! Here’s how to update your site on Pantheon: https://t.co/gM3buSxK9v— Pantheon (@getpantheon) November 14, 2018

    Say Hello to the WordPress Gutenberg Editor https://t.co/AfJmWAlVMj #WCUS#WordPress— Pressable (@Pressable) December 4, 2018

    3 Methods for Rolling Out Gutenberg to Your WordPress Sites | Jason Yingling https://t.co/bl3Mdw22bC— Diane Metcalf (@MetcalfDiane) December 5, 2018

    Unpopular opinion: I think that WP 5.0 just doesn’t get released ever if @photomatt doesn’t push hard for it like he’s doing. There is so much inertia to overcome, so many people saying “no not yet.” Without a strong counter force it just gets delayed forever.— Bradley Kirby (@Bradley_Kirby) November 29, 2018

    Merging #Drupal and #Gutenberg is a killer combination as it allows us to empower #contentauthors to develop rich landing pages inside a rock solid #CMS framework. #Drupal8 #webdevelopment#OpenSource #Editing #GutenbergEditor https://t.co/8Qz5vIQBDk— OpenSense Labs (@OpenSenseLabs) December 4, 2018

    Blocks & Plugins

    This is an interesting Twitter Thread, I will certainly explore after WordCamp US.

    What’s the coolest or more interesting thing you’ve seen built with Gutenberg? Plugins, blocks, sites, landing pages… Looking for examples for #sotw at #wcus.— Matt Mullenweg (@photomatt) December 2, 2018

    WP Munich Blocks – Gutenberg Blocks for WordPress

    Jetpack 6.8: Building Jetpack for the new WordPress editor https://t.co/SKtOFk1M8t pic.twitter.com/7pMfvB2x3q— Jetpack (@jetpack) November 27, 2018

    Guidepost

    WordPress 5.0 and Gutenberg rolls out this Thursday: https://t.co/G1KdOnNeWw LifterLMS is ready with not just compatibility, but a bunch of blocks available for building custom course layouts. Onwards 🚀 #WordPress #gutenberg #WordPressLMS pic.twitter.com/esHXYUOisN— Chris Badgett (@ChrisBadgett) December 4, 2018

    Development & Designer Resources for the new Block Editor, Gutenberg

    Been doing a bit of work lately to get my plugins fully 5.0 compatible (I know it’s late, but my plugins are very much a side project for me). There are some really useful points in this post from @dliciousbrains for anyone else doing the same thing: https://t.co/AQwSYWsAuH— Hugh Lashbrooke (@hlashbrooke) December 4, 2018

    Designing a Gutenberg Block

    #WordPress 5.0 is around the corner. How is Give preparing? #Gutenberg. https://t.co/OO9d24lRVo— Team Give is at #WCUS! (@GiveWP) December 5, 2018

    Reminder: If you want to build Gutenberg Blocks, but don’t know where to start, I will literally hop on a 1:1 call / screen share with you to teach you how to make a block and get started.— george stephanis (@daljo628) November 29, 2018

    If you’re interested in #WordPress #Gutenberg block development you may find my new tutorial on Block Style Variations interesting. (Part 2 coming very soon)https://t.co/EhYUe5bt77— David Gwyer (@dgwyer) December 3, 2018

    By Andrew Taylore @ataylorme

    Hot Module Replacement for Gutenberg Blocks

    Photos around the World

    @guptaanilg sharing his thoughts on impact of Gutenberg in WordPress eco-system and it is very meaningful and interesting – “WordPress K3G” @WCAhmedabad. pic.twitter.com/Ct01fN8xo0— Harsh Bhatt (@harshbhatt73) December 1, 2018

    Featured Image: Photo by Gem & Lauris RK on Unsplash

    Share this:

    Click to share on Facebook (Opens in new window)
    Click to share on Twitter (Opens in new window)
    Click to share on Google+ (Opens in new window)
    Click to share on Telegram (Opens in new window)
    Click to share on Reddit (Opens in new window)
    Click to share on Pinterest (Opens in new window)
    Click to share on LinkedIn (Opens in new window)

    Like this:

    Like Loading…

    <em>These posts might interest you as well...</em>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)