From b8d47545cdeb86efdcecd767bd80293eb6e9d0ec Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Thu, 8 Feb 2024 11:21:12 +0100 Subject: [PATCH 1/4] Limit spotlight mode to the editor. --- packages/block-editor/src/components/block-list/content.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index f12e63c6d7663e..35d3ef0574609b 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -328,7 +328,8 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b } // Spotlight mode. Fade out blocks unless they contain a selected block. -.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { +.wp-block-post-content.is-focus-mode .block-editor-block-list__block:not(.has-child-selected), +.wp-site-blocks.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { opacity: 0.2; transition: opacity 0.1s linear; @include reduce-motion("transition"); From e333ad905b958424aff232847612a7df0ee53cf1 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Tue, 13 Feb 2024 19:19:04 +0100 Subject: [PATCH 2/4] Revert "Limit spotlight mode to the editor." This reverts commit b8d47545cdeb86efdcecd767bd80293eb6e9d0ec. --- packages/block-editor/src/components/block-list/content.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 35d3ef0574609b..f12e63c6d7663e 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -328,8 +328,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b } // Spotlight mode. Fade out blocks unless they contain a selected block. -.wp-block-post-content.is-focus-mode .block-editor-block-list__block:not(.has-child-selected), -.wp-site-blocks.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { +.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) { opacity: 0.2; transition: opacity 0.1s linear; @include reduce-motion("transition"); From 5de89ef26cac03e4700ecf1a03cd4201a170b323 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Tue, 13 Feb 2024 19:21:42 +0100 Subject: [PATCH 3/4] Disable "Spotlight mode" for block previews. --- .../src/components/block-preview/index.js | 7 ++++++- .../edit-site/src/components/style-book/index.js | 12 ++++++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index 0fb7f55b9955d2..245d0ee4348b2e 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -54,7 +54,11 @@ export function BlockPreview( { [] ); const settings = useMemo( - () => ( { ...originalSettings, __unstableIsPreviewMode: true } ), + () => ( { + ...originalSettings, + focusMode: false, // Disable "Spotlight mode". + __unstableIsPreviewMode: true, + } ), [ originalSettings ] ); const renderedBlocks = useMemo( @@ -117,6 +121,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) { () => ( { ...originalSettings, styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles. + focusMode: false, // Disable "Spotlight mode". __unstableIsPreviewMode: true, } ), [ originalSettings ] diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 7ecfdc3506cf8a..135ebcbaa9cf02 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -222,7 +222,11 @@ function StyleBook( { ); const settings = useMemo( - () => ( { ...originalSettings, __unstableIsPreviewMode: true } ), + () => ( { + ...originalSettings, + focusMode: false, // Disable "Spotlight mode". + __unstableIsPreviewMode: true, + } ), [ originalSettings ] ); @@ -425,7 +429,11 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => { [] ); const settings = useMemo( - () => ( { ...originalSettings, __unstableIsPreviewMode: true } ), + () => ( { + ...originalSettings, + focusMode: false, // Disable "Spotlight mode". + __unstableIsPreviewMode: true, + } ), [ originalSettings ] ); From 11fdd14760f5b61f6c5a2ea000a6413319c3baf7 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Wed, 14 Feb 2024 15:51:38 +0100 Subject: [PATCH 4/4] Revert non-required changes. --- packages/edit-site/src/components/style-book/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 135ebcbaa9cf02..b8e18533f5879a 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -222,11 +222,7 @@ function StyleBook( { ); const settings = useMemo( - () => ( { - ...originalSettings, - focusMode: false, // Disable "Spotlight mode". - __unstableIsPreviewMode: true, - } ), + () => ( { ...originalSettings, __unstableIsPreviewMode: true } ), [ originalSettings ] );