Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try: Obscure edit-ability of post content blocks in the template editor #31461

Closed
wants to merge 3 commits into from

Conversation

jameskoster
Copy link
Contributor

Upon engaging the template editor, it is possible to continue editing the post content. This experience can be a bit overwhelming, and blurs the lines between post editing and template editing.

In this (incredibly hacky) PR I am obscuring the edit-ability of blocks like the Post Title, Post Content etc with some CSS. The purpose is to serve as a proof of concept that explores how it feels to make these blocks semi-inert in the template editing context.

content-in-template.mp4

To test:

  • Open a post / page
  • Click the "Edit" or "New" link in the template panel
  • See how interactions with blocks like Post Title and Post Content feel

cc @jasmussen

@github-actions
Copy link

github-actions bot commented May 4, 2021

Size Change: +373 B (0%)

Total Size: 1.31 MB

Filename Size Change
build/edit-post/index.js 333 kB -223 B (0%)
build/edit-post/style-rtl.css 7.28 kB +298 B (+4%)
build/edit-post/style.css 7.26 kB +298 B (+4%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.12 kB 0 B
build/annotations/index.js 2.92 kB 0 B
build/api-fetch/index.js 2.42 kB 0 B
build/autop/index.js 2.28 kB 0 B
build/blob/index.js 672 B 0 B
build/block-directory/index.js 6.6 kB 0 B
build/block-directory/style-rtl.css 993 B 0 B
build/block-directory/style.css 995 B 0 B
build/block-editor/index.js 116 kB 0 B
build/block-editor/style-rtl.css 13 kB 0 B
build/block-editor/style.css 13 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 112 B 0 B
build/block-library/blocks/audio/style.css 112 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 515 B 0 B
build/block-library/blocks/button/style.css 515 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/buttons/style-rtl.css 368 B 0 B
build/block-library/blocks/buttons/style.css 368 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 422 B 0 B
build/block-library/blocks/columns/style.css 422 B 0 B
build/block-library/blocks/cover/editor-rtl.css 603 B 0 B
build/block-library/blocks/cover/editor.css 604 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB 0 B
build/block-library/blocks/cover/style.css 1.22 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 401 B 0 B
build/block-library/blocks/embed/style.css 400 B 0 B
build/block-library/blocks/file/editor-rtl.css 301 B 0 B
build/block-library/blocks/file/editor.css 300 B 0 B
build/block-library/blocks/file/frontend.js 773 B 0 B
build/block-library/blocks/file/style-rtl.css 255 B 0 B
build/block-library/blocks/file/style.css 255 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.45 kB 0 B
build/block-library/blocks/freeform/editor.css 2.45 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 704 B 0 B
build/block-library/blocks/gallery/editor.css 705 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.06 kB 0 B
build/block-library/blocks/gallery/style.css 1.05 kB 0 B
build/block-library/blocks/group/editor-rtl.css 160 B 0 B
build/block-library/blocks/group/editor.css 160 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 476 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 281 B 0 B
build/block-library/blocks/latest-comments/style.css 282 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/legacy-widget/editor-rtl.css 557 B 0 B
build/block-library/blocks/legacy-widget/editor.css 557 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 176 B 0 B
build/block-library/blocks/media-text/editor.css 176 B 0 B
build/block-library/blocks/media-text/style-rtl.css 492 B 0 B
build/block-library/blocks/media-text/style.css 489 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 617 B 0 B
build/block-library/blocks/navigation-link/editor.css 619 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B 0 B
build/block-library/blocks/navigation-link/style.css 94 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.19 kB 0 B
build/block-library/blocks/navigation/editor.css 1.19 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 1.26 kB 0 B
build/block-library/blocks/navigation/style.css 1.26 kB 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/editor-rtl.css 239 B 0 B
build/block-library/blocks/page-list/editor.css 240 B 0 B
build/block-library/blocks/page-list/style-rtl.css 167 B 0 B
build/block-library/blocks/page-list/style.css 167 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B 0 B
build/block-library/blocks/paragraph/editor.css 157 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 247 B 0 B
build/block-library/blocks/paragraph/style.css 248 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 250 B 0 B
build/block-library/blocks/post-comments-form/style.css 250 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B 0 B
build/block-library/blocks/post-excerpt/style.css 69 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/post-title/style-rtl.css 60 B 0 B
build/block-library/blocks/post-title/style.css 60 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 103 B 0 B
build/block-library/blocks/preformatted/style.css 103 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 318 B 0 B
build/block-library/blocks/pullquote/style.css 318 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 83 B 0 B
build/block-library/blocks/query-loop/editor.css 82 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query-title/editor-rtl.css 86 B 0 B
build/block-library/blocks/query-title/editor.css 86 B 0 B
build/block-library/blocks/query/editor-rtl.css 131 B 0 B
build/block-library/blocks/query/editor.css 132 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 189 B 0 B
build/block-library/blocks/search/editor.css 189 B 0 B
build/block-library/blocks/search/style-rtl.css 359 B 0 B
build/block-library/blocks/search/style.css 362 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 251 B 0 B
build/block-library/blocks/separator/style.css 251 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 512 B 0 B
build/block-library/blocks/shortcode/editor.css 512 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 440 B 0 B
build/block-library/blocks/site-logo/editor.css 441 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 154 B 0 B
build/block-library/blocks/site-logo/style.css 154 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 796 B 0 B
build/block-library/blocks/social-links/editor.css 795 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB 0 B
build/block-library/blocks/social-links/style.css 1.33 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 308 B 0 B
build/block-library/blocks/spacer/editor.css 308 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 485 B 0 B
build/block-library/blocks/table/style.css 485 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 551 B 0 B
build/block-library/blocks/template-part/editor.css 550 B 0 B
build/block-library/blocks/term-description/editor-rtl.css 90 B 0 B
build/block-library/blocks/term-description/editor.css 90 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 569 B 0 B
build/block-library/blocks/video/editor.css 570 B 0 B
build/block-library/blocks/video/style-rtl.css 169 B 0 B
build/block-library/blocks/video/style.css 169 B 0 B
build/block-library/common-rtl.css 1.31 kB 0 B
build/block-library/common.css 1.31 kB 0 B
build/block-library/editor-rtl.css 9.54 kB 0 B
build/block-library/editor.css 9.53 kB 0 B
build/block-library/index.js 142 kB 0 B
build/block-library/reset-rtl.css 506 B 0 B
build/block-library/reset.css 507 B 0 B
build/block-library/style-rtl.css 9.54 kB 0 B
build/block-library/style.css 9.54 kB 0 B
build/block-library/theme-rtl.css 692 B 0 B
build/block-library/theme.css 693 B 0 B
build/block-serialization-default-parser/index.js 1.3 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 47 kB 0 B
build/components/index.js 186 kB 0 B
build/components/style-rtl.css 16.2 kB 0 B
build/components/style.css 16.2 kB 0 B
build/compose/index.js 9.96 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/customize-widgets/index.js 5.71 kB 0 B
build/customize-widgets/style-rtl.css 666 B 0 B
build/customize-widgets/style.css 667 B 0 B
build/data-controls/index.js 830 B 0 B
build/data/index.js 7.23 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 738 B 0 B
build/dom-ready/index.js 576 B 0 B
build/dom/index.js 4.61 kB 0 B
build/edit-navigation/index.js 13.6 kB 0 B
build/edit-navigation/style-rtl.css 2.86 kB 0 B
build/edit-navigation/style.css 2.86 kB 0 B
build/edit-post/classic-rtl.css 454 B 0 B
build/edit-post/classic.css 454 B 0 B
build/edit-site/index.js 25.7 kB 0 B
build/edit-site/style-rtl.css 4.91 kB 0 B
build/edit-site/style.css 4.9 kB 0 B
build/edit-widgets/index.js 12.5 kB 0 B
build/edit-widgets/style-rtl.css 2.98 kB 0 B
build/edit-widgets/style.css 2.98 kB 0 B
build/editor/index.js 60.4 kB 0 B
build/editor/style-rtl.css 3.9 kB 0 B
build/editor/style.css 3.9 kB 0 B
build/element/index.js 3.44 kB 0 B
build/escape-html/index.js 739 B 0 B
build/format-library/index.js 5.68 kB 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.js 1.76 kB 0 B
build/html-entities/index.js 628 B 0 B
build/i18n/index.js 3.73 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 1.65 kB 0 B
build/keycodes/index.js 1.43 kB 0 B
build/list-reusable-blocks/index.js 2.06 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/media-utils/index.js 3.08 kB 0 B
build/notices/index.js 1.07 kB 0 B
build/nux/index.js 2.3 kB 0 B
build/nux/style-rtl.css 718 B 0 B
build/nux/style.css 716 B 0 B
build/plugins/index.js 2.01 kB 0 B
build/primitives/index.js 1.03 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/react-i18n/index.js 924 B 0 B
build/redux-routine/index.js 2.82 kB 0 B
build/reusable-blocks/index.js 2.56 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/rich-text/index.js 11.8 kB 0 B
build/server-side-render/index.js 1.64 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 848 B 0 B
build/url/index.js 1.95 kB 0 B
build/viewport/index.js 1.28 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/widgets/index.js 1.68 kB 0 B
build/wordcount/index.js 1.24 kB 0 B

compressed-size-action

@jasmussen
Copy link
Contributor

I kind of dig this! It's a small change, but in context it does feel right:

hey

Don't mind the crash at the end, I know this is a draft branch and mostlly a proof of concept (though that crash might be in trunk too).

I especially like that content inside isn't selectable. I was actually thinking we shouldn't allow the text inside the title to be selected either, when it isn't editable. But on the other hand, that might be a separate conversation.

I think this might also be an opportunity to give you a "way out" — we might actually want an overlay with an "edit" button somewhere, which takes you back same as the back button does.

But just as a quick smell test, I think this one might have something to it.

@jameskoster
Copy link
Contributor Author

I was actually thinking we shouldn't allow the text inside the title to be selected either, when it isn't editable

Agreed. I tried to spoof this with user-select: none, but for some reason it's not working.

I think this might also be an opportunity to give you a "way out" — we might actually want an overlay with an "edit" button somewhere, which takes you back same as the back button does.

Totally.

@jameskoster
Copy link
Contributor Author

Agreed. I tried to spoof this with user-select: none, but for some reason it's not working.

Got it working with the ::selection selector instead.

@jameskoster
Copy link
Contributor Author

I added an overlay effect, inspired by the click-through pattern being explored:

overlay.mp4

It may be a step far, but I think it works quite well.

@youknowriad
Copy link
Contributor

These blocks are also used inside Query block, I feel some alignments in behavior for that context is needed if we go this route.

@paaljoachim
Copy link
Contributor

Looks interesting!

@jameskoster
Copy link
Contributor Author

These blocks are also used inside Query block, I feel some alignments in behavior for that context is needed

Iirc this actually came up in the go/no go call last month. Editing post content inside the query block can be overwhelming. So we can potentially apply this same treatment there.

@kellychoffman
Copy link
Contributor

Love where this is going. A few thoughts:

  • I think we'll need a double click to edit. (Or another interaction that is intentional but not too difficult to access)
  • Agree with bringing this to the query block - as mentioned in the no/go demo, its a bit too powerful at the moment and easy to do damage. Adding some friction is a good thing.
  • I think it need a bit more indication of the difference between this state and content editing state. Block border+background color feels like the most obvious one.

@jasmussen
Copy link
Contributor

I want to note that I appreciate, Jay, that you've been taking the very long view on this all along. I see the steps that have led to this design across your tickets, with this one notably being where the gray canvas (also present when viewing tablet or mobile breakpoints) comes from. That vision helps show the north star. But the north star star is 323 light years away, so we'll have to aim for it and start walking. I sense that in this PR as well, steps towards it.

In that vein, I was skeptical that this would work — if you can edit the contents of a paragraph in one context, why can't you in the other? These are the same challenges that led us to drop the initial implementation of the clickthrough interface. Yet it's coming back with what we've learned. And in just trying this PR, it feels better than I had expected. I think it can work.

I think it need a bit more indication of the difference between this state and content editing state. Block border+background color feels like the most obvious one.

I think this is a good point, but also one that we should be careful of. The block toolbar has come to mean "you can edit properties of the block you're selecting". Changing the appearance of that is likely going to simply confuse: why is it different now? Especially in context of us separately exploring making the select mode the default in site editors, and potentially this context. I wonder if it would be confusing for that tool to be switched to when you enter the template editor — it'd suddenly show the black toolbars and blue hover outlines, which would be a clear change of context. Would it work?

@jameskoster
Copy link
Contributor Author

I don't have anything to show yet, but I'm increasingly optimistic that whatever UI element we introduce to "unlock" edit-ablity in this context will aid the distinction between states. I agree that a double-click is probably table-stakes, but we'd likely need something visual to accompany that.

Whatever we come up with, it's important to acknowledge that this UI may need to be bidirectional. It will not only need to facilitate unlocking content in the template editor, but potentially unlocking template (part)s in the content editor as well down the road.

In #29864 Matias shared some concepts with a lock icon in the Toolbar:

I'm drawn to the flexibility of this concept as an avenue of exploration here.

@jasmussen
Copy link
Contributor

That lock icon is a great idea, and offers a space for a tooltip 👌 .

@youknowriad
Copy link
Contributor

What about just a simpler version of this:

  • Selecting the post-content block shows an overlay potentially and add an "Edit" button explicitly to its toolbar or on top of the overlay
  • Unselecting moves back to locked mode.
  • Instead of bundling this into the framework, this becomes just a block detail and it also don't add "hidden interactions" like "double click"... where the user need to "guess" what's happening.

@jameskoster
Copy link
Contributor Author

jameskoster commented May 5, 2021

Selecting the post-content block shows an overlay potentially and add an "Edit" button explicitly to its toolbar or on top of the overlay

I don't think we can put the edit button on top of the overlay, as it will feel very cramped with smaller blocks like Post Date. So we'll need to explore how it can be integrated with the toolbar. Probably something like the lock icon. I'll work on that ASAP.

Unselecting moves back to locked mode.

💯

where the user need to "guess" what's happening.

I think there is room for both. The unlocking UI will assist newer users, and the double-click can be a short-cut for power users.

@jameskoster
Copy link
Contributor Author

Couple of options:

Edit button

edit.button.mp4

Simple and effective, but I don't think it will scale down very well.

Lock icon in toolbar

lock.icon.mp4

Possibly too in-your-face? The double-click pattern works well here.

Unlock in ellipsis

ellipsis.mp4

A less prominent option. This can work well if we anticipate the locking interface being present in list view:

Screenshot 2021-05-05 at 12 39 00

@carolinan
Copy link
Contributor

I prefer the lock icon in the position shown in #31461 (comment),
because at a glance I believe this would be the most accessible to screen reader users.
I assume there will be a label that explains that the block is locked but in the other scenarios, they would still need to navigate through the toolbar to unlock it.

@jameskoster
Copy link
Contributor Author

One issue with that solution is that in this case we still need to display the movers. So in reality it'd be more like:

Screenshot 2021-05-05 at 13 48 00

Which looks a little funky to me. There's something awkward about the lock icon being adjacent to all those unlocked tools 🤔

I do acknowledge that the separate toolbar in #31461 (comment) is also awkward though. For this reason I am leaning towards the ellipsis currently.

With an explanation of this concept in the welcome guide, and the double-click behaviour, I think it covers most bases.

@youknowriad
Copy link
Contributor

youknowriad commented May 5, 2021

That (the lock next to the movers) is also a solution that involved some block editor API because that part of the toolbar is not controlled by the block itself, so personally, even if potentially the best option, I'd leave for a bit later.

@jameskoster
Copy link
Contributor Author

If a developer has time to take this over I think it would be cool to see this built out properly, with edit access available to users via the ellipsis:

ellipsis.mp4

Or list view:

unlock.mp4

Or by double-clicking the locked block.

@jameskoster jameskoster added the Needs Dev Ready for, and needs developer efforts label May 12, 2021
@ntsekouras
Copy link
Contributor

Shouldn't we disable the other settings as well in such a mode? For example Inspector Controls and other Toolbar controls?

@jameskoster
Copy link
Contributor Author

Good question. I don't think so because in this case the block is part of the template and serves as a vessel for the content. I should be able to update the text justification on the Post Title block in my Page template and know that all pages will reflect that change when I save.

Also worth pointing out that these blocks (Post Title, Post Content, etc) cannot actually be selected in the post editor yet. So if the Toolbar / Inspector options weren't present in the template editor then there would be no way to control their appearance in the UI.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jun 3, 2021

There are a lot of alternatives here. Some are easy to find others are more hidden away.
If we look at this from the perspective of is this a primary action or secondary action?

Primary action
If we say that this is a primary action then adding the action text/icon directly to the toolbar is usually where primary actions go. Because that is the most obvious and easy to locate action area.

Secondary action
If we say that this is a secondary action, then adding to a sidebar would be the way to go. A secondary action is something that does not need to be as easy to locate as primary actions. Users will likely look for the action in the toolbar and then probably go to the sidebar to find the action they need.

Third level action
If we add a third action level after the primary toolbar, secondary sidebar settings, then adding it to the ellipsis or list view might be added here.

Looking at how important an action is and from there define how visible or hidden it should be. If it is important for the user to locate a specific action then adding it to the toolbar is the primary place to add the action.

@paaljoachim
Copy link
Contributor

Regarding the lock icon.
Example from WordPress 5.6 and Reusable blocks. Here is an edit button the user earlier had to click to open up for editing the contents inside the Reusable block. It was obvious and also protected the contents from accidental changes.

Screen Shot 2021-06-04 at 00 24 11

Let's say that I mix the above with what exists in WP 5.7 and we might end up with something like this from the following issue: #31163

Here we circle back to protecting the contents inside. Adding edit or in this case a lock icon which openly protects the contents inside. The user has to take the deliberate action of clicking the lock icon to unlock the contents for editing. The lock icon is easy to notice. The lock also gives the impression of something being protected.

Unlock-to-edit-Reusable-block-contents.mp4

@jameskoster
Copy link
Contributor Author

If we look at this from the perspective of is this a primary action or secondary action?

Looking at it this way I am not 100% sure that the toolbar is an appropriate position for this affordance.

Thinking about a user flow like adding a Query block to a page, primary actions are likely to be:

  1. Manipulating the layout of the post list / grid via the Query
  2. Manipulating the layout and attributes of the blocks inside the Query Loop template.

Editing the content of those posts is unlikely to be a primary action.

The same can be said for something like a Post Title block while editing a template. Changing the position, or switching from h2 to h3 are primary actions. Editing the content of the underlying post feels more secondary or even tertiary to me.

It's worth remembering that the purpose of the locking mechanism in this scenario is to draw clearer lines between local and global editing contexts. If the lines aren't strong enough I worry that the desired UX will not be achieved.

@jameskoster
Copy link
Contributor Author

Closed in favor of #42767

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. Needs Dev Ready for, and needs developer efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants