BlockListBlock: reduce passed props (#26251)

WordPress · Oct 19, 2020 · 19e8135 · 19e8135
1 parent 717a6c4
commit 19e8135
Showing 1 changed file with 86 additions and 85 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -29,8 +29,12 @@ import {
 	useSelect,
 	useDispatch,
 } from '@wordpress/data';
-import { withViewportMatch } from '@wordpress/viewport';
-import { compose, pure, ifCondition } from '@wordpress/compose';
+import {
+	compose,
+	pure,
+	ifCondition,
+	useViewportMatch,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -78,7 +82,6 @@ function Block( { children, isHtml, ...props } ) {
 
 function BlockListBlock( {
 	mode,
-	isFocusMode,
 	isLocked,
 	clientId,
 	rootClientId,
@@ -104,17 +107,21 @@ function BlockListBlock( {
 	enableAnimation,
 	activeEntityBlockId,
 } ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
 	// In addition to withSelect, we should favor using useSelect in this
 	// component going forward to avoid leaking new props to the public API
 	// (editor.BlockListBlock filter)
-	const { isDragging, isHighlighted } = useSelect(
+	const { isDragging, isHighlighted, isFocusMode } = useSelect(
 		( select ) => {
-			const { isBlockBeingDragged, isBlockHighlighted } = select(
-				'core/block-editor'
-			);
+			const {
+				isBlockBeingDragged,
+				isBlockHighlighted,
+				getSettings,
+			} = select( 'core/block-editor' );
 			return {
 				isDragging: isBlockBeingDragged( clientId ),
 				isHighlighted: isBlockHighlighted( clientId ),
+				isFocusMode: getSettings().focusMode,
 			};
 		},
 		[ clientId ]
@@ -164,8 +171,10 @@ function BlockListBlock( {
 			'is-dragging': isDragging,
 			'is-typing': isTypingWithinBlock,
 			'is-focused':
-				isFocusMode && ( isSelected || isAncestorOfSelectedBlock ),
-			'is-focus-mode': isFocusMode,
+				isFocusMode &&
+				isLargeViewport &&
+				( isSelected || isAncestorOfSelectedBlock ),
+			'is-focus-mode': isFocusMode && isLargeViewport,
 			'has-child-selected': isAncestorOfSelectedBlock && ! isDragging,
 			'is-active-entity': activeEntityBlockId === clientId,
 		},
@@ -263,82 +272,75 @@ function BlockListBlock( {
 	);
 }
 
-const applyWithSelect = withSelect(
-	( select, { clientId, rootClientId, isLargeViewport } ) => {
-		const {
-			isBlockSelected,
-			isAncestorMultiSelected,
-			isBlockMultiSelected,
-			isFirstMultiSelectedBlock,
-			getLastMultiSelectedBlockClientId,
-			isTyping,
-			getBlockMode,
-			isSelectionEnabled,
-			getSettings,
-			hasSelectedInnerBlock,
-			getTemplateLock,
-			__unstableGetBlockWithoutInnerBlocks,
-			getMultiSelectedBlockClientIds,
-		} = select( 'core/block-editor' );
-		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
-		const isSelected = isBlockSelected( clientId );
-		const { focusMode, isRTL } = getSettings();
-		const templateLock = getTemplateLock( rootClientId );
-		const checkDeep = true;
-
-		// "ancestor" is the more appropriate label due to "deep" check
-		const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
-			clientId,
-			checkDeep
-		);
+const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
+	const {
+		isBlockSelected,
+		isAncestorMultiSelected,
+		isBlockMultiSelected,
+		isFirstMultiSelectedBlock,
+		getLastMultiSelectedBlockClientId,
+		isTyping,
+		getBlockMode,
+		isSelectionEnabled,
+		hasSelectedInnerBlock,
+		getTemplateLock,
+		__unstableGetBlockWithoutInnerBlocks,
+		getMultiSelectedBlockClientIds,
+	} = select( 'core/block-editor' );
+	const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+	const isSelected = isBlockSelected( clientId );
+	const templateLock = getTemplateLock( rootClientId );
+	const checkDeep = true;
+
+	// "ancestor" is the more appropriate label due to "deep" check
+	const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
+		clientId,
+		checkDeep
+	);
 
-		// The fallback to `{}` is a temporary fix.
-		// This function should never be called when a block is not present in
-		// the state. It happens now because the order in withSelect rendering
-		// is not correct.
-		const { name, attributes, isValid } = block || {};
-		const isFirstMultiSelected = isFirstMultiSelectedBlock( clientId );
-
-		// Do not add new properties here, use `useSelect` instead to avoid
-		// leaking new props to the public API (editor.BlockListBlock filter).
-		return {
-			isMultiSelected: isBlockMultiSelected( clientId ),
-			isPartOfMultiSelection:
-				isBlockMultiSelected( clientId ) ||
-				isAncestorMultiSelected( clientId ),
-			isFirstMultiSelected,
-			isLastMultiSelected:
-				getLastMultiSelectedBlockClientId() === clientId,
-			multiSelectedClientIds: isFirstMultiSelected
-				? getMultiSelectedBlockClientIds()
-				: undefined,
-
-			// We only care about this prop when the block is selected
-			// Thus to avoid unnecessary rerenders we avoid updating the prop if
-			// the block is not selected.
-			isTypingWithinBlock:
-				( isSelected || isAncestorOfSelectedBlock ) && isTyping(),
-
-			mode: getBlockMode( clientId ),
-			isSelectionEnabled: isSelectionEnabled(),
-			isLocked: !! templateLock,
-			isFocusMode: focusMode && isLargeViewport,
-			isRTL,
-
-			// Users of the editor.BlockListBlock filter used to be able to
-			// access the block prop.
-			// Ideally these blocks would rely on the clientId prop only.
-			// This is kept for backward compatibility reasons.
-			block,
-
-			name,
-			attributes,
-			isValid,
-			isSelected,
-			isAncestorOfSelectedBlock,
-		};
-	}
-);
+	// The fallback to `{}` is a temporary fix.
+	// This function should never be called when a block is not present in
+	// the state. It happens now because the order in withSelect rendering
+	// is not correct.
+	const { name, attributes, isValid } = block || {};
+	const isFirstMultiSelected = isFirstMultiSelectedBlock( clientId );
+
+	// Do not add new properties here, use `useSelect` instead to avoid
+	// leaking new props to the public API (editor.BlockListBlock filter).
+	return {
+		isMultiSelected: isBlockMultiSelected( clientId ),
+		isPartOfMultiSelection:
+			isBlockMultiSelected( clientId ) ||
+			isAncestorMultiSelected( clientId ),
+		isFirstMultiSelected,
+		isLastMultiSelected: getLastMultiSelectedBlockClientId() === clientId,
+		multiSelectedClientIds: isFirstMultiSelected
+			? getMultiSelectedBlockClientIds()
+			: undefined,
+
+		// We only care about this prop when the block is selected
+		// Thus to avoid unnecessary rerenders we avoid updating the prop if
+		// the block is not selected.
+		isTypingWithinBlock:
+			( isSelected || isAncestorOfSelectedBlock ) && isTyping(),
+
+		mode: getBlockMode( clientId ),
+		isSelectionEnabled: isSelectionEnabled(),
+		isLocked: !! templateLock,
+
+		// Users of the editor.BlockListBlock filter used to be able to
+		// access the block prop.
+		// Ideally these blocks would rely on the clientId prop only.
+		// This is kept for backward compatibility reasons.
+		block,
+
+		name,
+		attributes,
+		isValid,
+		isSelected,
+		isAncestorOfSelectedBlock,
+	};
+} );
 
 const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 	const {
@@ -417,7 +419,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 
 export default compose(
 	pure,
-	withViewportMatch( { isLargeViewport: 'medium' } ),
 	applyWithSelect,
 	applyWithDispatch,
 	// block is sometimes not mounted at the right time, causing it be undefined