diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000000000..d1987c7ba053b
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,13 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+		
+	]
+}
\ No newline at end of file
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 966654c87a3dc..bdfe2c55d043b 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -14,8 +14,10 @@ import {
 	ToolbarButton,
 	TextControl,
 	PanelBody,
+	Disabled,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
 import {
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
@@ -24,6 +26,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	Warning,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
@@ -32,7 +35,12 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
 		ref
 	);
-	const { isMissing, hasResolved } = useSelect(
+	const {
+		isMissing,
+		hasResolved,
+		parentBlockName,
+		selectedBlock,
+	} = useSelect(
 		( select ) => {
 			const persistedBlock = select( coreStore ).getEntityRecord(
 				'postType',
@@ -46,9 +54,23 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 				'wp_block',
 				ref,
 			] );
+
+			const {
+				getSelectedBlockClientId,
+				getBlockName,
+				getBlockParents,
+			} = select( blockEditorStore );
+
+			const currentBlockId = getSelectedBlockClientId();
+			const parents = getBlockParents( currentBlockId );
+			const _firstParentClientId = parents[ parents.length - 1 ];
+			const _parentBlockName = getBlockName( _firstParentClientId );
+
 			return {
 				hasResolved: hasResolvedBlock,
 				isMissing: hasResolvedBlock && ! persistedBlock,
+				parentBlockName: _parentBlockName,
+				selectedBlock: currentBlockId,
 			};
 		},
 		[ ref, clientId ]
@@ -84,6 +106,24 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	const blockProps = useBlockProps();
 
+	// state for lock
+	const [ isLocked, setIsLocked ] = useState( true );
+
+	let innerBlocks = <div { ...innerBlocksProps } />;
+	if ( isLocked ) {
+		innerBlocks = <Disabled> { innerBlocks } </Disabled>;
+	}
+
+	const lockContainerClass = isLocked ? 'is-locked' : 'is-unlocked';
+
+	// lock the blocks when deselected
+	useEffect( () => {
+		const isInnerBlock = parentBlockName === 'core/block'; // first check if selectedblock is inner block
+		if ( ! isInnerBlock ) {
+			setIsLocked( true );
+		}
+	}, [ parentBlockName, selectedBlock ] );
+
 	if ( hasAlreadyRendered ) {
 		return (
 			<div { ...blockProps }>
@@ -136,8 +176,21 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 						/>
 					</PanelBody>
 				</InspectorControls>
-				<div className="block-library-block__reusable-block-container">
-					{ <div { ...innerBlocksProps } /> }
+				<div
+					className="block-library-block__reusable-block-container"
+					role="button"
+					tabIndex={ 0 }
+					onClick={ () => setIsLocked( false ) }
+					onKeyDown={ ( e ) => {
+						if ( e.key === 85 ) {
+							setIsLocked( false );
+						}
+					} }
+				>
+					<div
+						className={ `reusable-block-lock-container ${ lockContainerClass }` }
+					></div>
+					{ innerBlocks }
 				</div>
 			</div>
 		</RecursionProvider>
diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
index b3eb1a67e9945..86616b68b5569 100644
--- a/packages/block-library/src/block/editor.scss
+++ b/packages/block-library/src/block/editor.scss
@@ -13,4 +13,17 @@
 	.components-disabled .block-list-appender {
 		display: none;
 	}
+
+	.is-locked {
+		position: absolute;
+		cursor: pointer;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+		border: 0;
+		&:hover {
+			background-color: rgba(#bbffe4, 0.3);
+			border: 1px solid#00b06f;
+		}
+	}
 }