From 12c8ca7f2b2706abb96688a9f1515c462abd4366 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Mon, 21 Oct 2024 13:10:49 +0200 Subject: [PATCH] Group: fix padding select (#65857) Co-authored-by: ellatrix Co-authored-by: youknowriad --- .../src/components/block-list/content.scss | 2 +- .../src/components/writing-flow/index.js | 8 +++++--- packages/block-library/src/group/editor.scss | 12 ++++++++++++ 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index b42ebe349d599..3d3b8517ca09c 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -24,7 +24,7 @@ // hack a progressive enhancement. /* stylelint-disable -- Stylelint is disabled to allow the hack to work. */ _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection, -_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection { +_::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .block-editor-block-list__layout::selection { background-color: transparent; } /* stylelint-enable */ diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index 7e6b36b0e2214..cb789bdd7035b 100644 --- a/packages/block-editor/src/components/writing-flow/index.js +++ b/packages/block-editor/src/components/writing-flow/index.js @@ -47,19 +47,21 @@ export function useWritingFlow() { useRefEffect( ( node ) => { node.tabIndex = 0; + node.dataset.hasMultiSelection = hasMultiSelection; if ( ! hasMultiSelection ) { - return; + return () => { + delete node.dataset.hasMultiSelection; + }; } - node.classList.add( 'has-multi-selection' ); node.setAttribute( 'aria-label', __( 'Multiple selected blocks' ) ); return () => { - node.classList.remove( 'has-multi-selection' ); + delete node.dataset.hasMultiSelection; node.removeAttribute( 'aria-label' ); }; }, diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 739a9cd0cf852..12f5028b96ec3 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -10,6 +10,18 @@ } } +// Reset user select, but the next rule should take precedence for nested +// groups. +:where([data-has-multi-selection]:not([contenteditable="true"]) .wp-block-group > *) { + user-select: initial; +} + +// When we are not multi-selecting, prevent children from capturing the +// selection, which happens when the group is flex and children inlined. +:where([data-has-multi-selection]:not([contenteditable="true"]) .wp-block-group) { + user-select: none; +} + // Place block list appender in the same place content will appear. [data-type="core/group"].is-selected { .block-list-appender {