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

Revise LinkControl suggestions UI to use MenuItem #50978

Merged
merged 20 commits into from
Jun 23, 2023

Conversation

richtabor
Copy link
Member

@richtabor richtabor commented May 25, 2023

What?

Part of #50885, as part of a greater LinkControl refresh effort. Note that this should follow #50977.

  • Try using <MenuItem> for items instead of custom buttons + styles.
  • Clean up search results metrics to match the mockups proposed in LinkControl Refresh #50891
  • Refactor unused CSS
  • Try adding back permalink info per this discussion
  • Tests

Testing Instructions

  1. Open a Post or Page.
  2. Insert a Navigation Block.
  3. Add a link item.
  4. See changes.
  5. Insert a Paragraph block.
  6. Create an inline link.
  7. See changes.

Screenshots or screencast

CleanShot.2023-05-25.at.14.08.30.mp4

Co-authored-by: Dave Smith [email protected]

@richtabor richtabor added the [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) label May 25, 2023
@richtabor richtabor requested a review from getdave May 25, 2023 18:44
@github-actions
Copy link

github-actions bot commented May 25, 2023

Size Change: +338 B (0%)

Total Size: 1.43 MB

Filename Size Change
build/block-editor/index.min.js 199 kB +303 B (0%)
build/block-editor/style-rtl.css 14.7 kB -185 B (-1%)
build/block-editor/style.css 14.7 kB -185 B (-1%)
build/components/index.min.js 240 kB +8 B (0%)
build/style-engine/index.min.js 1.81 kB +397 B (+28%) 🚨
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 6.99 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.22 kB
build/block-editor/content.css 4.22 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 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 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 104 B
build/block-library/blocks/avatar/style.css 104 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 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 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 647 B
build/block-library/blocks/cover/editor.css 650 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/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 159 B
build/block-library/blocks/details/style.css 159 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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/interactivity.min.js 395 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 375 B
build/block-library/blocks/footnotes/style-rtl.css 183 B
build/block-library/blocks/footnotes/style.css 182 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 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 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/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/interactivity.min.js 1.34 kB
build/block-library/blocks/image/style-rtl.css 1.34 kB
build/block-library/blocks/image/style.css 1.34 kB
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 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 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.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/interactivity.min.js 978 B
build/block-library/blocks/navigation/style-rtl.css 2.21 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 438 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 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 319 B
build/block-library/blocks/post-featured-image/style.css 319 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 314 B
build/block-library/blocks/post-template/style.css 314 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 450 B
build/block-library/blocks/query/editor.css 449 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 587 B
build/block-library/blocks/search/style.css 584 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 531 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 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.43 kB
build/block-library/blocks/social-links/style.css 1.42 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 645 B
build/block-library/blocks/table/style.css 644 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 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 403 B
build/block-library/blocks/template-part/editor.css 403 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/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 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 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 200 kB
build/block-library/interactivity/runtime.min.js 2.69 kB
build/block-library/interactivity/vendors.min.js 8.2 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.6 kB
build/block-library/style.css 13.6 kB
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 50.9 kB
build/commands/index.min.js 14.9 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12 kB
build/core-commands/index.min.js 2.12 kB
build/core-data/index.min.js 16.1 kB
build/customize-widgets/index.min.js 11.9 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.25 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 33.9 kB
build/edit-post/style-rtl.css 7.58 kB
build/edit-post/style.css 7.57 kB
build/edit-site/index.min.js 80.5 kB
build/edit-site/style-rtl.css 12.2 kB
build/edit-site/style.css 12.2 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/index.min.js 45.5 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.63 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/plugins/index.min.js 1.77 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 943 B
build/react-i18n/index.min.js 615 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.7 kB
build/reusable-blocks/index.min.js 2.38 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.9 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 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 958 B
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented May 25, 2023

Flaky tests detected in 890dde8.
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/5354665144
📝 Reported issues:

@getdave getdave requested a review from fabiankaegy May 26, 2023 12:06
@richtabor
Copy link
Member Author

Try adding back permalink info per #50891 (comment)

We can use the MenuItem info prop to pass the permalink.

@getdave getdave force-pushed the tweak/linkcontrol-suggestions branch from fc857f1 to 98dd225 Compare June 8, 2023 19:09
@getdave getdave changed the title LinkControl Suggestion UI Revise LinkControl suggestions UI Jun 8, 2023
@getdave
Copy link
Contributor

getdave commented Jun 8, 2023

@richtabor I made some changes here and fixed the tests. Let me know what you think of it.

We need to choose and implement the visual "states" for the suggestions list:

  • hover
  • focus
  • selected (use keyboard arrow keys)

I've hacked something in but if you have a clear idea on these that would help.

@richtabor
Copy link
Member Author

We need to choose and implement the visual "states" for the suggestions list:

Wouldn't the MenuItem component styles be fine here?

@getdave
Copy link
Contributor

getdave commented Jun 12, 2023

Uh oh! What happened? Looks like we need to rebase trunk to get this back to normal.

@Mamaduka Mamaduka force-pushed the tweak/linkcontrol-suggestions branch from 27dae0c to abf3553 Compare June 20, 2023 04:38
@richtabor richtabor marked this pull request as ready for review June 20, 2023 14:15
@richtabor richtabor requested review from a team and removed request for dcalhoun, ellatrix, fluiddot and fabiankaegy June 20, 2023 14:15
@richtabor richtabor changed the title Revise LinkControl suggestions UI Revise LinkControl suggestions UI to use MenuItem Jun 20, 2023
@getdave getdave added the [Type] Code Quality Issues or PRs that relate to code quality label Jun 20, 2023
@jasmussen
Copy link
Contributor

Thanks for working on this. From the video shared, this looks great, though I'm seeing disabled save/cancel buttons in trunk:

Screenshot 2023-06-21 at 08 22 10

Was there an initial intent to omit those until an actionable state?

I'm also not seeing the down arrow key to select a menu item work, but perhaps that's related to the focus style comment? Thanks for the work, this is important!

Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

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

We need to address:

  • keyboard arrow keys do not work add visual states for aria-selected
  • pressing TAB when in input results in selection of that result this is present in trunk.

packages/base-styles/_variables.scss Outdated Show resolved Hide resolved
@getdave
Copy link
Contributor

getdave commented Jun 21, 2023

though I'm seeing disabled save/cancel buttons in trunk:

I think that will be handled in a seperate PR.

@jasmussen @richtabor are you happy with this visual selected state? As you can see when the item is not selected all the padding looks fine, but when it is it looks like a mistake (at least to me) as the selected item looks very close to the edge of the popover.

Screen Shot 2023-06-21 at 11 28 51

@getdave getdave force-pushed the tweak/linkcontrol-suggestions branch from ba7681b to e7a0a9d Compare June 23, 2023 08:11
@scruffian scruffian merged commit a844d20 into trunk Jun 23, 2023
@scruffian scruffian deleted the tweak/linkcontrol-suggestions branch June 23, 2023 10:13
@github-actions github-actions bot added this to the Gutenberg 16.2 milestone Jun 23, 2023
@getdave getdave added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 12, 2023
@getdave
Copy link
Contributor

getdave commented Jul 12, 2023

@tellthemachines Let's bring this into 6.3. It was missing that label as you identified in #52517 (comment)

Thank you 🙏

@tellthemachines tellthemachines removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 13, 2023
@tellthemachines
Copy link
Contributor

Done! This should really have been cherry-picked before #51712, would have avoided a ton of conflict-solving.

tellthemachines pushed a commit that referenced this pull request Jul 13, 2023
* Use "link" instead of "URL" for URL_TYPE

* Use MenuItem for search create button

* Use sentence case for "Create page"

* Use a MenuGroup for search results

* Use MenuItem for search item

* Refactoring styles (WIP)

* Preserve whitespace in results text

* Reinstate result item information including permalink

* Remove debugging CSS code

* Reinstate CSS to control size of rich previews favicon

* Remove other commented out CSS code

* Reinstate selected styles

* Remove more redundant CSS

* Add some basic results hover/focus styling.

Needs improving

* Improve icon alignment

* Update tests to handle wording changes

* Remove inconsistent hover/focus style

MenuItem already has hover/focus styles

* Reinstate is-selected visual state

* Update test to make sense in context of #51011

See #51011

* Fix locator for result text

---------

Co-authored-by: Dave Smith <[email protected]>
@getdave
Copy link
Contributor

getdave commented Jul 13, 2023

Done! This should really have been cherry-picked before #51712, would have avoided a ton of conflict-solving.

Absolutely. Apologies that this happened. Just an oversight I'm afraid. We had a lot of concurrent PRs and this one slipped through the net. Appreciate your time and effort resolving 🙇‍♂️

sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
* Use "link" instead of "URL" for URL_TYPE

* Use MenuItem for search create button

* Use sentence case for "Create page"

* Use a MenuGroup for search results

* Use MenuItem for search item

* Refactoring styles (WIP)

* Preserve whitespace in results text

* Reinstate result item information including permalink

* Remove debugging CSS code

* Reinstate CSS to control size of rich previews favicon

* Remove other commented out CSS code

* Reinstate selected styles

* Remove more redundant CSS

* Add some basic results hover/focus styling.

Needs improving

* Improve icon alignment

* Update tests to handle wording changes

* Remove inconsistent hover/focus style

MenuItem already has hover/focus styles

* Reinstate is-selected visual state

* Update test to make sense in context of WordPress#51011

See WordPress#51011

* Fix locator for result text

---------

Co-authored-by: Dave Smith <[email protected]>
tellthemachines added a commit that referenced this pull request Jul 14, 2023
* Site Editor: Restore quick inserter 'Browse all' button (#52529)

* Site Editor: Restore quick inserter 'Browse all' button

* Remove leftover comment

* Patterns: update the title of Pattern block in the block inspector card  (#52010)

* Site Editor Pages: load the appropriate template if posts page set (#52266)

* This commit:
- links the posts page to the homepage template when a post page is set
- abstracts logic to get page item props

* The Posts Page resolves to display the Home or Index template only. Adding a check to skip the Front Page

* Showing homepage settings for posts pages that are set as the post page in reading settings

* Post pages that have been set to display posts will redirect to first the home template, then the index template. The fallback is the post id of the page.

* Reverted refactor of packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
Will do it in a follow up

* Allow editing existing footnote from formats toolbar (#52506)

* Block Editor: Display variation icon in the 'BlockDraggable' component (#52502)

* Patterns: add option to set sync status when adding from wp-admin patterns list (#52352)

* Show a modal to set sync status if adding pattern from pattern list page

* Make sure the modal loads if post settings panel not open

* don't load modal component at all if not new post

* Simplify the sync status so undefined always = synced

* Update packages/editor/src/components/post-sync-status/index.js

---------

Co-authored-by: Ramon <[email protected]>

* Revise LinkControl suggestions UI to use MenuItem (#50978)

* Use "link" instead of "URL" for URL_TYPE

* Use MenuItem for search create button

* Use sentence case for "Create page"

* Use a MenuGroup for search results

* Use MenuItem for search item

* Refactoring styles (WIP)

* Preserve whitespace in results text

* Reinstate result item information including permalink

* Remove debugging CSS code

* Reinstate CSS to control size of rich previews favicon

* Remove other commented out CSS code

* Reinstate selected styles

* Remove more redundant CSS

* Add some basic results hover/focus styling.

Needs improving

* Improve icon alignment

* Update tests to handle wording changes

* Remove inconsistent hover/focus style

MenuItem already has hover/focus styles

* Reinstate is-selected visual state

* Update test to make sense in context of #51011

See #51011

* Fix locator for result text

---------

Co-authored-by: Dave Smith <[email protected]>

* Fix LinkControl mark highlight to bold (#52517)

* Add 'reusable' keyword to Pattern blocks (#52543)

* Fix missing Add Template Part button in Template Parts page (#52542)

* Tweak copy for the reusable block rename hint (#52581)

* Trim footnote anchors from excerpts (#52518)

* Trim footnote anchors from excerpts

* Add comments, fix spacing, appease linter

* Site Editor: Reset device preview type when exiting the editing mode (#52566)

* Make "My patterns" permanently visible (#52531)

* Hide site hub when resizing frame upwards to avoid overlap (#52180)

* Fix "Manage all patterns" link appearance (#52532)

* Fix "Manage all patterns" link

* Update focus style

* Update navigation menu title size & weight in detail panels (#52477)

* Update menu title size

* Adjust font weight

* Site Editor Patterns: Ensure sidebar does not shrink when long pattern titles are used (#52547)

* Edit Site: Select templateType from the store inside the useSiteEditorSettings hook (#52503)

* Add width to ensure ellipsis is applied (#52575)

* Cover Block: Fix block deprecation when fixed background is enabled (#51612)

* ResizableFrame: Make keyboard accessible (#52443)

* ResizableFrame: Make keyboard accessible

* Fix outline in Safari

* Use proper CSS modifier

* Add aria-label to button

* Keep handle enlarged when resizing (Safari)

* Add back visually hidden help text

* Don't switch to edit mode

* Make the handle a role="separator"

* Revert to `button`

* Switch description text to `div hidden`

* Prevent keydown event default when right/left arrow

* Change minimum frame width to 320px

* Mention shift key in description text

* Only render resize handle when in View mode

* Fix importing classic menus (#52573)

* use the same create hook for classic import

* Remove redundant arg to hook

---------

Co-authored-by: Dave Smith <[email protected]>

* Site Editor: Fix navigation menu sidebar actions order and label (#52592)

* Avoid errors in Dimension visualizers when switching between iframed and non-iframed editors (#52588)

* Patterns: Add client side pagination to patterns list (#52538)

Co-authored-by: Saxon Fletcher <[email protected]>

* Site Editor: Make sidebar back button go *back* instead of *up* if possible (#52456)

* Navigator: Add replace option to goTo() and goToParent()

* Site Editor: Make sidebar back button go back instead of up if possible

* Adapt template part hint copy (#52527)

* Try "panel" instead of "page"

* Update template-part-hint.js

---------

Co-authored-by: George Mamadashvili <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Ramon <[email protected]>
Co-authored-by: Miguel Fonseca <[email protected]>
Co-authored-by: Rich Tabor <[email protected]>
Co-authored-by: Dave Smith <[email protected]>
Co-authored-by: Robert Anderson <[email protected]>
Co-authored-by: James Koster <[email protected]>
Co-authored-by: Andrew Serong <[email protected]>
Co-authored-by: arthur791004 <[email protected]>
Co-authored-by: Aki Hamano <[email protected]>
Co-authored-by: Lena Morita <[email protected]>
Co-authored-by: Andrei Draganescu <[email protected]>
Co-authored-by: Saxon Fletcher <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants