Gutenberg: Add visible labels to InnerBlocksTemplatePicker pattern selection buttons

Created on 26 Nov 2019  路  3Comments  路  Source: WordPress/gutenberg

Is your feature request related to a problem? Please describe.
The lack of visual labels within the InnerBlocksTemplatePicker component makes it difficult to understand what the IconButton stands for, i.e. what pattern will be added. Currently, the only way to discover the label is to wait for the tooltip.

Examples:

1. Core Columns block:
The lack of labels works _ok_ here, as the icons depict exactly what pattern will be added. Apart from this particular scenario, I can't think of many instances where these icons will depict the actual pattern.
Screen Shot 2019-11-25 at 7 34 31 PM

CoBlocks Form block:
It's not possible to include actual interpretations of these patterns within the CoBlocks Form block. The implementation is awesome, but the lack of labels make it difficult to understand exactly what pattern will be created - unless of course you wait for the tooltip label.
Screen Shot 2019-11-25 at 7 35 24 PM

Describe the solution you'd like
Either there's a prop to pass visible labels, or visible labels are always present. We'd want to consider if we should use the existing label prop, or if we should have separate label and tooltip props.

Describe alternatives you've considered
Recreating the component, though that's not a consideration really.

[Feature] Block API [Status] In Progress [a11y] Labelling

Most helpful comment

Labels could help a lot. Here's a quick mockup for what it could look like for the Core Columns block and the CoBlocks Form block:

image

All 3 comments

Agreed this would be a a big improvement. Visible labels should always be present, they make the UI easier to understand for everyone.

Labels could help a lot. Here's a quick mockup for what it could look like for the Core Columns block and the CoBlocks Form block:

image

I started #19789 to address it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ellatrix picture ellatrix  路  3Comments

pfefferle picture pfefferle  路  3Comments

spocke picture spocke  路  3Comments

maddisondesigns picture maddisondesigns  路  3Comments

nylen picture nylen  路  3Comments