Improve the block inserter labeling

[afercia]

Description

Noticed after some recent changes to the block inserter in https://github.com/WordPress/gutenberg/pull/61004 and https://github.com/WordPress/gutenberg/pull/61421. Hat tip to @carolinan for pointing me at this.

Title case capitalization

Traditionally, all WordPress features are title case. The term 'block inserter' feels a little too technical to me and I'd personally prefer a more intuitive, simpler name. Regardless, whatever this feature name is, it should be always title case: Block Inserter. This is no different for other features e.g. List View, Document Overview, and many other ones. Title case should be used everywhere the 'Block Inspector' terminology is used, for example also in the commands palette.

The verb 'toggle'

See https://github.com/WordPress/gutenberg/discussions/42492 and similar trac ticket for Core. The verb 'toggle' should be avoided. The button that opens the Inserter is labeled aria-label="Toggle block inserter". Also, for consistency, Document Overview, List View, Settings panel don't use the verb 'toggle'. It is used in the command palette and it should be removed from there as well.

The name 'Block Library' is obsolete

The navigable region where the block inserter renders within is still labeled 'Block Library'. This should be updatred to 'Block Inerter' as it's confusing for screen reader users. They will activate a button labeled 'Block inserter' to get a UI that is labeled 'Block Lirary'. Screenshot with VoiceOver running:

The new Close button label should be simplified

In https://github.com/WordPress/gutenberg/pull/49614 some labels for some Close buttons were simplified based on the following criteria:

• When the Close button is contained within a labelled UI that provides enough context, shorten the button label to just 'Close'.
• Otherwise, keep some contextual information in the button label.

In the same way, as this UI is already labeled, the Close button label should be simplified.

Step-by-step reproduction instructions

Observe the labels used in the UI in the places described above.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

It is important to note that the terminology 'Block Library' is still used in the docs, for example in the user interface documentation, see https://github.com/WordPress/gutenberg/blob/966f0a15cf57cc169b5a01f92b13b734dbc45834/docs/explanations/user-interface/README.md#block-library

The docs should be updated everywhere because the UI now uses the terminology 'Block Inserter'. Alternatively, 'Block Inserter' should be replaced everywhere with 'Block Library'.

I'd appreciate a decision about this Cc @WordPress/gutenberg-core @WordPress/gutenberg-design

[afercia]

The terminology 'Block Library' is still used in a couple Welcome Guides as well, e.g.:

[richtabor]

I'd appreciate others' thoughts, but I would think a site's block, pattern, and media library are all part of the "Inserter". You open the Inserter to add blocks from your block library, patterns from your pattern library, and media from your media library.

[youknowriad]

Personally I think both "Inserter" or "Block Library" are problematic.

• Inserter is very hard to translate, I'm not even sure how to translate that to French? "Inserteur"? sounds really weird and I suspect that it might be the case in a lot of languages.
  • Block library is limiting as it's more than blocks.

What about just "Library"?

[afercia]

I'd agree the name of the overall feature should be reconsidered.

It's no longer only blocks

The 'inserter' now allows users to add 3 kind of objects and presents them in 3 tabs:

• Blocks
• Patterns
• Media

Screenshot:

As such, labels like 'Toggle block inserter', or 'Close block inserter', or 'Block Library' are no longer appropriate because they only mention 'block'.

Exceptions

It is worth reminding the Widgets page is an exception as the inserter in that page only shows blocks.

In the same way, in the Customizer > Widgets, the plus icon button is named 'Add block', and it opens a panel that provides only blocks. (Note: on trunk it displays also the Patterns and Media tabs, that's a bug that is tracked in another issue).

Translations

I totally agree with @youknowriad: The term 'inserter' sounds really weird when translated literally. For example, in my native language (Italian) the literal translation would be 'inseritore'. Googling for it, I discovered an 'inseritore' is a multi-position switch used in electrical engineering circuits or, when computers used punched card readers, a tool to insert a set of cards in the reader. Way too technical.

Checking on WP translate, it's not a case that some WordPress translations use a different terminology, for example:

• French: Outil d’insertion de blocs
• Italian: Pannello di inserimento dei blocchi

Overall, for some languages, translators are forced to use a different terminology to provide users with something that makes sense in their language, which proves the term 'inserter' is probably not the best name to use in the first place.

Current situation

After a quick search for the term 'inserter' on WP translate I see it's used inconsistently:

• Sometimes it's associated with the term 'block' e.g. 'block inserter'.
• Sometimes it's used in isolation e.g. in the preferences modal dialog > Blocks, the first section is called 'Inserter'.
• Sometimes the plus icon button is named 'Add block' either because it opens different UI (e.g. the quick inserter) or because the inserter panel is used in a different context.
• As meantioned in my previous comment, sometimes the UI uses the terminology 'Block Library'. While 'Block Library'. identifies the collection of blocks, this terminology is used in the UI to actually point to the block inserter. E.g.: Get to know the block library. All of the blocks available to you live in the block library. You’ll find it wherever you see the {inserter icon here} icon.

Potential options

I'm really ot sure what the best solution is. Overall, I'd think we should all make an effort to see this issue from an user perspective. As a user, I'm not sure I'm interested to know whether this feature is called 'inserter' or 'library' or anything else. I just want to add content.

The most similar pattern in WordPress is the Media Library. However, while the feature and the related admin page are named 'Media Library', in the Classic editor the button to actually add media is named... 'Add Media'. Using an action verb is simpler and more intuitive. It communicates the 'what' I can do as a useer. In that context, the name of the feature is less important.

It's not a case that, when the 'Show button text labels' preference is enabled, the inserter toggle button is lablede 'Add'. Screenshot:

However, it's not great that when the inserter is open, this button is labeled 'Close'. Screenshot:

I'd think a decision should be made first on whether to use a name or an action verb.

• If the preference is to use an action verb like 'Add', that should be used consistently across the whole user interface and never specify 'block'.
• Alternatively, as Riad suggested, 'Library' could work but then it should be used consistently across the whole user interface, the documentation, etc.

Overall, I tend to think such an important choice should not be based on personal opinions or preferences. It would be great to have some actual user testing. An A/B test with two alternative UIs to validate which one performs better.

[afercia]

It is also worth noting that other UIs in the editor, e.g. the so called 'quick inserter' and the 'insertion point inserter' show a button with a tooltip text 'Add block'. However, when then clicking 'Browse all', users are provided with a way to access Patterns and Media as well. As such, these buttons are not just about 'blocks' any longer.

If 'Library' turns out to be the preferred option, I would suggest to rename 'Browse all' to 'Library'.

[jameskoster]

A couple of thoughts;

• Using a name ("Library") would be consistent with other panel toggles in the top bar.
• "Library" can be a navigational landmark outside of the editor down the road – a place to manage patterns, media, blocks, templates, etc.
• 'Add' could be ambiguous; add what, a block, a plugin, a link, a new post?
• 'Add' echoes the + icon, where "Library" does not. Would the icon need to change?

[afercia]

'Add' echoes the + icon, where "Library" does not. Would the icon need to change?

This is an interesting problem. If the editor ends up using 'Library', yes the icon should change. An icon should suggest the name of the control, also to give assistive technology users such as speech recognition software a change to guess the control accessible name.

On the other hand, I understand the value of the 'plus' icon as it's visualy intuitive and it's an established convention. But in this case, the name of the control should be 'Add' or 'Insert' or anything else that is logically associated with a plua icon.