Block editor: focus mode: fix opacity for inner blocks, move classes (#…

…30130)

* Block editor: fix opacity for inner blocks, move classes

* Fix extra fading

* Fade out blocks if they don't contain a selected block

* Disable active entity spotlight if focus mode is active

packages/block-editor/src/components/block-list/index.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import { useRef, createContext, useState } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,11 +31,14 @@ export default function BlockList( { className, __experimentalLayout } ) {
 	const insertionPoint = useInsertionPoint( ref );
 	useScrollSelectionIntoView( ref );
 
-	const { isTyping, isOutlineMode } = useSelect( ( select ) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const { isTyping, isOutlineMode, isFocusMode } = useSelect( ( select ) => {
 		const { isTyping: _isTyping, getSettings } = select( blockEditorStore );
+		const { outlineMode, focusMode } = getSettings();
 		return {
 			isTyping: _isTyping(),
-			isOutlineMode: getSettings().outlineMode,
+			isOutlineMode: outlineMode,
+			isFocusMode: focusMode,
 		};
 	}, [] );
 
@@ -47,7 +51,11 @@ export default function BlockList( { className, __experimentalLayout } ) {
 				className={ classnames(
 					'block-editor-block-list__layout is-root-container',
 					className,
-					{ 'is-typing': isTyping, 'is-outline-mode': isOutlineMode }
+					{
+						'is-typing': isTyping,
+						'is-outline-mode': isOutlineMode,
+						'is-focus-mode': isFocusMode && isLargeViewport,
+					}
 				) }
 			>
 				<SetBlockNodes.Provider value={ setBlockNodes }>

packages/block-editor/src/components/block-list/style.scss

@@ -198,33 +198,6 @@
 		}
 	}
 
-	// Spotlight mode.
-	&.is-focus-mode:not(.is-multi-selected) {
-		opacity: 0.5;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
-
-		&:not(.is-focused) .block-editor-block-list__block,
-		&.is-focused {
-			opacity: 1;
-		}
-	}
-
-	// Active entity spotlight.
-	&.has-active-entity:not(.is-focus-mode) {
-		opacity: 0.5;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
-
-		&.is-active-entity,
-		&.has-child-selected,
-		&:not(.has-child-selected) .block-editor-block-list__block,
-		&.is-active-entity .block-editor-block-list__block,
-		.is-active-entity .block-editor-block-list__block {
-			opacity: 1;
-		}
-	}
-
 	/**
 	* Block styles and alignments
 	*/
@@ -345,6 +318,39 @@
 	}
 }
 
+// Spotlight mode. Fade out blocks unless they contain a selected block.
+.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
+	opacity: 0.5;
+	transition: opacity 0.1s linear;
+	@include reduce-motion("transition");
+
+	// Nested blocks should never be faded. If the parent block is already faded
+	// out, it shouldn't be faded out more. If the parent block in not faded
+	// out, it shouldn't be faded out either because the block as a whole,
+	// including inner blocks, should be focused.
+	.block-editor-block-list__block,
+	&.is-selected,
+	&.is-multi-selected {
+		opacity: 1;
+	}
+}
+
+// Active entity spotlight.
+// Disable if focus mode is active.
+.is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
+	opacity: 0.5;
+	transition: opacity 0.1s linear;
+	@include reduce-motion("transition");
+
+	&.is-active-entity,
+	&.has-child-selected,
+	&:not(.has-child-selected) .block-editor-block-list__block,
+	&.is-active-entity .block-editor-block-list__block,
+	.is-active-entity .block-editor-block-list__block {
+		opacity: 1;
+	}
+}
+
 .wp-block[data-align="left"] > *,
 .wp-block[data-align="right"] > * {
 	// Without z-index, won't be clickable as "above" adjacent content.

packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 import { isReusableBlock, getBlockType } from '@wordpress/blocks';
 
 /**
@@ -23,7 +22,6 @@ import { store as blockEditorStore } from '../../../store';
  * @return {string} The class names.
  */
 export function useBlockClassNames( clientId ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
 	return useSelect(
 		( select ) => {
 			const {
@@ -37,7 +35,6 @@ export function useBlockClassNames( clientId ) {
 				__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
 			} = select( blockEditorStore );
 			const {
-				focusMode,
 				__experimentalSpotlightEntityBlocks: spotlightEntityBlocks,
 			} = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
@@ -58,17 +55,12 @@ export function useBlockClassNames( clientId ) {
 				'is-multi-selected': isBlockMultiSelected( clientId ),
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
-				'is-focused':
-					focusMode &&
-					isLargeViewport &&
-					( isSelected || isAncestorOfSelectedBlock ),
-				'is-focus-mode': focusMode && isLargeViewport,
 				'has-child-selected': isAncestorOfSelectedBlock && ! isDragging,
 				'has-active-entity': activeEntityBlockId,
 				// Determine if there is an active entity area to spotlight.
 				'is-active-entity': activeEntityBlockId === clientId,
 			} );
 		},
-		[ clientId, isLargeViewport ]
+		[ clientId ]
 	);
 }

packages/block-library/src/image/edit.js

@@ -279,7 +279,6 @@ export function ImageEdit( {
 	const classes = classnames( className, {
 		'is-transient': isBlobURL( url ),
 		'is-resized': !! width || !! height,
-		'is-focused': isSelected,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 	} );
 

packages/block-library/src/site-logo/edit.js

@@ -342,7 +342,6 @@ export default function LogoEdit( {
 
 	const classes = classnames( className, {
 		'is-resized': !! width,
-		'is-focused': isSelected,
 	} );
 
 	const blockProps = useBlockProps( {