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

Introduce distraction free mode #41740

Merged
merged 29 commits into from
Oct 10, 2022
Merged

Introduce distraction free mode #41740

merged 29 commits into from
Oct 10, 2022

Conversation

draganescu
Copy link
Contributor

@draganescu draganescu commented Jun 15, 2022

What?

This PR is the result of the exploration in #38928 to introduce a
distraction free mode. This mode build on top of the reduce interface
preference, amplifying its effect.

Why?

To enhance content production in WordPress. Text based content is one of
the most important forms of content. While the site and page building
enhancements make multi media content production much easier, through the
visual tools offered by the block editor, text content production can
sometimes feel impaired.

A distraction free mode (the term became somewhat of an industry standard)
aims to remove visual clutter when the focus is on text based content
production.

How?

The PR builds on the reduce interface prefference. Until now the
preference, when toggled on, would only hide some of the toolbar icons and
a few other non-essential UI items. With this PR the prefference will have
a more drastic effect, turning the UI into a blank page:

  • hides the top toolbar, makes it appear on hover over its normal occupied
    area
  • removes many top toolbar buttons
  • automatically closes any open sidebars
  • hides the insertion point indicator
  • hides the block toolbar

Known issues

  • There is a mystery bug that makes the page scroll to top when
    distraction free mode is on and the ESC key is pressed
  • There are some failing tests
  • Move focus from the options menu to somewhere useful (like the options toggle)
  • On small viewports the setting should have no effect, but it does
    break some things
    • The mobile viewport size hides all the "View" group of options in the Editor Options Menu
  • The copy is still unsettled (distraction free, toggle interface ...)
  • The hasReducedUi props need to be refactored into isDistractionFree
  • Shift+Tab or Alt+F10 should show the toolbar
  • The system notifications can't be closed because toolbar is on top
  • The chrome should be animated off screen not simply disappear.
  • Snackbar notifications should adjust their bottom position

Testing Instructions

  1. Create a new post
  2. Go to top bar > tools menu and click "Toggle interface"
  3. Observe serenity

Screenshots or screencast

distraction-free-motion.mp4

@draganescu draganescu self-assigned this Jun 15, 2022
@draganescu draganescu added [Type] Enhancement A suggestion for improvement. General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback. [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... Needs Technical Feedback Needs testing from a developer perspective. Needs Accessibility Feedback Need input from accessibility labels Jun 15, 2022
@github-actions
Copy link

github-actions bot commented Jun 15, 2022

Size Change: +2.22 kB (0%)

Total Size: 1.27 MB

Filename Size Change
build/block-editor/index.min.js 167 kB +858 B (+1%)
build/block-library/blocks/archives/style-rtl.css 90 B +25 B (+38%) 🚨
build/block-library/blocks/archives/style.css 90 B +25 B (+38%) 🚨
build/block-library/index.min.js 192 kB +136 B (0%)
build/block-library/style-rtl.css 12.3 kB +2 B (0%)
build/block-library/style.css 12.3 kB +3 B (0%)
build/edit-navigation/index.min.js 16.1 kB +130 B (+1%)
build/edit-post/index.min.js 31.8 kB +671 B (+2%)
build/edit-post/style-rtl.css 7.13 kB +165 B (+2%)
build/edit-post/style.css 7.13 kB +158 B (+2%)
build/edit-site/index.min.js 57.6 kB -300 B (-1%)
build/edit-widgets/index.min.js 16.7 kB +144 B (+1%)
build/editor/index.min.js 41.6 kB +2 B (0%)
build/keycodes/index.min.js 1.83 kB +2 B (0%)
build/preferences/index.min.js 1.33 kB +33 B (+3%)
build/server-side-render/index.min.js 1.77 kB +162 B (+10%) ⚠️
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 7.09 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 15.4 kB
build/block-editor/style.css 15.4 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 482 B
build/block-library/blocks/button/editor.css 482 B
build/block-library/blocks/button/style-rtl.css 523 B
build/block-library/blocks/button/style.css 523 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 187 B
build/block-library/blocks/comment-template/style.css 185 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 834 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 630 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.55 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 394 B
build/block-library/blocks/group/editor.css 394 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 884 B
build/block-library/blocks/image/editor.css 882 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.02 kB
build/block-library/blocks/navigation/editor.css 2.03 kB
build/block-library/blocks/navigation/style-rtl.css 2.17 kB
build/block-library/blocks/navigation/style.css 2.16 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 317 B
build/block-library/blocks/paragraph/editor.css 317 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 493 B
build/block-library/blocks/post-comments-form/style.css 493 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 315 B
build/block-library/blocks/post-featured-image/style.css 315 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 282 B
build/block-library/blocks/query-pagination/style.css 278 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 488 B
build/block-library/blocks/site-logo/editor.css 488 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 190 B
build/block-library/blocks/table/theme.css 190 B
build/block-library/blocks/tag-cloud/style-rtl.css 239 B
build/block-library/blocks/tag-cloud/style.css 239 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 691 B
build/block-library/blocks/video/editor.css 694 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.02 kB
build/block-library/common.css 1.02 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.2 kB
build/block-library/editor.css 11.2 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 719 B
build/block-library/theme.css 722 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 49.8 kB
build/components/index.min.js 202 kB
build/components/style-rtl.css 11.2 kB
build/components/style.css 11.2 kB
build/compose/index.min.js 12.5 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.08 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.7 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 4 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-site/style-rtl.css 8.36 kB
build/edit-site/style.css 8.35 kB
build/edit-widgets/style-rtl.css 4.34 kB
build/edit-widgets/style.css 4.34 kB
build/editor/style-rtl.css 3.62 kB
build/editor/style.css 3.61 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/experiments/index.min.js 868 B
build/format-library/index.min.js 6.95 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 963 B
build/nux/index.min.js 2.06 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 1.58 kB
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/shortcode/index.min.js 1.53 kB
build/style-engine/index.min.js 1.46 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@draganescu draganescu marked this pull request as ready for review June 15, 2022 10:34
@jameskoster jameskoster requested a review from a team June 15, 2022 12:18
@jameskoster
Copy link
Contributor

jameskoster commented Jun 15, 2022

This looks like a good start to me. Since it's one part of some other "interface personalisation" ideas, maybe we should open a tracking issue that encapsulates everything?

In terms of this PR specifically, I don't think that we necessarily need to disable other view options when the interface is hidden. It doesn't seem harmful to allow folks to toggle the top toolbar option for example. It would also be good if the top toolbar remained visible when the ellipsis menu is open.

Edit: It would be good to restore the animations from #38928 (comment) as well, and refine. The notion of elements moving in and out of the viewport (rather than simply fading off the canvas) will feel more cohesive when we consider other views like the zoomed out one, and browse mode.

@draganescu
Copy link
Contributor Author

I think it would be good to land this as an infrastructure base to build on. In the exploration PR there was a lot of back and forth to this point and even now the size of the change is considerable. So I wonder what is the minimum lacking here to land this and then start refining?

@alexstine alexstine self-requested a review June 15, 2022 14:15
@alexstine
Copy link
Contributor

I'd like to check this out for at least basic A11Y. I'll be around shortly.

@alexstine

This comment was marked as resolved.

@javierarce

This comment was marked as resolved.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jul 14, 2022

It looks like a very good start!
Thank you Andrei!

One thing. What about adding an X in the top left corner to signal an escape out of this mode?
As a quick way instead of clicking the 3 dots drop down menu and exit out of the distraction free mode.

Mockup

Distraction-Free-X

@javierarce

This comment was marked as resolved.

@javierarce

This comment was marked as resolved.

draganescu and others added 2 commits October 10, 2022 13:31
Use the store directly instead.

Co-authored-by: Daniel Richards <[email protected]>
@draganescu draganescu merged commit 1e2d8b0 into trunk Oct 10, 2022
@draganescu draganescu deleted the add/distraction-free-mode branch October 10, 2022 16:30
@github-actions github-actions bot added this to the Gutenberg 14.4 milestone Oct 10, 2022
@draganescu
Copy link
Contributor Author

draganescu commented Oct 10, 2022

I have merged this but it is not prime time ready yet. The PR:

  • silently deprecates the reduce UI preference - it has no effect anymore, if it's set
  • introduces a new preference for Distraction Free Mode

It still requires a few updates to be at a level on par with other Gutenberg UX:

  • Add a modal welcome for the feature explaining what happened and offering a revert action - this would also solve the focus loss in a better way.
  • The inserter should be available via the top toolbar (exploring an Alfred like UI)
  • The deprecated reduced UI option should be removed from the storage of users who have it
  • Attempt to reduce the number of items in the edit menu (possibly via a segmented control filtering them)

Worst case scenario this could be reverted to an experiment.

@alexstine
Copy link
Contributor

Also, since the menu option is a checkbox, the menu should not close after enabling from the Options menu. It is considered bad UX to have one control in a menu act differently than all the others. I'm not really interested as to why this couldn't get done as long as it gets done in the future.

Thanks.

@talldan
Copy link
Contributor

talldan commented Oct 11, 2022

It's a very nice feature, well done on getting it to this stage.

Another thing around the options menu (and also other dropdowns for consistency), It might be worth looking at keeping the top bar visible when focus is in the options menu dropdown, as the way it animates can lead to users clicking on the wrong thing:

Kapture.2022-10-11.at.11.14.49.mp4

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

Nice work here, I left some remarks

@@ -23,13 +24,12 @@ import MainDashboardButton from './main-dashboard-button';
import { store as editPostStore } from '../../store';
import TemplateTitle from './template-title';

function Header( { setEntitiesSavedStatesCallback } ) {
function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this a new prop instead of just using useSelect to retrieve it?

@@ -195,10 +201,14 @@ function wrapperSelector( select ) {
?.__experimentalCaptureToolbars
);

const settings = getSettings();
Copy link
Contributor

Choose a reason for hiding this comment

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

getSettings called here doesn't cause a re-render if the settings change, it should probably be called inside useSelect instead to avoid bugs.

@@ -36,7 +36,7 @@ const MoreMenu = ( { showIconLabels } ) => {
scope="core/edit-post"
/>
) }
<WritingMenu />
<WritingMenu onClose={ onClose } />
Copy link
Contributor

Choose a reason for hiding this comment

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

How is this change related to this PR?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the catch up review! 🙏🏻 This change - which I'll probably undo, idk - is to close the writing menu when entering this mode, because the top toolbar hides and this menu remains orphan in the UI.

@@ -20,6 +20,8 @@ export default function PreferenceToggleMenuItem( {
messageActivated,
messageDeactivated,
shortcut,
toggleHandler = () => null,
Copy link
Contributor

Choose a reason for hiding this comment

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

maybe onToggle is a better name here?

<PreferenceToggleMenuItem
scope="core/edit-post"
name="distractionFree"
toggleHandler={ toggleDistractionFree }
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do we need this handler at all? I thought the PreferenceToggleMenuItem component already toggled the preference automatically?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Because we need other stuff to happen (e.g. close sidebars) not only to toggle.

Copy link
Contributor

Choose a reason for hiding this comment

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

But why is this different than the other preference toggles above? the sidebars should close when the preference is set anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes. I did not alter the rendering of everything distraction free should close so that they render conditionally on the preference. Instead I created this cleanup handler. To have:

  • the top toolbar disappear
  • the inserter close
  • the list view close
  • the general sidebar close
  • the 1st block focused

... when this preference is toggled on I'd have to pepper with checks for the isDistractionFree in all these places (the last one would probably still need a special handler).

I think the answer to:

why is this different than the other preference toggles above?

is that distraction free has effects across the UI along the lines of availability not only behavior.

@draganescu
Copy link
Contributor Author

Hi @talldan and @alexstine I'll be looking into solving the problem described by Alex via the idea from Dan, to keep the header toolbar "visible" when the focus is in the writing menu. If I can do that, then I don't need to close the writing menu, hence solve Alex's problem too.

@draganescu
Copy link
Contributor Author

draganescu commented May 30, 2023

The gist is this:

  • we animate the header with a motion component
  • the motion component has states defined for hover
  • to achieve the three animations we nest motion components (header, site hub and tools on the right)
  • to allow motion to kick in I have to render it properly setup - not sure why
  • so I render a motion component header when distraction free is on and a normal div when distraction free is off
  • this unmouts and mounts the whole header hence closing the more menu

I have tried to solve this but have not had any success so far with convincing motion to kick in properly without rerendering the whole header component. I'll keep trying.

PS I know @alexstine said " I'm not really interested as to why this couldn't get done as long as it gets done in the future" - but this is the future and I can't do it :))) there has to be a way, so far I am thinking of just trying with CSS again but framer motion does the easing so much better.

@alexstine
Copy link
Contributor

@draganescu As a hot fix, can you simply add some type of useEffect hook to listen for the re-render and then focus? Right now, focus is completely lost. If we can't fix the unmounting right now, at least we can fix focus after the mounting happens.

@draganescu
Copy link
Contributor Author

draganescu commented Jun 5, 2023

Right now, focus is completely lost.

How come, in the code we manually focus the 1st block in the editor specifically to not lose focus?

Opening the more menu dropdown and focus one specific menu item after the header is remounted seems quite convoluted. There has to be a way to avoid the need to re-mounting.

@alexstine
Copy link
Contributor

@draganescu To replicate:

  1. Open Firefox.
  2. Edit a post or page.
  3. Select Options and then Distraction free.
  4. Notice how the first block is gains focus.
  5. Select Options and then Distraction free again.
  6. Notice how the whole editor has focus loss.
Log
document.activeElement
Log
 <body class="wp-admin wp-core-ui js i…support svg sticky-menu">

It seems this only happens when distraction free is disabled so my mistake if this wasn't clear.

Thanks.

@talldan
Copy link
Contributor

talldan commented Jun 19, 2023

@draganescu @alexstine I've put a fix together for the focus loss issue in this PR - #51627.

It seems to resolve the issue in the majority of cases, though I am still seeing a focus loss on the rare occasion.

@draganescu
Copy link
Contributor Author

I've updated and approved that PR 👏🏻

@alexstine
Copy link
Contributor

Awesome, having a look now. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... General Interface Parts of the UI which don't fall neatly under other labels. Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. Needs Technical Feedback Needs testing from a developer perspective. Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.