From daa20d42c9af284ca1293b55e0adeecc1e26934f Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Thu, 21 Dec 2023 15:48:19 +0100 Subject: [PATCH] Text selection: show CSS hack to Safari only. (#57300) --- .../src/components/block-list/content.scss | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 3e87ba317d1350..d907ffd81d9dd0 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -17,6 +17,20 @@ } } + +// Hide selections on this element, otherwise Safari will include it stacked +// under your actual selection. +// This uses a CSS hack to show the rules to Safari only. Failing here is okay, +// it just makes the selection indication slightly less precise. That makes this +// hack a progressive enhancement. Stylelint is disabled to allow the hack to work. +/* stylelint-disable */ +_::-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 { + background-color: transparent; +} +/* stylelint-enable */ + + // Note to developers refactoring this, please test navigation mode, and // multi selection and hovering the block switcher to highlight the block. // Also be sure to test partial selections in Safari, as it draws the @@ -24,16 +38,6 @@ .block-editor-block-list__layout { position: relative; - // Hide selections on this element, otherwise Safari will include it stacked - // under your actual selection. - &::selection { - background: transparent; - } - - .has-multi-selection &::selection { - background: transparent; - } - // Block multi selection // Apply a rounded radius to the entire block when multi selected, but with low specificity // so explicit radii set by tools are preserved.