Testing simple responsive controls for blocks

One of the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. 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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, 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 slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Thank you!