Add: Content lock ability. (#43037)

Co-authored-by: André <[email protected]>

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">

packages/block-editor/src/components/block-edit/edit.js

@@ -59,7 +59,11 @@ 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 } />

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

@@ -11,8 +11,13 @@ import {
 import {
 	PanelBody,
 	__experimentalUseSlot as useSlot,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,19 +34,116 @@ 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 BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const blockType = blockTypes.find( ( { name } ) => name === block.name );
+	const isSelected =
+		selectedBlock && selectedBlock.clientId === block.clientId;
+	return (
+		<Button
+			isPressed={ isSelected }
+			onClick={ () => selectBlock( block.clientId ) }
+		>
+			<HStack justify="flex-start">
+				<BlockIcon icon={ blockType.icon } />
+				<FlexItem>{ blockType.title }</FlexItem>
+			</HStack>
+		</Button>
+	);
+}
+
+function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
+	const { blockTypes, block, selectedBlock } = useSelect(
+		( select ) => {
+			return {
+				blockTypes: select( blocksStore ).getBlockTypes(),
+				block: select( blockEditorStore ).getBlock(
+					topLevelLockedBlock
+				),
+				selectedBlock: select( blockEditorStore ).getSelectedBlock(),
+			};
+		},
+		[ topLevelLockedBlock ]
+	);
+	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
+	const contentBlocks = useContentBlocks( blockTypes, block );
+	return (
+		<div className="block-editor-block-inspector">
+			<BlockCard { ...blockInformation } />
+			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
+			<VStack
+				spacing={ 1 }
+				padding={ 4 }
+				className="block-editor-block-inspector__block-buttons-container"
+			>
+				<h2 className="block-editor-block-card__title">
+					{ __( 'Content' ) }
+				</h2>
+				{ contentBlocks.map( ( contentBlock ) => (
+					<BlockNavigationButton
+						selectedBlock={ selectedBlock }
+						key={ contentBlock.clientId }
+						block={ contentBlock }
+						blockTypes={ blockTypes }
+					/>
+				) ) }
+			</VStack>
+		</div>
+	);
+}
 
 const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const {
 		count,
-		hasBlockStyles,
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
+		topLevelLockedBlock,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
+			__unstableGetContentLockingParent,
+			getTemplateLock,
 		} = select( blockEditorStore );
 		const { getBlockStyles } = select( blocksStore );
 
@@ -59,6 +161,12 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
 			hasBlockStyles: blockStyles && blockStyles.length > 0,
+			topLevelLockedBlock:
+				getTemplateLock( _selectedBlockClientId ) === 'noContent'
+					? _selectedBlockClientId
+					: __unstableGetContentLockingParent(
+							_selectedBlockClientId
+					  ),
 		};
 	}, [] );
 
@@ -109,24 +217,34 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		}
 		return null;
 	}
+	if ( topLevelLockedBlock ) {
+		return (
+			<BlockInspectorLockedBlocks
+				topLevelLockedBlock={ topLevelLockedBlock }
+			/>
+		);
+	}
 	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>

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;
+	}
+}