GutenTolerance

Gutenberg can be daunting for those unfamiliar with the interface. This plugin makes Gutenberg easier on new users by labeling many interface elements that otherwise only appear on hover, and modifying the display of other elements that cause confusion for novice users.

Why this plugin

Usability research with untrained users at Carleton College revealed a number of areas where the Gutenberg interface is unintuitive for new and casual WordPress users. This plugin seeks to soften the Gutenberg learning curve based on the recommendations in the report linked above.

What this plugin does

1. Labels the Gutenberg toolbar icons
2. Labels the title field
3. Labels the top and bottom of the Gutenberg content
4. Adds a visible box around each Gutenberg block
5. Labels each core Gutenberg block with its name
6. Labels non-core Gutenberg blocks with the label "Custom Block"
7. Adds "Page" or "Post" to the "Document" tab in the Gutenberg sidebar
8. Optionally hides the preview button
9. Changes the "Author" label to "Posted By"
10. Adds a persistently visible "Add Block" label to the button at the end of the Gutenberg content
11. Adds "Save Edits" label to Update button

Limitations

The technical approach used — namely, CSS applied to the DOM generated by Gutenberg's React components — has a number of limitations that keep this plugin from implementing the full suite of recommendations in the above linked report. For example:

1. No visual linkage between the current block and the sidebar block options panel
2. Does not remove "Document" language in sidebar tabs
3. Use of generated content likely results in redundant screen reader announcements

Roadmap/To-Do

• Handle nested blocks better
• Handle full width blocks better
• List recommendations not currently implemented
• Add more configuration options in the settings page
• Implement the recommendation for a visual connection between the current block and the sidebar configurator
• Identify a more accessible implementation (many of the generated content elements are redundant with existing aria labels, "above" and "below" are visual terms that may not make sense to a non-sighted author.)
• Replace the "Document" tab label with the proper post type string, e.g. "Page", "Post", etc.
• Refine typography, design
• Add a persistent "Add Block" button at end of content

Caution

Rather than recompiling Gutenberg's React components, this plugin applies its magic using mostly CSS and some JS, which interact with the DOM produced by Gutenberg. This plugin may not have full functionality if you are running a bleeding edge version of Gutenberg. If you are aware of an issue, please file an issue and note the version of Gutenberg in which you are seeing the issue.