Solid names (and source of truth) for part names of the Block Editor

[juanmaguitar]

There seem to be no unified criteria on how the parts of the Block Editor are called.

For the left sidebar (1):

• In the WordPress Block Editor documentation page this part is referred as Block Inserter
• In the Block Editor Handbook landing page is called just Inserter

For the right sidebar (3):

• In the Page/Post Settings sidebar documentation page this part is referred as Page/Post Settings sidebar
• In the Work with blocks documentation page this part is referred as Block Settings sidebar
• In the Block Editor Handbook landing page is called Settings sidebar

Should we use the terms "Inserter"(1) and "Settings" (3) to refer to these panels and then talk about specific tabs (Block, Page, Patterns...) inside these panels?
Should we use the term panel to refer to these areas (Inserter panel and Settings panel)?
Should we use the term sidebar to refer to these areas (Inserter sidebar and Settings sidebar)?

Should we have a source of truth to unify criteria about these namings so there's a clear reference that can be used to update documentation?

[annezazu]

Thanks for opening this! My two cents:

• Go with Inserter rather than Block Inserter since we have patterns there.
• Go with Settings sidebar, since that will also work with the Site Editor where Styles exist, etc.
• I don't think we need to say sidebar or panel. If we need to choose one, I'd say sidebar. From there, I think it's okay to say "Block, Patterns, etc"

Should we have a source of truth to unify criteria about these namings so there's a clear reference that can be used to update documentation?

Sure! If you're game to take that on, go for it. It never hurts.

As you work on this, let's keep in mind the Site Editor experience too as a way to stress test the ideas!

[justintadlock]

This pretty much echoes my thoughts.

[mburridge]

Yup, me too.

[ryanwelcher]

Should we use the terms "Inserter"(1) and "Settings" (3) to refer to these panels and then talk about specific tabs (Block, Page, Patterns...) inside these panels?

These feel correct to me. The function of these panels ( see below 😄 ) is to either Insert something or manage settings of some form.

Additionally, using Inserter works well for referring to the item in the screenshot below as the Quick Inserter

Should we use the term panel to refer to these areas (Inserter panel and Settings panel)?
Should we use the term sidebar to refer to these areas (Inserter sidebar and Settings sidebar)?

These may not always be configured as sidebars so I think Panels is the better term.

[ndiego]

Yeah, I think removing "Block" is a good direction to be going, i.e. Editor vs. Classic Editor as opposed to Block Editor vs. Classic Editor.

My recommendation would be:

1. Inserter (vs. Quick Inserter as @ryanwelcher mentioned)
2. Canvas
3. Settings Sidebar
4. List View (not shown in graphic)

The reason I like the addition of "Sidebar" is that it also defines the location of the settings. There are other places the user can control "settings" in the Editor. I would be fine with "Panel" as well, though.

[mburridge]

Should we have a source of truth to unify criteria about these namings so there's a clear reference that can be used to update documentation?

The source of truth should be the glossary page. Whatever is ultimately decided the glossary page should be updated accordingly.

The glossary currently calls it the Settings sidebar, and this seems right to me as it's used for post settings as well as block settings, and a developer can add other sidebars here.

On a side note, it's interesting to note that inspector is deprecated - interesting because that's how I've usually referred to it, so I better stop doing that 😅.

The glossary is rather more ambiguous regarding the inserter. I think just calling it the "Inserter" makes sense as it can be used for inserting patterns and media, and not just blocks.

[ndiego]

Yeah, good callout on the glossary page.

[juanmaguitar]

Related issue about consistency in terms
Consistent terminology: Patterns vs. Block Patterns

[ndiego]

The more I think about this, I feel that updating the glossary page and solidifying it as the "source of truth" is a foundational component of the larger Block Editor Handbook overhaul. These terms will inform all of the content and much of the documentation structure (Page titles, URLs, etc.).

[mburridge]

Agreed. I've been thinking about it too and I think the glossary page could be moved to the Getting Started section. As you say, the glossary is a foundational component and it's important that newcomers to block development know what the terms mean and use them consistently.

As we overhaul the handbook we should also ensure that we use the terms consistently in the content.

[ndiego]

Yeah 💯

[juanmaguitar]

Thanks for this feedback!

How would you refer to the sections marked in this image (or how would you name them) for example?

I've marked with ✔️ what I understand would be valid options

• 1
  • ✔️ Inserter
  • ✔️ Inserter sidebar
• 1.1
  • ✔️ Block tab under Inserter sidebar
  • Block Inserter sidebar
• 3
  • ✔️ Settings
  • ✔️ Settings sidebar
• 3.2
  • ✔️ Block tab under Settings sidebar
  • Block Settings sidebar
• 3.2.1
  • ✔️ Color section in Block tab under Settings sidebar
  • Color section in Block Settings sidebar

[justintadlock]

I would not use "sidebar" when talking about the Inserter. It will be too easy to confuse with the Settings Sidebar. I consider it more of a "slide out panel" since it is not regularly open.

[justintadlock]

When giving instructions for navigating the UI, the easiest form for something like this:

Color section in Block tab under Settings sidebar

Is this:

Settings Sidebar > Block > Color

[ndiego]

Yes, I agree with Justin's comments above. The Settings Sidebar is also more complicated due to the Settings and Styles tabs, which can get extremely verbose to write out. You would end up with something like Settings Sidebar → Block → Styles → Color

[mburridge]

I agree, 1 = Inserter, 3 = Settings Sidebar. Those terms are clear and to a certain extent self explanatory, whilst still accommodating the varied functionality of each.

[richtabor]

Inserter sidebar

I haven't seen/used this before. Inserter seems clear enough.

[ndiego]

Stumbled upon this doc today about the Gutenberg User Interface. Whatever the final decisions are, this doc should be a source of truth alongside the Glossary.

[talldan]

I usually call the left hand area the Block Library, which I think is a more friendly term than Block Inserter. That's also what the region is announced as if you're using a screen reader, and it seems to be called that in the glossary in a couple of places.

It seems ok to drop the 'Block' prefix, though I don't have a strong opinion so much on what name it's given. I do think it might be helpful for users if it's differentiated from the in-canvas inserters/appenders. The library has an exhaustive collection, the quick inserter is only for accessing a partial range.

I've never liked Settings for the right-hand area as for me it's too similar to Options, the button right next to it in the top bar, but again, not a strongly held opinion. I have witnessed that new users can be confused by it.

[mburridge]

Hmm 🤔, I rather like the idea of calling it the Library, rather than the Inserter. I think that Library more accurately describes what it is, and also encompasses the fact that it contains media and patterns, as well as blocks.

Hence I think Library, rather than Block Library.

[mburridge]

The library has an exhaustive collection, the quick inserter is only for accessing a partial range.

The quick inserter has a search field, so it's possible to insert any block using it.

I see good reasons to call the left hand sidebar the "Library", and the quick inserter simply the "Inserter".

[jasmussen]

Agreed on both counts, also not a strong opinion here. We can always revisit.

[richtabor]

I usually call the left hand area the Block Library, which I think is a more friendly term than Block Inserter.

I like it too, though I'm not sure about it. It contains the site's block, pattern and media libraries. Maybe it's fine?

[jasmussen]

Oh I'm remembering that at some point in the future, a separate "Library" menu item is likely to appear somewhere in the admin. This would be a place to see fonts you uploaded, reusable blocks you created, other similar properties.

[jasmussen]

One separate issue that is related to the site editor in general, is the new high level settings view, the initial state you see the site editor in when you open it. It has often been referred to as "browse mode", mainly due to one of the features we worked on at the same time as working on this new view. But the term is a bit unfortunate as it has nothing to do with this state.

"Browse mode" is a term we used to describe the ability to navigate links inside the editor (see #23328 for older conversations). That is, you may be editing your homepage in the site editor, and want to edit your contact page. "Browse mode" would give you the ability to click a navigation item, while you're inside the site editor, and navigate there directly. While the feature is currently shelved, it is very likely to return in some shape or form in the future, perhaps as a new tool in the tools menu that is invoked by holding ⌘, like in VS Code:

We do need a good term for the two states of the site editor, though, and @richtabor suggested terms I think would be useful:

• "Site View" — High level settings. Has Navigation, Templates, Styles (and more) items on the left, a preview on the right.
• "Edit View" — This is the fullscreen editor, and a destination for low level/nitty-gritty/detailed editing.

Here's an abstracted visual to suggest the two:

[afercia]

Late to the party but glad to read this interesting conversation. In #49656 I'm going through the naming of all the ARIA landmarks used in the Editor and Widgets page, which in part relates to this issue.
I'd like to bring in two more criteria to take into account for some better naming:

• translations
• accessibility

Translations:
We are responsible for providing names that can be easily translated in a meaningful way. In this regard, the term 'Inserter' is way too technical to be translated in an elegant, meaningful, way. I'm not sure a good UI should ever use such technical terms. Quickly looking at some translations, sometimes the term 'Inserter' is not translated at all (because there's no appropriate term it can be translated to) or it's translated in an alternative way. A few examples:

• Spanish: Insertador. Not sure if 'Inserter' sounds elegant, but 'Insertador' sounds more like some Schwarzenegger colleague in El Exterminador.
• French: l'outil d'insertion (the insertion tool).
• Italian: kept in English.

Screenshot:

Overall, I'd be in favor of 'Block Library'.

Accessibility:
In #49613 / #49614 I'm proposing to remove the term 'sidebar' from all translatable strings. Ideally, an UI section should be named based on its functionality. The name should be abstracted and not refer to visual placement. 'Sidebar' only refers to placement, as in: a column placed either on the left or on the right. It doesn't tell anything about the what.

It's also worth considering the term 'sidebar' is slightly unfair for blind users. They really don't mind whether this section of content is visually placed on the side, top, bottom or in any other spot of the screen.

I don't think we need to say sidebar or panel.

I'm not sure either. If we need, I'd prefer panel.

[hanneslsm]

I fully agree that the term 'Inserter' is way too technical.
To add on the translations, there is no translation that would make sense in German (Einfügen, Einsetzen… all of this does not work really).

[afercia]

Just a quick note that one more reason to avoid the term 'sidebar' is that, on mobile, most of these UI sections are not 'side bars' any longer. See #49614 (comment)

[hanneslsm]

Since "Sidebar" is not an option and "Inserter" is also not ideal (too technical and also things like the list view is also displayed on the left side (see also #50141)), how about if go with:

1. Left sidebar = Main Panel or Primary Panel or Essentials Panel.
   The "List View" and the "Block Library" and "Pattern Library" can be found there in the Edit View.
   A Main Panel can also exist in the Site View.
2. Middle = Canvas / Content area
3. Right sidebar = Settings Panel / Options Panel
   ?

[mburridge]

There's also a suggestion to call the left sidebar the Library, as it has blocks, patterns, and media.

[hanneslsm]

There's also #49837 (comment) to call the left sidebar the Library, as it has blocks, patterns, and media.

Yes, I was using this idea for "Block Library" and "Pattern Library.
However, for the whole left part I'd go with something more generic than "Library", because the List view and the Outline can also be found on the left side.
So it's

1. Main Panel

• List View
• Outline
• Block Library
• Pattern Library
• Media
• Reusable Blocks
• (… anything else?)

[mburridge]

Good point, so for more generic terms how about the Administration Panel, or Management Panel, or Composition Panel.

[hanneslsm]

JFYI, in Microsoft Word on Mac the left sidebar is called "Navigation Pane" and has the "Thumbnail Pane", "Document Map", "Reviewing Pane"and "Find and Replace" included.

[hanneslsm]

Linking for visibility the idea renaming the List View to "Document Overview": #51472
Not sure if the List View should be renamed (this is another discussion) but it'd be a good name for the whole left sidebar. However, it's missing the Inserter aspect.
So, what about being more generic for the left sidebar with "Document Elements"?

[Ren2049]

For the list view, how about including "tree" for the hierarchical aspect of it? Element tree, component tree, site tree, page tree maybe?

It would work in al languages where tree is considered a hierarchy e.g. Baum in German.

[richtabor]

Element tree, component tree, site tree, page tree maybe?

Those aren’t quite working for me. “List“ still seems the most suited.

[Ren2049]

I prefer "Tree" over "List" because the latter doesn't imply a hierarchy, and the hierrachy of elements is what it's all about when structuring a site with this tool.

[hanneslsm]

I'm not sure if the List View must be renamed. I think the name is quite good because it does in fact show all elements of the page as a list.

Just wanted to add the idea to have a common name for the left sidebar (including List View, Outline, Inserters / Libraries…). One idea was adding the "elements" aspect to the name.

[Ren2049]

Agree, list view may not be worth renaming.

"Elements" seems generic enough. I quite like "Element Browser" for the whole left sidebar.