Template vs content editing UX: improve list view UI

[annezazu]

While doing some early testing of #50857 and noticed that List view shows lock icons for the things I can actually edit and the items that are locked for the template aren't visible:

This feels counterintuitive for a tool that's so often used. cc @SaxonF @noisysocks

[noisysocks]

Good catch. The lock icons are technically correct (those blocks are locked: they can't be moved or removed) but mostly meaningless in this mode. Let's remove them from the list view altogether when in page content focus mode.

[noisysocks]

Hmm actually I'm not sure 😅

Whatever we do here should be consistent with patterns that have "templateLock": "contentOnly". This is what a locked pattern looks like in the List View:

Note the lock icons. These indicate that the blocks can't be moved or removed. You can still edit their content.

Maybe should we only show the lock icon when the user has manually locked the block and not when it's locked via a pattern lock or via the page content focus?

What do @SaxonF and @jameskoster think?

[SaxonF]

It might be worth looking at an icon that suggests editing contents/child blocks is possible vs the lock which prevents everything. This will become more of an issue when partially synced patterns are a thing.

• If a block's contents are editable it has Icon 1
• If a block is completely locked it has Icon 2
• If a block is locked but also has editable content (e.g. post content block when editing page) than it has both (or maybe Icon 3)

In terms of content editing in the site editor. @noisysocks I know we went back and forth on this a little bit during the build but I'm now wondering whether we should show top level template blocks in sidebar as "locked" when editing pages. A couple of reasons for this:

• If we every introduce the show/hide template toggle than it would make sense to also show/hide template blocks
• It gives us an additional way of prompting to edit template e.g. vs more menu on block layer

Selection behaviour would just highlight the block on canvas but with no toolbar like we currently do.

@jameskoster what do you think?

[noisysocks]

In terms of content editing in the site editor. @noisysocks I know we went back and forth on this a little bit during the build but I'm now wondering whether we should show top level template blocks in sidebar as "locked" when editing pages.

Not against it! You're right it would makes sense if/when we add the template toggle button.

Thinking about logistics for a moment, this strikes me as an iteration that doesn't need to go into 6.3.

[jameskoster]

There are various lock statuses (move, remove, contents) and combinations thereof to consider. I worry a bit that icons for each could substantially increase cognitive load and add a lot of noise to List View.

My assumption is that the most important thing to communicate is whether a block is fully editable, partially editable, or not editable at all in its current context. So for an alternative idea, I wonder if we might try:

• Fully editable: no icon.
• Partially editable: lockOutline (or another new) icon. This would include partially synced blocks, any regular block that is move and/or remove locked (since its contents can still be edited), and blocks like Post Content / Post Title in the page edit context.
• Not editable at all: lock icon. Since blocks cannot currently be content locked via the UI, this would only be applied to:
  • Template blocks (not including Post Content / Post Title etc) in page edit context, if we choose to display them.
  • Blocks inside partially synced patterns that haven't been marked as content-editable.

Side note: It's kind of wild how we've proliferated the use of the lock icon given how few blocks are capable of being fully locked.

I'm now wondering whether we should show top level template blocks in sidebar as "locked" when editing pages

It could be worth a try, but I fear it will make selecting editable blocks a bit tedious when the template is convoluted. But I suppose we have the condensed list view in the Page Inspector tab, so maybe it's ok?

[noisysocks]

This isn't necessary for WP 6.3.

[youknowriad]

This looks in a better state now. Let me know if there's anything missing.