Testing simple responsive controls for blocks

One of the Gutenberg Phase 2 tasks is to design some lightweight responsive settings for individual blocks. The project is at a point where it could use some testing with users, and we could use your help.


A few blocks currently behave responsively, but most do not allow for specific control over that behavior. For example, the Columns and Gallery blocks let you set a number of columns, but will always collapse down to one or two columns on small screens. Some third party plugins have built more extended functionality for custom blocks, and since these are generally considered advanced controls, a plugin does feel like the right place for them. However, there are still a couple good reasons for us to formally establish simple pattern for these controls: 

  1. Plugins are all currently implementing these controls in different ways. If Gutenberg can establish a reusable, scalable best practice for responsive controls, it’ll help promote consistent UI wherever users adjust these sorts of settings. 
  2. There’s currently no way to opt-out of the stacked columns behavior for the Columns and Gallery blocks. In effect, they’re less “smart defaults”, and more enforced behavior. There’s a limited responsive toggle for the Media & Text block already, but establishing a scalable pattern here will come in handy as Gutenberg expands to include more complicated site-building blocks.

There’s been a lively discussion in the GitHub thread for this issue, and the group has largely coalesced around a possible direction. 

Testing plan

The next step is to run this by users and get a temperature check on the direction. To kick things off, I’ve begun a short document to outline general goals and establish the beginnings of a script, and built a simple prototype for testing:

Since many advanced users have shared feedback on GitHub, we’re primarily hoping to interview those who have less experience building websites. @tinkerbelly is already recruiting users for a test of the Navigation block, so we’ve decided to combine recruiting efforts. Depending on timing, we’ll either combine both projects into one test session, or break the responsive controls into its own short session. We aim to test this later this month. 

How you can help

If you’re interested in user testing or responsive controls, I’d love more volunteers to get involved. As @tinkerbelly noted in her “How to participate in user research” post last year, there are many different opportunities to help. Volunteers do not have to be designers or have any experience with user research: moderating or observing sessions, taking notes, and assisting with with analysis of the interviews are all incredibly helpful. 

Today, I could primarily use help reviewing the goals and script. Please give it a read, and share any notes below, in the document itself, or in the #research channel on slack. Thank you!