Add inert attribute to disabled blocks that have only disabled descen…

…dants (#51079)

* Add inert attribute to disabled blocks that have only disabled descendants

* Fix typo

---------

Co-authored-by: ramon <ramonjd@gmail.com>

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

@@ -36,6 +36,7 @@ import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
 import useBlockOverlayActive from '../../block-content-overlay';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * If the block count exceeds the threshold, we disable the reordering animation
@@ -75,6 +76,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isPartOfSelection,
 		adjustScrolling,
 		enableAnimation,
+		isSubtreeDisabled,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -88,7 +90,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isBlockMultiSelected,
 				isAncestorMultiSelected,
 				isFirstMultiSelectedBlock,
-			} = select( blockEditorStore );
+				isBlockSubtreeDisabled,
+			} = unlock( select( blockEditorStore ) );
 			const { getActiveBlockVariation } = select( blocksStore );
 			const isSelected = isBlockSelected( clientId );
 			const isPartOfMultiSelection =
@@ -111,6 +114,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				enableAnimation:
 					! isTyping() &&
 					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
+				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
 			};
 		},
 		[ clientId ]
@@ -158,6 +162,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,
+		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: classnames(
 			// The wp-block className is important for editor styles.
 			classnames( 'block-editor-block-list__block', {

packages/block-editor/src/store/private-selectors.js

@@ -16,6 +16,7 @@ import {
 	getBlockRootClientId,
 	getTemplateLock,
 	getBlockName,
+	getBlockOrder,
 } from './selectors';
 
 /**
@@ -74,7 +75,7 @@ export function getLastInsertedBlocksClientIds( state ) {
 export const getBlockEditingMode = createRegistrySelector(
 	( select ) =>
 		( state, clientId = '' ) => {
-			const explicitEditingMode = getExplcitBlockEditingMode(
+			const explicitEditingMode = getExplicitBlockEditingMode(
 				state,
 				clientId
 			);
@@ -101,7 +102,7 @@ export const getBlockEditingMode = createRegistrySelector(
 		}
 );
 
-const getExplcitBlockEditingMode = createSelector(
+const getExplicitBlockEditingMode = createSelector(
 	( state, clientId = '' ) => {
 		while (
 			! state.blockEditingModes.has( clientId ) &&
@@ -113,3 +114,31 @@ const getExplcitBlockEditingMode = createSelector(
 	},
 	( state ) => [ state.blockEditingModes, state.blocks.parents ]
 );
+
+/**
+ * Returns true if the block with the given client ID and all of its descendants
+ * have an editing mode of 'disabled', or false otherwise.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID.
+ *
+ * @return {boolean} Whether the block and its descendants are disabled.
+ */
+export const isBlockSubtreeDisabled = createSelector(
+	( state, clientId ) => {
+		const isChildSubtreeDisabled = ( childClientId ) => {
+			const mode = state.blockEditingModes.get( childClientId );
+			return (
+				( mode === undefined || mode === 'disabled' ) &&
+				getBlockOrder( state, childClientId ).every(
+					isChildSubtreeDisabled
+				)
+			);
+		};
+		return (
+			getExplicitBlockEditingMode( state, clientId ) === 'disabled' &&
+			getBlockOrder( state, clientId ).every( isChildSubtreeDisabled )
+		);
+	},
+	( state ) => [ state.blockEditingModes, state.blocks.parents ]
+);