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

Disable the ability select text in the useBlockPreview hook #47331

Closed
wants to merge 3 commits into from

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Jan 21, 2023

Fixes: #47293

What?

This PR fixes a bug that caused multiple rendering of controls when a block was selected in the site editor. This problem, as reported in #47293, seems to occur sometimes when selecting a block in a post template.

Why?

I have confirmed that this problem doesn't occur when the Gutenberg plugin is disabled. I can't explain the root cause, but I noticed the following different style attributes in the rendering of the post template.

<!-- Gutenberg Plugin Activated -->
<ul class="wp-block-post-template">
  </li>
  <li class="wp-block-post block-editor-block-preview__live-content components-disabled" style="display: none;">
  </li>
  <li class="wp-block-post block-editor-block-preview__live-content components-disabled">
  </li>
  <li class="wp-block-post block-editor-block-preview__live-content components-disabled">
  </li>
</ul>

<!-- Gutenberg Plugin Deactivated -->
<ul class="wp-block-post-template">
  <li class="wp-block-post block-editor-block-list__layout">
  </li>
  <li class="wp-block-post block-editor-block-preview__live-content components-disabled" style="user-select: none; display: none;">
  </li>
  <li class="wp-block-post block-editor-block-preview__live-content components-disabled" style="user-select: none;">
  </li>
  <li class="wp-block-post block-editor-block-preview__live-content components-disabled" style="user-select: none;">
  </li>
</ul>

In other words, I thought that the user-select:none; style should always be applied to the li.wp-block-post block-editor-block-preview__live-content element in order to achieve the expected behavior.

How?

Added user-select: none; in the .block-editor-block-preview__live-content selector.

As an alternative approach, I have confirmed that the following changes will also solve the problem.

--- a/packages/block-library/src/post-template/edit.js
+++ b/packages/block-library/src/post-template/edit.js
@@ -52,6 +52,7 @@ function PostTemplateBlockPreview( {
 
        const style = {
                display: isHidden ? 'none' : undefined,
+               userSelect: 'none',
        };
 
        return (

Testing Instructions

  • Open the site editor.
  • In edit mode, repeat the click in the post template block.
  • Make sure no duplicate controls appear.

@t-hamano t-hamano self-assigned this Jan 21, 2023
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Jan 21, 2023
@github-actions
Copy link

github-actions bot commented Jan 21, 2023

Size Change: +3.85 kB (0%)

Total Size: 1.33 MB

Filename Size Change
build/block-editor/content-rtl.css 3.67 kB +17 B (0%)
build/block-editor/content.css 3.67 kB +17 B (0%)
build/block-editor/index.min.js 190 kB +472 B (0%)
build/block-editor/style-rtl.css 14.3 kB +122 B (+1%)
build/block-editor/style.css 14.3 kB +119 B (+1%)
build/block-library/index.min.js 200 kB +779 B (0%)
build/core-data/index.min.js 15.9 kB -36 B (0%)
build/edit-site/index.min.js 62.9 kB +1.27 kB (+2%)
build/editor/index.min.js 45.2 kB +1.1 kB (+2%)
ℹ️ 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.16 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 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 84 B
build/block-library/blocks/avatar/style.css 84 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 485 B
build/block-library/blocks/button/editor.css 485 B
build/block-library/blocks/button/style-rtl.css 532 B
build/block-library/blocks/button/style.css 532 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 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 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 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 253 B
build/block-library/blocks/file/style.css 254 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/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 829 B
build/block-library/blocks/image/editor.css 828 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 298 B
build/block-library/blocks/latest-comments/style.css 298 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.2 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 376 B
build/block-library/blocks/page-list/editor.css 376 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 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 318 B
build/block-library/blocks/post-featured-image/style.css 318 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 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 440 B
build/block-library/blocks/query/editor.css 440 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 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 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 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 332 B
build/block-library/blocks/spacer/editor.css 332 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 691 B
build/block-library/blocks/video/editor.css 694 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 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.05 kB
build/block-library/common.css 1.05 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.6 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.4 kB
build/block-library/style.css 12.4 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 50.4 kB
build/components/index.min.js 203 kB
build/components/style-rtl.css 11.6 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.3 kB
build/customize-widgets/index.min.js 11.7 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 7.95 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.71 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-navigation/style-rtl.css 4.14 kB
build/edit-navigation/style.css 4.15 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 34.4 kB
build/edit-post/style-rtl.css 7.46 kB
build/edit-post/style.css 7.45 kB
build/edit-site/style-rtl.css 9.38 kB
build/edit-site/style.css 9.38 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.49 kB
build/edit-widgets/style.css 4.49 kB
build/editor/style-rtl.css 3.68 kB
build/editor/style.css 3.67 kB
build/element/index.min.js 4.93 kB
build/escape-html/index.min.js 548 B
build/experiments/index.min.js 870 B
build/format-library/index.min.js 7.2 kB
build/format-library/style-rtl.css 598 B
build/format-library/style.css 597 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.88 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.95 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.59 kB
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.27 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.8 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.53 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.69 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.31 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

@t-hamano t-hamano changed the title Block Editor: Try to fix multiple rendering of controls Block Preview: Try to fix multiple rendering of controls Jan 21, 2023
@t-hamano t-hamano marked this pull request as ready for review January 21, 2023 16:14
@t-hamano t-hamano requested a review from ellatrix as a code owner January 21, 2023 16:14
@t-hamano t-hamano requested review from ntsekouras, youknowriad and tellthemachines and removed request for ellatrix January 21, 2023 16:14
@github-actions
Copy link

github-actions bot commented Jan 21, 2023

Flaky tests detected in 932e8e2.
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/3986580713
📝 Reported issues:

@youknowriad
Copy link
Contributor

Thanks for the PR, I have two questions here:

  • isn't Disabled component supposed to disable interactions already within previews?
  • The other thing is that there might be another issue here causing the duplicate toolbars as toolbars are only supposed to be rendered for the selected blocks. Why in this case, we have multiple toolbars (regardless of interactions)

@youknowriad
Copy link
Contributor

youknowriad commented Jan 23, 2023

I also was not able to reproduce the issue initially by following the instructions here. (I mean without the fix)

@ntsekouras
Copy link
Contributor

This seems to have to do with the Post Excerpt block, when you click in the read more RichText. I'm testing with other blocks that have RichText instance and for now I couldn't reproduce. I'll try to investigate more why this happens in this case.

@t-hamano
Copy link
Contributor Author

Thanks for the advice.

This seems to have to do with the Post Excerpt block, when you click in the read more RichText.

I was also able to reproduce it. The problem occurs when I click on the 'Add "read more" link text' area in this block.

In addition to this, I have found a very strange point. Changing the display property of the more link text from inline-block to block, as shown below, solves this problem.

diff --git a/packages/block-library/src/post-excerpt/style.scss b/packages/block-library/src/post-excerpt/style.scss
index e7b3e18491..0cb071e25d 100644
--- a/packages/block-library/src/post-excerpt/style.scss
+++ b/packages/block-library/src/post-excerpt/style.scss
@@ -1,3 +1,3 @@
 .wp-block-post-excerpt__more-link {
-       display: inline-block;
+       display: block;
 }

Of course, this problem should not be fixed by this change, but one wonders why it would be fixed by this change 🤔

@ntsekouras
Copy link
Contributor

ntsekouras commented Jan 23, 2023

I found about the display: inline-block issue with pointer-events too, but haven't figured out yet the reason for this. The weird thing is that similar issues seem to suggest that it should also work with inline-block elements. Also we shouldn't fix just a block and something generic should be implemented.

Having said that Riad mentions a different issue:

The other thing is that there might be another issue here causing the duplicate toolbars as toolbars are only supposed to be rendered for the selected blocks. Why in this case, we have multiple toolbars (regardless of interactions)

It doesn't need to be part of this PR of course, but Post Template block uses the same blocks for the post items, that means they share the same clientIds, etc.. This is something we need to investigate better if we can avoid.

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Personally I think it's okay to land this for now, but we need to investigate if we can find a better solution..

Thanks!

@@ -10,6 +10,7 @@
- Move component styles needed for iframes to content styles ([#47103](https://github.com/WordPress/gutenberg/pull/47103)).
- Block Inserter: Correctly apply style to the default inserter ([#47166](https://github.com/WordPress/gutenberg/pull/47166)).
- List View: Fix crash when the first template-parts is deleted width del key ([#47227](https://github.com/WordPress/gutenberg/pull/47227)).
- Block Preview: Try to fix multiple rendering of controls ([#47331](https://github.com/WordPress/gutenberg/pull/47331)).
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably change the message here to explain that you disabled the ability select text in the useBlockPreview hook.

@t-hamano t-hamano changed the title Block Preview: Try to fix multiple rendering of controls Disable the ability select text in the useBlockPreview hook Jan 23, 2023
@t-hamano
Copy link
Contributor Author

@youknowriad
@ntsekouras

Thanks for the review. I would like to merge this PR, but how about leaving #47293 open to explore the root cause?

@youknowriad
Copy link
Contributor

useBlockPreview relies on useDisabled to disable interactions within it. If I'm not wrong useDisabled applies the "inert" attribute which also is supposed to disable selection no? so why does it not work by default here?

@t-hamano
Copy link
Contributor Author

useBlockPreview relies on useDisabled to disable interactions within it. If I'm not wrong useDisabled applies the "inert" attribute which also is supposed to disable selection no? so why does it not work by default here?

From what I've researched, useDisabled() doesn't seem to work properly inside the iframe. As shown below, the inert attribute seems to work well when considering relative document. Does this make sense?

diff --git a/packages/compose/src/hooks/use-disabled/index.ts b/packages/compose/src/hooks/use-disabled/index.ts
index 7a384cbcc5..7d5cf135aa 100644
--- a/packages/compose/src/hooks/use-disabled/index.ts
+++ b/packages/compose/src/hooks/use-disabled/index.ts
@@ -34,16 +34,21 @@ export default function useDisabled( {
        isDisabled: isDisabledProp = false,
 } = {} ) {
        return useRefEffect(
-               ( node ) => {
+               ( node: Node ) => {
                        if ( isDisabledProp ) {
                                return;
                        }
 
+                       const defaultView = node?.ownerDocument?.defaultView;
+                       if ( ! defaultView ) {
+                               return;
+                       }
+
                        /** A variable keeping track of the previous updates in order to restore them. */
                        const updates: Function[] = [];
                        const disable = () => {
                                node.childNodes.forEach( ( child ) => {
-                                       if ( ! ( child instanceof HTMLElement ) ) {
+                                       if ( ! ( child instanceof defaultView.HTMLElement ) ) {
                                                return;
                                        }

@youknowriad
Copy link
Contributor

From what I've researched, useDisabled() doesn't seem to work properly inside the iframe. As shown below, the inert attribute seems to work well when considering relative document. Does this make sense?

Not sure I follow, is this because of the polyfill that is not loaded in the iframe or something else? Regardless, if feels we shouldn't hack something in this PR instead we should fix the root issue which is why useDisabled is not working inside the iframe

@t-hamano
Copy link
Contributor Author

I would like to freeze this PR and try to find the root cause of this problem. If we can get the useDisabled() function to grant the inert attribute as intended, this problem might be solved.

However, as we investigated in #47190, it may not work correctly in FireFox, so we will continue to investigate this issue as well.

@aaronrobertshaw
Copy link
Contributor

I noticed that the original issue only occurs for me when I select the read more link in a post after the first within the Post Template block.

This PR tests well in terms of fixing the issue but I agree that it would be better to ensure useDisabled works as expected within an iframe.

It doesn't need to be part of this PR of course, but Post Template block uses the same blocks for the post items, that means they share the same clientIds, etc.. This is something we need to investigate better if we can avoid.

The ToolsPanel uses the clientId to ensure controls rendered via SlotFills are only rendered when their respective block is selected. If these IDs aren't unique across blocks, that might be part of the issue. For the block inspector sidebar at least.

@t-hamano
Copy link
Contributor Author

I have submitted #47459 for a more radical solution.

Therefore, I would like to close this PR for the time being. If #47459 does not solve the problem, it may be a good idea to merge this PR as a temporary fix.

@t-hamano t-hamano closed this Jan 26, 2023
@t-hamano t-hamano deleted the fix/post-template-preview-duplicate branch January 26, 2023 15:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Randomly duplicating design tools
4 participants