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

Implementing new UX for invoking rich text Link UI #57986

Merged
merged 31 commits into from
Jan 25, 2024

Conversation

getdave
Copy link
Contributor

@getdave getdave commented Jan 18, 2024

What?

Changes UX for links within rich text to require explicit activation before displaying the Link UI interface.

Closes #57821

Why?

Currently on trunk moving the cursor within an existing link (format) will cause the Link UI to appear. This is providing a sub par a11y experience because:

  • there is nothing to alert users of assistive tech that the Link UI has appeared
  • it disrupts the standard tab order of the editor because pressing tab when a link is active will cause focus to shift to the link popover

How?

  • disables the behaviour to immediately activate the Link UI is the link format is active

  • adds a click handler to the contenteditable element which will trigger the Link UI when it is clicked.

  • changes the block toolbar button to be "Edit link" if the link format is active. Clicking this will cause the Link UI to appear.

  • New Post

  • Create a paragraph block

  • Add some text

  • Create 3 or 4 links

  • Click on each link and see you can activate and edit the link using the Link UI.

  • Using keyboard attempt the same thing but notice that you must either click the toolbar button or press CMD + K to edit the link

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Screen.Capture.on.2024-01-18.at.21-03-34.mp4

@getdave getdave requested review from jeryj and richtabor January 18, 2024 21:06
@getdave getdave added [Type] Enhancement A suggestion for improvement. [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) labels Jan 18, 2024
@getdave getdave self-assigned this Jan 18, 2024
Copy link

github-actions bot commented Jan 18, 2024

Size Change: +2.5 kB (0%)

Total Size: 1.7 MB

Filename Size Change
build/block-editor/content-rtl.css 4.38 kB +1 B (0%)
build/block-editor/content.css 4.38 kB +2 B (0%)
build/block-editor/index.min.js 250 kB +1.5 kB (+1%)
build/block-editor/style-rtl.css 15.4 kB +7 B (0%)
build/block-editor/style.css 15.3 kB +7 B (0%)
build/block-library/blocks/cover/style-rtl.css 1.69 kB -4 B (0%)
build/block-library/blocks/cover/style.css 1.68 kB -5 B (0%)
build/block-library/blocks/embed/editor-rtl.css 322 B +29 B (+10%) ⚠️
build/block-library/blocks/embed/editor.css 322 B +29 B (+10%) ⚠️
build/block-library/blocks/image/editor-rtl.css 863 B +29 B (+3%)
build/block-library/blocks/image/editor.css 862 B +29 B (+3%)
build/block-library/blocks/query/view.min.js 1.1 kB +463 B (+72%) 🆘
build/block-library/editor-rtl.css 12.3 kB +33 B (0%)
build/block-library/editor.css 12.3 kB +34 B (0%)
build/block-library/index.min.js 215 kB +563 B (0%)
build/block-library/style.css 14.7 kB +1 B (0%)
build/blocks/index.min.js 51.5 kB +18 B (0%)
build/components/index.min.js 235 kB +161 B (0%)
build/components/style-rtl.css 12 kB -30 B (0%)
build/components/style.css 12 kB -28 B (0%)
build/edit-site/index.min.js 195 kB +43 B (0%)
build/edit-site/style-rtl.css 15.2 kB -46 B (0%)
build/edit-site/style.css 15.2 kB -47 B (0%)
build/editor/index.min.js 61.5 kB +95 B (0%)
build/editor/style-rtl.css 5.42 kB -10 B (0%)
build/editor/style.css 5.42 kB -10 B (0%)
build/format-library/index.min.js 7.85 kB -80 B (-1%)
build/interactivity/index.min.js 12.9 kB -396 B (-3%)
build/interactivity/query.min.js 884 B +95 B (+12%) ⚠️
build/style-engine/index.min.js 2.07 kB +17 B (+1%)
ℹ️ 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.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.22 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 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 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 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 421 B
build/block-library/blocks/columns/style.css 421 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/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 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/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 316 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 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.72 kB
build/block-library/blocks/gallery/style.css 1.72 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 189 B
build/block-library/blocks/heading/style.css 189 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/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view.min.js 2.01 kB
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 505 B
build/block-library/blocks/media-text/style.css 503 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 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 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.25 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.24 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.1 kB
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 377 B
build/block-library/blocks/page-list/editor.css 377 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 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 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 409 B
build/block-library/blocks/post-template/style.css 408 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 125 B
build/block-library/blocks/preformatted/style.css 125 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 354 B
build/block-library/blocks/pullquote/style.css 354 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 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 140 B
build/block-library/blocks/read-more/style.css 140 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 614 B
build/block-library/blocks/search/style.css 614 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 471 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 204 B
build/block-library/blocks/site-logo/style.css 204 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 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.49 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 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 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 185 B
build/block-library/blocks/video/style.css 185 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/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 921 B
build/commands/style.css 918 B
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.71 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.34 kB
build/customize-widgets/style.css 1.33 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.92 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 25 kB
build/edit-post/style-rtl.css 5.62 kB
build/edit-post/style.css 5.61 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.39 kB
build/edit-widgets/style.css 4.39 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/style-rtl.css 478 B
build/format-library/style.css 477 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/interactivity/file.min.js 440 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/navigation.min.js 1.23 kB
build/interactivity/router.min.js 952 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 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/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 5.47 kB
build/patterns/style-rtl.css 540 B
build/patterns/style.css 539 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.07 kB
build/preferences/index.min.js 2.81 kB
build/preferences/style-rtl.css 698 B
build/preferences/style.css 700 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.95 kB
build/shortcode/index.min.js 1.39 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 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 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.21 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

Copy link
Contributor

@jeryj jeryj left a comment

Choose a reason for hiding this comment

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

I have some of the other work for this issue I can push up to this branch.

@@ -39,6 +40,42 @@ function Edit( {
contentRef,
} ) {
const [ addingLink, setAddingLink ] = useState( false );
const [ clickedLink, setClickedLink ] = useState( false );
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of managing a clickedLink state, can we set the state of the thing we want to do? I.e. - display the link preview.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't see how we could do that. The Popover is within the React tree. Therefore we must setState to trigger a re-render of the component with the new state.

Copy link
Contributor

Choose a reason for hiding this comment

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

Can we use setAddingLink( true ) instead of adding clickedLink state?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeh try that. Might not need two states.

Copy link
Contributor

Choose a reason for hiding this comment

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

Done :) b322bbd


useLayoutEffect( () => {
// log tagNAME of anchorElement
if ( anchorElement?.tagName?.toLowerCase() === 'a' ) {
Copy link
Member

Choose a reason for hiding this comment

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

Can't you just return early?

Copy link
Member

Choose a reason for hiding this comment

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

Also if anchorElement is defined and isActive is true, it's guaranteed to be a link no?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No because it can be a VirtualAnchorElement returned from useAnchor.

I've ended up avoiding the useAnchor entirely now by attaching listeners to the contenteditable.

Copy link
Contributor

Choose a reason for hiding this comment

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

No because it can be a VirtualAnchorElement returned from useAnchor.

How can I test VirtualAnchorElements? What blocks use them?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You can't 😄 Take a look at useAnchor and you'll see it returns a "virtual" anchor representing a selection within RichText. So for example, when you highlight some text and you want to make a link, the Link UI needs to have an anchor point to "attach" the Popover to, but the link (<a> TAG) doesn't yet exist in the DOM. So useAnchor will return a coordinate which approximates the selection in the richtext.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nice work!

We'll need some new e2e test coverage for these changes. Specifically it would be super easy for regressions to be introduced around this new behaviour so we need to validate the new expectations.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think fixing all the broken e2e tests will validate it too.

Copy link
Member

@ellatrix ellatrix left a comment

Choose a reason for hiding this comment

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

Sure, let's try.

@getdave
Copy link
Contributor Author

getdave commented Jan 19, 2024

Sure, let's try.

Thank you Ella.

@jeryj Let's refine the PR UX / UI before this gets merged

@getdave getdave requested a review from joedolson January 19, 2024 14:55
Copy link

github-actions bot commented Jan 19, 2024

Flaky tests detected in 196d888.
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/7646931654
📝 Reported issues:

@getdave
Copy link
Contributor Author

getdave commented Jan 19, 2024

✅ Update: I implemented this in a8a418a


I think the next step should be that if you are within a link and...

  • press Cmd + K
  • press the 'Edit link` button in the block toolbar

...then

  • the Link UI appears
  • the Link UI is given focus
  • the Link UI is in "preview" mode (as opposed to the "edit" mode form as it is currently)

I think we can safely trap focus and constrain tabbing.

We should then consider incorporating the a11y tweaks to labelling the dialog that I started in #54063.

@richtabor
Copy link
Member

I suppose the link control in the toolbar should open/close the LinkControl, just like when the other formats are applied (and not subsequently removed upon a second click):

link.mp4

@jeryj
Copy link
Contributor

jeryj commented Jan 23, 2024

I suppose the link control in the toolbar should open/close the LinkControl, just like when the other formats are applied (and not subsequently removed upon a second click):

I've been looking at this, and it is unfortunately quite tricky due to how/when states are set. Are you OK with that behavior in a follow-up?

@richtabor
Copy link
Member

Are you OK with that behavior in a follow-up?

Sure.

@jeryj jeryj force-pushed the try/new-rich-text-link-invoking-ux branch from b322bbd to e6e0e98 Compare January 23, 2024 20:23
@getdave
Copy link
Contributor Author

getdave commented Jan 24, 2024

Update: I can't replicate this once I rebased and then reverted 74a3e9e


@jeryj I found a bug where we show the wrong UI:

  • Add text
  • Create link and submit
  • Immediately click link again
  • See the "creating link" state rather than the preview of the existing link.
Screen.Capture.on.2024-01-24.at.09-29-54.mp4

It only seems to happen if you click exactly on the point where the cursor is placed.

@getdave getdave force-pushed the try/new-rich-text-link-invoking-ux branch from 29ac34b to 2783e3c Compare January 24, 2024 09:34
@getdave getdave force-pushed the try/new-rich-text-link-invoking-ux branch from 2783e3c to 2526cda Compare January 24, 2024 09:52
@getdave
Copy link
Contributor Author

getdave commented Jan 24, 2024

Rebased to bring in changes made in #57726

@getdave getdave marked this pull request as ready for review January 24, 2024 12:55
@getdave getdave requested a review from fluiddot as a code owner January 24, 2024 12:55
@@ -39,6 +39,36 @@ function Edit( {
contentRef,
} ) {
const [ addingLink, setAddingLink ] = useState( false );
// We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field.
const [ openedBy, setOpenedBy ] = useState( null );
Copy link
Contributor

Choose a reason for hiding this comment

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

I didn't want to add this openedBy state, as the popover has its own system for returning focus. For some reason, it's not working correctly with the Rich text element and split between iframe editor and toolbar in the header.

@getdave
Copy link
Contributor Author

getdave commented Jan 25, 2024

This is ready for functional review, but we do need more tests to solidify the flows here. The big improvement now is that pressing ESCAPE will return you to whatever opened the popover. It's pretty smooth on the keyboard.

Great work @jeryj 👏

I have not figured out how to have the link or toolbar edit link button toggle the state of the popover, as onFocusOutside fires before the click event:

@richtabor already confirmed he's happy with this in a followup. I don't think we should block this PR further on this unless there's a very important reason why it has to be in the initial release.

Copy link
Contributor

@scruffian scruffian left a comment

Choose a reason for hiding this comment

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

This is testing well for me.

@jeryj
Copy link
Contributor

jeryj commented Jan 25, 2024

Tests are hopefully fixed to account for the new states of the Link Control being visible/hidden. 🤞🏻 Also added tests to cover focus outside click sending focus to the right area and returning focus from the keyboard to the button that opened it.

Copy link
Member

@richtabor richtabor left a comment

Choose a reason for hiding this comment

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

LGTM ✨

@jeryj jeryj merged commit b85e87b into trunk Jan 25, 2024
56 checks passed
@jeryj jeryj deleted the try/new-rich-text-link-invoking-ux branch January 25, 2024 18:59
@github-actions github-actions bot added this to the Gutenberg 17.7 milestone Jan 25, 2024
westonruter added a commit that referenced this pull request Jan 26, 2024
…zy-hydration

* origin/trunk: (47 commits)
  Interactivity API: Break up long hydration task in interactivity init (#58227)
  Add supports.interactivity to Query block (#58316)
  Font Library: Make notices more consistent (#58180)
  Fix Global styles text settings bleeding into placeholder component (#58303)
  Fix the position and size of the Options menu, (#57515)
  DataViews: Fix safari grid row height issue (#58302)
  Try a fix (#58282)
  Navigation Submenu Block: Make block name affect list view (#58296)
  Apply custom scroll style to fixed header block toolbar (#57444)
  Add support for transform and letter spacing controls in Global Styles > Typography > Elements (#58142)
  DataViews: Fix table view cell wrapper and BlockPreviews (#58062)
  Workflows: Add 'Technical Prototype' to the type-related labels list (#58163)
  Block Editor: Optimize the 'useBlockDisplayTitle' hook (#58250)
  Remove noahtallen from .wp-env codeowners (#58283)
  Global styles revisions: fix is-selected rules from affecting other areas of the editor (#58228)
  Try: Disable text selection for post content placeholder block. (#58169)
  Remove `template-only` mode from editor and edit-post packages (#57700)
  Refactored download/upload logic to support font faces with multiple src assets (#58216)
  Components: Expand theming support in COLORS (#58097)
  Implementing new UX for invoking rich text Link UI  (#57986)
  ...
@richtabor richtabor mentioned this pull request Feb 23, 2024
13 tasks
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] Enhancement A suggestion for improvement.
Projects
Development

Successfully merging this pull request may close these issues.

Improving the UX around invoking the LinkControl popover
5 participants