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

Add "Show block breadcrumbs" preference #28133

Merged
merged 13 commits into from
Jan 20, 2021

Conversation

david-szabo97
Copy link
Member

@david-szabo97 david-szabo97 commented Jan 12, 2021

Description

Resolves #27515

  • Block breadcrumbs aren't removed anymore when reduced UI is enabled
  • Add an option to the preferences to enable/disable block breadcrumbs
  • By default, block breadcrumbs are toggled on

How has this been tested?

  1. Open post editor
  2. Make sure block breadcrumbs are displayed by default
  3. Open more menu
  4. Click preferences
  5. Disable "Display block breadcrumbs"
  6. Close preferences modal
  7. Make sure block breadcrumbs aren't displayed

Screenshots

Types of changes

New feature

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.

@david-szabo97 david-szabo97 self-assigned this Jan 12, 2021
@github-actions
Copy link

github-actions bot commented Jan 12, 2021

Size Change: +1.75 kB (0%)

Total Size: 1.28 MB

Filename Size Change
build/a11y/index.js 1.14 kB -1 B (0%)
build/annotations/index.js 3.8 kB -3 B (0%)
build/api-fetch/index.js 3.42 kB +2 B (0%)
build/autop/index.js 2.84 kB +6 B (0%)
build/block-directory/index.js 9.08 kB +48 B (+1%)
build/block-editor/index.js 122 kB +671 B (+1%)
build/block-editor/style-rtl.css 11.9 kB +229 B (+2%)
build/block-editor/style.css 11.9 kB +231 B (+2%)
build/block-library/blocks/cover/editor-rtl.css 524 B +16 B (+3%)
build/block-library/blocks/cover/editor.css 522 B +16 B (+3%)
build/block-library/blocks/cover/style-rtl.css 1.3 kB -28 B (-2%)
build/block-library/blocks/cover/style.css 1.3 kB -26 B (-2%)
build/block-library/blocks/gallery/editor-rtl.css 783 B +34 B (+5%) 🔍
build/block-library/blocks/gallery/editor.css 783 B +33 B (+4%)
build/block-library/blocks/navigation/style-rtl.css 289 B +15 B (+5%) 🔍
build/block-library/blocks/navigation/style.css 289 B +15 B (+5%) 🔍
build/block-library/blocks/paragraph/style-rtl.css 390 B +39 B (+11%) ⚠️
build/block-library/blocks/paragraph/style.css 391 B +39 B (+11%) ⚠️
build/block-library/blocks/spacer/editor-rtl.css 416 B +25 B (+6%) 🔍
build/block-library/blocks/spacer/editor.css 416 B +25 B (+6%) 🔍
build/block-library/editor-rtl.css 8.97 kB +39 B (0%)
build/block-library/editor.css 8.97 kB +39 B (0%)
build/block-library/index.js 142 kB +313 B (0%)
build/block-library/style-rtl.css 8.52 kB -2 B (0%)
build/block-library/style.css 8.53 kB -1 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +4 B (0%)
build/blocks/index.js 48.1 kB +2 B (0%)
build/components/index.js 173 kB +130 B (0%)
build/components/style-rtl.css 15.5 kB +3 B (0%)
build/components/style.css 15.5 kB +2 B (0%)
build/compose/index.js 11.3 kB +9 B (0%)
build/core-data/index.js 15.2 kB +24 B (0%)
build/data/index.js 8.99 kB +15 B (0%)
build/date/index.js 31.8 kB +2 B (0%)
build/deprecated/index.js 769 B +1 B (0%)
build/dom/index.js 4.95 kB -1 B (0%)
build/edit-navigation/index.js 11.2 kB +10 B (0%)
build/edit-post/index.js 306 kB +125 B (0%)
build/edit-post/style-rtl.css 6.51 kB -127 B (-2%)
build/edit-post/style.css 6.5 kB -124 B (-2%)
build/edit-site/index.js 24.2 kB +204 B (+1%)
build/edit-site/style-rtl.css 4.01 kB -33 B (-1%)
build/edit-site/style.css 4.01 kB -30 B (-1%)
build/edit-widgets/index.js 23.6 kB +22 B (0%)
build/edit-widgets/style-rtl.css 3.17 kB -48 B (-1%)
build/edit-widgets/style.css 3.18 kB -45 B (-1%)
build/editor/editor-styles-rtl.css 543 B +67 B (+14%) ⚠️
build/editor/editor-styles.css 545 B +67 B (+14%) ⚠️
build/editor/index.js 41.9 kB -362 B (-1%)
build/format-library/index.js 6.76 kB +12 B (0%)
build/i18n/index.js 3.57 kB +1 B (0%)
build/is-shallow-equal/index.js 697 B -1 B (0%)
build/keyboard-shortcuts/index.js 2.54 kB +4 B (0%)
build/list-reusable-blocks/index.js 3.15 kB +3 B (0%)
build/media-utils/index.js 5.32 kB +6 B (0%)
build/notices/index.js 1.85 kB -2 B (0%)
build/nux/index.js 3.42 kB +1 B (0%)
build/plugins/index.js 2.54 kB +1 B (0%)
build/priority-queue/index.js 790 B +1 B (0%)
build/redux-routine/index.js 2.84 kB -1 B (0%)
build/reusable-blocks/index.js 2.92 kB +8 B (0%)
build/rich-text/index.js 13.5 kB +25 B (0%)
build/url/index.js 3.02 kB +4 B (0%)
build/viewport/index.js 1.86 kB +2 B (0%)
build/warning/index.js 1.14 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 1.01 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 196 B 0 B
build/block-library/blocks/archives/editor.css 196 B 0 B
build/block-library/blocks/audio/editor-rtl.css 194 B 0 B
build/block-library/blocks/audio/editor.css 194 B 0 B
build/block-library/blocks/audio/style-rtl.css 225 B 0 B
build/block-library/blocks/audio/style.css 225 B 0 B
build/block-library/blocks/block/editor-rtl.css 283 B 0 B
build/block-library/blocks/block/editor.css 283 B 0 B
build/block-library/blocks/button/editor-rtl.css 576 B 0 B
build/block-library/blocks/button/editor.css 577 B 0 B
build/block-library/blocks/button/style-rtl.css 552 B 0 B
build/block-library/blocks/button/style.css 552 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 345 B 0 B
build/block-library/blocks/buttons/editor.css 346 B 0 B
build/block-library/blocks/buttons/style-rtl.css 419 B 0 B
build/block-library/blocks/buttons/style.css 419 B 0 B
build/block-library/blocks/calendar/style-rtl.css 319 B 0 B
build/block-library/blocks/calendar/style.css 319 B 0 B
build/block-library/blocks/categories/editor-rtl.css 210 B 0 B
build/block-library/blocks/categories/editor.css 209 B 0 B
build/block-library/blocks/categories/style-rtl.css 208 B 0 B
build/block-library/blocks/categories/style.css 208 B 0 B
build/block-library/blocks/code/style-rtl.css 216 B 0 B
build/block-library/blocks/code/style.css 216 B 0 B
build/block-library/blocks/columns/editor-rtl.css 300 B 0 B
build/block-library/blocks/columns/editor.css 299 B 0 B
build/block-library/blocks/columns/style-rtl.css 529 B 0 B
build/block-library/blocks/columns/style.css 528 B 0 B
build/block-library/blocks/embed/editor-rtl.css 594 B 0 B
build/block-library/blocks/embed/editor.css 595 B 0 B
build/block-library/blocks/embed/style-rtl.css 489 B 0 B
build/block-library/blocks/embed/style.css 489 B 0 B
build/block-library/blocks/file/editor-rtl.css 314 B 0 B
build/block-library/blocks/file/editor.css 313 B 0 B
build/block-library/blocks/file/style-rtl.css 352 B 0 B
build/block-library/blocks/file/style.css 352 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.55 kB 0 B
build/block-library/blocks/freeform/editor.css 2.55 kB 0 B
build/block-library/blocks/gallery/style-rtl.css 1.17 kB 0 B
build/block-library/blocks/gallery/style.css 1.17 kB 0 B
build/block-library/blocks/group/editor-rtl.css 433 B 0 B
build/block-library/blocks/group/editor.css 432 B 0 B
build/block-library/blocks/group/style-rtl.css 190 B 0 B
build/block-library/blocks/group/style.css 190 B 0 B
build/block-library/blocks/heading/editor-rtl.css 248 B 0 B
build/block-library/blocks/heading/editor.css 248 B 0 B
build/block-library/blocks/heading/style-rtl.css 212 B 0 B
build/block-library/blocks/heading/style.css 212 B 0 B
build/block-library/blocks/html/editor-rtl.css 384 B 0 B
build/block-library/blocks/html/editor.css 385 B 0 B
build/block-library/blocks/image/editor-rtl.css 801 B 0 B
build/block-library/blocks/image/editor.css 800 B 0 B
build/block-library/blocks/image/style-rtl.css 569 B 0 B
build/block-library/blocks/image/style.css 570 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 277 B 0 B
build/block-library/blocks/latest-comments/editor.css 275 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 382 B 0 B
build/block-library/blocks/latest-comments/style.css 382 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 254 B 0 B
build/block-library/blocks/latest-posts/editor.css 254 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 634 B 0 B
build/block-library/blocks/latest-posts/style.css 634 B 0 B
build/block-library/blocks/list/editor-rtl.css 203 B 0 B
build/block-library/blocks/list/editor.css 203 B 0 B
build/block-library/blocks/list/style-rtl.css 201 B 0 B
build/block-library/blocks/list/style.css 201 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 311 B 0 B
build/block-library/blocks/media-text/editor.css 311 B 0 B
build/block-library/blocks/media-text/style-rtl.css 642 B 0 B
build/block-library/blocks/media-text/style.css 640 B 0 B
build/block-library/blocks/more/editor-rtl.css 545 B 0 B
build/block-library/blocks/more/editor.css 545 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 503 B 0 B
build/block-library/blocks/navigation-link/editor.css 504 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 805 B 0 B
build/block-library/blocks/navigation-link/style.css 803 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.38 kB 0 B
build/block-library/blocks/navigation/editor.css 1.38 kB 0 B
build/block-library/blocks/nextpage/editor-rtl.css 507 B 0 B
build/block-library/blocks/nextpage/editor.css 507 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B 0 B
build/block-library/blocks/paragraph/editor.css 236 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 329 B 0 B
build/block-library/blocks/post-author/editor.css 329 B 0 B
build/block-library/blocks/post-author/style-rtl.css 303 B 0 B
build/block-library/blocks/post-author/style.css 303 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 358 B 0 B
build/block-library/blocks/post-comments-form/style.css 358 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 262 B 0 B
build/block-library/blocks/post-content/editor.css 262 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 206 B 0 B
build/block-library/blocks/post-excerpt/editor.css 206 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 453 B 0 B
build/block-library/blocks/post-featured-image/editor.css 453 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 223 B 0 B
build/block-library/blocks/post-featured-image/style.css 223 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 193 B 0 B
build/block-library/blocks/preformatted/style.css 193 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 304 B 0 B
build/block-library/blocks/pullquote/editor.css 304 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 428 B 0 B
build/block-library/blocks/pullquote/style.css 428 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 217 B 0 B
build/block-library/blocks/query-loop/editor.css 216 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 427 B 0 B
build/block-library/blocks/query-loop/style.css 429 B 0 B
build/block-library/blocks/query/editor-rtl.css 279 B 0 B
build/block-library/blocks/query/editor.css 279 B 0 B
build/block-library/blocks/quote/editor-rtl.css 195 B 0 B
build/block-library/blocks/quote/editor.css 195 B 0 B
build/block-library/blocks/quote/style-rtl.css 284 B 0 B
build/block-library/blocks/quote/style.css 285 B 0 B
build/block-library/blocks/rss/editor-rtl.css 307 B 0 B
build/block-library/blocks/rss/editor.css 309 B 0 B
build/block-library/blocks/rss/style-rtl.css 394 B 0 B
build/block-library/blocks/rss/style.css 393 B 0 B
build/block-library/blocks/search/editor-rtl.css 285 B 0 B
build/block-library/blocks/search/editor.css 285 B 0 B
build/block-library/blocks/search/style-rtl.css 454 B 0 B
build/block-library/blocks/search/style.css 456 B 0 B
build/block-library/blocks/separator/editor-rtl.css 229 B 0 B
build/block-library/blocks/separator/editor.css 229 B 0 B
build/block-library/blocks/separator/style-rtl.css 352 B 0 B
build/block-library/blocks/separator/style.css 352 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 603 B 0 B
build/block-library/blocks/shortcode/editor.css 603 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 321 B 0 B
build/block-library/blocks/site-logo/editor.css 321 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 238 B 0 B
build/block-library/blocks/site-logo/style.css 238 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 283 B 0 B
build/block-library/blocks/social-link/editor.css 283 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 811 B 0 B
build/block-library/blocks/social-links/editor.css 810 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.44 kB 0 B
build/block-library/blocks/social-links/style.css 1.44 kB 0 B
build/block-library/blocks/spacer/style-rtl.css 184 B 0 B
build/block-library/blocks/spacer/style.css 184 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 223 B 0 B
build/block-library/blocks/subhead/editor.css 223 B 0 B
build/block-library/blocks/subhead/style-rtl.css 210 B 0 B
build/block-library/blocks/subhead/style.css 210 B 0 B
build/block-library/blocks/table/editor-rtl.css 593 B 0 B
build/block-library/blocks/table/editor.css 593 B 0 B
build/block-library/blocks/table/style-rtl.css 501 B 0 B
build/block-library/blocks/table/style.css 501 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 237 B 0 B
build/block-library/blocks/tag-cloud/editor.css 235 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 221 B 0 B
build/block-library/blocks/tag-cloud/style.css 221 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 714 B 0 B
build/block-library/blocks/template-part/editor.css 714 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 220 B 0 B
build/block-library/blocks/text-columns/editor.css 220 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 283 B 0 B
build/block-library/blocks/text-columns/style.css 283 B 0 B
build/block-library/blocks/verse/editor-rtl.css 194 B 0 B
build/block-library/blocks/verse/editor.css 194 B 0 B
build/block-library/blocks/verse/style-rtl.css 215 B 0 B
build/block-library/blocks/verse/style.css 215 B 0 B
build/block-library/blocks/video/editor-rtl.css 617 B 0 B
build/block-library/blocks/video/editor.css 617 B 0 B
build/block-library/blocks/video/style-rtl.css 303 B 0 B
build/block-library/blocks/video/style.css 304 B 0 B
build/block-library/common-rtl.css 1.01 kB 0 B
build/block-library/common.css 1.01 kB 0 B
build/block-library/theme-rtl.css 860 B 0 B
build/block-library/theme.css 860 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/data-controls/index.js 829 B 0 B
build/dom-ready/index.js 571 B 0 B
build/edit-navigation/style-rtl.css 938 B 0 B
build/edit-navigation/style.css 944 B 0 B
build/editor/style-rtl.css 3.89 kB 0 B
build/editor/style.css 3.89 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 620 B 0 B
build/format-library/style.css 621 B 0 B
build/hooks/index.js 2.27 kB 0 B
build/html-entities/index.js 623 B 0 B
build/keycodes/index.js 1.94 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/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/primitives/index.js 1.43 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/wordcount/index.js 1.22 kB 0 B

compressed-size-action

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

This seems to be working well.

My main critique is having these disabled by default. Some users do definitely rely on this out of habit, and loading the editor after an update to fumble around to figure out how to turn it back on may not be the best experience. Beyond that, there has been suggestions for new user tours to point out the block breadcrumbs. Considering all of that I personally think it makes the most sense to have these breadcrumbs enabled by default.

Comment on lines 129 to 130
hasReducedUI: select( editPostStore ).isFeatureActive(
'reducedUI'
Copy link
Contributor

Choose a reason for hiding this comment

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

I am wondering why we are removing this selector, and if we should still hide the footer if this reducedUI setting is true ? Regardless of whether or not the breadcrumbs preference is toggled, reducedUI should still probably hide the footer. Perhaps we should also only allow/show toggling breadcrumbs preference if we are not in the state of hasReducdedUI. 🤔

All that said, I don't have much knowledge about how/when hasReducedUI is used.

Copy link
Member Author

@david-szabo97 david-szabo97 Jan 13, 2021

Choose a reason for hiding this comment

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

All that said, I don't have much knowledge about how/when hasReducedUI is used.

Me neither. I prefer "block breadcrumbs" to be toggled separately. It's more flexible. If enabling "reduced UI" would disable the breadcrumbs as well, then that would lead to confusion IMO.

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo Jan 13, 2021

Choose a reason for hiding this comment

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

More to the point - it looks like reducedUI used to hide the footer. After these changes it no longer will. Im assuming we still want reducedUI to have the same behavior regardless of this change?

I guess the possible states could be:

  • before this change - reducedUI hides footer regardless of breadcrumb
  • combination of reducedUI and ! blockBreadcrumb hides footer. This would require setting blockBreadcrumb false when loading the editor with the reducedUI setting to preserve the same experience for people using that setting (i.e. otherwise the footer would randomly start showing up for people running reducedUI since it sounds like we are enabling the breadcrumb setting by default? ).
  • current state of PR - blockBreadcrumb setting itself hides/shows the footer regardless of reducedUI

The first seems the most safe since that follows the previous behavior. The third (current state) seems risky to mess up the intentions of reducedUI. The middle option is more of a compromise between the two.

I prefer "block breadcrumbs" to be toggled separately. It's more flexible. If enabling "reduced UI" would disable the breadcrumbs as well, then that would lead to confusion IMO.

True. Im getting at IF we are going with the "before this change" behavior noted above, then going to toggle the block breadcrumb with the footer still hidden wouldn't do anything since its in the reduced UI state and the footer is hidden. So my suggestion then would be to hide the breadcrumb toggle while under the state of reducedUI, not to necessarily change its setting/preference.

Copy link
Member

Choose a reason for hiding this comment

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

More to the point - it looks like reducedUI used to hide the footer. After these changes it no longer will. Im assuming we still want reducedUI to have the same behavior regardless of this change?

To add to this, given that we also need to show breadcrumbs by default for the time being, this will cause them to appear after the plugin update for users that were not seeing them before (if they had reduced UI enabled)?

Copy link
Member Author

Choose a reason for hiding this comment

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

To add to this, given that we also need to show breadcrumbs by default for the time being, this will cause them to appear after the plugin update for users that were not seeing them before (if they had reduced UI enabled)?

Correct. Breadcrumbs would be visible for people who had reduced UI enabled.

The first seems the most safe since that follows the previous behavior. The third (current state) seems risky to mess up the intentions of reducedUI. The middle option is more of a compromise between the two.

That's a good point about making sure reducedUI has the same behavior. I'll push a commit to re-add reducedUI check.

@shaunandrews
Copy link
Contributor

The setting does what is should. Nice work.

While I think the breadcrumbs are mostly ignored (they're hard to notice), they are currently the best way to navigate update the document. Until we have a better way (like #27395), its probably best to keep the default to showing the breadcrumbs. We can always change the default in another PR.

Comment on lines 129 to 130
hasReducedUI: select( editPostStore ).isFeatureActive(
'reducedUI'
Copy link
Member

Choose a reason for hiding this comment

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

More to the point - it looks like reducedUI used to hide the footer. After these changes it no longer will. Im assuming we still want reducedUI to have the same behavior regardless of this change?

To add to this, given that we also need to show breadcrumbs by default for the time being, this will cause them to appear after the plugin update for users that were not seeing them before (if they had reduced UI enabled)?

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

This tests well and looks good to me!

Minor question about a possible redundancy, as well as another suggestion to consider. But all in all this seems in a good working state!

packages/edit-post/src/components/layout/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

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

Changes look good and still test well. Re-approving! 😁

@david-szabo97 david-szabo97 merged commit e9c7561 into master Jan 20, 2021
@david-szabo97 david-szabo97 deleted the add/show-block-breadcrumbs-preference branch January 20, 2021 09:17
@github-actions github-actions bot added this to the Gutenberg 9.9 milestone Jan 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add editor setting to toggle Breadcrumb UI on/off.
5 participants