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

Update the design of the command center #49681

Merged
merged 12 commits into from
Apr 18, 2023
Merged

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 10, 2023

Related to #48457
Alternative to #49658

What?

This PR updates the design of the command center per @jasmussen's mockups:

  • Tweaks the radius, borders...
  • Removes "groups" between the different sections (posts, pages, templates...)
  • Add icons to each command
  • Results only available when the input is not empty

Note I'm seeing a weird design glitch on Safari when I search quickly. Not sure exactly where it comes from.

Testing Instructions

1- Open the experiments page
2- Enable the command center
3- Navigate to the site editor
4- Hit cmd+k and try using the command center.

@youknowriad youknowriad added [Type] Enhancement A suggestion for improvement. General Interface Parts of the UI which don't fall neatly under other labels. labels Apr 10, 2023
@youknowriad youknowriad self-assigned this Apr 10, 2023
@github-actions
Copy link

github-actions bot commented Apr 10, 2023

Size Change: -865 B (0%)

Total Size: 1.37 MB

Filename Size Change
build/block-editor/index.min.js 203 kB -2 B (0%)
build/block-editor/style-rtl.css 14.6 kB +23 B (0%)
build/block-editor/style.css 14.6 kB +23 B (0%)
build/block-library/blocks/html/editor-rtl.css 340 B +8 B (+2%)
build/block-library/blocks/html/editor.css 341 B +8 B (+2%)
build/block-library/blocks/shortcode/editor-rtl.css 329 B -145 B (-31%) 🎉
build/block-library/blocks/shortcode/editor.css 329 B -145 B (-31%) 🎉
build/block-library/editor-rtl.css 11.6 kB -83 B (-1%)
build/block-library/editor.css 11.6 kB -85 B (-1%)
build/block-library/index.min.js 204 kB -47 B (0%)
build/commands/index.min.js 14.8 kB +64 B (0%)
build/commands/style-rtl.css 789 B -309 B (-28%) 🎉
build/commands/style.css 786 B -306 B (-28%) 🎉
build/components/index.min.js 208 kB +26 B (0%)
build/core-data/index.min.js 16.3 kB +3 B (0%)
build/data-controls/index.min.js 718 B +55 B (+8%) 🔍
build/dom/index.min.js 4.76 kB +41 B (+1%)
build/edit-site/index.min.js 64.3 kB +70 B (0%)
build/edit-site/style-rtl.css 10.1 kB -33 B (0%)
build/edit-site/style.css 10.1 kB -34 B (0%)
build/editor/index.min.js 45.9 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 483 B
build/block-directory/index.min.js 7.2 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.11 kB
build/block-editor/content.css 4.1 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 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 138 B
build/block-library/blocks/audio/theme.css 138 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 91 B
build/block-library/blocks/avatar/style.css 91 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 628 B
build/block-library/blocks/button/style.css 627 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 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 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 409 B
build/block-library/blocks/columns/style.css 409 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 199 B
build/block-library/blocks/comment-template/style.css 198 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 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 649 B
build/block-library/blocks/cover/editor.css 651 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details-summary/editor-rtl.css 65 B
build/block-library/blocks/details-summary/editor.css 65 B
build/block-library/blocks/details-summary/style-rtl.css 61 B
build/block-library/blocks/details-summary/style.css 61 B
build/block-library/blocks/details/style-rtl.css 54 B
build/block-library/blocks/details/style.css 54 B
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 138 B
build/block-library/blocks/embed/theme.css 138 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 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 353 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 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 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/image/editor-rtl.css 830 B
build/block-library/blocks/image/editor.css 829 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 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 478 B
build/block-library/blocks/latest-posts/style.css 478 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.21 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 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 401 B
build/block-library/blocks/page-list/editor.css 401 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 174 B
build/block-library/blocks/paragraph/editor.css 174 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 322 B
build/block-library/blocks/post-featured-image/style.css 322 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 281 B
build/block-library/blocks/post-template/style.css 281 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-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 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 335 B
build/block-library/blocks/pullquote/style.css 335 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 288 B
build/block-library/blocks/query-pagination/style.css 284 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 463 B
build/block-library/blocks/query/editor.css 463 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 149 B
build/block-library/blocks/rss/editor.css 149 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 408 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/site-logo/editor-rtl.css 489 B
build/block-library/blocks/site-logo/editor.css 489 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 359 B
build/block-library/blocks/spacer/editor.css 359 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 404 B
build/block-library/blocks/template-part/editor.css 404 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.12 kB
build/block-library/common.css 1.12 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
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/style-rtl.css 12.8 kB
build/block-library/style.css 12.8 kB
build/block-library/theme-rtl.css 698 B
build/block-library/theme.css 703 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 51.1 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.4 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data/index.min.js 8.68 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35 kB
build/edit-post/style-rtl.css 7.59 kB
build/edit-post/style.css 7.58 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.56 kB
build/edit-widgets/style.css 4.56 kB
build/editor/style-rtl.css 3.49 kB
build/editor/style.css 3.48 kB
build/element/index.min.js 4.95 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.26 kB
build/format-library/style-rtl.css 557 B
build/format-library/style.css 556 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.94 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.99 kB
build/notices/index.min.js 977 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 942 B
build/react-i18n/index.min.js 702 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.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.55 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.74 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.3 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Thanks for taking a stab!

I realize this keeps coming up for me, but I must be doing something wrong with my environment, I'm not seeing any difference in this branch:

Screenshot 2023-04-10 at 12 29 39

Tweaks the radius

A note that this may be best done separately, as that radius could/should be the new default radius for modals, so not just unique to this one:

Screenshot 2023-04-10 at 12 31 16

@youknowriad
Copy link
Contributor Author

youknowriad commented Apr 10, 2023

@jasmussen yeah that's not correct, would you mind trying to restart the build?

@jasmussen
Copy link
Contributor

For some reason, that worked, though I'm sure I tried this before. GIF showing the new:

testing

A few small notes. The gray highlight I in the mockup, I have from the URL dialog:

Screenshot 2023-04-10 at 12 49 53

No strong opinion on whether that's gray or blue, but would prefer we unify across those.

A small detail, I search for "Con" and it finds first "Comments". It's fine that it finds that through the fuzzy stuff, but as you can see in the GIF, it keeps highlighting that. I feel like it should always highlight the top item, at least until you move the arrow keys. What do you think?

The bold highlight looks great, nice.

The icon is 16x16, it should be 24x24:

Screenshot 2023-04-10 at 12 52 31

The search field font is 16px in this branch, I bumped it all the way to 20px in my mockup. This is not a strong opinion, but it makes it feel more substantial to me. I'd love a broader design opinion on this.

Finally, there's a question of what the placeholder text should be. In my mockup I have some fairly boilerplate text:

Type a command or search

The good thing about that is that it's short! That allows for a less wide modal, makes it feel more manageable and friendly in a way. It's 400px wide in the mockups, we can go wider than that, but it feels a bit too wide in this branch as is. Speaking of, this branch says:

Search for content and templates, or try commands like "Add…"

In principle, the tip is useful, but I wonder:

  • Can we compress that sentence?
  • Or can we rotate an array of tips? I.e. it might say "Search for content and templates" one time, and "Try commands like Add" in another? I'm not sure it's the best idea especially here at the start, but it might be a good way to surface the diversity of actions you can take, without too long of a sentence.

A single unified alternative to start with might be something like:

Search or try commands like "Add"

Mainly this is driven by the instinct: the less text, the more likely it is to be read. Similar to our:

Type / to choose a block

What do you think?

@youknowriad
Copy link
Contributor Author

I also like the short placeholder personally. and I'm going to update here with the design feedback only. The thing about searches... is still unclear and I'd prefer to address separately.

@youknowriad
Copy link
Contributor Author

I think I've addressed all the design feedback.

@jasmussen
Copy link
Contributor

Looks great to me:

current status

Upon second thought, perhaps the search field could be slightly wider, perhaps a nice round 480px max-width:

Screenshot 2023-04-10 at 13 42 48

I also appreciate that the top edge of the modal stays fixed even as it grows vertically.

I think there are lots of little things we can improve here, and I'd love feedback from @richtabor specifically as he has separte mockups for this. I imagine many are back to review this tomorrow. What do you think?

@youknowriad
Copy link
Contributor Author

400px felt too small indeed. I've update the width and I'm happy to wait for more feedback.

@github-actions
Copy link

github-actions bot commented Apr 10, 2023

Flaky tests detected in ea79690.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4666290481
📝 Reported issues:

@alexstine
Copy link
Contributor

I do not recall this modal having a close button. Can you work it into the design? It does need one. I will be able to do a more solid review of this once the related shortcut PR lands and makes this easier to access on Windows.

@jameskoster
Copy link
Contributor

No strong opinion on whether that's gray or blue, but would prefer we unify across those.

So far as I've seen the trend is towards the blue. E.g. Inserter items, tertiary buttons, list view. The gray feels 'old' to me.

I'm not a fan of using icons as the only differentiator. How will we communicate what is a post category vs a product category if they appear together in search results? We don't necessarily need to solve this here, but it's going to come up as soon as we add support for taxonomies.

@Mamaduka
Copy link
Member

Mamaduka commented Apr 11, 2023

Note I'm seeing a weird design glitch on Safari when I search quickly. Not sure exactly where it comes from.

@youknowriad, is the input value debounced? In that case, the issue might have been resolved by #49234.

We still need to override the core polyfill and use one generated by the plugin.

@youknowriad
Copy link
Contributor Author

@Mamaduka no, I don't think so, also your link is wrong :P

@Mamaduka
Copy link
Member

@youknowriad, I'm out of the practice copy-pasting issues 😄 I fixed the link.

@youknowriad
Copy link
Contributor Author

@Mamaduka so you're saying that once we "override" core polyfills by the Gutenberg plugin, the issue will fix itself?

@Mamaduka
Copy link
Member

I can't say for sure, but we still need to override the core polyfill so that fix proposed by @sgomes is adequately tested.

P.S. We have a similar report for the block inserter search and Safari - #49208.

@sgomes
Copy link
Contributor

sgomes commented Apr 12, 2023

In that case, the issue might have been resolved by #49234.

I should point out that while it's plausible that #49234 would help with performance, I wasn't able to measure any impact while working on that change, and ended up submitting it more out of cleanliness and removing unnecessary code than anything else.

If you are able to measure a performance improvement, though, please do let me know, as I'd love to know more!

@richtabor
Copy link
Member

I think there are lots of little things we can improve here, and I'd love feedback from @richtabor specifically as he has separte mockups for this.

It input font size feels quite bit, especially in relation to the menu items. It's one of the largest font sizes within the editor. Perhaps dropping it down to 18px tones it a bit?

CleanShot 2023-04-14 at 17 06 17

CleanShot 2023-04-14 at 17 07 08

And units around the input feel off when there are results (too much space above):
CleanShot 2023-04-14 at 17 09 09

We could probably reduce the padding on the items, which would better align with the input text as well:

CleanShot 2023-04-14 at 17 10 29

@jameskoster
Copy link
Contributor

I pushed some updates based on the Figma we've been working in:

Screenshot 2023-04-17 at 14 14 16

It would be nice to include a 'Type' chip in each item so that you can easily tell what's what – the icon isn't always obvious.

Screenshot 2023-04-17 at 14 18 19

Probably fine to do that in a follow-up though :)

@jasmussen
Copy link
Contributor

I was thinking the radius change should happen separately, it likely needs a README update. But I don't mind bundling it in here if you all are okay with it.

Maybe time to switch to the modern color scheme? :D

@jameskoster
Copy link
Contributor

Maybe time to switch to the modern color scheme? :D

Maybe 🤣

The radius is only applied to the command center. Agree it would be nice to update all modals though, and that should happen separately. I guess I'll revert that here.

This reverts commit bc6ed51.
@youknowriad
Copy link
Contributor Author

Are we ready to ship this for now?

Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

This feels like a solid step in the right direction. Let's land this as it's a strong improvement over what's shipping. Here's a GIF showing the commandbar, searching for "con" and finding the "Contacto" page, searching for "add" and finding "add new post", pressing Enter to navigate there, and it working as intended:

commandbar

The visuals will look stronger still when #49870 lands.

One gotcha, which is more of a question. If I search for add (including the space) I would expect to see results for both "add new post" and "add new page", but I get that only for add. This isn't critical to get right, but it would be a nice optimization if we could, because it would avoid a weird "no results" flicker if I'm typing out "add new post" as my command.

@youknowriad
Copy link
Contributor Author

Yeah, search is a bit weird (it's internal to the library we use) but I'm going to see how we can improve that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
General Interface Parts of the UI which don't fall neatly under other labels. 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.

8 participants