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, 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.


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.


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.


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. ? The post Designing a Gutenberg Block appeared first on Mel Choyce.

Friday Newspoop!

Hello! It is Friday. What happens on Friday? Oh, I dunno, maybe a hot fresh bucket of NEWS-FLAVORED NEWS NIBBLINGS, coming right atcha. Nothing particularly revelatory today, but just the same, buckle up — And let’s ride.
  1. New episode of Ragnatalk, featuring Max Temkin of CAH. Wait, what’s that? You’re not yet listening to Chuck & Anthony: Ragnatalk? Well, fix your shit and come correct.

  2. If you wanted a terribleminds mug, like this Art Harder one, they are currently 40% off today (11/30) with code CYBRWEEKZAZZ. Or, I dunno, other mugs! And don’t forget the Gifts for Writers 2018 post is live in case you’re a penmonkey in need of gifts or a non-penmonkey in need of gifts for a penmonkey. Writers need love, too, is what I’m saying.

  3. The collection of Star Wars short fiction, From A Certain Point of View, is $2.99 today for your ELECTRIZZIC BOOKENMACHINE or whatever, so go have it. It’s a series of stories based on many of the lesser characters from A New Hope, and my story is about the cantina barkeep, Wuher.

4. Invasive is $3.99 in eBook. Why? Because reasons!

  1. Do not forget you can get in a preorder of a signed copy of the limited release hardcover of Death & Honey, which contains three novellas — one by me, one by Kevin Hearne, one by Delilah S. Dawson, cover by the inimitable Galen Dara. But but but, you can also preorder the eBook now  — $5.99 gets you that, and soon we’ll have audio up for pre-order, to boot.
AND THAT IS IT. GET OUT OF MY HOUSE, WEIRDOS. sprays you with a spray bottle

Ten Things You Will Experience When Starting Therapy

So you have taken that big step and have booked your first session with a mental health therapist. The good news is you are well on your way to recovery and just by making that first appointment means you are ready for that journey to begin. The bad news is there will be things that […] The post Ten Things You Will Experience When Starting Therapy appeared first on Top 10 of Anything and Everything!!!.

253+ EXCLUSIVE Alan Watts Quotes To Blow Your Mind

With countless essays, over 25 books, and nearly 400 lectures,  Alan Watts quotes will make you more aware of yourself and your world. There are a lot of topics such as the meaning of life, love, death, higher consciousness, the true nature of reality and the pursuit of happiness. Who is Alan Watts? Alan Wilson Watts … Read more253+ EXCLUSIVE Alan Watts Quotes To Blow Your Mind

The post 253+ EXCLUSIVE Alan Watts Quotes To Blow Your Mind appeared first on BayArt.

November 29th Support Team Meeting Summary

General announcements

The plan is to launch HelpHub tomorrow, Friday November 30th. This has a slight impact on the support team, as it means the first page you are presented with when you look for support is HelpHub, instead of the list of forums that exist as of right now. This is to encourage self-help first, but it links to a proper list of forums as well for those who feel they didn’t find what they need. The original list of forums still exists as well, and can be found at and looks like it does today. The next volunteer orientation has now been scheduled, the details and times are available at In preparation of WordPress 5.0, we’ve now started working on the changes to the Master List that we put out with each release, the collaboration of which is taking place at During the Contributor Day at WordCamp US this year, we’ve been asked to join in discuss a proposal for making Lighthouse more WordPress aware. You can read more about that at

Checking in with international liaisons

Our fantastic representatives from the Swedish, Serbian, Dutch, Urdu, Russian and German communities took part in todays chat and provided insights from their sides of things.

Open floor

The not a bug section of our Master List should have a section about how the new editing experience behaves, and questions that may come up from it, see the Google Docs sheet at for more details. A quick reminder that we don’t know when WordPress 5.0 lands, and should it be during your holiday periods, there are no obligations to stop by and help users, enjoy your time off!


@abdullahramzan, @bcworkz, @bemdesign, @clorith, @contentiskey, @fierevere, @firoz2456, @futtta, @howdy_mcgee, @jcastaneda, @jdembowski, @joyously, @macmanx, @nikolam, @numeeja, @RDD, @sterndata, @t-p, @tobifjellner and @zodiac1978 attended. Read the meeting transcript in the Slack archives. (A Slack account is required)
Don’t walk behind me; I may not lead. Don’t walk in front of me; I may not follow. Just walk beside me and be my friend. Albert Camus


“I feel like a cog in the machine!”–What to do?

Here’s an issue that several readers have asked about lately: What to do when a client treats you like a cog in the machine? A podcast listener recently referred to this as “dehumanization” in our profession. Examples may include:

  • Applying to work with a client without ever interacting with a human–the application process is a series of online forms, DocuSign documents, and auto-responses
  • Translation projects assigned by mass e-mail (“Dear translator”) or through an online job portal
  • Inability to talk to a human, even when you want or need to

For us as freelancers, the real question is what to do about this if it bothers you. Here are a few suggestions that may help:

  1. Adjust your mindset. These kinds of interactions are a) transactional, and b) impersonal. No question about that. However, they are not objectively wrong and horrible. For every freelancer who longs for a personal relationship with their clients, there’s a freelancer who sees those personal interactions as a waste of time in a relationship that is fundamentally about exchanging a service for money. Feeling critical every time a client treats you impersonally will only subtract years from your life and is unlikely to change the client’s behavior.
  2. Set boundaries. When you work with a client, you are telling them that their way of working is OK with you. If their way of working is not OK with you, it is not a good use of your time to try to change the client, or–worse–to expect that they will change on their own. The best option is simply to set boundaries about what kinds of client relationships are–and are not–OK with you.
    Examples of boundaries:

    • “If you typically assign translation projects via mass e-mail, please be aware that I will not respond. I respond only to project requests sent directly to me.”
    • “Before working with you, I’d like to have a five to ten-minute Skype call with one of your project managers, to get a sense of whether we’re a good fit for each other.”
    • “I prefer to have a conversation about rates, rather than putting one rate in your online form. Would that work for you?”
  3. Stop expecting clients to be something that they’re not. I truly believe that every type of client serves a purpose in our industry. Clients who need their HR training videos transcribed, translated, and re-recorded into 28 languages are probably not the best fit for a freelancer; they really need a company. Clients who want the same translator to work on every project, and whose businesses depend on consistency and confidentiality, are probably not the best fit for a company; they really need a freelancer. Problems arise when you expect a huge agency to crave a personal relationship with you, when they’re trying to push gazillions of words out the door. The huge agency business model is not intrinsically bad, but it’s a mass market business like any other. Just as you wouldn’t expect a personal shopping concierge to greet you at the door of a big-box retailer, don’t expect big-box translation clients to call and ask how your weekend was, before they ask if you’re available for 10,000 words.
  4. Trust that there are clients who want–or even crave–personal relationships. I can attest that my direct clients have taken me out to dinner, invited me to their birthday parties (no kidding), invited me to tour their campuses, and asked to see pictures of my daughter’s bike races. These types of client relationships do exist, and you can find them. But the first step is to acknowledge that many clients do not want and will not cultivate a personal relationship with you. Once you accept that, you can free yourself to move on to clients who do want that kind of thing.

If you have a story about a personal relationship with a client–or how you extricated yourself from an impersonal client relationship—let’s hear about it in the comments.

The post “I feel like a cog in the machine!”–What to do? appeared first on Thoughts On Translation.

WordPress-localized Lighthouse Audits

Lighthouse is an open-source, automated tool for improving the quality of web pages. You give Lighthouse a URL to evaluate (public or requiring authentication), and it runs a series of audits against the page for performance, accessibility, progressive web app capabilities, and more. It then generates a report on how well the page did. Using the failing audits as guidance developers and site owners can get insights on how to improve their pages. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

However, when running a Lighthouse audit on a specific environment such as a WordPress site, the recommendations are often too generic to be applicable. For example, when Lighthouse asks you to concatenate resources, how could you actually go about it in a WordPress context? This becomes especially tricky because several of those assets are likely not under your control, but are introduced by a third-party extension.

We are considering the development of a project called WordPress-localized Advice Packs for Lighthouse, with the goal of providing WordPress-specific guidance using Lighthouse. With it, WordPress developers and site owners will get the results from Lighthouse audits tailored to the realities of the WordPress platform. 

This is a project to be maintained by the WordPress community, working together with input from the Chrome and Lighthouse teams at Google. As with WordPress coding standards, the WordPress community is best positioned to make sure that the Lighthouse WordPress Localized Advice Pack is accurate, up to date, and satisfies the needs of the community as a whole.

We will be at WCUS Contributor’s Day in Nashville next week, and will discuss this proposal at the support table. If you are interested in learning more about this proposal and possibly contribute to the project, we would love you to join the conversation. Looking forward to it!