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

FSE: Use navigation mode as the default #24394

Closed
wants to merge 3 commits into from
Closed

Conversation

noahtallen
Copy link
Member

@noahtallen noahtallen commented Aug 6, 2020

Description

  • Set the block editor to navigation mode whenever no blocks are selected.

This partially iterates towards #22064, and helps solve the problem of "what am I editing" when first entering the site editor. This is an important question to answer for the user, because there are many different entities available to edit (unlike the normal post editor.)

To do:

  • I bet e2e tests need updated with this change
  • Is there a better way to set this as default? Should we move the editing mode state to "settings" so that we can set them via BlockEditorProvider?
  • Should we activate this mode more frequently? e.g. when switching templates or pages, go back to nav mode?

How has this been tested?

Locally, in edit site.

Screenshots

2020-08-05 17 01 54

Types of changes

UX

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Aug 6, 2020

Size Change: +72 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/edit-site/index.js 17 kB +72 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.96 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 126 kB 0 B
build/block-editor/style-rtl.css 10.7 kB 0 B
build/block-editor/style.css 10.7 kB 0 B
build/block-library/editor-rtl.css 8.36 kB 0 B
build/block-library/editor.css 8.36 kB 0 B
build/block-library/index.js 133 kB 0 B
build/block-library/style-rtl.css 7.45 kB 0 B
build/block-library/style.css 7.45 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.6 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.47 kB 0 B
build/edit-navigation/index.js 11 kB 0 B
build/edit-navigation/style-rtl.css 1.12 kB 0 B
build/edit-navigation/style.css 1.12 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.61 kB 0 B
build/edit-post/style.css 5.61 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 11.8 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@noahtallen noahtallen force-pushed the try/nav-mode-only-fse branch from cf3088d to 96f387f Compare August 6, 2020 20:53
@noahtallen
Copy link
Member Author

props to @Addison-Stavlo for 96f387f. We additionally switch back to select mode whenever there is no selected block. This means that we can end up in select mode much more frequently now. For example, switching to header/footer or back to template will put you back into select mode.

It feels mostly good, with a couple of rough edges (sometimes you switch from edit -> select mode at unexpected times. Here's a gif: cc @dubielzyk

2020-08-06 13 53 42

@dubielzyk
Copy link

I'll start looking into playing with this locally.

Some thoughts:

  • I'm not sure we should look too deeply at changing between the modes automatically for now. It gets a bit messy. Arguably, if we do that, then you could argue that there's no need for modes at all. Which I'd love to explore still. Worth experimenting on the side though.
  • We should try and have as little jumping around as possible. So whatever we can do to mitigate that, the better :)

This is starting to shape up nicely! Awesome job

@noahtallen
Copy link
Member Author

We should try and have as little jumping around as possible. So whatever we can do to mitigate that, the better :)

What do you mean by this? Like when clicking into different blocks, how other blocks resize??

@dubielzyk
Copy link

What do you mean by this? Like when clicking into different blocks, how other blocks resize??

Yep. I know that some of this is caused by the [+] button that appears, but as FSE is moving away from a "writer canvas" and into a WYSIWYG editor, it's way more jarring when content jumps around as you're hovering stuff

@dubielzyk
Copy link

Managed to run it locally now and test it out. Definitely like the navigation mode by default. I'll check with some others to see if it's a problem. There's some stuff about the hover behavior that isn't there yet, but I'll file that in the appropriate PR :)

@noahtallen
Copy link
Member Author

Cool. I think we can continue working on the jumpiness as a follow up. I think that's definitely an issue.

@noahtallen
Copy link
Member Author

I'm also not sure what next steps are here. I think the interaction is mostly solid. We could also remove the "automatically switch back to nav mode when there is no selected block" and just leave it with loading nav mode at the start

@dubielzyk
Copy link

I recon we go for this and get it merged so we can see what people think. Currently this is just a testing ground, so we might end up reverting some of these decisions, but I've heard people want this functionality before.

Copy link
Contributor

@Copons Copons left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works as expected! ✨
It's a bit of a change compared to the normal editor behaviour, so it needs a bit to get used to, but I'd say it's an improvement overall.

I've left one comment which is likely a change request, but maybe I'm missing some context.

@noahtallen noahtallen force-pushed the try/nav-mode-only-fse branch from 96f387f to ba39c8d Compare August 13, 2020 21:42
@noahtallen noahtallen force-pushed the try/nav-mode-only-fse branch from ba39c8d to 98a35ef Compare August 20, 2020 00:20
@noahtallen
Copy link
Member Author

@shaunandrews @MichaelArestad any thoughts on this? I think it'd be cool to try out in the site editor. I think since it's a layout application, it makes sense to have something like this as the default. The specific behavior here is:

Whenever there are no blocks selected, set the editor to navigation/select mode.

This means that:

  1. It will be navigation mode on entering the editor.
  2. It will switch back to navigation mode once the user clicks outside of the editor. E.g. clicking in the blank space around the top where there are no blocks would deselect anything, so it would go back to navigation mode.

@vindl
Copy link
Member

vindl commented Aug 20, 2020

This works fine for me so far. I noticed a couple of smaller issues that could be polished in a follow-up:

  1. There is a gap between top level blocks when hovering. I'd expect them to be stacked next to each other and share a border in a way, but there is the inserter button between them:

Screenshot 2020-08-20 at 13 30 22

  1. This is more related to the theme I was testing with (Seedlet Blocks), but the template parts are wrapped in group blocks so we won't get correct labels down the road on first click.

@noahtallen
Copy link
Member Author

There is a gap between top level blocks when hovering. I'd expect them to be stacked next to each other and share a border in a way, but there is the inserter button between them:

Yeah. This is unfortunately just an issue with select mode in general, and I think we want to look into solving that in the future as well :/

@shaunandrews
Copy link
Contributor

I find this a little strange. I'm not entirely sure it helps me understand what I'm editing, but it does put a barrier to interacting with blocks. If I was unfamiliar with the way the modes work, I'm not sure I'd understand what was happening, or how to get to a block's toolbar. Here's a quick GIF that shows my first experience with this:

select-by-default

@noahtallen
Copy link
Member Author

I'm not entirely sure it helps me understand what I'm editing, but it does put a barrier to interacting with blocks

So the big thing here is that when you click on the content, it says "post content". In edit mode, that label wouldn't show up and you'd just be editing that text directly.

This is great for posts, but in the site editor... If you're used to the post editor, what makes you think that the top cover block is just part of the template? To a new user, it would seem just like everything else on the page. "Post content" is a cue which indicates that something a bit different is happening here.

I really don't believe edit mode as it stands today helps solve this problem. I don't think interacting with the blocks in the post content needs to be the first priority -- you can do that just fine in the post editor. (The site editor's purpose isn't to give you a really great essay-editing experience, to me)

We need to have a way to help the user understand exactly where that content is coming from (is it a post? a page?), and same with the header/footer.

I'm super open to other ways of accomplishing this! Select/nav mode came to mind because it has some of these concepts built in already

@vindl
Copy link
Member

vindl commented Aug 24, 2020

We need to have a way to help the user understand exactly where that content is coming from (is it a post? a page?), and same with the header/footer.
I'm super open to other ways of accomplishing this! Select/nav mode came to mind because it has some of these concepts built in already

I agree with the above. And with that context in mind I don't think that displaying this information for regular blocks (paragraph, cover etc.) is helpful in that sense. I think it would make more sense to outline top level entities like post content and template parts while editing their content. The only exception to the above could be site blocks (title, tagline) since these could benefit from additional visual cues too.

I think the above is already being explored in #24557.

@jameskoster
Copy link
Contributor

I think we should tread very carefully around the idea of introducing different mode interactions between contexts (site editing vs content editing). These concepts already require some mental gymnastics to grasp, and I'm not sure the average user will understand (or care about) the differences between site editing and content editing. At the end of the day it's all just editing, and the patterns of the post editor are well established at this point.

With that in mind I wonder how prominent the solution to the "what am I editing?" problem needs to be? Two considerations there;

  1. It is already possible to learn what you're editing via block navigation - an existing feature that is being enhanced.
  2. With multi-entity saving, exactly what a user has edited, and the impact thereof, will be communicated when they save their changes

@noahtallen
Copy link
Member Author

Thanks for the thoughts!

It is already possible to learn what you're editing via block navigation - an existing feature that is being enhanced.
With multi-entity saving, exactly what a user has edited, and the impact thereof, will be communicated when they save their changes

I don't think most users (i.e. beginners) will be aware of those features. 🤔 There is also the breadcrumb at the bottom of the screen which helps a bit. I mean bluntly, this is a problem even I run into! e.g. where does the template part begin or end? This information is currently not answerable at a glance through block navigation or multi-entity saving. Additionally, multi-entity saving is hidden behind a few buttons so by default, folks won't understand that they are changing multiple entities.

At the end of the day it's all just editing, and the patterns of the post editor are well established at this point.

I think this is exactly my motivation for this. There is a massive difference between page building and writing an essay. I want design controls and outlines when building a page, but not when writing a post. When writing a post, I want the editor to get away -- I don't need those tools! I'm personally not convinced that we should be hiding this difference. :)

To give an example, look at the "site title" block. If you're used to the established patterns of the post editor, you might expect this to behave exactly like a heading block (nearly everything about it looks and feels the same). But the site title block has a totally different effect: it updates the title in the database (separate from the rest of the post) which changes things like the browser tab, what shows up in different feeds, etc.

All that to say... I personally think we do need to be more obvious. And I think we're all striving for the same thing: we want users to understand what they are editing in the site editor!

@noahtallen
Copy link
Member Author

Also, I wanted to add that I'm also not sure that navigation mode solves the problem well either, so I'm not arguing in favor of nav mode specifically, just in favor of being more clear and obvious about how entities work in the site editor :)

@dubielzyk
Copy link

I think let's perhaps hold off on this change since there's no clear agreement. We'll can revisit and see if this is worth implementing when we've fixed some of the things we want to do in Edit mode :)

@noahtallen
Copy link
Member Author

Sounds good! I will close this PR for now.

@noahtallen noahtallen closed this Aug 26, 2020
@aristath aristath deleted the try/nav-mode-only-fse branch November 10, 2020 14:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants