From 4ef07e9c11bb2220b0b18d6534f207429f3b19bf Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 25 Jul 2022 18:36:09 +0100
Subject: [PATCH 01/24] Add: Content lock ability.

---
 .../src/components/block-card/index.js        |   4 +-
 .../src/components/block-edit/edit.js         |   4 +-
 .../src/components/block-inspector/index.js   | 235 +++++++++++++++++-
 .../src/components/block-inspector/style.scss |  14 ++
 .../src/components/block-list/block.js        |  34 ++-
 .../src/components/block-list/style.scss      |   8 +
 .../block-list/use-block-props/index.js       |   2 +-
 .../src/components/list-view/block.js         |  21 +-
 .../src/components/list-view/branch.js        |  41 ++-
 .../src/components/list-view/index.js         |   2 +-
 .../block-editor/src/hooks/content-lock-ui.js | 123 +++++++++
 packages/block-editor/src/hooks/index.js      |   1 +
 packages/block-editor/src/store/selectors.js  |  18 ++
 packages/blocks/src/store/selectors.js        |  10 +
 14 files changed, 487 insertions(+), 30 deletions(-)
 create mode 100644 packages/block-editor/src/hooks/content-lock-ui.js

diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 21832629b9557f..f1ae52859eb6d1 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -8,7 +8,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import BlockIcon from '../block-icon';
 
-function BlockCard( { title, icon, description, blockType } ) {
+function BlockCard( { title, icon, description, blockType, backButton } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
 			since: '5.7',
@@ -18,7 +18,7 @@ function BlockCard( { title, icon, description, blockType } ) {
 	}
 	return (
 		<div className="block-editor-block-card">
-			<BlockIcon icon={ icon } showColors />
+			{ backButton ? backButton : <BlockIcon icon={ icon } showColors /> }
 			<div className="block-editor-block-card__content">
 				<h2 className="block-editor-block-card__title">{ title }</h2>
 				<span className="block-editor-block-card__description">
diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js
index b302b7b1dc44a3..6bc0ab2787f6ac 100644
--- a/packages/block-editor/src/components/block-edit/edit.js
+++ b/packages/block-editor/src/components/block-edit/edit.js
@@ -31,7 +31,7 @@ import BlockContext from '../block-context';
 const DEFAULT_BLOCK_CONTEXT = {};
 
 export const Edit = ( props ) => {
-	const { attributes = {}, name } = props;
+	const { attributes = {}, name, } = props;
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
 
@@ -59,7 +59,7 @@ export const Edit = ( props ) => {
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames( generatedClassName, attributes.className );
+	const className = classnames( generatedClassName, attributes.className, props.className );
 
 	return (
 		<Component { ...props } context={ context } className={ className } />
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 92c1fc479b620c..418a1f628f50ab 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
@@ -11,8 +11,18 @@ import {
 import {
 	PanelBody,
 	__experimentalUseSlot as useSlot,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useCallback, useEffect, useRef } from '@wordpress/element';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -29,19 +39,214 @@ import DefaultStylePicker from '../default-style-picker';
 import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+
+function useContentBlocks( blockTypes, block ) {
+	const contenBlocksObjectAux = useMemo( () => {
+		return blockTypes.reduce( ( result, blockType ) => {
+			if (
+				Object.entries( blockType.attributes ).some(
+					( [ , { __experimentalRole } ] ) =>
+						__experimentalRole === 'content'
+				)
+			) {
+				result[ blockType.name ] = true;
+			}
+			return result;
+		}, {} );
+	}, [ blockTypes ] );
+	const isContentBlock = useCallback(
+		( blockName ) => {
+			return !! contenBlocksObjectAux[ blockName ];
+		},
+		[ blockTypes ]
+	);
+	return useMemo( () => {
+		return getContentBlocks( [ block ], isContentBlock );
+	}, [ block, isContentBlock ] );
+}
+
+function getContentBlocks( blocks, isContentBlock ) {
+	const result = [];
+	for ( const block of blocks ) {
+		if ( isContentBlock( block.name ) ) {
+			result.push( block );
+		}
+		result.push( ...getContentBlocks( block.innerBlocks, isContentBlock ) );
+	}
+	return result;
+}
+
+function BlockInspectorNavigationEffects( { children } ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const { goTo, location } = useNavigator();
+	const lastLocationClientId = useRef();
+	const updatingSelectionTo = useRef();
+	const locationClientId = useMemo( () => {
+		if ( location.path.startsWith( '/block/' ) ) {
+			return location.path.substring( '/block/'.length );
+		}
+	}, [ location.path ] );
+	const selectedBlockId = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSelectedBlockClientId();
+	} );
+	// When the location changes update the selection to match the new location.
+	useEffect( () => {
+		lastLocationClientId.current = locationClientId;
+		if ( locationClientId && selectedBlockId !== locationClientId ) {
+			updatingSelectionTo.current = locationClientId;
+			selectBlock( locationClientId );
+		}
+	}, [ locationClientId ] );
+	// When the selection changes update the location to root if no selection update to match location is in progress.
+	useEffect( () => {
+		if ( updatingSelectionTo.current ) {
+			updatingSelectionTo.current = undefined;
+		} else if ( lastLocationClientId.current ) {
+			goTo( '/' );
+		}
+	}, [ selectedBlockId ] );
+
+	return children;
+}
+
+function BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
+	const blockType = blockTypes.find( ( { name } ) => name === block.name );
+	return (
+		<NavigatorButton
+			path={ `/block/${ block.clientId }` }
+			style={
+				selectedBlock.clientId === block.clientId
+					? { color: 'var(--wp-admin-theme-color)' }
+					: {}
+			}
+		>
+			<HStack justify="flex-start">
+				<BlockIcon icon={ blockType.icon } />
+				<FlexItem>{ blockType.title }</FlexItem>
+			</HStack>
+		</NavigatorButton>
+	);
+}
+
+function BlockNavigatorScreen( { block } ) {
+	return (
+		<NavigatorScreen path={ `/block/${ block.clientId }` }>
+			<BlockInspectorSingleBlock
+				clientId={ block.clientId }
+				blockName={ block.name }
+				backButton={
+					<NavigatorBackButton
+						style={
+							// TODO: This style override is also used in ToolsPanelHeader.
+							// It should be supported out-of-the-box by Button.
+							{ minWidth: 24, padding: 0 }
+						}
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						isSmall
+						aria-label={ __( 'Navigate to the previous view' ) }
+					/>
+				}
+			/>
+		</NavigatorScreen>
+	);
+}
+
+function BlockInspectorAbsorvedBy( { absorvedBy } ) {
+	const { blockTypes, block, selectedBlock } = useSelect(
+		( select ) => {
+			return {
+				blockTypes: select( blocksStore ).getBlockTypes(),
+				block: select( blockEditorStore ).getBlock( absorvedBy ),
+				selectedBlock: select( blockEditorStore ).getSelectedBlock(),
+			};
+		},
+		[ absorvedBy ]
+	);
+	const blockInformation = useBlockDisplayInformation( absorvedBy );
+	const contentBlocks = useContentBlocks( blockTypes, block );
+	const showSelectedBlock =
+		absorvedBy !== selectedBlock.clientId &&
+		! contentBlocks.some(
+			( contentBlock ) => contentBlock.clientId === selectedBlock.clientId
+		);
+	return (
+		<div className="block-editor-block-inspector">
+			<NavigatorProvider initialPath="/">
+				<BlockInspectorNavigationEffects>
+					<NavigatorScreen path="/">
+						<BlockCard { ...blockInformation } />
+						<BlockVariationTransforms
+							blockClientId={ absorvedBy }
+						/>
+						<VStack
+							spacing={ 1 }
+							padding={ 4 }
+							className="block-editor-block-inspector__block-buttons-container"
+						>
+							<h2 className="block-editor-block-card__title">
+								{ __( 'Content' ) }
+							</h2>
+							<BlockNavigationButton
+								selectedBlock={ selectedBlock }
+								block={ block }
+								blockTypes={ blockTypes }
+							/>
+							{ contentBlocks.map( ( contentBlock ) => (
+								<BlockNavigationButton
+									selectedBlock={ selectedBlock }
+									key={ contentBlock.clientId }
+									block={ contentBlock }
+									blockTypes={ blockTypes }
+								/>
+							) ) }
+							{ showSelectedBlock && (
+								<>
+									<h2 className="block-editor-block-card__title">
+										{ __( 'Selected block' ) }
+									</h2>
+									<BlockNavigationButton
+										selectedBlock={ selectedBlock }
+										block={ selectedBlock }
+										blockTypes={ blockTypes }
+									/>
+								</>
+							) }
+							;
+						</VStack>
+					</NavigatorScreen>
+					<BlockNavigatorScreen block={ block } />
+					{ contentBlocks.map( ( contentBlock ) => {
+						return (
+							<BlockNavigatorScreen
+								key={ contentBlock.clientId }
+								block={ contentBlock }
+							/>
+						);
+					} ) }
+					{ showSelectedBlock && (
+						<BlockNavigatorScreen block={ selectedBlock } />
+					) }
+				</BlockInspectorNavigationEffects>
+			</NavigatorProvider>
+		</div>
+	);
+}
 
 const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const {
 		count,
-		hasBlockStyles,
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
+		absorvedBy,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
+			__unstableGetContentLockingParent,
+			getBlockAttributes,
 		} = select( blockEditorStore );
 		const { getBlockStyles } = select( blocksStore );
 
@@ -59,6 +264,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
 			hasBlockStyles: blockStyles && blockStyles.length > 0,
+			absorvedBy: getBlockAttributes( _selectedBlockClientId )?.lock
+				?.content
+				? _selectedBlockClientId
+				: __unstableGetContentLockingParent( _selectedBlockClientId ),
 		};
 	}, [] );
 
@@ -109,24 +318,30 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		}
 		return null;
 	}
+	if ( absorvedBy ) {
+		return <BlockInspectorAbsorvedBy absorvedBy={ absorvedBy } />;
+	}
 	return (
 		<BlockInspectorSingleBlock
 			clientId={ selectedBlockClientId }
 			blockName={ blockType.name }
-			hasBlockStyles={ hasBlockStyles }
 		/>
 	);
 };
 
-const BlockInspectorSingleBlock = ( {
-	clientId,
-	blockName,
-	hasBlockStyles,
-} ) => {
+const BlockInspectorSingleBlock = ( { clientId, blockName, backButton } ) => {
+	const hasBlockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			const blockStyles = getBlockStyles( blockName );
+			return blockStyles && blockStyles.length > 0;
+		},
+		[ blockName ]
+	);
 	const blockInformation = useBlockDisplayInformation( clientId );
 	return (
 		<div className="block-editor-block-inspector">
-			<BlockCard { ...blockInformation } />
+			<BlockCard backButton={ backButton } { ...blockInformation } />
 			<BlockVariationTransforms blockClientId={ clientId } />
 			{ hasBlockStyles && (
 				<div>
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index 393121ce4d8bd4..cb864b73ebef3d 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -34,3 +34,17 @@
 	padding: ($grid-unit-20 * 2) $grid-unit-20;
 	text-align: center;
 }
+
+
+.block-editor-block-inspector__block-buttons-container {
+	border-top: $border-width solid $gray-200;
+	padding: $grid-unit-20;
+}
+
+.block-editor-block-inspector__block-type-type {
+	font-weight: 500;
+	&.block-editor-block-inspector__block-type-type {
+		line-height: $button-size-small;
+		margin: 0 0 $grid-unit-05;
+	}
+}
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index fc668c174d2272..5e9b76d6a2321e 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -18,6 +18,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	serializeRawBlock,
 	switchToBlockType,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -93,10 +94,21 @@ function BlockListBlock( {
 	onMerge,
 	toggleSelection,
 } ) {
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().supportsLayout;
-	}, [] );
+	const { themeSupportsLayout, hasContentLockedParent, isContentBlock } =
+		useSelect(
+			( select ) => {
+				const { getSettings, __unstableGetContentLockingParent } =
+					select( blockEditorStore );
+				return {
+					themeSupportsLayout: getSettings().supportsLayout,
+					hasContentLockedParent:
+						!! __unstableGetContentLockingParent( clientId ),
+					isContentBlock:
+						select( blocksStore ).__unstableIsContentBlock( name ),
+				};
+			},
+			[ name, clientId ]
+		);
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
@@ -122,6 +134,19 @@ function BlockListBlock( {
 
 	const blockType = getBlockType( name );
 
+	if ( hasContentLockedParent && ! isContentBlock ) {
+		wrapperProps = {
+			...wrapperProps,
+			tabIndex: -1,
+		};
+	}
+	console.log( {
+		clientId,
+		name,
+		hasContentLockedParent,
+		isContentBlock,
+		wrapperProps,
+	} );
 	// Determine whether the block has props to apply to the wrapper.
 	if ( blockType?.getEditWrapperProps ) {
 		wrapperProps = mergeWrapperProps(
@@ -195,6 +220,7 @@ function BlockListBlock( {
 		wrapperProps: restWrapperProps,
 		isAligned,
 	};
+
 	const memoizedValue = useMemo( () => value, Object.values( value ) );
 
 	return (
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 860b468e708421..30003cc4e09520 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -123,6 +123,14 @@
 	padding: 0;
 }
 
+.is-content-locked {
+	pointer-events: none;
+}
+
+.is-content-block {
+	pointer-events: initial;
+}
+
 .block-editor-block-list__layout .block-editor-block-list__block {
 	position: relative;
 
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index 24a25d41d8b36b..7733c197286dbb 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -144,11 +144,11 @@ export function useBlockProps(
 	}
 
 	return {
+		tabIndex: 0,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,
 		id: `block-${ clientId }${ htmlSuffix }`,
-		tabIndex: 0,
 		role: 'document',
 		'aria-label': blockLabel,
 		'data-block': clientId,
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index f8645a1071ff10..1a6a3d4f37ec1c 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -40,6 +40,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
+	renderOnlyContentBlocks,
 	block,
 	isDragged,
 	isSelected,
@@ -67,9 +68,17 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
-		[ clientId ]
+	const { blockName, shouldRender } = useSelect(
+		( select ) => {
+			const name = select( blockEditorStore ).getBlockName( clientId );
+			return {
+				blockName: name,
+				shouldRender:
+					! renderOnlyContentBlocks ||
+					select( blocksStore ).__unstableIsContentBlock( name ),
+			};
+		},
+		[ clientId, renderOnlyContentBlocks ]
 	);
 
 	// When a block hides its toolbar it also hides the block settings menu,
@@ -173,6 +182,10 @@ function ListViewBlock( {
 		[ clientId, expand, collapse, isExpanded ]
 	);
 
+	if ( ! shouldRender ) {
+		return null;
+	}
+
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index 16f0e6488431c2..2007124ae47636 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
-import { AsyncModeProvider } from '@wordpress/data';
+import { memo, useMemo } from '@wordpress/element';
+import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -10,6 +10,7 @@ import { AsyncModeProvider } from '@wordpress/data';
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
+import { store as blockEditorStore } from '../../store';
 
 /**
  * Given a block, returns the total number of blocks in that subtree. This is used to help determine
@@ -74,8 +75,19 @@ const countReducer =
 		return count + 1;
 	};
 
+function getIdsTreeFlat( blocks ) {
+	return blocks.reduce( ( result, { clientId, innerBlocks } ) => {
+		return [
+			...result,
+			{ clientId, innerBlocks: [] },
+			...getIdsTreeFlat( innerBlocks ),
+		];
+	}, [] );
+}
+
 function ListViewBranch( props ) {
 	const {
+		parentId,
 		blocks,
 		selectBlock,
 		showBlockMovers,
@@ -88,20 +100,35 @@ function ListViewBranch( props ) {
 		isExpanded,
 	} = props;
 
+	const isContentLocked = useSelect(
+		( select ) => {
+			return !! (
+				parentId &&
+				select( blockEditorStore ).getBlockAttributes( parentId )?.lock
+					?.content
+			);
+		},
+		[ parentId ]
+	);
+	const processedBlocks = useMemo( () => {
+		if ( isContentLocked ) {
+			return getIdsTreeFlat( blocks ).filter( Boolean );
+		}
+		return blocks.filter( Boolean );
+	}, [ isContentLocked, blocks ] );
 	const { expandedState, draggedClientIds } = useListViewContext();
 
-	const filteredBlocks = blocks.filter( Boolean );
-	const blockCount = filteredBlocks.length;
+	const blockCount = processedBlocks.length;
 	let nextPosition = listPosition;
 
 	return (
 		<>
-			{ filteredBlocks.map( ( block, index ) => {
+			{ processedBlocks.map( ( block, index ) => {
 				const { clientId, innerBlocks } = block;
 
 				if ( index > 0 ) {
 					nextPosition += countBlocks(
-						filteredBlocks[ index - 1 ],
+						processedBlocks[ index - 1 ],
 						expandedState,
 						draggedClientIds,
 						isExpanded
@@ -138,6 +165,7 @@ function ListViewBranch( props ) {
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (
 							<ListViewBlock
+								renderOnlyContentBlocks={ isContentLocked }
 								block={ block }
 								selectBlock={ selectBlock }
 								isSelected={ isSelected }
@@ -161,6 +189,7 @@ function ListViewBranch( props ) {
 						) }
 						{ hasNestedBlocks && shouldExpand && ! isDragged && (
 							<ListViewBranch
+								parentId={ clientId }
 								blocks={ innerBlocks }
 								selectBlock={ selectBlock }
 								showBlockMovers={ showBlockMovers }
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index 79a85eff2f5c6d..1066ce0023f50b 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -63,7 +63,7 @@ function ListView(
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
-
+	console.log({clientIdsTree});
 	const { visibleBlockCount } = useSelect(
 		( select ) => {
 			const { getGlobalBlockCount, getClientIdsOfDescendants } =
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
new file mode 100644
index 00000000000000..54b14a733b370c
--- /dev/null
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { BlockControls } from '../components';
+
+function StopEdingAsBlockOnOutsideSelect( {
+	clientId,
+	lock,
+	setIsTemporarlyEditingAsBlocks,
+} ) {
+	const isBlockOrDescendSelected = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return (
+				isBlockSelected( clientId ) ||
+				hasSelectedInnerBlock( clientId, true )
+			);
+		},
+		[ clientId ]
+	);
+	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
+	useEffect( () => {
+		if ( ! isBlockOrDescendSelected ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( clientId, {
+				lock: {
+					...lock,
+					content: true,
+				},
+			} );
+			setIsTemporarlyEditingAsBlocks( false );
+		}
+	}, [ isBlockOrDescendSelected ] );
+	return null;
+}
+
+export const withBlockControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const [ isTemporarlyEditingAsBlocks, setIsTemporarlyEditingAsBlocks ] =
+			useState( false );
+		const lock = useSelect(
+			( select ) =>
+				select( blockEditorStore ).getBlockAttributes( props.clientId )
+					.lock,
+			[ props.clientId ]
+		);
+		const isContentLocked = lock?.content === true;
+		const {
+			__unstableMarkNextChangeAsNotPersistent,
+			updateBlockAttributes,
+		} = useDispatch( blockEditorStore );
+		if ( ! isContentLocked && ! isTemporarlyEditingAsBlocks ) {
+			return <BlockEdit { ...props } />;
+		}
+		return (
+			<>
+				{ isTemporarlyEditingAsBlocks && ! isContentLocked && (
+					<StopEdingAsBlockOnOutsideSelect
+						clientId={ props.clientId }
+						lock={ lock }
+						setIsTemporarlyEditingAsBlocks={
+							setIsTemporarlyEditingAsBlocks
+						}
+					/>
+				) }
+				<BlockControls group="other">
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ () => {
+								if (
+									isTemporarlyEditingAsBlocks &&
+									! isContentLocked
+								) {
+									__unstableMarkNextChangeAsNotPersistent();
+									updateBlockAttributes( props.clientId, {
+										lock: {
+											...lock,
+											content: true,
+										},
+									} );
+									setIsTemporarlyEditingAsBlocks( false );
+								} else {
+									const newLock = { ...lock };
+									delete newLock.content;
+									__unstableMarkNextChangeAsNotPersistent();
+									updateBlockAttributes( props.clientId, {
+										lock: newLock,
+									} );
+									setIsTemporarlyEditingAsBlocks( true );
+								}
+							} }
+						>
+							{ isTemporarlyEditingAsBlocks && ! isContentLocked
+								? __( ' Finish editing as blocks' )
+								: __( 'Edit as Blocks' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+				<BlockEdit { ...props } />
+			</>
+		);
+	},
+	'withToolbarControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/style/with-block-controls',
+	withBlockControls
+);
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 272e79e78dbdd3..5a07d864beb620 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -15,6 +15,7 @@ import './duotone';
 import './font-size';
 import './border';
 import './layout';
+import './content-lock-ui';
 
 export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 030977812dcd4d..b1efa68ff4ff60 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1434,6 +1434,10 @@ export function getTemplateLock( state, rootClientId ) {
 		return state.settings.templateLock;
 	}
 
+	if ( getBlockAttributes( state, rootClientId ).lock?.content === true ) {
+		return 'all';
+	}
+
 	const blockListSettings = getBlockListSettings( state, rootClientId );
 	if ( ! blockListSettings ) {
 		return null;
@@ -1593,6 +1597,7 @@ const canInsertBlockTypeUnmemoized = (
 export const canInsertBlockType = createSelector(
 	canInsertBlockTypeUnmemoized,
 	( state, blockName, rootClientId ) => [
+		state.blocks.attributes[ rootClientId ],
 		state.blockListSettings[ rootClientId ],
 		state.blocks.byClientId[ rootClientId ],
 		state.settings.allowedBlockTypes,
@@ -2679,3 +2684,16 @@ export const __unstableGetVisibleBlocks = createSelector(
 	},
 	( state ) => [ state.blocks.visibility ]
 );
+
+export const __unstableGetContentLockingParent = createSelector(
+	( state, clientId ) => {
+		let current = clientId;
+		while ( !! state.blocks.parents[ current ] ) {
+			current = state.blocks.parents[ current ];
+			if ( getBlockAttributes( state, current )?.lock?.content ) {
+				return current;
+			}
+		}
+	},
+	( state ) => [ state.blocks.parents, state.blocks.attributes ]
+);
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index 04c87a439fd593..4bf76274ce6688 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -790,3 +790,13 @@ export const hasChildBlocksWithInserterSupport = ( state, blockName ) => {
 		return hasBlockSupport( state, childBlockName, 'inserter', true );
 	} );
 };
+
+export const __unstableIsContentBlock = createSelector(
+	( state, blockTypeName ) => {
+		const blockType = getBlockType( state, blockTypeName );
+		return Object.entries( blockType.attributes ).some(
+			( [ , { __experimentalRole } ] ) => __experimentalRole === 'content'
+		);
+	},
+	( state, blockTypeName ) => [ state.blockTypes[ blockTypeName ].attributes ]
+);

From b3782718fd596f746645ba20b71a4e0eeba5052b Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 12 Aug 2022 16:53:21 +0100
Subject: [PATCH 02/24] Update
 packages/block-editor/src/components/list-view/index.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: André <583546+oandregal@users.noreply.github.com>
---
 packages/block-editor/src/components/list-view/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index 1066ce0023f50b..654afba4d4735f 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -63,7 +63,6 @@ function ListView(
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
-	console.log({clientIdsTree});
 	const { visibleBlockCount } = useSelect(
 		( select ) => {
 			const { getGlobalBlockCount, getClientIdsOfDescendants } =

From 550b4142f2cfda2877848175e8703cc5771a7203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 16 Aug 2022 11:41:25 +0200
Subject: [PATCH 03/24] ListViewBranch: rename back processedBlocks to
 filteredBlocks

---
 packages/block-editor/src/components/list-view/branch.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index 2007124ae47636..dacdca3284e1e0 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -110,7 +110,7 @@ function ListViewBranch( props ) {
 		},
 		[ parentId ]
 	);
-	const processedBlocks = useMemo( () => {
+	const filteredBlocks = useMemo( () => {
 		if ( isContentLocked ) {
 			return getIdsTreeFlat( blocks ).filter( Boolean );
 		}
@@ -118,17 +118,17 @@ function ListViewBranch( props ) {
 	}, [ isContentLocked, blocks ] );
 	const { expandedState, draggedClientIds } = useListViewContext();
 
-	const blockCount = processedBlocks.length;
+	const blockCount = filteredBlocks.length;
 	let nextPosition = listPosition;
 
 	return (
 		<>
-			{ processedBlocks.map( ( block, index ) => {
+			{ filteredBlocks.map( ( block, index ) => {
 				const { clientId, innerBlocks } = block;
 
 				if ( index > 0 ) {
 					nextPosition += countBlocks(
-						processedBlocks[ index - 1 ],
+						filteredBlocks[ index - 1 ],
 						expandedState,
 						draggedClientIds,
 						isExpanded

From a5067a5410018bd41f2fa34999bed49b45eb46ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 16 Aug 2022 11:55:50 +0200
Subject: [PATCH 04/24] ListViewBranch: refactor to make flattenBlockTree
 function a reducer

---
 .../src/components/list-view/branch.js        | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index dacdca3284e1e0..e4b123b45fc25c 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -75,16 +75,6 @@ const countReducer =
 		return count + 1;
 	};
 
-function getIdsTreeFlat( blocks ) {
-	return blocks.reduce( ( result, { clientId, innerBlocks } ) => {
-		return [
-			...result,
-			{ clientId, innerBlocks: [] },
-			...getIdsTreeFlat( innerBlocks ),
-		];
-	}, [] );
-}
-
 function ListViewBranch( props ) {
 	const {
 		parentId,
@@ -110,9 +100,16 @@ function ListViewBranch( props ) {
 		},
 		[ parentId ]
 	);
+	const flattenBlockTree = ( result, { clientId, innerBlocks } ) => {
+		return [
+			...result,
+			{ clientId, innerBlocks: [] },
+			...innerBlocks.reduce( flattenBlockTree, [] ),
+		];
+	};
 	const filteredBlocks = useMemo( () => {
 		if ( isContentLocked ) {
-			return getIdsTreeFlat( blocks ).filter( Boolean );
+			return blocks.reduce( flattenBlockTree, [] ).filter( Boolean );
 		}
 		return blocks.filter( Boolean );
 	}, [ isContentLocked, blocks ] );

From e3e84e3eed8c2ef68fe979382d86cb6209e9990c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 16 Aug 2022 12:29:42 +0200
Subject: [PATCH 05/24] ListViewBranch: filter the blocks that need rendering

---
 .../src/components/list-view/branch.js        | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index e4b123b45fc25c..e4a9c05f160dd9 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { memo, useMemo } from '@wordpress/element';
+import { memo } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -107,12 +108,27 @@ function ListViewBranch( props ) {
 			...innerBlocks.reduce( flattenBlockTree, [] ),
 		];
 	};
-	const filteredBlocks = useMemo( () => {
-		if ( isContentLocked ) {
-			return blocks.reduce( flattenBlockTree, [] ).filter( Boolean );
-		}
-		return blocks.filter( Boolean );
-	}, [ isContentLocked, blocks ] );
+	const hasContentRoleAttribute =
+		( select ) =>
+		( { clientId } ) => {
+			const name = select( blockEditorStore ).getBlockName( clientId );
+			const hasContentRole =
+				select( blocksStore ).__unstableIsContentBlock( name );
+			return hasContentRole;
+		};
+
+	const filteredBlocks = useSelect(
+		( select ) => {
+			if ( isContentLocked ) {
+				return blocks
+					.reduce( flattenBlockTree, [] )
+					.filter( hasContentRoleAttribute( select ) )
+					.filter( Boolean );
+			}
+			return blocks.filter( Boolean );
+		},
+		[ isContentLocked, blocks ]
+	);
 	const { expandedState, draggedClientIds } = useListViewContext();
 
 	const blockCount = filteredBlocks.length;

From 79ca57c6774f290b259fcad0869113fe09fd3ad4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 16 Aug 2022 12:30:41 +0200
Subject: [PATCH 06/24] ListViewBlock: no longer needs to know anything about
 content locking

---
 .../src/components/list-view/block.js         | 21 ++++---------------
 .../src/components/list-view/branch.js        |  1 -
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 1a6a3d4f37ec1c..f8645a1071ff10 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -40,7 +40,6 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
-	renderOnlyContentBlocks,
 	block,
 	isDragged,
 	isSelected,
@@ -68,17 +67,9 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { blockName, shouldRender } = useSelect(
-		( select ) => {
-			const name = select( blockEditorStore ).getBlockName( clientId );
-			return {
-				blockName: name,
-				shouldRender:
-					! renderOnlyContentBlocks ||
-					select( blocksStore ).__unstableIsContentBlock( name ),
-			};
-		},
-		[ clientId, renderOnlyContentBlocks ]
+	const blockName = useSelect(
+		( select ) => select( blockEditorStore ).getBlockName( clientId ),
+		[ clientId ]
 	);
 
 	// When a block hides its toolbar it also hides the block settings menu,
@@ -182,10 +173,6 @@ function ListViewBlock( {
 		[ clientId, expand, collapse, isExpanded ]
 	);
 
-	if ( ! shouldRender ) {
-		return null;
-	}
-
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index e4a9c05f160dd9..b28b4dacc2edbf 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -178,7 +178,6 @@ function ListViewBranch( props ) {
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (
 							<ListViewBlock
-								renderOnlyContentBlocks={ isContentLocked }
 								block={ block }
 								selectBlock={ selectBlock }
 								isSelected={ isSelected }

From 224600419e991b292122f56ca6822e283b681ed1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 17 Aug 2022 17:47:27 +0200
Subject: [PATCH 07/24] Remove log

---
 packages/block-editor/src/components/block-list/block.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 5e9b76d6a2321e..58eb5dc9869ff4 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -140,13 +140,6 @@ function BlockListBlock( {
 			tabIndex: -1,
 		};
 	}
-	console.log( {
-		clientId,
-		name,
-		hasContentLockedParent,
-		isContentBlock,
-		wrapperProps,
-	} );
 	// Determine whether the block has props to apply to the wrapper.
 	if ( blockType?.getEditWrapperProps ) {
 		wrapperProps = mergeWrapperProps(

From ffcadfcb138785589693c2d7aaf43b87eda209be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Thu, 18 Aug 2022 13:59:48 +0200
Subject: [PATCH 08/24] Refactor: rename isTemporarlyEditingAsBlocks to
 isEditingAsBlocks

---
 .../block-editor/src/hooks/content-lock-ui.js | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 54b14a733b370c..cccf8467e0d774 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -14,12 +14,12 @@ import { useState, useEffect } from '@wordpress/element';
 import { store as blockEditorStore } from '../store';
 import { BlockControls } from '../components';
 
-function StopEdingAsBlockOnOutsideSelect( {
+function StopEditingAsBlocksOnOutsideSelect( {
 	clientId,
 	lock,
-	setIsTemporarlyEditingAsBlocks,
+	setIsEditingAsBlocks,
 } ) {
-	const isBlockOrDescendSelected = useSelect(
+	const isBlockOrDescendantSelected = useSelect(
 		( select ) => {
 			const { isBlockSelected, hasSelectedInnerBlock } =
 				select( blockEditorStore );
@@ -33,7 +33,7 @@ function StopEdingAsBlockOnOutsideSelect( {
 	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
 	useEffect( () => {
-		if ( ! isBlockOrDescendSelected ) {
+		if ( ! isBlockOrDescendantSelected ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateBlockAttributes( clientId, {
 				lock: {
@@ -41,16 +41,15 @@ function StopEdingAsBlockOnOutsideSelect( {
 					content: true,
 				},
 			} );
-			setIsTemporarlyEditingAsBlocks( false );
+			setIsEditingAsBlocks( false );
 		}
-	}, [ isBlockOrDescendSelected ] );
+	}, [ isBlockOrDescendantSelected ] );
 	return null;
 }
 
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const [ isTemporarlyEditingAsBlocks, setIsTemporarlyEditingAsBlocks ] =
-			useState( false );
+		const [ isEditingAsBlocks, setIsEditingAsBlocks ] = useState( false );
 		const lock = useSelect(
 			( select ) =>
 				select( blockEditorStore ).getBlockAttributes( props.clientId )
@@ -62,28 +61,25 @@ export const withBlockControls = createHigherOrderComponent(
 			__unstableMarkNextChangeAsNotPersistent,
 			updateBlockAttributes,
 		} = useDispatch( blockEditorStore );
-		if ( ! isContentLocked && ! isTemporarlyEditingAsBlocks ) {
+
+		if ( ! isContentLocked && ! isEditingAsBlocks ) {
 			return <BlockEdit { ...props } />;
 		}
+
 		return (
 			<>
-				{ isTemporarlyEditingAsBlocks && ! isContentLocked && (
-					<StopEdingAsBlockOnOutsideSelect
+				{ isEditingAsBlocks && ! isContentLocked && (
+					<StopEditingAsBlocksOnOutsideSelect
 						clientId={ props.clientId }
 						lock={ lock }
-						setIsTemporarlyEditingAsBlocks={
-							setIsTemporarlyEditingAsBlocks
-						}
+						setIsEditingAsBlocks={ setIsEditingAsBlocks }
 					/>
 				) }
 				<BlockControls group="other">
 					<ToolbarGroup>
 						<ToolbarButton
 							onClick={ () => {
-								if (
-									isTemporarlyEditingAsBlocks &&
-									! isContentLocked
-								) {
+								if ( isEditingAsBlocks && ! isContentLocked ) {
 									__unstableMarkNextChangeAsNotPersistent();
 									updateBlockAttributes( props.clientId, {
 										lock: {
@@ -91,7 +87,7 @@ export const withBlockControls = createHigherOrderComponent(
 											content: true,
 										},
 									} );
-									setIsTemporarlyEditingAsBlocks( false );
+									setIsEditingAsBlocks( false );
 								} else {
 									const newLock = { ...lock };
 									delete newLock.content;
@@ -99,11 +95,11 @@ export const withBlockControls = createHigherOrderComponent(
 									updateBlockAttributes( props.clientId, {
 										lock: newLock,
 									} );
-									setIsTemporarlyEditingAsBlocks( true );
+									setIsEditingAsBlocks( true );
 								}
 							} }
 						>
-							{ isTemporarlyEditingAsBlocks && ! isContentLocked
+							{ isEditingAsBlocks && ! isContentLocked
 								? __( ' Finish editing as blocks' )
 								: __( 'Edit as Blocks' ) }
 						</ToolbarButton>

From ecb24602e5995c26decccbcf5f603b1a42885484 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 19 Aug 2022 17:42:44 +0200
Subject: [PATCH 09/24] templateLock: remove logic from lock.content

---
 packages/block-editor/src/store/selectors.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index b1efa68ff4ff60..9ef9635a5b0f51 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1434,10 +1434,6 @@ export function getTemplateLock( state, rootClientId ) {
 		return state.settings.templateLock;
 	}
 
-	if ( getBlockAttributes( state, rootClientId ).lock?.content === true ) {
-		return 'all';
-	}
-
 	const blockListSettings = getBlockListSettings( state, rootClientId );
 	if ( ! blockListSettings ) {
 		return null;

From 4437647a0c4c063ed4bf9df37410d4fdd7eac245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 19 Aug 2022 17:43:23 +0200
Subject: [PATCH 10/24] templateLock:noContent should prevent drag&drop

---
 .../src/components/use-block-drop-zone/index.js          | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
index 427dfcbb56ad51..ab88e1596b508f 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/index.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -92,10 +92,13 @@ export default function useBlockDropZone( {
 } = {} ) {
 	const [ targetBlockIndex, setTargetBlockIndex ] = useState( null );
 
-	const isLockedAll = useSelect(
+	const isLocked = useSelect(
 		( select ) => {
 			const { getTemplateLock } = select( blockEditorStore );
-			return getTemplateLock( targetRootClientId ) === 'all';
+			const templateLock = getTemplateLock( targetRootClientId );
+			return [ 'all', 'noContent' ].some(
+				( lock ) => lock === templateLock
+			);
 		},
 		[ targetRootClientId ]
 	);
@@ -127,7 +130,7 @@ export default function useBlockDropZone( {
 	);
 
 	return useDropZone( {
-		isDisabled: isLockedAll,
+		isDisabled: isLocked,
 		onDrop: onBlockDrop,
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being

From 48ae7f665af4732d38702822357b2810dbee4f9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 19 Aug 2022 17:46:56 +0200
Subject: [PATCH 11/24] templateLock:noContent sync innerblocks template if
 blocks changed

---
 .../inner-blocks/use-inner-block-template-sync.js  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js
index 47efbc41b4a61c..8323f8f7ce4ffc 100644
--- a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js
+++ b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js
@@ -19,8 +19,8 @@ import { store as blockEditorStore } from '../../store';
  * This hook makes sure that a block's inner blocks stay in sync with the given
  * block "template". The template is a block hierarchy to which inner blocks must
  * conform. If the blocks get "out of sync" with the template and the template
- * is meant to be locked (e.g. templateLock = "all"), then we replace the inner
- * blocks with the correct value after synchronizing it with the template.
+ * is meant to be locked (e.g. templateLock = "all" or templateLock = "noContent"),
+ * then we replace the inner blocks with the correct value after synchronizing it with the template.
  *
  * @param {string}  clientId                       The block client ID.
  * @param {Object}  template                       The template to match.
@@ -51,9 +51,13 @@ export default function useInnerBlockTemplateSync(
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplate = useRef( null );
 	useLayoutEffect( () => {
-		// Only synchronize innerBlocks with template if innerBlocks are empty or
-		// a locking all exists directly on the block.
-		if ( innerBlocks.length === 0 || templateLock === 'all' ) {
+		// Only synchronize innerBlocks with template if innerBlocks are empty
+		// or a locking "all" or "noContent" exists directly on the block.
+		if (
+			innerBlocks.length === 0 ||
+			templateLock === 'all' ||
+			templateLock === 'noContent'
+		) {
 			const hasTemplateChanged = ! isEqual(
 				template,
 				existingTemplate.current

From 337a4bfa8da3033b03d9c7c6ff9fc7aba4187893 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 19 Aug 2022 17:49:08 +0200
Subject: [PATCH 12/24] templateLock:noContent update docs for InnerBlocks

---
 packages/block-editor/src/components/inner-blocks/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 029d6cf1dad949..d564819acf0ed2 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -125,6 +125,7 @@ Template locking of `InnerBlocks` is similar to [Custom Post Type templates lock
 Template locking allows locking the `InnerBlocks` area for the current template.
 _Options:_
 
+-   `noContent` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list.
 -   `'all'` — prevents all operations. It is not possible to insert new blocks. Move existing blocks or delete them.
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )

From 0912b1f7b9669511c450076680f66afcaa967677 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 19 Aug 2022 18:12:08 +0200
Subject: [PATCH 13/24] templateLock: substitute lock.content by templateLock
 to get the locked parent

---
 packages/block-editor/src/store/selectors.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 9ef9635a5b0f51..9dc03933255c3c 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2686,7 +2686,7 @@ export const __unstableGetContentLockingParent = createSelector(
 		let current = clientId;
 		while ( !! state.blocks.parents[ current ] ) {
 			current = state.blocks.parents[ current ];
-			if ( getBlockAttributes( state, current )?.lock?.content ) {
+			if ( getTemplateLock( state, current ) === 'noContent' ) {
 				return current;
 			}
 		}

From ec65df3c8dde6b9f8305f6e8c79f5bbb997e24bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 19 Aug 2022 18:14:58 +0200
Subject: [PATCH 14/24] templateLock: substitute lock.content by templateLock
 in ListView

---
 packages/block-editor/src/components/list-view/branch.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index b28b4dacc2edbf..b30b8737dcce94 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -95,8 +95,8 @@ function ListViewBranch( props ) {
 		( select ) => {
 			return !! (
 				parentId &&
-				select( blockEditorStore ).getBlockAttributes( parentId )?.lock
-					?.content
+				select( blockEditorStore ).getTemplateLock( parentId ) ===
+					'noContent'
 			);
 		},
 		[ parentId ]

From 03a5f316e97fe5f3af23c1984ccba6bfa626b4c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 19 Aug 2022 18:20:22 +0200
Subject: [PATCH 15/24] templateLock: substitute lock.content by templateLock
 in Block toolbar

---
 .../block-editor/src/hooks/content-lock-ui.js | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index cccf8467e0d774..b8a73858189378 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -16,7 +16,6 @@ import { BlockControls } from '../components';
 
 function StopEditingAsBlocksOnOutsideSelect( {
 	clientId,
-	lock,
 	setIsEditingAsBlocks,
 } ) {
 	const isBlockOrDescendantSelected = useSelect(
@@ -36,10 +35,7 @@ function StopEditingAsBlocksOnOutsideSelect( {
 		if ( ! isBlockOrDescendantSelected ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateBlockAttributes( clientId, {
-				lock: {
-					...lock,
-					content: true,
-				},
+				templateLock: 'noContent',
 			} );
 			setIsEditingAsBlocks( false );
 		}
@@ -50,13 +46,12 @@ function StopEditingAsBlocksOnOutsideSelect( {
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const [ isEditingAsBlocks, setIsEditingAsBlocks ] = useState( false );
-		const lock = useSelect(
+		const templateLock = useSelect(
 			( select ) =>
-				select( blockEditorStore ).getBlockAttributes( props.clientId )
-					.lock,
+				select( blockEditorStore ).getTemplateLock( props.clientId ),
 			[ props.clientId ]
 		);
-		const isContentLocked = lock?.content === true;
+		const isContentLocked = templateLock === 'noContent';
 		const {
 			__unstableMarkNextChangeAsNotPersistent,
 			updateBlockAttributes,
@@ -71,7 +66,6 @@ export const withBlockControls = createHigherOrderComponent(
 				{ isEditingAsBlocks && ! isContentLocked && (
 					<StopEditingAsBlocksOnOutsideSelect
 						clientId={ props.clientId }
-						lock={ lock }
 						setIsEditingAsBlocks={ setIsEditingAsBlocks }
 					/>
 				) }
@@ -82,18 +76,13 @@ export const withBlockControls = createHigherOrderComponent(
 								if ( isEditingAsBlocks && ! isContentLocked ) {
 									__unstableMarkNextChangeAsNotPersistent();
 									updateBlockAttributes( props.clientId, {
-										lock: {
-											...lock,
-											content: true,
-										},
+										templateLock: 'noContent',
 									} );
 									setIsEditingAsBlocks( false );
 								} else {
-									const newLock = { ...lock };
-									delete newLock.content;
 									__unstableMarkNextChangeAsNotPersistent();
 									updateBlockAttributes( props.clientId, {
-										lock: newLock,
+										templateLock: undefined,
 									} );
 									setIsEditingAsBlocks( true );
 								}

From 9e9d8dfce1c060d60a3213c87c4a47cf29ef2103 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Mon, 22 Aug 2022 10:00:25 +0200
Subject: [PATCH 16/24] templateLock: add noContent as a new state att in
 blocks that use it

---
 packages/block-library/src/column/block.json | 2 +-
 packages/block-library/src/cover/block.json  | 2 +-
 packages/block-library/src/group/block.json  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json
index 0601abddd79be7..59472b4c124046 100644
--- a/packages/block-library/src/column/block.json
+++ b/packages/block-library/src/column/block.json
@@ -19,7 +19,7 @@
 		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
-			"enum": [ "all", "insert", false ]
+			"enum": [ "all", "insert", "noContent", false ]
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 12c717370c426d..a7b495cfc3f8f6 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -73,7 +73,7 @@
 		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
-			"enum": [ "all", "insert", false ]
+			"enum": [ "all", "insert", "noContent", false ]
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index cfc07d59d15b4a..4e0f15c90d6e96 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -14,7 +14,7 @@
 		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
-			"enum": [ "all", "insert", false ]
+			"enum": [ "all", "insert", "noContent", false ]
 		},
 		"layout": {
 			"type": "object",

From e0ff4d5c38f04e9b0db8d10a2b8b9f0c251d8434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 23 Aug 2022 12:45:15 +0200
Subject: [PATCH 17/24] Fix lint issues

---
 packages/block-editor/src/components/block-edit/edit.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js
index 6bc0ab2787f6ac..f9154067e0729a 100644
--- a/packages/block-editor/src/components/block-edit/edit.js
+++ b/packages/block-editor/src/components/block-edit/edit.js
@@ -31,7 +31,7 @@ import BlockContext from '../block-context';
 const DEFAULT_BLOCK_CONTEXT = {};
 
 export const Edit = ( props ) => {
-	const { attributes = {}, name, } = props;
+	const { attributes = {}, name } = props;
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
 
@@ -59,7 +59,11 @@ export const Edit = ( props ) => {
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames( generatedClassName, attributes.className, props.className );
+	const className = classnames(
+		generatedClassName,
+		attributes.className,
+		props.className
+	);
 
 	return (
 		<Component { ...props } context={ context } className={ className } />

From 3d3eceeb3cb61b9a5a2f5fdaa64aa3d2f042fe9e Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Tue, 23 Aug 2022 19:41:30 +0100
Subject: [PATCH 18/24] Enhacements

---
 package-lock.json                             | 26 ++++++------
 .../src/components/block-inspector/index.js   | 35 ++++------------
 .../components/block-parent-selector/index.js | 11 +++--
 .../src/components/block-toolbar/index.js     | 40 ++++++++++++-------
 .../use-nested-settings-update.js             |  4 +-
 .../src/components/list-view/block.js         | 15 +++++--
 .../src/components/list-view/branch.js        | 40 +++++--------------
 .../block-editor/src/hooks/content-lock-ui.js | 18 ++++++++-
 packages/block-editor/src/store/selectors.js  |  4 +-
 9 files changed, 96 insertions(+), 97 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f239212bd376c0..05773bdc375ddd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18666,7 +18666,7 @@
 		"app-root-dir": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz",
-			"integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==",
+			"integrity": "sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=",
 			"dev": true
 		},
 		"app-root-path": {
@@ -26845,7 +26845,7 @@
 		"babel-plugin-add-react-displayname": {
 			"version": "0.0.5",
 			"resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
-			"integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==",
+			"integrity": "sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=",
 			"dev": true
 		},
 		"babel-plugin-apply-mdx-type-prop": {
@@ -27268,7 +27268,7 @@
 		"batch-processor": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
-			"integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==",
+			"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=",
 			"dev": true
 		},
 		"bcrypt-pbkdf": {
@@ -30558,7 +30558,7 @@
 		"css.escape": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-			"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+			"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
 			"dev": true
 		},
 		"cssesc": {
@@ -36679,7 +36679,7 @@
 		"has-glob": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/has-glob/-/has-glob-1.0.0.tgz",
-			"integrity": "sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g==",
+			"integrity": "sha1-mqqe7b/7G6OZCnsAEPtnjuAIEgc=",
 			"dev": true,
 			"requires": {
 				"is-glob": "^3.0.0"
@@ -36688,7 +36688,7 @@
 				"is-glob": {
 					"version": "3.1.0",
 					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-					"integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
+					"integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
 					"dev": true,
 					"requires": {
 						"is-extglob": "^2.1.0"
@@ -38502,7 +38502,7 @@
 		"is-window": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz",
-			"integrity": "sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==",
+			"integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0=",
 			"dev": true
 		},
 		"is-windows": {
@@ -41879,7 +41879,7 @@
 		"js-string-escape": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
-			"integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==",
+			"integrity": "sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=",
 			"dev": true
 		},
 		"js-tokens": {
@@ -43407,7 +43407,7 @@
 		"lz-string": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-			"integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+			"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
 			"dev": true
 		},
 		"macos-release": {
@@ -46738,7 +46738,7 @@
 		"num2fraction": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-			"integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
+			"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
 			"dev": true
 		},
 		"number-is-nan": {
@@ -47817,7 +47817,7 @@
 		"p-defer": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-			"integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
+			"integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
 			"dev": true
 		},
 		"p-event": {
@@ -49156,7 +49156,7 @@
 		"pretty-hrtime": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-			"integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+			"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
 			"dev": true
 		},
 		"prismjs": {
@@ -51388,7 +51388,7 @@
 		"relateurl": {
 			"version": "0.2.7",
 			"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-			"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+			"integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
 			"dev": true
 		},
 		"remark": {
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 418a1f628f50ab..09a96aae77a129 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -116,7 +116,7 @@ function BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
 		<NavigatorButton
 			path={ `/block/${ block.clientId }` }
 			style={
-				selectedBlock.clientId === block.clientId
+				selectedBlock && selectedBlock.clientId === block.clientId
 					? { color: 'var(--wp-admin-theme-color)' }
 					: {}
 			}
@@ -165,11 +165,6 @@ function BlockInspectorAbsorvedBy( { absorvedBy } ) {
 	);
 	const blockInformation = useBlockDisplayInformation( absorvedBy );
 	const contentBlocks = useContentBlocks( blockTypes, block );
-	const showSelectedBlock =
-		absorvedBy !== selectedBlock.clientId &&
-		! contentBlocks.some(
-			( contentBlock ) => contentBlock.clientId === selectedBlock.clientId
-		);
 	return (
 		<div className="block-editor-block-inspector">
 			<NavigatorProvider initialPath="/">
@@ -200,19 +195,6 @@ function BlockInspectorAbsorvedBy( { absorvedBy } ) {
 									blockTypes={ blockTypes }
 								/>
 							) ) }
-							{ showSelectedBlock && (
-								<>
-									<h2 className="block-editor-block-card__title">
-										{ __( 'Selected block' ) }
-									</h2>
-									<BlockNavigationButton
-										selectedBlock={ selectedBlock }
-										block={ selectedBlock }
-										blockTypes={ blockTypes }
-									/>
-								</>
-							) }
-							;
 						</VStack>
 					</NavigatorScreen>
 					<BlockNavigatorScreen block={ block } />
@@ -224,9 +206,6 @@ function BlockInspectorAbsorvedBy( { absorvedBy } ) {
 							/>
 						);
 					} ) }
-					{ showSelectedBlock && (
-						<BlockNavigatorScreen block={ selectedBlock } />
-					) }
 				</BlockInspectorNavigationEffects>
 			</NavigatorProvider>
 		</div>
@@ -246,7 +225,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getSelectedBlockCount,
 			getBlockName,
 			__unstableGetContentLockingParent,
-			getBlockAttributes,
+			getTemplateLock,
 		} = select( blockEditorStore );
 		const { getBlockStyles } = select( blocksStore );
 
@@ -264,10 +243,12 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
 			hasBlockStyles: blockStyles && blockStyles.length > 0,
-			absorvedBy: getBlockAttributes( _selectedBlockClientId )?.lock
-				?.content
-				? _selectedBlockClientId
-				: __unstableGetContentLockingParent( _selectedBlockClientId ),
+			absorvedBy:
+				getTemplateLock( _selectedBlockClientId ) === 'noContent'
+					? _selectedBlockClientId
+					: __unstableGetContentLockingParent(
+							_selectedBlockClientId
+					  ),
 		};
 	}, [] );
 
diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
index 8d24ba26794d53..299abdd6a355b3 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/packages/block-editor/src/components/block-parent-selector/index.js
@@ -28,14 +28,16 @@ export default function BlockParentSelector() {
 		( select ) => {
 			const {
 				getBlockName,
-				getBlockParents,
+				__unstableGetContentLockingParent,
+				getBlockRootClientId,
 				getSelectedBlockClientId,
 				getSettings,
 			} = select( blockEditorStore );
 			const { hasBlockSupport } = select( blocksStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
-			const parents = getBlockParents( selectedBlockClientId );
-			const _firstParentClientId = parents[ parents.length - 1 ];
+			const _firstParentClientId =
+				__unstableGetContentLockingParent( selectedBlockClientId ) ||
+				getBlockRootClientId( selectedBlockClientId );
 			const parentBlockName = getBlockName( _firstParentClientId );
 			const _parentBlockType = getBlockType( parentBlockName );
 			const settings = getSettings();
@@ -52,6 +54,7 @@ export default function BlockParentSelector() {
 		[]
 	);
 	const blockInformation = useBlockDisplayInformation( firstParentClientId );
+	console.log({ blockInformation, firstParentClientId });
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
@@ -66,7 +69,7 @@ export default function BlockParentSelector() {
 		},
 	} );
 
-	if ( shouldHide || firstParentClientId === undefined ) {
+	if ( shouldHide || ! firstParentClientId ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 93a2265f61fb47..0195af8ea8ebaf 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -37,6 +37,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		hasReducedUI,
 		isValid,
 		isVisual,
+		isContentLocked,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -45,6 +46,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 			isBlockValid,
 			getBlockRootClientId,
 			getSettings,
+			__unstableGetContentLockingParent,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -66,6 +68,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 			isVisual: selectedBlockClientIds.every(
 				( id ) => getBlockMode( id ) === 'visual'
 			),
+			isContentLocked: !! __unstableGetContentLockingParent(
+				selectedBlockClientId
+			),
 		};
 	}, [] );
 
@@ -113,23 +118,26 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	return (
 		<div className={ classes }>
 			{ ! isMultiToolbar && ! displayHeaderToolbar && (
-				<BlockParentSelector clientIds={ blockClientIds } />
+				<BlockParentSelector />
 			) }
 			<div ref={ nodeRef } { ...showMoversGestures }>
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-						<BlockSwitcher clientIds={ blockClientIds } />
-						{ ! isMultiToolbar && (
-							<BlockLockToolbar
-								clientId={ blockClientIds[ 0 ] }
+				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+					! isContentLocked && (
+						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+							<BlockSwitcher clientIds={ blockClientIds } />
+							{ ! isMultiToolbar && (
+								<BlockLockToolbar
+									clientId={ blockClientIds[ 0 ] }
+								/>
+							) }
+							<BlockMover
+								clientIds={ blockClientIds }
+								hideDragHandle={
+									hideDragHandle || hasReducedUI
+								}
 							/>
-						) }
-						<BlockMover
-							clientIds={ blockClientIds }
-							hideDragHandle={ hideDragHandle || hasReducedUI }
-						/>
-					</ToolbarGroup>
-				) }
+						</ToolbarGroup>
+					) }
 			</div>
 			{ shouldShowVisualToolbar && isMultiToolbar && (
 				<BlockGroupToolbar />
@@ -161,7 +169,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				</>
 			) }
 			<BlockEditVisuallyButton clientIds={ blockClientIds } />
-			<BlockSettingsMenu clientIds={ blockClientIds } />
+			{ ! isContentLocked && (
+				<BlockSettingsMenu clientIds={ blockClientIds } />
+			) }
 		</div>
 	);
 };
diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
index d0bf71d1e72d22..c8e2e3443ae15d 100644
--- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
+++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
@@ -69,7 +69,9 @@ export default function useNestedSettingsUpdate(
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
 			templateLock:
-				templateLock === undefined ? parentLock : templateLock,
+				templateLock === undefined || parentLock === 'noContent'
+					? parentLock
+					: templateLock,
 		};
 
 		// These values are not defined for RN, so only include them if they
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index f8645a1071ff10..ef066bbc61aacd 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -67,8 +67,15 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
+	const { isContentLocked, blockName } = useSelect(
+		( select ) => {
+			const { getBlockName, getTemplateLock } =
+				select( blockEditorStore );
+			return {
+				blockName: getBlockName( clientId ),
+				isContentLocked: getTemplateLock( clientId ) === 'noContent',
+			};
+		},
 		[ clientId ]
 	);
 
@@ -210,7 +217,7 @@ function ListViewBlock( {
 			path={ path }
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
-			isExpanded={ isExpanded }
+			isExpanded={ isContentLocked ? undefined : isExpanded }
 			aria-selected={ !! isSelected }
 		>
 			<TreeGridCell
@@ -219,7 +226,7 @@ function ListViewBlock( {
 				ref={ cellRef }
 				aria-label={ blockAriaLabel }
 				aria-selected={ !! isSelected }
-				aria-expanded={ isExpanded }
+				aria-expanded={ isContentLocked ? undefined : isExpanded }
 				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index b30b8737dcce94..f486d3631834ba 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -3,8 +3,10 @@
  */
 import { memo } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
 
+/**
+ * Internal dependencies
+ */
 /**
  * Internal dependencies
  */
@@ -78,7 +80,6 @@ const countReducer =
 
 function ListViewBranch( props ) {
 	const {
-		parentId,
 		blocks,
 		selectBlock,
 		showBlockMovers,
@@ -89,6 +90,7 @@ function ListViewBranch( props ) {
 		listPosition = 0,
 		fixedListWindow,
 		isExpanded,
+		parentId,
 	} = props;
 
 	const isContentLocked = useSelect(
@@ -101,36 +103,14 @@ function ListViewBranch( props ) {
 		},
 		[ parentId ]
 	);
-	const flattenBlockTree = ( result, { clientId, innerBlocks } ) => {
-		return [
-			...result,
-			{ clientId, innerBlocks: [] },
-			...innerBlocks.reduce( flattenBlockTree, [] ),
-		];
-	};
-	const hasContentRoleAttribute =
-		( select ) =>
-		( { clientId } ) => {
-			const name = select( blockEditorStore ).getBlockName( clientId );
-			const hasContentRole =
-				select( blocksStore ).__unstableIsContentBlock( name );
-			return hasContentRole;
-		};
-
-	const filteredBlocks = useSelect(
-		( select ) => {
-			if ( isContentLocked ) {
-				return blocks
-					.reduce( flattenBlockTree, [] )
-					.filter( hasContentRoleAttribute( select ) )
-					.filter( Boolean );
-			}
-			return blocks.filter( Boolean );
-		},
-		[ isContentLocked, blocks ]
-	);
+
 	const { expandedState, draggedClientIds } = useListViewContext();
 
+	if ( isContentLocked ) {
+		return null;
+	}
+
+	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
 	let nextPosition = listPosition;
 
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index b8a73858189378..8b37e0dc52e59c 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -51,6 +51,8 @@ export const withBlockControls = createHigherOrderComponent(
 				select( blockEditorStore ).getTemplateLock( props.clientId ),
 			[ props.clientId ]
 		);
+		const { getBlockListSettings } = useSelect( blockEditorStore );
+		const { updateBlockListSettings } = useDispatch( blockEditorStore );
 		const isContentLocked = templateLock === 'noContent';
 		const {
 			__unstableMarkNextChangeAsNotPersistent,
@@ -74,12 +76,24 @@ export const withBlockControls = createHigherOrderComponent(
 						<ToolbarButton
 							onClick={ () => {
 								if ( isEditingAsBlocks && ! isContentLocked ) {
+									updateBlockListSettings( props.clientId, {
+										...getBlockListSettings(
+											props.clientId
+										),
+										templateLock: 'noContent',
+									} );
 									__unstableMarkNextChangeAsNotPersistent();
 									updateBlockAttributes( props.clientId, {
 										templateLock: 'noContent',
 									} );
 									setIsEditingAsBlocks( false );
 								} else {
+									updateBlockListSettings( props.clientId, {
+										...getBlockListSettings(
+											props.clientId
+										),
+										templateLock: false,
+									} );
 									__unstableMarkNextChangeAsNotPersistent();
 									updateBlockAttributes( props.clientId, {
 										templateLock: undefined,
@@ -89,8 +103,8 @@ export const withBlockControls = createHigherOrderComponent(
 							} }
 						>
 							{ isEditingAsBlocks && ! isContentLocked
-								? __( ' Finish editing as blocks' )
-								: __( 'Edit as Blocks' ) }
+								? __( 'Done' )
+								: __( 'Edit' ) }
 						</ToolbarButton>
 					</ToolbarGroup>
 				</BlockControls>
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 9dc03933255c3c..37b9dce459d90d 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2684,12 +2684,14 @@ export const __unstableGetVisibleBlocks = createSelector(
 export const __unstableGetContentLockingParent = createSelector(
 	( state, clientId ) => {
 		let current = clientId;
+		let result;
 		while ( !! state.blocks.parents[ current ] ) {
 			current = state.blocks.parents[ current ];
 			if ( getTemplateLock( state, current ) === 'noContent' ) {
-				return current;
+				result = current;
 			}
 		}
+		return result;
 	},
 	( state ) => [ state.blocks.parents, state.blocks.attributes ]
 );

From de082f8f03bb2705d15dbac5f45265c68dd94540 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Tue, 23 Aug 2022 20:01:15 +0100
Subject: [PATCH 19/24] Remove inspector on content lock

---
 .../src/components/block-inspector/index.js   | 139 +++++-------------
 1 file changed, 34 insertions(+), 105 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 09a96aae77a129..8a7c76a58ad8d0 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -19,6 +19,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalUseNavigator as useNavigator,
+	Button,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo, useCallback, useEffect, useRef } from '@wordpress/element';
@@ -77,78 +78,22 @@ function getContentBlocks( blocks, isContentBlock ) {
 	return result;
 }
 
-function BlockInspectorNavigationEffects( { children } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
-	const { goTo, location } = useNavigator();
-	const lastLocationClientId = useRef();
-	const updatingSelectionTo = useRef();
-	const locationClientId = useMemo( () => {
-		if ( location.path.startsWith( '/block/' ) ) {
-			return location.path.substring( '/block/'.length );
-		}
-	}, [ location.path ] );
-	const selectedBlockId = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSelectedBlockClientId();
-	} );
-	// When the location changes update the selection to match the new location.
-	useEffect( () => {
-		lastLocationClientId.current = locationClientId;
-		if ( locationClientId && selectedBlockId !== locationClientId ) {
-			updatingSelectionTo.current = locationClientId;
-			selectBlock( locationClientId );
-		}
-	}, [ locationClientId ] );
-	// When the selection changes update the location to root if no selection update to match location is in progress.
-	useEffect( () => {
-		if ( updatingSelectionTo.current ) {
-			updatingSelectionTo.current = undefined;
-		} else if ( lastLocationClientId.current ) {
-			goTo( '/' );
-		}
-	}, [ selectedBlockId ] );
-
-	return children;
-}
-
 function BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const blockType = blockTypes.find( ( { name } ) => name === block.name );
+	const isSelected =
+		selectedBlock && selectedBlock.clientId === block.clientId;
 	return (
-		<NavigatorButton
-			path={ `/block/${ block.clientId }` }
-			style={
-				selectedBlock && selectedBlock.clientId === block.clientId
-					? { color: 'var(--wp-admin-theme-color)' }
-					: {}
-			}
+		<Button
+			disabled={ isSelected }
+			style={ isSelected ? { color: 'var(--wp-admin-theme-color)' } : {} }
+			onClick={ () => selectBlock( block.clientId ) }
 		>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ blockType.icon } />
 				<FlexItem>{ blockType.title }</FlexItem>
 			</HStack>
-		</NavigatorButton>
-	);
-}
-
-function BlockNavigatorScreen( { block } ) {
-	return (
-		<NavigatorScreen path={ `/block/${ block.clientId }` }>
-			<BlockInspectorSingleBlock
-				clientId={ block.clientId }
-				blockName={ block.name }
-				backButton={
-					<NavigatorBackButton
-						style={
-							// TODO: This style override is also used in ToolsPanelHeader.
-							// It should be supported out-of-the-box by Button.
-							{ minWidth: 24, padding: 0 }
-						}
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						isSmall
-						aria-label={ __( 'Navigate to the previous view' ) }
-					/>
-				}
-			/>
-		</NavigatorScreen>
+		</Button>
 	);
 }
 
@@ -167,47 +112,31 @@ function BlockInspectorAbsorvedBy( { absorvedBy } ) {
 	const contentBlocks = useContentBlocks( blockTypes, block );
 	return (
 		<div className="block-editor-block-inspector">
-			<NavigatorProvider initialPath="/">
-				<BlockInspectorNavigationEffects>
-					<NavigatorScreen path="/">
-						<BlockCard { ...blockInformation } />
-						<BlockVariationTransforms
-							blockClientId={ absorvedBy }
-						/>
-						<VStack
-							spacing={ 1 }
-							padding={ 4 }
-							className="block-editor-block-inspector__block-buttons-container"
-						>
-							<h2 className="block-editor-block-card__title">
-								{ __( 'Content' ) }
-							</h2>
-							<BlockNavigationButton
-								selectedBlock={ selectedBlock }
-								block={ block }
-								blockTypes={ blockTypes }
-							/>
-							{ contentBlocks.map( ( contentBlock ) => (
-								<BlockNavigationButton
-									selectedBlock={ selectedBlock }
-									key={ contentBlock.clientId }
-									block={ contentBlock }
-									blockTypes={ blockTypes }
-								/>
-							) ) }
-						</VStack>
-					</NavigatorScreen>
-					<BlockNavigatorScreen block={ block } />
-					{ contentBlocks.map( ( contentBlock ) => {
-						return (
-							<BlockNavigatorScreen
-								key={ contentBlock.clientId }
-								block={ contentBlock }
-							/>
-						);
-					} ) }
-				</BlockInspectorNavigationEffects>
-			</NavigatorProvider>
+			<BlockCard { ...blockInformation } />
+			<BlockVariationTransforms blockClientId={ absorvedBy } />
+			<VStack
+				spacing={ 1 }
+				padding={ 4 }
+				className="block-editor-block-inspector__block-buttons-container"
+			>
+				<h2 className="block-editor-block-card__title">
+					{ __( 'Content' ) }
+				</h2>
+				<BlockNavigationButton
+					selectedBlock={ selectedBlock }
+					block={ block }
+					blockTypes={ blockTypes }
+				/>
+				{ contentBlocks.map( ( contentBlock ) => (
+					<BlockNavigationButton
+						selectedBlock={ selectedBlock }
+						key={ contentBlock.clientId }
+						d
+						block={ contentBlock }
+						blockTypes={ blockTypes }
+					/>
+				) ) }
+			</VStack>
 		</div>
 	);
 }

From 70047c4b6f28efe1410b6b983e37a5fdeddb2d7e Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Wed, 24 Aug 2022 17:10:21 +0100
Subject: [PATCH 20/24] Continued the iterations

---
 .../src/components/block-inspector/index.js   | 19 +++----------------
 .../components/block-parent-selector/index.js | 11 ++++-------
 .../src/components/block-toolbar/index.js     |  6 +++---
 .../block-editor/src/hooks/content-lock-ui.js |  2 +-
 4 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 8a7c76a58ad8d0..8e95f7d419e8f7 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
@@ -11,19 +11,13 @@ import {
 import {
 	PanelBody,
 	__experimentalUseSlot as useSlot,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
 	FlexItem,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	__experimentalUseNavigator as useNavigator,
 	Button,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback, useEffect, useRef } from '@wordpress/element';
-import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -85,8 +79,7 @@ function BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
 		selectedBlock && selectedBlock.clientId === block.clientId;
 	return (
 		<Button
-			disabled={ isSelected }
-			style={ isSelected ? { color: 'var(--wp-admin-theme-color)' } : {} }
+			isPressed={ isSelected }
 			onClick={ () => selectBlock( block.clientId ) }
 		>
 			<HStack justify="flex-start">
@@ -122,16 +115,10 @@ function BlockInspectorAbsorvedBy( { absorvedBy } ) {
 				<h2 className="block-editor-block-card__title">
 					{ __( 'Content' ) }
 				</h2>
-				<BlockNavigationButton
-					selectedBlock={ selectedBlock }
-					block={ block }
-					blockTypes={ blockTypes }
-				/>
 				{ contentBlocks.map( ( contentBlock ) => (
 					<BlockNavigationButton
 						selectedBlock={ selectedBlock }
 						key={ contentBlock.clientId }
-						d
 						block={ contentBlock }
 						blockTypes={ blockTypes }
 					/>
diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
index 299abdd6a355b3..8d24ba26794d53 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/packages/block-editor/src/components/block-parent-selector/index.js
@@ -28,16 +28,14 @@ export default function BlockParentSelector() {
 		( select ) => {
 			const {
 				getBlockName,
-				__unstableGetContentLockingParent,
-				getBlockRootClientId,
+				getBlockParents,
 				getSelectedBlockClientId,
 				getSettings,
 			} = select( blockEditorStore );
 			const { hasBlockSupport } = select( blocksStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
-			const _firstParentClientId =
-				__unstableGetContentLockingParent( selectedBlockClientId ) ||
-				getBlockRootClientId( selectedBlockClientId );
+			const parents = getBlockParents( selectedBlockClientId );
+			const _firstParentClientId = parents[ parents.length - 1 ];
 			const parentBlockName = getBlockName( _firstParentClientId );
 			const _parentBlockType = getBlockType( parentBlockName );
 			const settings = getSettings();
@@ -54,7 +52,6 @@ export default function BlockParentSelector() {
 		[]
 	);
 	const blockInformation = useBlockDisplayInformation( firstParentClientId );
-	console.log({ blockInformation, firstParentClientId });
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
@@ -69,7 +66,7 @@ export default function BlockParentSelector() {
 		},
 	} );
 
-	if ( shouldHide || ! firstParentClientId ) {
+	if ( shouldHide || firstParentClientId === undefined ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 0195af8ea8ebaf..07d4e861f60947 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -117,9 +117,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar && ! displayHeaderToolbar && (
-				<BlockParentSelector />
-			) }
+			{ ! isMultiToolbar &&
+				! displayHeaderToolbar &&
+				! isContentLocked && <BlockParentSelector /> }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					! isContentLocked && (
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 8b37e0dc52e59c..97a589f9d8d800 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -104,7 +104,7 @@ export const withBlockControls = createHigherOrderComponent(
 						>
 							{ isEditingAsBlocks && ! isContentLocked
 								? __( 'Done' )
-								: __( 'Edit' ) }
+								: __( 'Modify' ) }
 						</ToolbarButton>
 					</ToolbarGroup>
 				</BlockControls>

From a1861edf0218ee5ddd21d901856805bc2e4d0d5c Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 25 Aug 2022 11:34:29 +0100
Subject: [PATCH 21/24] Fixed toolbar margin and modify button padding

---
 .../block-tools/block-contextual-toolbar.js   | 13 +++-
 .../block-editor/src/hooks/content-lock-ui.js | 64 +++++++++----------
 2 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
index bd7a3547e13748..ba31043ada2dd8 100644
--- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
@@ -20,8 +20,12 @@ import { store as blockEditorStore } from '../../store';
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const { blockType, hasParents, showParentSelector } = useSelect(
 		( select ) => {
-			const { getBlockName, getBlockParents, getSelectedBlockClientIds } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockParents,
+				getSelectedBlockClientIds,
+				__unstableGetContentLockingParent,
+			} = select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -42,7 +46,10 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						'__experimentalParentSelector',
 						true
 					) &&
-					selectedBlockClientIds.length <= 1,
+					selectedBlockClientIds.length <= 1 &&
+					! __unstableGetContentLockingParent(
+						selectedBlockClientId
+					),
 			};
 		},
 		[]
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 97a589f9d8d800..abcfc322ebf07f 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -72,41 +72,35 @@ export const withBlockControls = createHigherOrderComponent(
 					/>
 				) }
 				<BlockControls group="other">
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ () => {
-								if ( isEditingAsBlocks && ! isContentLocked ) {
-									updateBlockListSettings( props.clientId, {
-										...getBlockListSettings(
-											props.clientId
-										),
-										templateLock: 'noContent',
-									} );
-									__unstableMarkNextChangeAsNotPersistent();
-									updateBlockAttributes( props.clientId, {
-										templateLock: 'noContent',
-									} );
-									setIsEditingAsBlocks( false );
-								} else {
-									updateBlockListSettings( props.clientId, {
-										...getBlockListSettings(
-											props.clientId
-										),
-										templateLock: false,
-									} );
-									__unstableMarkNextChangeAsNotPersistent();
-									updateBlockAttributes( props.clientId, {
-										templateLock: undefined,
-									} );
-									setIsEditingAsBlocks( true );
-								}
-							} }
-						>
-							{ isEditingAsBlocks && ! isContentLocked
-								? __( 'Done' )
-								: __( 'Modify' ) }
-						</ToolbarButton>
-					</ToolbarGroup>
+					<ToolbarButton
+						onClick={ () => {
+							if ( isEditingAsBlocks && ! isContentLocked ) {
+								updateBlockListSettings( props.clientId, {
+									...getBlockListSettings( props.clientId ),
+									templateLock: 'noContent',
+								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								updateBlockAttributes( props.clientId, {
+									templateLock: 'noContent',
+								} );
+								setIsEditingAsBlocks( false );
+							} else {
+								updateBlockListSettings( props.clientId, {
+									...getBlockListSettings( props.clientId ),
+									templateLock: false,
+								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								updateBlockAttributes( props.clientId, {
+									templateLock: undefined,
+								} );
+								setIsEditingAsBlocks( true );
+							}
+						} }
+					>
+						{ isEditingAsBlocks && ! isContentLocked
+							? __( 'Done' )
+							: __( 'Modify' ) }
+					</ToolbarButton>
 				</BlockControls>
 				<BlockEdit { ...props } />
 			</>

From 4b55b2cdfaf2948da885cab9b36be69db1274510 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 25 Aug 2022 12:40:19 +0100
Subject: [PATCH 22/24] Fix linting and tests

---
 packages/block-editor/src/hooks/content-lock-ui.js | 2 +-
 packages/block-editor/src/store/selectors.js       | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index abcfc322ebf07f..6e1ed874d4c835 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { ToolbarButton } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 37b9dce459d90d..df1c5cb0de9665 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1593,7 +1593,6 @@ const canInsertBlockTypeUnmemoized = (
 export const canInsertBlockType = createSelector(
 	canInsertBlockTypeUnmemoized,
 	( state, blockName, rootClientId ) => [
-		state.blocks.attributes[ rootClientId ],
 		state.blockListSettings[ rootClientId ],
 		state.blocks.byClientId[ rootClientId ],
 		state.settings.allowedBlockTypes,

From 7ff1b2e604215ac76a1e6cd298a9b5432ad872d7 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 25 Aug 2022 17:01:36 +0100
Subject: [PATCH 23/24] Highlight all the block in spotlight mode. Switch to
 spotlight mode on edit as blocks.

---
 .../src/components/block-list/block.js        |  55 +++++----
 .../src/components/block-list/style.scss      |  19 +++-
 .../list-view/use-block-selection.js          |   1 -
 .../block-editor/src/hooks/content-lock-ui.js | 105 +++++++++++++-----
 packages/block-editor/src/store/actions.js    |  14 +++
 packages/block-editor/src/store/reducer.js    |  16 +++
 packages/block-editor/src/store/selectors.js  |   6 +-
 7 files changed, 160 insertions(+), 56 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 58eb5dc9869ff4..7281a7d4ef0e94 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -94,21 +94,36 @@ function BlockListBlock( {
 	onMerge,
 	toggleSelection,
 } ) {
-	const { themeSupportsLayout, hasContentLockedParent, isContentBlock } =
-		useSelect(
-			( select ) => {
-				const { getSettings, __unstableGetContentLockingParent } =
-					select( blockEditorStore );
-				return {
-					themeSupportsLayout: getSettings().supportsLayout,
-					hasContentLockedParent:
-						!! __unstableGetContentLockingParent( clientId ),
-					isContentBlock:
-						select( blocksStore ).__unstableIsContentBlock( name ),
-				};
-			},
-			[ name, clientId ]
-		);
+	const {
+		themeSupportsLayout,
+		hasContentLockedParent,
+		isContentBlock,
+		isContentLocking,
+		isTemporarilyEditingAsBlocks,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				__unstableGetContentLockingParent,
+				getTemplateLock,
+				__unstableGetTemporarilyEditingAsBlocks,
+			} = select( blockEditorStore );
+			const _hasContentLockedParent =
+				!! __unstableGetContentLockingParent( clientId );
+			return {
+				themeSupportsLayout: getSettings().supportsLayout,
+				isContentBlock:
+					select( blocksStore ).__unstableIsContentBlock( name ),
+				hasContentLockedParent: _hasContentLockedParent,
+				isContentLocking:
+					getTemplateLock( clientId ) === 'noContent' &&
+					! _hasContentLockedParent,
+				isTemporarilyEditingAsBlocks:
+					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+			};
+		},
+		[ name, clientId ]
+	);
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
@@ -206,10 +221,12 @@ function BlockListBlock( {
 
 	const value = {
 		clientId,
-		className:
-			dataAlign && themeSupportsLayout
-				? classnames( className, `align${ dataAlign }` )
-				: className,
+		className: classnames(
+			hasContentLockedParent &&
+				( isContentBlock ? 'is-content-block' : 'is-content-locked' ),
+			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
+			className
+		),
 		wrapperProps: restWrapperProps,
 		isAligned,
 	};
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 30003cc4e09520..cf6f2324a58ae4 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -124,11 +124,12 @@
 }
 
 .is-content-locked {
-	pointer-events: none;
-}
-
-.is-content-block {
-	pointer-events: initial;
+	.block-editor-block-list__block {
+		pointer-events: none;
+	}
+	.is-content-block {
+		pointer-events: initial;
+	}
 }
 
 .block-editor-block-list__layout .block-editor-block-list__block {
@@ -339,6 +340,14 @@
 	}
 }
 
+.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected,
+.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected {
+	&,
+	& .block-editor-block-list__block {
+		opacity: 1;
+	}
+}
+
 .wp-block[data-align="left"] > *,
 .wp-block[data-align="right"] > *,
 .wp-block.alignleft,
diff --git a/packages/block-editor/src/components/list-view/use-block-selection.js b/packages/block-editor/src/components/list-view/use-block-selection.js
index 417fb436212319..59aaaeacb01d40 100644
--- a/packages/block-editor/src/components/list-view/use-block-selection.js
+++ b/packages/block-editor/src/components/list-view/use-block-selection.js
@@ -32,7 +32,6 @@ export default function useBlockSelection() {
 	const updateBlockSelection = useCallback(
 		async ( event, clientId, destinationClientId ) => {
 			if ( ! event?.shiftKey ) {
-				await clearSelectedBlock();
 				selectBlock( clientId );
 				return;
 			}
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 6e1ed874d4c835..98098cf583361c 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -6,17 +6,21 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useEffect, useRef, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { BlockControls } from '../components';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 
 function StopEditingAsBlocksOnOutsideSelect( {
 	clientId,
-	setIsEditingAsBlocks,
+	stopEditingAsBlock,
 } ) {
 	const isBlockOrDescendantSelected = useSelect(
 		( select ) => {
@@ -29,15 +33,9 @@ function StopEditingAsBlocksOnOutsideSelect( {
 		},
 		[ clientId ]
 	);
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
 	useEffect( () => {
 		if ( ! isBlockOrDescendantSelected ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			updateBlockAttributes( clientId, {
-				templateLock: 'noContent',
-			} );
-			setIsEditingAsBlocks( false );
+			stopEditingAsBlock();
 		}
 	}, [ isBlockOrDescendantSelected ] );
 	return null;
@@ -45,20 +43,63 @@ function StopEditingAsBlocksOnOutsideSelect( {
 
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const [ isEditingAsBlocks, setIsEditingAsBlocks ] = useState( false );
-		const templateLock = useSelect(
-			( select ) =>
-				select( blockEditorStore ).getTemplateLock( props.clientId ),
+		const { getBlockListSettings, getSettings } =
+			useSelect( blockEditorStore );
+		const focusModeToRevert = useRef();
+		const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
+			( select ) => {
+				const {
+					__unstableGetContentLockingParent,
+					getTemplateLock,
+					__unstableGetTemporarilyEditingAsBlocks,
+				} = select( blockEditorStore );
+				return {
+					templateLock: getTemplateLock( props.clientId ),
+					isLockedByParent: !! __unstableGetContentLockingParent(
+						props.clientId
+					),
+					isEditingAsBlocks:
+						__unstableGetTemporarilyEditingAsBlocks() ===
+						props.clientId,
+				};
+			},
 			[ props.clientId ]
 		);
-		const { getBlockListSettings } = useSelect( blockEditorStore );
-		const { updateBlockListSettings } = useDispatch( blockEditorStore );
-		const isContentLocked = templateLock === 'noContent';
+
+		const {
+			updateSettings,
+			updateBlockListSettings,
+			__unstableSetTemporarilyEditingAsBlocks,
+		} = useDispatch( blockEditorStore );
+		const isContentLocked =
+			! isLockedByParent && templateLock === 'noContent';
 		const {
 			__unstableMarkNextChangeAsNotPersistent,
 			updateBlockAttributes,
 		} = useDispatch( blockEditorStore );
 
+		const stopEditingAsBlock = useCallback( () => {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( props.clientId, {
+				templateLock: 'noContent',
+			} );
+			updateBlockListSettings( props.clientId, {
+				...getBlockListSettings( props.clientId ),
+				templateLock: 'noContent',
+			} );
+			updateSettings( { focusMode: focusModeToRevert.current } );
+			__unstableSetTemporarilyEditingAsBlocks();
+		}, [
+			props.clientId,
+			focusModeToRevert,
+			updateSettings,
+			updateBlockListSettings,
+			getBlockListSettings,
+			__unstableMarkNextChangeAsNotPersistent,
+			updateBlockAttributes,
+			__unstableSetTemporarilyEditingAsBlocks,
+		] );
+
 		if ( ! isContentLocked && ! isEditingAsBlocks ) {
 			return <BlockEdit { ...props } />;
 		}
@@ -68,32 +109,29 @@ export const withBlockControls = createHigherOrderComponent(
 				{ isEditingAsBlocks && ! isContentLocked && (
 					<StopEditingAsBlocksOnOutsideSelect
 						clientId={ props.clientId }
-						setIsEditingAsBlocks={ setIsEditingAsBlocks }
+						stopEditingAsBlock={ stopEditingAsBlock }
 					/>
 				) }
 				<BlockControls group="other">
 					<ToolbarButton
 						onClick={ () => {
 							if ( isEditingAsBlocks && ! isContentLocked ) {
-								updateBlockListSettings( props.clientId, {
-									...getBlockListSettings( props.clientId ),
-									templateLock: 'noContent',
-								} );
+								stopEditingAsBlock();
+							} else {
 								__unstableMarkNextChangeAsNotPersistent();
 								updateBlockAttributes( props.clientId, {
-									templateLock: 'noContent',
+									templateLock: undefined,
 								} );
-								setIsEditingAsBlocks( false );
-							} else {
 								updateBlockListSettings( props.clientId, {
 									...getBlockListSettings( props.clientId ),
 									templateLock: false,
 								} );
-								__unstableMarkNextChangeAsNotPersistent();
-								updateBlockAttributes( props.clientId, {
-									templateLock: undefined,
-								} );
-								setIsEditingAsBlocks( true );
+								focusModeToRevert.current =
+									getSettings().focusMode;
+								updateSettings( { focusMode: true } );
+								__unstableSetTemporarilyEditingAsBlocks(
+									props.clientId
+								);
 							}
 						} }
 					>
@@ -102,7 +140,14 @@ export const withBlockControls = createHigherOrderComponent(
 							: __( 'Modify' ) }
 					</ToolbarButton>
 				</BlockControls>
-				<BlockEdit { ...props } />
+				<BlockEdit
+					{ ...props }
+					className={ classnames(
+						props.className,
+						isEditingAsBlocks &&
+							'is-content-locked-editing-as-blocks'
+					) }
+				/>
 			</>
 		);
 	},
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index b292bf6437c388..a1c5bea96cdae8 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1673,3 +1673,17 @@ export function setBlockVisibility( updates ) {
 		updates,
 	};
 }
+
+/**
+ * Action that sets whether a block is being temporaritly edited as blocks.
+ *
+ * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporaritly edited as blocks.
+ */
+export function __unstableSetTemporarilyEditingAsBlocks(
+	temporarilyEditingAsBlocks
+) {
+	return {
+		type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
+		temporarilyEditingAsBlocks,
+	};
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 534a69c67f1382..73055bdef71996 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1778,6 +1778,21 @@ export function lastBlockInserted( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the block that is eding temporarily edited as blocks.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function temporarilyEditingAsBlocks( state = '', action ) {
+	if ( action.type === 'SET_TEMPORARILY_EDITING_AS_BLOCKS' ) {
+		return action.temporarilyEditingAsBlocks;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1798,4 +1813,5 @@ export default combineReducers( {
 	automaticChangeStatus,
 	highlightedBlock,
 	lastBlockInserted,
+	temporarilyEditingAsBlocks,
 } );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index df1c5cb0de9665..9f986bcf228ced 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2692,5 +2692,9 @@ export const __unstableGetContentLockingParent = createSelector(
 		}
 		return result;
 	},
-	( state ) => [ state.blocks.parents, state.blocks.attributes ]
+	( state ) => [ state.blocks.parents, state.blockListSettings ]
 );
+
+export function __unstableGetTemporarilyEditingAsBlocks( state ) {
+	return state.temporarilyEditingAsBlocks;
+}

From 82aaa8f7e470a4772d34a567e3af402786e6bedb Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Wed, 31 Aug 2022 16:48:51 +0100
Subject: [PATCH 24/24] applied feedback

---
 .../src/components/block-inspector/index.js   | 24 ++++++++++++-------
 .../src/components/block-list/block.js        | 12 +++++++---
 packages/blocks/src/store/selectors.js        |  2 +-
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 8e95f7d419e8f7..56b0fb0dd5062e 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -90,23 +90,25 @@ function BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
 	);
 }
 
-function BlockInspectorAbsorvedBy( { absorvedBy } ) {
+function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const { blockTypes, block, selectedBlock } = useSelect(
 		( select ) => {
 			return {
 				blockTypes: select( blocksStore ).getBlockTypes(),
-				block: select( blockEditorStore ).getBlock( absorvedBy ),
+				block: select( blockEditorStore ).getBlock(
+					topLevelLockedBlock
+				),
 				selectedBlock: select( blockEditorStore ).getSelectedBlock(),
 			};
 		},
-		[ absorvedBy ]
+		[ topLevelLockedBlock ]
 	);
-	const blockInformation = useBlockDisplayInformation( absorvedBy );
+	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
 	const contentBlocks = useContentBlocks( blockTypes, block );
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard { ...blockInformation } />
-			<BlockVariationTransforms blockClientId={ absorvedBy } />
+			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<VStack
 				spacing={ 1 }
 				padding={ 4 }
@@ -134,7 +136,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
-		absorvedBy,
+		topLevelLockedBlock,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -159,7 +161,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
 			hasBlockStyles: blockStyles && blockStyles.length > 0,
-			absorvedBy:
+			topLevelLockedBlock:
 				getTemplateLock( _selectedBlockClientId ) === 'noContent'
 					? _selectedBlockClientId
 					: __unstableGetContentLockingParent(
@@ -215,8 +217,12 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		}
 		return null;
 	}
-	if ( absorvedBy ) {
-		return <BlockInspectorAbsorvedBy absorvedBy={ absorvedBy } />;
+	if ( topLevelLockedBlock ) {
+		return (
+			<BlockInspectorLockedBlocks
+				topLevelLockedBlock={ topLevelLockedBlock }
+			/>
+		);
 	}
 	return (
 		<BlockInspectorSingleBlock
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 7281a7d4ef0e94..a554069d97bb65 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -113,7 +113,9 @@ function BlockListBlock( {
 			return {
 				themeSupportsLayout: getSettings().supportsLayout,
 				isContentBlock:
-					select( blocksStore ).__unstableIsContentBlock( name ),
+					select( blocksStore ).__experimentalHasContentRoleAttribute(
+						name
+					),
 				hasContentLockedParent: _hasContentLockedParent,
 				isContentLocking:
 					getTemplateLock( clientId ) === 'noContent' &&
@@ -222,8 +224,12 @@ function BlockListBlock( {
 	const value = {
 		clientId,
 		className: classnames(
-			hasContentLockedParent &&
-				( isContentBlock ? 'is-content-block' : 'is-content-locked' ),
+			{
+				'is-content-locked': isContentLocking,
+				'is-content-locked-temporarily-editing-as-blocks':
+					isTemporarilyEditingAsBlocks,
+				'is-content-block': hasContentLockedParent && isContentBlock,
+			},
 			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
 			className
 		),
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index 4bf76274ce6688..74237b5d5f210c 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -791,7 +791,7 @@ export const hasChildBlocksWithInserterSupport = ( state, blockName ) => {
 	} );
 };
 
-export const __unstableIsContentBlock = createSelector(
+export const __experimentalHasContentRoleAttribute = createSelector(
 	( state, blockTypeName ) => {
 		const blockType = getBlockType( state, blockTypeName );
 		return Object.entries( blockType.attributes ).some(