From 8da3a6a0f90a0e8acb1ab332fdd705709d37642b Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 23 Mar 2021 15:19:25 -0400
Subject: [PATCH 01/43] clickthrough for template part

---
 .../components/block-list/insertion-point.js  |  6 ++-
 packages/block-editor/src/store/actions.js    | 12 ++++++
 packages/block-editor/src/store/reducer.js    | 11 ++++++
 packages/block-editor/src/store/selectors.js  |  4 ++
 .../src/template-part/edit/index.js           | 12 +++++-
 .../src/template-part/edit/inner-blocks.js    | 38 ++++++++++++++++---
 .../src/template-part/editor.scss             | 10 +++++
 7 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
index d759d568efd3e9..d71e80373c7657 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -262,6 +262,7 @@ export default function useInsertionPoint( ref ) {
 		selectedClientId,
 		selectedRootClientId,
 		getBlockListSettings,
+		isInsertionPointDisabled,
 	} = useSelect( ( select ) => {
 		const {
 			isMultiSelecting: _isMultiSelecting,
@@ -269,6 +270,7 @@ export default function useInsertionPoint( ref ) {
 			getBlockInsertionPoint,
 			getBlockOrder,
 			getBlockListSettings: _getBlockListSettings,
+			__experimentalIsInsertionPointDisabled,
 		} = select( blockEditorStore );
 
 		const insertionPoint = getBlockInsertionPoint();
@@ -280,6 +282,7 @@ export default function useInsertionPoint( ref ) {
 			isInserterVisible: isBlockInsertionPointVisible(),
 			selectedClientId: order[ insertionPoint.index - 1 ],
 			selectedRootClientId: insertionPoint.rootClientId,
+			isInsertionPointDisabled: __experimentalIsInsertionPointDisabled(),
 		};
 	}, [] );
 
@@ -388,7 +391,8 @@ export default function useInsertionPoint( ref ) {
 
 	return (
 		! isMultiSelecting &&
-		isVisible && (
+		isVisible &&
+		! isInsertionPointDisabled && (
 			<InsertionPointPopover
 				clientId={
 					isInserterVisible ? selectedClientId : inserterClientId
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 7fd0555881e346..b7a2d9662ee9b8 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1380,3 +1380,15 @@ export function setHasControlledInnerBlocks(
 		clientId,
 	};
 }
+
+export function disableInsertionPoint() {
+	return {
+		type: 'DISABLE_INSERTION_POINT',
+	};
+}
+
+export function enableInsertionPoint() {
+	return {
+		type: 'ENABLE_INSERTION_POINT',
+	};
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 0930f57bfc5d43..b788c777f4fa95 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1727,6 +1727,16 @@ export function highlightedBlock( state, action ) {
 	return state;
 }
 
+export function insertionPointDisabledStatus( state = false, action ) {
+	if ( action.type === 'DISABLE_INSERTION_POINT' ) {
+		return true;
+	}
+	if ( action.type === 'ENABLE_INSERTION_POINT' ) {
+		return false;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1748,4 +1758,5 @@ export default combineReducers( {
 	hasBlockMovingClientId,
 	automaticChangeStatus,
 	highlightedBlock,
+	insertionPointDisabledStatus,
 } );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index fdb74c6bcfe837..78abfd0b51c5e2 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2119,3 +2119,7 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 		validBlockNames,
 	]
 );
+
+export function __experimentalIsInsertionPointDisabled( state ) {
+	return state.insertionPointDisabledStatus;
+}
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index b3673a17775b8e..8c2e5a9aab773d 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -42,12 +42,16 @@ export default function TemplatePartEdit( {
 	// Set the postId block attribute if it did not exist,
 	// but wait until the inner blocks have loaded to allow
 	// new edits to trigger this.
-	const { isResolved, innerBlocks, isMissing, area } = useSelect(
+	const { isResolved, innerBlocks, isMissing, area, isSelected } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } = select(
 				coreStore
 			);
-			const { getBlocks } = select( blockEditorStore );
+			const {
+				getBlocks,
+				isBlockSelected,
+				hasSelectedInnerBlock,
+			} = select( blockEditorStore );
 
 			const getEntityArgs = [
 				'postType',
@@ -69,6 +73,9 @@ export default function TemplatePartEdit( {
 				isResolved: hasResolvedEntity,
 				isMissing: hasResolvedEntity && ! entityRecord,
 				area: entityRecord?.area,
+				isSelected:
+					isBlockSelected( clientId ) ||
+					hasSelectedInnerBlock( clientId, true ),
 			};
 		},
 		[ templatePartId, clientId ]
@@ -157,6 +164,7 @@ export default function TemplatePartEdit( {
 			) }
 			{ isEntityAvailable && (
 				<TemplatePartInnerBlocks
+					isSelected={ isSelected }
 					tagName={ TagName }
 					blockProps={ blockProps }
 					postId={ templatePartId }
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 6ac67ee109faa3..8da556f11270d8 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -8,7 +8,8 @@ import {
 	__experimentalUseEditorFeature as useEditorFeature,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
 
 export default function TemplatePartInnerBlocks( {
 	postId: id,
@@ -16,10 +17,16 @@ export default function TemplatePartInnerBlocks( {
 	layout,
 	tagName: TagName,
 	blockProps,
+	isSelected,
 } ) {
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings()?.supportsLayout;
+	const { themeSupportsLayout } = useSelect( ( select ) => {
+		const { getSettings, getBlockInsertionPoint } = select(
+			blockEditorStore
+		);
+		return {
+			themeSupportsLayout: getSettings()?.supportsLayout,
+			insertionPoint: getBlockInsertionPoint(),
+		};
 	}, [] );
 	const defaultLayout = useEditorFeature( 'layout' ) || {};
 	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
@@ -46,5 +53,26 @@ export default function TemplatePartInnerBlocks( {
 			alignments: themeSupportsLayout ? alignments : undefined,
 		},
 	} );
-	return <TagName { ...innerBlocksProps } />;
+
+	const [ isHovered, setIsHovered ] = useState( false );
+	const { disableInsertionPoint, enableInsertionPoint } = useDispatch(
+		blockEditorStore
+	);
+
+	useEffect( () => {
+		if ( isHovered && ! isSelected ) {
+			disableInsertionPoint();
+		} else {
+			enableInsertionPoint();
+		}
+	}, [ isSelected, isHovered ] );
+
+	return (
+		<div
+			onMouseEnter={ () => setIsHovered( true ) }
+			onMouseLeave={ () => setIsHovered( false ) }
+		>
+			<TagName { ...innerBlocksProps } />
+		</div>
+	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index c61e0651ae7251..a34b5ed9bab4a5 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -76,4 +76,14 @@
 			}
 		}
 	}
+
+	&:not(.has-child-selected):not(.is-selected):not(.is-placeholder) {
+		* {
+			pointer-events: none;
+		}
+		&:hover {
+			background-color: $alert-green;
+			cursor: pointer;
+		}
+	}
 }

From 6cbfb213fb167368f70908540cac6b66a7a3657d Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 23 Mar 2021 17:04:32 -0400
Subject: [PATCH 02/43] make store names more consistent and accurate

---
 .../src/components/block-list/insertion-point.js      |  8 ++++----
 packages/block-editor/src/store/actions.js            |  8 ++++----
 packages/block-editor/src/store/reducer.js            |  8 ++++----
 packages/block-editor/src/store/selectors.js          |  4 ++--
 .../src/template-part/edit/inner-blocks.js            | 11 ++++++-----
 5 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
index d71e80373c7657..fb1f1f340b1fde 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -262,7 +262,7 @@ export default function useInsertionPoint( ref ) {
 		selectedClientId,
 		selectedRootClientId,
 		getBlockListSettings,
-		isInsertionPointDisabled,
+		isPopoverHidden,
 	} = useSelect( ( select ) => {
 		const {
 			isMultiSelecting: _isMultiSelecting,
@@ -270,7 +270,7 @@ export default function useInsertionPoint( ref ) {
 			getBlockInsertionPoint,
 			getBlockOrder,
 			getBlockListSettings: _getBlockListSettings,
-			__experimentalIsInsertionPointDisabled,
+			isInsertionPointPopoverHidden,
 		} = select( blockEditorStore );
 
 		const insertionPoint = getBlockInsertionPoint();
@@ -282,7 +282,7 @@ export default function useInsertionPoint( ref ) {
 			isInserterVisible: isBlockInsertionPointVisible(),
 			selectedClientId: order[ insertionPoint.index - 1 ],
 			selectedRootClientId: insertionPoint.rootClientId,
-			isInsertionPointDisabled: __experimentalIsInsertionPointDisabled(),
+			isPopoverHidden: isInsertionPointPopoverHidden(),
 		};
 	}, [] );
 
@@ -392,7 +392,7 @@ export default function useInsertionPoint( ref ) {
 	return (
 		! isMultiSelecting &&
 		isVisible &&
-		! isInsertionPointDisabled && (
+		! isPopoverHidden && (
 			<InsertionPointPopover
 				clientId={
 					isInserterVisible ? selectedClientId : inserterClientId
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index b7a2d9662ee9b8..df69393d904070 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1381,14 +1381,14 @@ export function setHasControlledInnerBlocks(
 	};
 }
 
-export function disableInsertionPoint() {
+export function hideInsertionPointPopover() {
 	return {
-		type: 'DISABLE_INSERTION_POINT',
+		type: 'HIDE_INSERTION_POINT_POPOVER',
 	};
 }
 
-export function enableInsertionPoint() {
+export function showInsertionPointPopover() {
 	return {
-		type: 'ENABLE_INSERTION_POINT',
+		type: 'SHOW_INSERTION_POINT_POPOVER',
 	};
 }
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index b788c777f4fa95..1a34755b2a8c1b 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1727,11 +1727,11 @@ export function highlightedBlock( state, action ) {
 	return state;
 }
 
-export function insertionPointDisabledStatus( state = false, action ) {
-	if ( action.type === 'DISABLE_INSERTION_POINT' ) {
+export function insertionPointPopoverHiddenStatus( state = false, action ) {
+	if ( action.type === 'HIDE_INSERTION_POINT_POPOVER' ) {
 		return true;
 	}
-	if ( action.type === 'ENABLE_INSERTION_POINT' ) {
+	if ( action.type === 'SHOW_INSERTION_POINT_POPOVER' ) {
 		return false;
 	}
 	return state;
@@ -1758,5 +1758,5 @@ export default combineReducers( {
 	hasBlockMovingClientId,
 	automaticChangeStatus,
 	highlightedBlock,
-	insertionPointDisabledStatus,
+	insertionPointPopoverHiddenStatus,
 } );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 78abfd0b51c5e2..a107cf02d1ece1 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2120,6 +2120,6 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 	]
 );
 
-export function __experimentalIsInsertionPointDisabled( state ) {
-	return state.insertionPointDisabledStatus;
+export function isInsertionPointPopoverHidden( state ) {
+	return state.insertionPointPopoverHiddenStatus;
 }
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 8da556f11270d8..4b905379bd9deb 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -55,15 +55,16 @@ export default function TemplatePartInnerBlocks( {
 	} );
 
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { disableInsertionPoint, enableInsertionPoint } = useDispatch(
-		blockEditorStore
-	);
+	const {
+		hideInsertionPointPopover,
+		showInsertionPointPopover,
+	} = useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		if ( isHovered && ! isSelected ) {
-			disableInsertionPoint();
+			hideInsertionPointPopover();
 		} else {
-			enableInsertionPoint();
+			showInsertionPointPopover();
 		}
 	}, [ isSelected, isHovered ] );
 

From 89f6cb82ffa8f9a2275f9d789cd77fd637da0ec4 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 23 Mar 2021 17:07:43 -0400
Subject: [PATCH 03/43] remove unnecessary selector change

---
 .../src/template-part/edit/inner-blocks.js            | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 4b905379bd9deb..272f5e33a0cc84 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -19,14 +19,9 @@ export default function TemplatePartInnerBlocks( {
 	blockProps,
 	isSelected,
 } ) {
-	const { themeSupportsLayout } = useSelect( ( select ) => {
-		const { getSettings, getBlockInsertionPoint } = select(
-			blockEditorStore
-		);
-		return {
-			themeSupportsLayout: getSettings()?.supportsLayout,
-			insertionPoint: getBlockInsertionPoint(),
-		};
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings()?.supportsLayout;
 	}, [] );
 	const defaultLayout = useEditorFeature( 'layout' ) || {};
 	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;

From 9b685c0e20eebea883d4eda2de777ac787b81069 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 24 Mar 2021 11:27:27 -0400
Subject: [PATCH 04/43] move color from hover to selected, add opacity value

---
 packages/block-library/src/template-part/editor.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index a34b5ed9bab4a5..09b436578f1c8d 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -82,8 +82,11 @@
 			pointer-events: none;
 		}
 		&:hover {
-			background-color: $alert-green;
 			cursor: pointer;
 		}
 	}
+
+	&.is-selected:not(.is-placeholder) {
+		background: rgba($alert-green, 0.1);
+	}
 }

From 51b0a9fdb61209a72eed62351fe26153725100c5 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 8 Apr 2021 09:50:22 +0100
Subject: [PATCH 05/43] Add hover overlay

---
 packages/block-library/src/template-part/editor.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 09b436578f1c8d..62492385df7be2 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -80,13 +80,15 @@
 	&:not(.has-child-selected):not(.is-selected):not(.is-placeholder) {
 		* {
 			pointer-events: none;
-		}
-		&:hover {
-			cursor: pointer;
+			user-select: none; // Stops text being inadvertently highlighted when selecting a template part
 		}
 	}
 
 	&.is-selected:not(.is-placeholder) {
-		background: rgba($alert-green, 0.1);
+		background: rgba(#007cba, 0.1); // todo: use var
+	}
+
+	&.is-hovered:not(.is-selected) {
+		background: rgba($gray-900, 0.05);
 	}
 }

From e16a091114c77d9f816a23c992750c4d014187d3 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Thu, 22 Apr 2021 13:18:47 -0400
Subject: [PATCH 06/43] bleh resizing issues

---
 .../src/template-part/edit/content-lock.js    | 62 +++++++++++++++++++
 .../src/template-part/edit/inner-blocks.js    | 37 ++++++-----
 .../src/template-part/editor.scss             | 36 ++++++++---
 3 files changed, 110 insertions(+), 25 deletions(-)
 create mode 100644 packages/block-library/src/template-part/edit/content-lock.js

diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
new file mode 100644
index 00000000000000..7d7e9f2e5b25c7
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useRef, useEffect, useState } from '@wordpress/element';
+
+export default function ContentLock( { clientId, children } ) {
+	const wrapperRef = useRef();
+
+	const [ overlaySizes, setOverlaySizes ] = useState( {} );
+	const { isSelected, hasChildSelected } = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } = select(
+				blockEditorStore
+			);
+			return {
+				isSelected: isBlockSelected( clientId ),
+				hasChildSelected: hasSelectedInnerBlock( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	useEffect( () => {
+		if ( wrapperRef.current?.clientHeight ) {
+			setOverlaySizes( {
+				height: wrapperRef.current?.clientHeight + 'px',
+				width: wrapperRef.current?.clientWidth + 'px',
+			} );
+		} else {
+			setOverlaySizes( {} );
+		}
+	}, [
+		wrapperRef.current,
+		wrapperRef.current?.clientHeight,
+		wrapperRef.current?.clientWidth,
+	] );
+
+	// if not selected in any way, disable children / wrap container (no color)
+	if ( true || ! ( isSelected || hasChildSelected ) ) {
+		return (
+			<div className="wp-block-template-part__content-lock">
+				<div
+					className="wp-block-template-part__content-lock-overlay"
+					style={ overlaySizes }
+				/>
+
+				<div
+					className="wp-block-template-part__content-lock-content-wrapper"
+					ref={ wrapperRef }
+				>
+					{ children }
+				</div>
+			</div>
+		);
+	}
+	// if isSelected -  wrap container (color) + disable children? | unlock button?
+	// if childSelected - normal ?
+
+	return <div>{ children }</div>;
+}
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 272f5e33a0cc84..3f458038e78ecd 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -11,6 +11,11 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import ContentLock from './content-lock';
+
 export default function TemplatePartInnerBlocks( {
 	postId: id,
 	hasInnerBlocks,
@@ -49,26 +54,26 @@ export default function TemplatePartInnerBlocks( {
 		},
 	} );
 
-	const [ isHovered, setIsHovered ] = useState( false );
-	const {
-		hideInsertionPointPopover,
-		showInsertionPointPopover,
-	} = useDispatch( blockEditorStore );
+	// const [ isHovered, setIsHovered ] = useState( false );
+	// const {
+	// 	hideInsertionPointPopover,
+	// 	showInsertionPointPopover,
+	// } = useDispatch( blockEditorStore );
 
-	useEffect( () => {
-		if ( isHovered && ! isSelected ) {
-			hideInsertionPointPopover();
-		} else {
-			showInsertionPointPopover();
-		}
-	}, [ isSelected, isHovered ] );
+	// useEffect( () => {
+	// 	if ( isHovered && ! isSelected ) {
+	// 		hideInsertionPointPopover();
+	// 	} else {
+	// 		showInsertionPointPopover();
+	// 	}
+	// }, [ isSelected, isHovered ] );
 
 	return (
-		<div
-			onMouseEnter={ () => setIsHovered( true ) }
-			onMouseLeave={ () => setIsHovered( false ) }
+		<ContentLock
+		// onMouseEnter={ () => setIsHovered( true ) }
+		// onMouseLeave={ () => setIsHovered( false ) }
 		>
 			<TagName { ...innerBlocksProps } />
-		</div>
+		</ContentLock>
 	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 62492385df7be2..458171bcbb062c 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -77,18 +77,36 @@
 		}
 	}
 
-	&:not(.has-child-selected):not(.is-selected):not(.is-placeholder) {
-		* {
-			pointer-events: none;
-			user-select: none; // Stops text being inadvertently highlighted when selecting a template part
-		}
-	}
+	// &:not(.has-child-selected):not(.is-selected):not(.is-placeholder) {
+	// 	* {
+	// 		pointer-events: none;
+	// 		user-select: none; // Stops text being inadvertently highlighted when selecting a template part
+	// 	}
+	// }
 
-	&.is-selected:not(.is-placeholder) {
-		background: rgba(#007cba, 0.1); // todo: use var
-	}
+	// &.is-selected:not(.is-placeholder) {
+	// 	background: rgba(#007cba, 0.1); // todo: use var
+	// }
 
 	&.is-hovered:not(.is-selected) {
 		background: rgba($gray-900, 0.05);
 	}
 }
+
+.wp-block-template-part__content-lock {
+	position: relative;
+
+	.wp-block-template-part__content-lock-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		background-color: rgb(0, 0, 250, 0.8);
+		z-index: 100;
+	}
+	.wp-block-template-part__content-lock-content-wrapper {
+		position: static;
+		// display: inline;
+		width: auto;
+		height: auto;
+	}
+}

From f27bcb2333edeb4f1fb9f5385c2d942cfde5f452 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Thu, 22 Apr 2021 14:57:24 -0400
Subject: [PATCH 07/43] kind of working...

---
 .../src/template-part/edit/content-lock.js    | 55 +++++++++++--------
 .../src/template-part/edit/index.js           |  2 +-
 .../src/template-part/edit/inner-blocks.js    |  7 ++-
 .../src/template-part/editor.scss             | 35 +++++-------
 4 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
index 7d7e9f2e5b25c7..6317d48d0513ba 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -1,12 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 
 export default function ContentLock( { clientId, children } ) {
 	const wrapperRef = useRef();
+	const baseClassName = 'wp-block-template-part__content-lock';
 
 	const [ overlaySizes, setOverlaySizes ] = useState( {} );
 	const { isSelected, hasChildSelected } = useSelect(
@@ -16,14 +21,16 @@ export default function ContentLock( { clientId, children } ) {
 			);
 			return {
 				isSelected: isBlockSelected( clientId ),
-				hasChildSelected: hasSelectedInnerBlock( clientId ),
+				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
 			};
 		},
 		[ clientId ]
 	);
 
+	const selectBlock = useDispatch( blockEditorStore ).selectBlock;
+
 	useEffect( () => {
-		if ( wrapperRef.current?.clientHeight ) {
+		if ( wrapperRef.current?.clientHeight && ! hasChildSelected ) {
 			setOverlaySizes( {
 				height: wrapperRef.current?.clientHeight + 'px',
 				width: wrapperRef.current?.clientWidth + 'px',
@@ -35,28 +42,30 @@ export default function ContentLock( { clientId, children } ) {
 		wrapperRef.current,
 		wrapperRef.current?.clientHeight,
 		wrapperRef.current?.clientWidth,
+		hasChildSelected,
 	] );
 
-	// if not selected in any way, disable children / wrap container (no color)
-	if ( true || ! ( isSelected || hasChildSelected ) ) {
-		return (
-			<div className="wp-block-template-part__content-lock">
-				<div
-					className="wp-block-template-part__content-lock-overlay"
-					style={ overlaySizes }
-				/>
+	const overlayClasses = classnames( `${ baseClassName }-overlay`, {
+		'overlay-selected': isSelected,
+		'child-selected': hasChildSelected,
+	} );
+	const onClick = ! ( isSelected || hasChildSelected )
+		? () => selectBlock( clientId )
+		: null;
 
-				<div
-					className="wp-block-template-part__content-lock-content-wrapper"
-					ref={ wrapperRef }
-				>
-					{ children }
-				</div>
+	return (
+		<div className={ baseClassName }>
+			<button
+				className={ overlayClasses }
+				style={ overlaySizes }
+				onClick={ onClick }
+			/>
+			<div
+				className={ `${ baseClassName }-content-wrapper` }
+				ref={ wrapperRef }
+			>
+				{ children }
 			</div>
-		);
-	}
-	// if isSelected -  wrap container (color) + disable children? | unlock button?
-	// if childSelected - normal ?
-
-	return <div>{ children }</div>;
+		</div>
+	);
 }
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 8c2e5a9aab773d..8ce6acd3889225 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -164,7 +164,7 @@ export default function TemplatePartEdit( {
 			) }
 			{ isEntityAvailable && (
 				<TemplatePartInnerBlocks
-					isSelected={ isSelected }
+					clientId={ clientId }
 					tagName={ TagName }
 					blockProps={ blockProps }
 					postId={ templatePartId }
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 3f458038e78ecd..deb152e39f29ec 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -22,7 +22,7 @@ export default function TemplatePartInnerBlocks( {
 	layout,
 	tagName: TagName,
 	blockProps,
-	isSelected,
+	clientId,
 } ) {
 	const themeSupportsLayout = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -70,8 +70,9 @@ export default function TemplatePartInnerBlocks( {
 
 	return (
 		<ContentLock
-		// onMouseEnter={ () => setIsHovered( true ) }
-		// onMouseLeave={ () => setIsHovered( false ) }
+			clientId={ clientId }
+			// onMouseEnter={ () => setIsHovered( true ) }
+			// onMouseLeave={ () => setIsHovered( false ) }
 		>
 			<TagName { ...innerBlocksProps } />
 		</ContentLock>
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 458171bcbb062c..9a5f879e49bc26 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -76,21 +76,6 @@
 			}
 		}
 	}
-
-	// &:not(.has-child-selected):not(.is-selected):not(.is-placeholder) {
-	// 	* {
-	// 		pointer-events: none;
-	// 		user-select: none; // Stops text being inadvertently highlighted when selecting a template part
-	// 	}
-	// }
-
-	// &.is-selected:not(.is-placeholder) {
-	// 	background: rgba(#007cba, 0.1); // todo: use var
-	// }
-
-	&.is-hovered:not(.is-selected) {
-		background: rgba($gray-900, 0.05);
-	}
 }
 
 .wp-block-template-part__content-lock {
@@ -100,13 +85,19 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		background-color: rgb(0, 0, 250, 0.8);
 		z-index: 100;
-	}
-	.wp-block-template-part__content-lock-content-wrapper {
-		position: static;
-		// display: inline;
-		width: auto;
-		height: auto;
+		background: transparent;
+		border: none;
+
+		&.overlay-selected {
+			background: rgb(#007cba, 0.1); // todo: use var
+			pointer-events: none;
+		}
+		&.child-selected {
+			display: none;
+		}
+		&:hover:not(.overlay-selected):not(.child-selected) {
+			background: rgba($gray-900, 0.05);
+		}
 	}
 }

From 6eb82de93c5efa620cf57645fa0e675d63baa291 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Thu, 22 Apr 2021 15:10:12 -0400
Subject: [PATCH 08/43] remove unnecessary popover goo

---
 .../components/block-list/insertion-point.js  |  6 +----
 packages/block-editor/src/store/actions.js    | 12 ----------
 packages/block-editor/src/store/reducer.js    | 11 ---------
 packages/block-editor/src/store/selectors.js  |  4 ----
 .../src/template-part/edit/index.js           | 11 ++-------
 .../src/template-part/edit/inner-blocks.js    | 23 ++-----------------
 6 files changed, 5 insertions(+), 62 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
index a2657f747363c7..6b7145ebb78e20 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -273,7 +273,6 @@ export default function useInsertionPoint( ref ) {
 		selectedClientId,
 		selectedRootClientId,
 		getBlockListSettings,
-		isPopoverHidden,
 	} = useSelect( ( select ) => {
 		const {
 			isMultiSelecting: _isMultiSelecting,
@@ -281,7 +280,6 @@ export default function useInsertionPoint( ref ) {
 			getBlockInsertionPoint,
 			getBlockOrder,
 			getBlockListSettings: _getBlockListSettings,
-			isInsertionPointPopoverHidden,
 		} = select( blockEditorStore );
 
 		const insertionPoint = getBlockInsertionPoint();
@@ -293,7 +291,6 @@ export default function useInsertionPoint( ref ) {
 			isInserterVisible: isBlockInsertionPointVisible(),
 			selectedClientId: order[ insertionPoint.index - 1 ],
 			selectedRootClientId: insertionPoint.rootClientId,
-			isPopoverHidden: isInsertionPointPopoverHidden(),
 		};
 	}, [] );
 
@@ -402,8 +399,7 @@ export default function useInsertionPoint( ref ) {
 
 	return (
 		! isMultiSelecting &&
-		isVisible &&
-		! isPopoverHidden && (
+		isVisible && (
 			<InsertionPointPopover
 				clientId={
 					isInserterVisible ? selectedClientId : inserterClientId
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 92f4fa84446c1e..b0144c19e4f476 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1391,15 +1391,3 @@ export function setHasControlledInnerBlocks(
 		clientId,
 	};
 }
-
-export function hideInsertionPointPopover() {
-	return {
-		type: 'HIDE_INSERTION_POINT_POPOVER',
-	};
-}
-
-export function showInsertionPointPopover() {
-	return {
-		type: 'SHOW_INSERTION_POINT_POPOVER',
-	};
-}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index a8cfc72c24c9ac..68f0f9b684e958 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1727,16 +1727,6 @@ export function highlightedBlock( state, action ) {
 	return state;
 }
 
-export function insertionPointPopoverHiddenStatus( state = false, action ) {
-	if ( action.type === 'HIDE_INSERTION_POINT_POPOVER' ) {
-		return true;
-	}
-	if ( action.type === 'SHOW_INSERTION_POINT_POPOVER' ) {
-		return false;
-	}
-	return state;
-}
-
 /**
  * Reducer returning the block insertion event list state.
  *
@@ -1783,6 +1773,5 @@ export default combineReducers( {
 	hasBlockMovingClientId,
 	automaticChangeStatus,
 	highlightedBlock,
-	insertionPointPopoverHiddenStatus,
 	lastBlockInserted,
 } );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 7e2f0d778afaa0..7d8b9d0b4cca80 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2194,10 +2194,6 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 	]
 );
 
-export function isInsertionPointPopoverHidden( state ) {
-	return state.insertionPointPopoverHiddenStatus;
-}
-
 /**
  * Tells if the block with the passed clientId was just inserted.
  *
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 8ce6acd3889225..68946395f9f862 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -42,16 +42,12 @@ export default function TemplatePartEdit( {
 	// Set the postId block attribute if it did not exist,
 	// but wait until the inner blocks have loaded to allow
 	// new edits to trigger this.
-	const { isResolved, innerBlocks, isMissing, area, isSelected } = useSelect(
+	const { isResolved, innerBlocks, isMissing, area } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } = select(
 				coreStore
 			);
-			const {
-				getBlocks,
-				isBlockSelected,
-				hasSelectedInnerBlock,
-			} = select( blockEditorStore );
+			const { getBlocks } = select( blockEditorStore );
 
 			const getEntityArgs = [
 				'postType',
@@ -73,9 +69,6 @@ export default function TemplatePartEdit( {
 				isResolved: hasResolvedEntity,
 				isMissing: hasResolvedEntity && ! entityRecord,
 				area: entityRecord?.area,
-				isSelected:
-					isBlockSelected( clientId ) ||
-					hasSelectedInnerBlock( clientId, true ),
 			};
 		},
 		[ templatePartId, clientId ]
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index deb152e39f29ec..c6a81e0d337251 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -8,8 +8,7 @@ import {
 	__experimentalUseEditorFeature as useEditorFeature,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -54,26 +53,8 @@ export default function TemplatePartInnerBlocks( {
 		},
 	} );
 
-	// const [ isHovered, setIsHovered ] = useState( false );
-	// const {
-	// 	hideInsertionPointPopover,
-	// 	showInsertionPointPopover,
-	// } = useDispatch( blockEditorStore );
-
-	// useEffect( () => {
-	// 	if ( isHovered && ! isSelected ) {
-	// 		hideInsertionPointPopover();
-	// 	} else {
-	// 		showInsertionPointPopover();
-	// 	}
-	// }, [ isSelected, isHovered ] );
-
 	return (
-		<ContentLock
-			clientId={ clientId }
-			// onMouseEnter={ () => setIsHovered( true ) }
-			// onMouseLeave={ () => setIsHovered( false ) }
-		>
+		<ContentLock clientId={ clientId }>
 			<TagName { ...innerBlocksProps } />
 		</ContentLock>
 	);

From e5d4f3f75eb89571524754445ac855115d88f118 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 23 Apr 2021 10:45:52 -0400
Subject: [PATCH 09/43] fix for nested template parts and selection bleeding
 out of boundary

---
 .../src/template-part/edit/content-lock.js    |  6 ++--
 .../src/template-part/editor.scss             | 31 +++++++++++++++++--
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
index 6317d48d0513ba..305cd1b1e494e3 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -45,7 +45,7 @@ export default function ContentLock( { clientId, children } ) {
 		hasChildSelected,
 	] );
 
-	const overlayClasses = classnames( `${ baseClassName }-overlay`, {
+	const classes = classnames( baseClassName, {
 		'overlay-selected': isSelected,
 		'child-selected': hasChildSelected,
 	} );
@@ -54,9 +54,9 @@ export default function ContentLock( { clientId, children } ) {
 		: null;
 
 	return (
-		<div className={ baseClassName }>
+		<div className={ classes }>
 			<button
-				className={ overlayClasses }
+				className={ `${ baseClassName }-overlay` }
 				style={ overlaySizes }
 				onClick={ onClick }
 			/>
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 9a5f879e49bc26..79b79775540bb6 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -89,15 +89,40 @@
 		background: transparent;
 		border: none;
 
-		&.overlay-selected {
+	}
+
+	&.overlay-selected {
+		.wp-block-template-part__content-lock-overlay {
 			background: rgb(#007cba, 0.1); // todo: use var
 			pointer-events: none;
 		}
-		&.child-selected {
+		.wp-block-template-part__content-lock .wp-block-template-part__content-lock-overlay {
+			pointer-events: auto;
+			background: inherit;
+		}
+	}
+
+	&.child-selected {
+		.wp-block-template-part__content-lock-overlay {
 			display: none;
 		}
-		&:hover:not(.overlay-selected):not(.child-selected) {
+		.wp-block-template-part__content-lock:not(.child-selected) .wp-block-template-part__content-lock-overlay {
+			display: block;
+		}
+	}
+
+	&:hover:not(.overlay-selected):not(.child-selected) {
+		.wp-block-template-part__content-lock-overlay {
 			background: rgba($gray-900, 0.05);
 		}
+		.wp-block-template-part__content-lock .wp-block-template-part__content-lock-overlay {
+			background: inherit;
+		}
+	}
+
+	&:not(.overlay-selected):not(.child-selected) .wp-block-template-part__content-lock-content-wrapper {
+		* {
+			pointer-events: none;
+		}
 	}
 }

From 621dcd956a1cc61e3fb03530dca61c3a367fc5ac Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 23 Apr 2021 11:39:26 -0400
Subject: [PATCH 10/43] remove unnecessary effect/state

---
 .../src/template-part/edit/content-lock.js    | 45 ++++++++++---------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
index 305cd1b1e494e3..2d652000230d38 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -3,17 +3,17 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 /**
  * External dependencies
  */
 import classnames from 'classnames';
 
+const baseClassName = 'wp-block-template-part__content-lock';
+
 export default function ContentLock( { clientId, children } ) {
 	const wrapperRef = useRef();
-	const baseClassName = 'wp-block-template-part__content-lock';
 
-	const [ overlaySizes, setOverlaySizes ] = useState( {} );
 	const { isSelected, hasChildSelected } = useSelect(
 		( select ) => {
 			const { isBlockSelected, hasSelectedInnerBlock } = select(
@@ -29,22 +29,6 @@ export default function ContentLock( { clientId, children } ) {
 
 	const selectBlock = useDispatch( blockEditorStore ).selectBlock;
 
-	useEffect( () => {
-		if ( wrapperRef.current?.clientHeight && ! hasChildSelected ) {
-			setOverlaySizes( {
-				height: wrapperRef.current?.clientHeight + 'px',
-				width: wrapperRef.current?.clientWidth + 'px',
-			} );
-		} else {
-			setOverlaySizes( {} );
-		}
-	}, [
-		wrapperRef.current,
-		wrapperRef.current?.clientHeight,
-		wrapperRef.current?.clientWidth,
-		hasChildSelected,
-	] );
-
 	const classes = classnames( baseClassName, {
 		'overlay-selected': isSelected,
 		'child-selected': hasChildSelected,
@@ -55,10 +39,10 @@ export default function ContentLock( { clientId, children } ) {
 
 	return (
 		<div className={ classes }>
-			<button
-				className={ `${ baseClassName }-overlay` }
-				style={ overlaySizes }
+			<ContentOverlay
 				onClick={ onClick }
+				height={ wrapperRef.current?.clientHeight }
+				width={ wrapperRef.current?.clientWidth }
 			/>
 			<div
 				className={ `${ baseClassName }-content-wrapper` }
@@ -69,3 +53,20 @@ export default function ContentLock( { clientId, children } ) {
 		</div>
 	);
 }
+
+function ContentOverlay( { onClick, height, width } ) {
+	const overlayDimensions =
+		height && width
+			? {
+					height: height + 'px',
+					width: width + 'px',
+			  }
+			: {};
+	return (
+		<button
+			className={ `${ baseClassName }-overlay` }
+			style={ overlayDimensions }
+			onClick={ onClick }
+		/>
+	);
+}

From bcbabf99a7855680722e0dca8d56d72c2c3c3f75 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 28 Apr 2021 08:52:21 -0400
Subject: [PATCH 11/43] fix resizing issue

---
 .../src/template-part/edit/content-lock.js    | 32 +++----------------
 .../src/template-part/editor.scss             |  3 +-
 2 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
index 2d652000230d38..7d720b2d49edae 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -3,7 +3,6 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useRef } from '@wordpress/element';
 /**
  * External dependencies
  */
@@ -12,8 +11,6 @@ import classnames from 'classnames';
 const baseClassName = 'wp-block-template-part__content-lock';
 
 export default function ContentLock( { clientId, children } ) {
-	const wrapperRef = useRef();
-
 	const { isSelected, hasChildSelected } = useSelect(
 		( select ) => {
 			const { isBlockSelected, hasSelectedInnerBlock } = select(
@@ -26,47 +23,26 @@ export default function ContentLock( { clientId, children } ) {
 		},
 		[ clientId ]
 	);
-
 	const selectBlock = useDispatch( blockEditorStore ).selectBlock;
 
 	const classes = classnames( baseClassName, {
 		'overlay-selected': isSelected,
 		'child-selected': hasChildSelected,
 	} );
+
 	const onClick = ! ( isSelected || hasChildSelected )
 		? () => selectBlock( clientId )
 		: null;
 
 	return (
 		<div className={ classes }>
-			<ContentOverlay
+			<button
+				className={ `${ baseClassName }-overlay` }
 				onClick={ onClick }
-				height={ wrapperRef.current?.clientHeight }
-				width={ wrapperRef.current?.clientWidth }
 			/>
-			<div
-				className={ `${ baseClassName }-content-wrapper` }
-				ref={ wrapperRef }
-			>
+			<div className={ `${ baseClassName }-content-wrapper` }>
 				{ children }
 			</div>
 		</div>
 	);
 }
-
-function ContentOverlay( { onClick, height, width } ) {
-	const overlayDimensions =
-		height && width
-			? {
-					height: height + 'px',
-					width: width + 'px',
-			  }
-			: {};
-	return (
-		<button
-			className={ `${ baseClassName }-overlay` }
-			style={ overlayDimensions }
-			onClick={ onClick }
-		/>
-	);
-}
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 79b79775540bb6..37722f0383c22c 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -85,10 +85,11 @@
 		position: absolute;
 		top: 0;
 		left: 0;
+		width: 100%;
+		height: 100%;
 		z-index: 100;
 		background: transparent;
 		border: none;
-
 	}
 
 	&.overlay-selected {

From 0d459175356a8c53e675813a113fed463a167764 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 28 Apr 2021 12:53:24 -0400
Subject: [PATCH 12/43] try only selected color when focused

---
 .../block-list/use-block-props/index.js       |  2 ++
 .../use-block-props/use-block-focus-state.js  | 29 +++++++++++++++++++
 packages/block-editor/src/store/actions.js    | 14 +++++++++
 packages/block-editor/src/store/reducer.js    | 13 +++++++++
 packages/block-editor/src/store/selectors.js  |  4 +++
 .../src/template-part/edit/content-lock.js    | 14 +++++----
 .../src/template-part/editor.scss             | 10 ++++---
 7 files changed, 77 insertions(+), 9 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-block-focus-state.js

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 91c27c025b4a6c..907b4053483e02 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
@@ -30,6 +30,7 @@ import { useEventHandlers } from './use-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockNodes } from './use-block-nodes';
 import { useScrollIntoView } from './use-scroll-into-view';
+import { useBlockFocusState } from './use-block-focus-state';
 import { store as blockEditorStore } from '../../../store';
 
 /**
@@ -115,6 +116,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			enableAnimation,
 			triggerAnimationOnChange: index,
 		} ),
+		useBlockFocusState( clientId ),
 	] );
 
 	return {
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-focus-state.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-focus-state.js
new file mode 100644
index 00000000000000..b628edd3d84a34
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-focus-state.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export function useBlockFocusState( clientId ) {
+	const {
+		__experimentalSetFocusedBlock: setFocusedBlock,
+		__experimentalRemoveFocusedBlock: removeFocusedBlock,
+	} = useDispatch( blockEditorStore );
+
+	const onFocus = () => setFocusedBlock( clientId );
+	const onBlur = () => removeFocusedBlock( clientId );
+
+	return useRefEffect( ( node ) => {
+		node.addEventListener( 'focus', onFocus );
+		node.addEventListener( 'blur', onBlur );
+
+		return () => {
+			node.removeEventListener( 'focus', onFocus );
+			node.removeEventListener( 'blur', onBlur );
+		};
+	} );
+}
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index b0144c19e4f476..1aa7417a4970cb 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1391,3 +1391,17 @@ export function setHasControlledInnerBlocks(
 		clientId,
 	};
 }
+
+export function __experimentalSetFocusedBlock( clientId ) {
+	return {
+		type: 'SET_FOCUSED_BLOCK',
+		clientId,
+	};
+}
+
+export function __experimentalRemoveFocusedBlock( clientId ) {
+	return {
+		type: 'REMOVE_FOCUSED_BLOCK',
+		clientId,
+	};
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 68f0f9b684e958..cab51ac31d4fe4 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1752,6 +1752,18 @@ export function lastBlockInserted( state = {}, action ) {
 	return state;
 }
 
+export function focusedBlock( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_FOCUSED_BLOCK':
+			return action.clientId;
+		case 'REMOVE_FOCUSED_BLOCK':
+			if ( action.clientId === state ) {
+				return null;
+			}
+	}
+	return state;
+}
+
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1774,4 +1786,5 @@ export default combineReducers( {
 	automaticChangeStatus,
 	highlightedBlock,
 	lastBlockInserted,
+	focusedBlock,
 } );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 7d8b9d0b4cca80..52c0e84bcbd146 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2209,3 +2209,7 @@ export function wasBlockJustInserted( state, clientId, source ) {
 		lastBlockInserted.source === source
 	);
 }
+
+export function getFocusedBlock( state ) {
+	return state.focusedBlock;
+}
diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
index 7d720b2d49edae..16889dc9c89dde 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -11,14 +11,17 @@ import classnames from 'classnames';
 const baseClassName = 'wp-block-template-part__content-lock';
 
 export default function ContentLock( { clientId, children } ) {
-	const { isSelected, hasChildSelected } = useSelect(
+	const { isSelected, hasChildSelected, isBlockFocused } = useSelect(
 		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } = select(
-				blockEditorStore
-			);
+			const {
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				getFocusedBlock,
+			} = select( blockEditorStore );
 			return {
 				isSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
+				isBlockFocused: getFocusedBlock() === clientId,
 			};
 		},
 		[ clientId ]
@@ -26,8 +29,9 @@ export default function ContentLock( { clientId, children } ) {
 	const selectBlock = useDispatch( blockEditorStore ).selectBlock;
 
 	const classes = classnames( baseClassName, {
-		'overlay-selected': isSelected,
+		'parent-selected': isSelected,
 		'child-selected': hasChildSelected,
+		'parent-focused': isBlockFocused,
 	} );
 
 	const onClick = ! ( isSelected || hasChildSelected )
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 37722f0383c22c..0e0dc9e7e4e50d 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -92,15 +92,17 @@
 		border: none;
 	}
 
-	&.overlay-selected {
+	&.parent-selected {
 		.wp-block-template-part__content-lock-overlay {
-			background: rgb(#007cba, 0.1); // todo: use var
 			pointer-events: none;
 		}
 		.wp-block-template-part__content-lock .wp-block-template-part__content-lock-overlay {
 			pointer-events: auto;
 			background: inherit;
 		}
+		&.parent-focused .wp-block-template-part__content-lock-overlay {
+			background: rgb(#007cba, 0.1); // todo: use var
+		}
 	}
 
 	&.child-selected {
@@ -112,7 +114,7 @@
 		}
 	}
 
-	&:hover:not(.overlay-selected):not(.child-selected) {
+	&:hover:not(.parent-selected):not(.child-selected) {
 		.wp-block-template-part__content-lock-overlay {
 			background: rgba($gray-900, 0.05);
 		}
@@ -121,7 +123,7 @@
 		}
 	}
 
-	&:not(.overlay-selected):not(.child-selected) .wp-block-template-part__content-lock-content-wrapper {
+	&:not(.parent-selected):not(.child-selected) .wp-block-template-part__content-lock-content-wrapper {
 		* {
 			pointer-events: none;
 		}

From a3e35e6b7a1eb12cd17c4418c63b4008380ecbd8 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 28 Apr 2021 13:16:44 -0400
Subject: [PATCH 13/43] cleanup css

---
 .../src/template-part/editor.scss             | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 0e0dc9e7e4e50d..9edd6239d2929d 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -90,36 +90,28 @@
 		z-index: 100;
 		background: transparent;
 		border: none;
+		border-radius: 2px;
 	}
 
 	&.parent-selected {
-		.wp-block-template-part__content-lock-overlay {
+		> .wp-block-template-part__content-lock-overlay {
 			pointer-events: none;
 		}
-		.wp-block-template-part__content-lock .wp-block-template-part__content-lock-overlay {
-			pointer-events: auto;
-			background: inherit;
-		}
-		&.parent-focused .wp-block-template-part__content-lock-overlay {
-			background: rgb(#007cba, 0.1); // todo: use var
+		&.parent-focused > .wp-block-template-part__content-lock-overlay {
+			background: rgb(#007cba, 0.2); // todo: use var
 		}
 	}
 
 	&.child-selected {
-		.wp-block-template-part__content-lock-overlay {
+		> .wp-block-template-part__content-lock-overlay {
 			display: none;
 		}
-		.wp-block-template-part__content-lock:not(.child-selected) .wp-block-template-part__content-lock-overlay {
-			display: block;
-		}
 	}
 
 	&:hover:not(.parent-selected):not(.child-selected) {
-		.wp-block-template-part__content-lock-overlay {
-			background: rgba($gray-900, 0.05);
-		}
-		.wp-block-template-part__content-lock .wp-block-template-part__content-lock-overlay {
-			background: inherit;
+		> .wp-block-template-part__content-lock-overlay {
+			background: rgba(#007cba, 0.1);
+			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 		}
 	}
 

From a1ae0729153941690547f8d615a84c482a76ac63 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 28 Apr 2021 14:03:34 -0400
Subject: [PATCH 14/43] try overlay for initial selection only

---
 .../block-list/use-block-props/index.js       |  2 --
 .../use-block-props/use-block-focus-state.js  | 29 -----------------
 packages/block-editor/src/store/actions.js    | 14 ---------
 packages/block-editor/src/store/reducer.js    | 13 --------
 packages/block-editor/src/store/selectors.js  |  4 ---
 .../src/template-part/edit/content-lock.js    | 31 +++++++++----------
 .../src/template-part/editor.scss             | 15 ---------
 7 files changed, 15 insertions(+), 93 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-block-focus-state.js

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 907b4053483e02..91c27c025b4a6c 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
@@ -30,7 +30,6 @@ import { useEventHandlers } from './use-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockNodes } from './use-block-nodes';
 import { useScrollIntoView } from './use-scroll-into-view';
-import { useBlockFocusState } from './use-block-focus-state';
 import { store as blockEditorStore } from '../../../store';
 
 /**
@@ -116,7 +115,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			enableAnimation,
 			triggerAnimationOnChange: index,
 		} ),
-		useBlockFocusState( clientId ),
 	] );
 
 	return {
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-focus-state.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-focus-state.js
deleted file mode 100644
index b628edd3d84a34..00000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-block-focus-state.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-export function useBlockFocusState( clientId ) {
-	const {
-		__experimentalSetFocusedBlock: setFocusedBlock,
-		__experimentalRemoveFocusedBlock: removeFocusedBlock,
-	} = useDispatch( blockEditorStore );
-
-	const onFocus = () => setFocusedBlock( clientId );
-	const onBlur = () => removeFocusedBlock( clientId );
-
-	return useRefEffect( ( node ) => {
-		node.addEventListener( 'focus', onFocus );
-		node.addEventListener( 'blur', onBlur );
-
-		return () => {
-			node.removeEventListener( 'focus', onFocus );
-			node.removeEventListener( 'blur', onBlur );
-		};
-	} );
-}
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 1aa7417a4970cb..b0144c19e4f476 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1391,17 +1391,3 @@ export function setHasControlledInnerBlocks(
 		clientId,
 	};
 }
-
-export function __experimentalSetFocusedBlock( clientId ) {
-	return {
-		type: 'SET_FOCUSED_BLOCK',
-		clientId,
-	};
-}
-
-export function __experimentalRemoveFocusedBlock( clientId ) {
-	return {
-		type: 'REMOVE_FOCUSED_BLOCK',
-		clientId,
-	};
-}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index cab51ac31d4fe4..68f0f9b684e958 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1752,18 +1752,6 @@ export function lastBlockInserted( state = {}, action ) {
 	return state;
 }
 
-export function focusedBlock( state = null, action ) {
-	switch ( action.type ) {
-		case 'SET_FOCUSED_BLOCK':
-			return action.clientId;
-		case 'REMOVE_FOCUSED_BLOCK':
-			if ( action.clientId === state ) {
-				return null;
-			}
-	}
-	return state;
-}
-
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1786,5 +1774,4 @@ export default combineReducers( {
 	automaticChangeStatus,
 	highlightedBlock,
 	lastBlockInserted,
-	focusedBlock,
 } );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 52c0e84bcbd146..7d8b9d0b4cca80 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2209,7 +2209,3 @@ export function wasBlockJustInserted( state, clientId, source ) {
 		lastBlockInserted.source === source
 	);
 }
-
-export function getFocusedBlock( state ) {
-	return state.focusedBlock;
-}
diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
index 16889dc9c89dde..9392fe7b92374e 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -11,17 +11,14 @@ import classnames from 'classnames';
 const baseClassName = 'wp-block-template-part__content-lock';
 
 export default function ContentLock( { clientId, children } ) {
-	const { isSelected, hasChildSelected, isBlockFocused } = useSelect(
+	const { isSelected, hasChildSelected } = useSelect(
 		( select ) => {
-			const {
-				isBlockSelected,
-				hasSelectedInnerBlock,
-				getFocusedBlock,
-			} = select( blockEditorStore );
+			const { isBlockSelected, hasSelectedInnerBlock } = select(
+				blockEditorStore
+			);
 			return {
 				isSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
-				isBlockFocused: getFocusedBlock() === clientId,
 			};
 		},
 		[ clientId ]
@@ -31,22 +28,24 @@ export default function ContentLock( { clientId, children } ) {
 	const classes = classnames( baseClassName, {
 		'parent-selected': isSelected,
 		'child-selected': hasChildSelected,
-		'parent-focused': isBlockFocused,
 	} );
 
-	const onClick = ! ( isSelected || hasChildSelected )
-		? () => selectBlock( clientId )
-		: null;
-
+	// Disabled because the overlay div doesn't actually have a role or functionality
+	// as far as the user is concerned. We're just catching the first click so that
+	// the block can be selected without interacting with its contents.
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div className={ classes }>
-			<button
-				className={ `${ baseClassName }-overlay` }
-				onClick={ onClick }
-			/>
+			{ ! isSelected && ! hasChildSelected && (
+				<div
+					className={ `${ baseClassName }-overlay` }
+					onMouseUp={ () => selectBlock( clientId ) }
+				/>
+			) }
 			<div className={ `${ baseClassName }-content-wrapper` }>
 				{ children }
 			</div>
 		</div>
 	);
 }
+/* eslint-enable jsx-a11y/no-static-element-interactions */
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 9edd6239d2929d..a9cb5a2d56a092 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -93,21 +93,6 @@
 		border-radius: 2px;
 	}
 
-	&.parent-selected {
-		> .wp-block-template-part__content-lock-overlay {
-			pointer-events: none;
-		}
-		&.parent-focused > .wp-block-template-part__content-lock-overlay {
-			background: rgb(#007cba, 0.2); // todo: use var
-		}
-	}
-
-	&.child-selected {
-		> .wp-block-template-part__content-lock-overlay {
-			display: none;
-		}
-	}
-
 	&:hover:not(.parent-selected):not(.child-selected) {
 		> .wp-block-template-part__content-lock-overlay {
 			background: rgba(#007cba, 0.1);

From 7d74900eeff895e0305db250f6f7a8ff88d6a61e Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 30 Apr 2021 09:41:37 -0400
Subject: [PATCH 15/43] enable drag and drop

---
 .../src/template-part/edit/content-lock.js           | 12 ++++++++----
 packages/block-library/src/template-part/editor.scss |  8 +++++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
index 9392fe7b92374e..4a4a04dddacf89 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -11,14 +11,17 @@ import classnames from 'classnames';
 const baseClassName = 'wp-block-template-part__content-lock';
 
 export default function ContentLock( { clientId, children } ) {
-	const { isSelected, hasChildSelected } = useSelect(
+	const { isSelected, hasChildSelected, isDraggingBlocks } = useSelect(
 		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } = select(
-				blockEditorStore
-			);
+			const {
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				isDraggingBlocks: _isDraggingBlocks,
+			} = select( blockEditorStore );
 			return {
 				isSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
+				isDraggingBlocks: _isDraggingBlocks(),
 			};
 		},
 		[ clientId ]
@@ -28,6 +31,7 @@ export default function ContentLock( { clientId, children } ) {
 	const classes = classnames( baseClassName, {
 		'parent-selected': isSelected,
 		'child-selected': hasChildSelected,
+		'is-dragging-blocks': isDraggingBlocks,
 	} );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index a9cb5a2d56a092..4aa510ec4ea8b2 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -100,9 +100,15 @@
 		}
 	}
 
-	&:not(.parent-selected):not(.child-selected) .wp-block-template-part__content-lock-content-wrapper {
+	&:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) .wp-block-template-part__content-lock-content-wrapper {
 		* {
 			pointer-events: none;
 		}
 	}
+
+	&.is-dragging-blocks .wp-block-template-part__content-lock-overlay {
+		pointer-events: none;
+		background: rgba(#007cba, 0.1);
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	}
 }

From 0550d76deb220cd3ba0d6321acf84e58cfa58980 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 30 Apr 2021 10:31:32 -0400
Subject: [PATCH 16/43] only show borders on drag and drop

---
 packages/block-library/src/template-part/edit/content-lock.js | 3 ++-
 packages/block-library/src/template-part/editor.scss          | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-library/src/template-part/edit/content-lock.js
index 4a4a04dddacf89..488087bd8ca26d 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-library/src/template-part/edit/content-lock.js
@@ -40,7 +40,8 @@ export default function ContentLock( { clientId, children } ) {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div className={ classes }>
-			{ ! isSelected && ! hasChildSelected && (
+			{ ( ( ! isSelected && ! hasChildSelected ) ||
+				isDraggingBlocks ) && (
 				<div
 					className={ `${ baseClassName }-overlay` }
 					onMouseUp={ () => selectBlock( clientId ) }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 4aa510ec4ea8b2..02155bd35fb724 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -108,7 +108,6 @@
 
 	&.is-dragging-blocks .wp-block-template-part__content-lock-overlay {
 		pointer-events: none;
-		background: rgba(#007cba, 0.1);
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 	}
 }

From 5272c1252c16e6284ccdf3ac9a97a831dae93928 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 30 Apr 2021 10:33:56 -0400
Subject: [PATCH 17/43] ensure background color not on drag and drop

---
 packages/block-library/src/template-part/editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 02155bd35fb724..7a393b1b1e90e0 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -93,7 +93,7 @@
 		border-radius: 2px;
 	}
 
-	&:hover:not(.parent-selected):not(.child-selected) {
+	&:hover:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) {
 		> .wp-block-template-part__content-lock-overlay {
 			background: rgba(#007cba, 0.1);
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);

From 8085ce9239d985156ca85f7066b05e83103461f5 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 30 Apr 2021 13:50:23 -0400
Subject: [PATCH 18/43] apply to reusable blocks

---
 .../block-content-overlay/index.js}           | 16 +++---
 .../block-content-overlay/style.scss          | 33 ++++++++++++
 packages/block-editor/src/components/index.js |  1 +
 packages/block-editor/src/style.scss          |  1 +
 packages/block-library/src/block/edit.js      | 51 ++++++++++---------
 .../src/template-part/edit/inner-blocks.js    | 10 ++--
 .../src/template-part/editor.scss             | 34 -------------
 7 files changed, 76 insertions(+), 70 deletions(-)
 rename packages/{block-library/src/template-part/edit/content-lock.js => block-editor/src/components/block-content-overlay/index.js} (80%)
 create mode 100644 packages/block-editor/src/components/block-content-overlay/style.scss

diff --git a/packages/block-library/src/template-part/edit/content-lock.js b/packages/block-editor/src/components/block-content-overlay/index.js
similarity index 80%
rename from packages/block-library/src/template-part/edit/content-lock.js
rename to packages/block-editor/src/components/block-content-overlay/index.js
index 488087bd8ca26d..66dc3b272b7e41 100644
--- a/packages/block-library/src/template-part/edit/content-lock.js
+++ b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -2,15 +2,19 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
 /**
  * External dependencies
  */
 import classnames from 'classnames';
 
-const baseClassName = 'wp-block-template-part__content-lock';
-
-export default function ContentLock( { clientId, children } ) {
+export default function BlockContentOverlay( { clientId, children } ) {
+	const baseClassName = 'block-editor-block-content-overlay';
 	const { isSelected, hasChildSelected, isDraggingBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -43,11 +47,11 @@ export default function ContentLock( { clientId, children } ) {
 			{ ( ( ! isSelected && ! hasChildSelected ) ||
 				isDraggingBlocks ) && (
 				<div
-					className={ `${ baseClassName }-overlay` }
+					className={ `${ baseClassName }__overlay` }
 					onMouseUp={ () => selectBlock( clientId ) }
 				/>
 			) }
-			<div className={ `${ baseClassName }-content-wrapper` }>
+			<div className={ `${ baseClassName }__content-wrapper` }>
 				{ children }
 			</div>
 		</div>
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
new file mode 100644
index 00000000000000..bc404483473180
--- /dev/null
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -0,0 +1,33 @@
+.block-editor-block-content-overlay {
+	position: relative;
+
+	.block-editor-block-content-overlay__overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 100;
+		background: transparent;
+		border: none;
+		border-radius: 2px;
+	}
+
+	&:hover:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) {
+		> .block-editor-block-content-overlay__overlay {
+			background: rgba(#007cba, 0.1);
+			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+		}
+	}
+
+	&:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) .block-editor-block-content-overlay__content-wrapper {
+		* {
+			pointer-events: none !important;
+		}
+	}
+
+	&.is-dragging-blocks .block-editor-block-content-overlay__overlay {
+		pointer-events: none;
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	}
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index dc88ae5a36deb3..c830444ea0990b 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -14,6 +14,7 @@ export {
 export { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control';
 export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
+export { default as __experimentalBlockContentOverlay } from './block-content-overlay';
 export { BlockContextProvider } from './block-context';
 export {
 	default as BlockControls,
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 745e64a980d2a9..6c17f0a0e9ba2d 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -14,6 +14,7 @@
 @import "./components/block-breadcrumb/style.scss";
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
+@import "./components/block-content-overlay/style.scss";
 @import "./components/block-draggable/style.scss";
 @import "./components/block-mobile-toolbar/style.scss";
 @import "./components/block-mover/style.scss";
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 966654c87a3dc8..3c3969e1d9c815 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalBlockContentOverlay as BlockContentOverlay,
 	InnerBlocks,
 	BlockControls,
 	InspectorControls,
@@ -116,30 +117,34 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	return (
 		<RecursionProvider>
-			<div { ...blockProps }>
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ () => convertBlockToStatic( clientId ) }
-							label={ __( 'Convert to regular blocks' ) }
-							icon={ ungroup }
-							showTooltip
-						/>
-					</ToolbarGroup>
-				</BlockControls>
-				<InspectorControls>
-					<PanelBody>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
-						/>
-					</PanelBody>
-				</InspectorControls>
-				<div className="block-library-block__reusable-block-container">
-					{ <div { ...innerBlocksProps } /> }
+			<BlockContentOverlay clientId={ clientId }>
+				<div { ...blockProps }>
+					<BlockControls>
+						<ToolbarGroup>
+							<ToolbarButton
+								onClick={ () =>
+									convertBlockToStatic( clientId )
+								}
+								label={ __( 'Convert to regular blocks' ) }
+								icon={ ungroup }
+								showTooltip
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+					<InspectorControls>
+						<PanelBody>
+							<TextControl
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+							/>
+						</PanelBody>
+					</InspectorControls>
+					<div className="block-library-block__reusable-block-container">
+						{ <div { ...innerBlocksProps } /> }
+					</div>
 				</div>
-			</div>
+			</BlockContentOverlay>
 		</RecursionProvider>
 	);
 }
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index c6a81e0d337251..f38dc6f5552001 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -6,15 +6,11 @@ import {
 	InnerBlocks,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	__experimentalUseEditorFeature as useEditorFeature,
+	__experimentalBlockContentOverlay as BlockContentOverlay,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import ContentLock from './content-lock';
-
 export default function TemplatePartInnerBlocks( {
 	postId: id,
 	hasInnerBlocks,
@@ -54,8 +50,8 @@ export default function TemplatePartInnerBlocks( {
 	} );
 
 	return (
-		<ContentLock clientId={ clientId }>
+		<BlockContentOverlay clientId={ clientId }>
 			<TagName { ...innerBlocksProps } />
-		</ContentLock>
+		</BlockContentOverlay>
 	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 7a393b1b1e90e0..c61e0651ae7251 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -77,37 +77,3 @@
 		}
 	}
 }
-
-.wp-block-template-part__content-lock {
-	position: relative;
-
-	.wp-block-template-part__content-lock-overlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 100;
-		background: transparent;
-		border: none;
-		border-radius: 2px;
-	}
-
-	&:hover:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) {
-		> .wp-block-template-part__content-lock-overlay {
-			background: rgba(#007cba, 0.1);
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-		}
-	}
-
-	&:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) .wp-block-template-part__content-lock-content-wrapper {
-		* {
-			pointer-events: none;
-		}
-	}
-
-	&.is-dragging-blocks .wp-block-template-part__content-lock-overlay {
-		pointer-events: none;
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-}

From 53511657a3280d941b8f2484f4285d4e73a92195 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 4 May 2021 11:21:24 -0400
Subject: [PATCH 19/43] fix e2e tests

---
 .../specs/experiments/multi-entity-editing.test.js        | 8 ++++++++
 .../specs/experiments/multi-entity-saving.test.js         | 5 +++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
index 0538e5e4b54a5e..31894471af8593 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -256,6 +256,8 @@ describe( 'Multi-entity editor states', () => {
 		} );
 
 		it( 'should only dirty the child when editing the child', async () => {
+			// Select parent TP to unlock selecting content.
+			await canvas().click( '.wp-block-template-part' );
 			await canvas().click(
 				'.wp-block-template-part .wp-block[data-type="core/paragraph"]'
 			);
@@ -267,6 +269,12 @@ describe( 'Multi-entity editor states', () => {
 		} );
 
 		it( 'should only dirty the nested entity when editing the nested entity', async () => {
+			// Select parent TP to unlock selecting child.
+			await canvas().click( '.wp-block-template-part' );
+			// Select child TP to unlock selecting content.
+			await canvas().click(
+				'.wp-block-template-part .wp-block-template-part'
+			);
 			await canvas().click(
 				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
 			);
diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
index 87db3380db85bd..50ff7da3caeeaf 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
@@ -105,8 +105,6 @@ describe( 'Multi-entity save flow', () => {
 			);
 			await createNewButton.click();
 			await page.waitForSelector( activatedTemplatePartSelector );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.type( 'test-template-part' );
 			await page.click( '.block-editor-button-block-appender' );
 			await page.click( '.editor-block-list-item-paragraph' );
 			await page.keyboard.type( 'some words...' );
@@ -163,6 +161,9 @@ describe( 'Multi-entity save flow', () => {
 
 			// Update template part.
 			await page.click( templatePartSelector );
+			await page.click(
+				`${ templatePartSelector } .wp-block[data-type="core/paragraph"]`
+			);
 			await page.keyboard.type( '...some more words...' );
 			await page.keyboard.press( 'Enter' );
 

From 8ff4b9424844d4c4686568ae8397586bb02f20c7 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 4 May 2021 12:53:30 -0400
Subject: [PATCH 20/43] try add basic test

---
 .../experiments/multi-entity-editing.test.js     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
index 31894471af8593..a4c45e1559aeb7 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -284,5 +284,21 @@ describe( 'Multi-entity editor states', () => {
 			expect( await isEntityDirty( templatePartName ) ).toBe( false );
 			expect( await isEntityDirty( nestedTPName ) ).toBe( true );
 		} );
+
+		it( 'should not allow selecting template part content without parent selected', async () => {
+			// Try to select parent template first.
+			await canvas().click(
+				'.wp-block-template-part .wp-block[data-type="core/paragraph"]'
+			);
+			// Try to select and edit content of child template part.
+			await canvas().click(
+				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
+			);
+			await page.keyboard.type( 'this shouldnt affect anything...' );
+
+			expect( await isEntityDirty( templateName ) ).toBe( false );
+			expect( await isEntityDirty( templatePartName ) ).toBe( false );
+			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
+		} );
 	} );
 } );

From b760a07ad1fbb83dccf4522d2532e3507fe0218e Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 4 May 2021 13:57:55 -0400
Subject: [PATCH 21/43] try fix test

---
 .../experiments/multi-entity-editing.test.js    | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
index a4c45e1559aeb7..d87c94c165a948 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -10,6 +10,7 @@ import {
 	canvas,
 	openDocumentSettingsSidebar,
 	pressKeyWithModifier,
+	selectBlockByClientId,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -286,19 +287,17 @@ describe( 'Multi-entity editor states', () => {
 		} );
 
 		it( 'should not allow selecting template part content without parent selected', async () => {
-			// Try to select parent template first.
-			await canvas().click(
-				'.wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			// Try to select and edit content of child template part.
+			// Unselect blocks.
+			await selectBlockByClientId();
+			// Try to select a child block of a template part.
 			await canvas().click(
 				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
 			);
-			await page.keyboard.type( 'this shouldnt affect anything...' );
 
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
+			const selectedBlock = await page.evaluate( () => {
+				return wp.data.select( 'core/block-editor' ).getSelectedBlock();
+			} );
+			expect( selectedBlock?.name ).toBe( 'core/template-part' );
 		} );
 	} );
 } );

From 863935100a117e9276030b17ade2d3879394ed42 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 4 May 2021 14:21:09 -0400
Subject: [PATCH 22/43] only use the afterEach where needed

---
 .../specs/experiments/multi-entity-editing.test.js         | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
index d87c94c165a948..e23c5180828d27 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -219,7 +219,7 @@ describe( 'Multi-entity editor states', () => {
 			removeErrorMocks();
 		} );
 
-		afterEach( async () => {
+		const saveAndWaitResponse = async () => {
 			await Promise.all( [
 				saveAllEntities(),
 
@@ -242,7 +242,7 @@ describe( 'Multi-entity editor states', () => {
 				} ),
 			] );
 			removeErrorMocks();
-		} );
+		};
 
 		it( 'should only dirty the parent entity when editing the parent', async () => {
 			// Clear selection so that the block is not added to the template part.
@@ -254,6 +254,7 @@ describe( 'Multi-entity editor states', () => {
 			expect( await isEntityDirty( templateName ) ).toBe( true );
 			expect( await isEntityDirty( templatePartName ) ).toBe( false );
 			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
+			await saveAndWaitResponse();
 		} );
 
 		it( 'should only dirty the child when editing the child', async () => {
@@ -267,6 +268,7 @@ describe( 'Multi-entity editor states', () => {
 			expect( await isEntityDirty( templateName ) ).toBe( false );
 			expect( await isEntityDirty( templatePartName ) ).toBe( true );
 			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
+			await saveAndWaitResponse();
 		} );
 
 		it( 'should only dirty the nested entity when editing the nested entity', async () => {
@@ -284,6 +286,7 @@ describe( 'Multi-entity editor states', () => {
 			expect( await isEntityDirty( templateName ) ).toBe( false );
 			expect( await isEntityDirty( templatePartName ) ).toBe( false );
 			expect( await isEntityDirty( nestedTPName ) ).toBe( true );
+			await saveAndWaitResponse();
 		} );
 
 		it( 'should not allow selecting template part content without parent selected', async () => {

From 08ecb26613291f8604da165fc25b91bf764c56a7 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 4 May 2021 15:13:56 -0400
Subject: [PATCH 23/43] use css vars

---
 packages/base-styles/_z-index.scss                       | 3 +++
 .../src/components/block-content-overlay/style.scss      | 9 +++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 92efe18d7ecdb0..111f90ce54b93e 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -81,6 +81,9 @@ $z-layers: (
 	".block-editor-block-pattern-setup .{next,previous}-slide": 101,
 	".block-editor-block-pattern-setup .active-slide": 102,
 
+	// Block content clickthrough overlay
+	".block-editor-block-content-overlay .block-editor-block-content-overlay__overlay": 100,
+
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	".interface-interface-skeleton__sidebar": 100000,
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index bc404483473180..31744742b34ddc 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -7,22 +7,23 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		z-index: 100;
+		z-index: z-index(".block-editor-block-content-overlay .block-editor-block-content-overlay__overlay");
 		background: transparent;
 		border: none;
-		border-radius: 2px;
+		border-radius: $radius-block-ui;
 	}
 
 	&:hover:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) {
 		> .block-editor-block-content-overlay__overlay {
-			background: rgba(#007cba, 0.1);
+			background-color: var(--wp-admin-theme-color);
+			opacity: 0.1;
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 		}
 	}
 
 	&:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) .block-editor-block-content-overlay__content-wrapper {
 		* {
-			pointer-events: none !important;
+			pointer-events: none;
 		}
 	}
 

From 00218e06b9ed5265f596975f580fdc4ce5e5ec88 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Thu, 6 May 2021 10:23:10 -0400
Subject: [PATCH 24/43] fix border color

---
 packages/base-styles/_functions.scss                     | 9 +++++++++
 packages/base-styles/_mixins.scss                        | 8 +++++++-
 .../src/components/block-content-overlay/style.scss      | 3 +--
 3 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 packages/base-styles/_functions.scss

diff --git a/packages/base-styles/_functions.scss b/packages/base-styles/_functions.scss
new file mode 100644
index 00000000000000..734506d456d974
--- /dev/null
+++ b/packages/base-styles/_functions.scss
@@ -0,0 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+@function hex-to-rgb($hex) {
+	@return red($hex), green($hex), blue($hex);
+}
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index c1c4215c4f48f4..43a20833d4af0a 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,3 +1,5 @@
+@import "./functions";
+
 /**
  * Breakpoint mixins
  */
@@ -440,11 +442,15 @@
 }
 
 @mixin admin-scheme($color-primary) {
+	// Define RGB equivalents for use in rgba function.
+	// Hexadecimal css vars do not work in the rgba function.
 	--wp-admin-theme-color: #{$color-primary};
-
+	--wp-admin-theme-color--rgb: #{hex-to-rgb(var(--wp-admin-theme-color))};
 	// Darker shades.
 	--wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};
+	--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(var(--wp-admin-theme-color-darker-10))};
 	--wp-admin-theme-color-darker-20: #{darken($color-primary, 10%)};
+	--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(var(--wp-admin-theme-color-darker-20))};
 
 	// Focus style width.
 	// Avoid rounding issues by showing a whole 2px for 1x screens, and 1.5px on high resolution screens.
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 31744742b34ddc..5cc80a28259208 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -15,8 +15,7 @@
 
 	&:hover:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) {
 		> .block-editor-block-content-overlay__overlay {
-			background-color: var(--wp-admin-theme-color);
-			opacity: 0.1;
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 		}
 	}

From 35d61f46e6e8fd7fa22335ccc07af0ba0d5d2868 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Thu, 6 May 2021 14:48:18 -0400
Subject: [PATCH 25/43] fix block toolbar issue

---
 packages/base-styles/_mixins.scss                           | 6 +++---
 packages/base-styles/_z-index.scss                          | 3 ---
 .../src/components/block-content-overlay/style.scss         | 1 -
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 43a20833d4af0a..d01d312014b879 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -445,12 +445,12 @@
 	// Define RGB equivalents for use in rgba function.
 	// Hexadecimal css vars do not work in the rgba function.
 	--wp-admin-theme-color: #{$color-primary};
-	--wp-admin-theme-color--rgb: #{hex-to-rgb(var(--wp-admin-theme-color))};
+	--wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)};
 	// Darker shades.
 	--wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};
-	--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(var(--wp-admin-theme-color-darker-10))};
+	--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(darken($color-primary, 5%))};
 	--wp-admin-theme-color-darker-20: #{darken($color-primary, 10%)};
-	--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(var(--wp-admin-theme-color-darker-20))};
+	--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(darken($color-primary, 10%))};
 
 	// Focus style width.
 	// Avoid rounding issues by showing a whole 2px for 1x screens, and 1.5px on high resolution screens.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 111f90ce54b93e..92efe18d7ecdb0 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -81,9 +81,6 @@ $z-layers: (
 	".block-editor-block-pattern-setup .{next,previous}-slide": 101,
 	".block-editor-block-pattern-setup .active-slide": 102,
 
-	// Block content clickthrough overlay
-	".block-editor-block-content-overlay .block-editor-block-content-overlay__overlay": 100,
-
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	".interface-interface-skeleton__sidebar": 100000,
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 5cc80a28259208..42a7c7b51dcf51 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -7,7 +7,6 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		z-index: z-index(".block-editor-block-content-overlay .block-editor-block-content-overlay__overlay");
 		background: transparent;
 		border: none;
 		border-radius: $radius-block-ui;

From 882fbf8221b6698f85e2d4bb55c9e08a2ba11ea1 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 7 May 2021 08:29:35 -0400
Subject: [PATCH 26/43] fix width on classic themes

---
 .../src/components/block-content-overlay/style.scss           | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 42a7c7b51dcf51..03eccd98955add 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -1,5 +1,9 @@
 .block-editor-block-content-overlay {
 	position: relative;
+	// Fixes extra width from block margin on classic themes.
+	max-width: var(--responsive--aligndefault-width);
+	margin-right: auto;
+	margin-left: auto;
 
 	.block-editor-block-content-overlay__overlay {
 		position: absolute;

From 15157e95afcceb91d8c0d4ba1c70ceb547c10e96 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 7 May 2021 08:56:52 -0400
Subject: [PATCH 27/43] fix width by moving overlay inside block wrapper

---
 .../components/block-content-overlay/index.js | 18 +++++--
 .../block-content-overlay/style.scss          | 12 ++---
 packages/block-library/src/block/edit.js      | 48 +++++++++----------
 .../src/template-part/edit/inner-blocks.js    |  8 ++--
 4 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js
index 66dc3b272b7e41..b219fe6db5eb16 100644
--- a/packages/block-editor/src/components/block-content-overlay/index.js
+++ b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,6 +16,8 @@ import classnames from 'classnames';
 
 export default function BlockContentOverlay( { clientId, children } ) {
 	const baseClassName = 'block-editor-block-content-overlay';
+	const [ isOverlayActive, setIsOverlayActive ] = useState( true );
+
 	const { isSelected, hasChildSelected, isDraggingBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -30,25 +33,30 @@ export default function BlockContentOverlay( { clientId, children } ) {
 		},
 		[ clientId ]
 	);
-	const selectBlock = useDispatch( blockEditorStore ).selectBlock;
 
 	const classes = classnames( baseClassName, {
-		'parent-selected': isSelected,
+		'overlay-active': isOverlayActive,
 		'child-selected': hasChildSelected,
 		'is-dragging-blocks': isDraggingBlocks,
 	} );
 
+	useEffect( () => {
+		if ( ! isSelected && ! hasChildSelected && ! isOverlayActive ) {
+			setIsOverlayActive( true );
+		}
+	}, [ isSelected, hasChildSelected, isOverlayActive ] );
+
 	// Disabled because the overlay div doesn't actually have a role or functionality
 	// as far as the user is concerned. We're just catching the first click so that
 	// the block can be selected without interacting with its contents.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div className={ classes }>
-			{ ( ( ! isSelected && ! hasChildSelected ) ||
+			{ ( ( isOverlayActive && ! hasChildSelected ) ||
 				isDraggingBlocks ) && (
 				<div
 					className={ `${ baseClassName }__overlay` }
-					onMouseUp={ () => selectBlock( clientId ) }
+					onMouseUp={ () => setIsOverlayActive( false ) }
 				/>
 			) }
 			<div className={ `${ baseClassName }__content-wrapper` }>
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 03eccd98955add..f49c24381bb0d0 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -1,9 +1,9 @@
+.editor-styles-wrapper .wp-block .block-editor-block-content-overlay {
+	max-width: none;
+}
+
 .block-editor-block-content-overlay {
 	position: relative;
-	// Fixes extra width from block margin on classic themes.
-	max-width: var(--responsive--aligndefault-width);
-	margin-right: auto;
-	margin-left: auto;
 
 	.block-editor-block-content-overlay__overlay {
 		position: absolute;
@@ -16,14 +16,14 @@
 		border-radius: $radius-block-ui;
 	}
 
-	&:hover:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) {
+	&.overlay-active:hover:not(.child-selected):not(.is-dragging-blocks) {
 		> .block-editor-block-content-overlay__overlay {
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 		}
 	}
 
-	&:not(.parent-selected):not(.child-selected):not(.is-dragging-blocks) .block-editor-block-content-overlay__content-wrapper {
+	&.overlay-active:not(.child-selected):not(.is-dragging-blocks) .block-editor-block-content-overlay__content-wrapper {
 		* {
 			pointer-events: none;
 		}
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 3c3969e1d9c815..bdb1489af6f076 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -117,34 +117,32 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	return (
 		<RecursionProvider>
-			<BlockContentOverlay clientId={ clientId }>
-				<div { ...blockProps }>
-					<BlockControls>
-						<ToolbarGroup>
-							<ToolbarButton
-								onClick={ () =>
-									convertBlockToStatic( clientId )
-								}
-								label={ __( 'Convert to regular blocks' ) }
-								icon={ ungroup }
-								showTooltip
-							/>
-						</ToolbarGroup>
-					</BlockControls>
-					<InspectorControls>
-						<PanelBody>
-							<TextControl
-								label={ __( 'Name' ) }
-								value={ title }
-								onChange={ setTitle }
-							/>
-						</PanelBody>
-					</InspectorControls>
+			<div { ...blockProps }>
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ () => convertBlockToStatic( clientId ) }
+							label={ __( 'Convert to regular blocks' ) }
+							icon={ ungroup }
+							showTooltip
+						/>
+					</ToolbarGroup>
+				</BlockControls>
+				<InspectorControls>
+					<PanelBody>
+						<TextControl
+							label={ __( 'Name' ) }
+							value={ title }
+							onChange={ setTitle }
+						/>
+					</PanelBody>
+				</InspectorControls>
+				<BlockContentOverlay clientId={ clientId }>
 					<div className="block-library-block__reusable-block-container">
 						{ <div { ...innerBlocksProps } /> }
 					</div>
-				</div>
-			</BlockContentOverlay>
+				</BlockContentOverlay>
+			</div>
 		</RecursionProvider>
 	);
 }
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index f38dc6f5552001..3b8c8a7c59b5ea 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -50,8 +50,10 @@ export default function TemplatePartInnerBlocks( {
 	} );
 
 	return (
-		<BlockContentOverlay clientId={ clientId }>
-			<TagName { ...innerBlocksProps } />
-		</BlockContentOverlay>
+		<TagName { ...blockProps }>
+			<BlockContentOverlay clientId={ clientId }>
+				<div { ...innerBlocksProps } />
+			</BlockContentOverlay>
+		</TagName>
 	);
 }

From f4b6f43dae70128cdece2a9f1b6e1f7a99630f47 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 7 May 2021 13:37:26 -0400
Subject: [PATCH 28/43] fix bug with selection from list view

---
 .../src/components/block-content-overlay/index.js    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js
index b219fe6db5eb16..b50ae7297b23b3 100644
--- a/packages/block-editor/src/components/block-content-overlay/index.js
+++ b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -17,6 +17,7 @@ import classnames from 'classnames';
 export default function BlockContentOverlay( { clientId, children } ) {
 	const baseClassName = 'block-editor-block-content-overlay';
 	const [ isOverlayActive, setIsOverlayActive ] = useState( true );
+	const [ isHovered, setIsHovered ] = useState( false );
 
 	const { isSelected, hasChildSelected, isDraggingBlocks } = useSelect(
 		( select ) => {
@@ -44,14 +45,21 @@ export default function BlockContentOverlay( { clientId, children } ) {
 		if ( ! isSelected && ! hasChildSelected && ! isOverlayActive ) {
 			setIsOverlayActive( true );
 		}
-	}, [ isSelected, hasChildSelected, isOverlayActive ] );
+		if ( isSelected && ! isHovered ) {
+			setIsOverlayActive( false );
+		}
+	}, [ isSelected, hasChildSelected, isOverlayActive, isHovered ] );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
 	// as far as the user is concerned. We're just catching the first click so that
 	// the block can be selected without interacting with its contents.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
-		<div className={ classes }>
+		<div
+			className={ classes }
+			onMouseEnter={ () => setIsHovered( true ) }
+			onMouseLeave={ () => setIsHovered( false ) }
+		>
 			{ ( ( isOverlayActive && ! hasChildSelected ) ||
 				isDraggingBlocks ) && (
 				<div

From 84c686f853174ad03b9a11478ee5935541c418aa Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 7 May 2021 13:39:38 -0400
Subject: [PATCH 29/43] add condition to dismissing

---
 .../block-editor/src/components/block-content-overlay/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js
index b50ae7297b23b3..46b38aa9bd199a 100644
--- a/packages/block-editor/src/components/block-content-overlay/index.js
+++ b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -45,7 +45,8 @@ export default function BlockContentOverlay( { clientId, children } ) {
 		if ( ! isSelected && ! hasChildSelected && ! isOverlayActive ) {
 			setIsOverlayActive( true );
 		}
-		if ( isSelected && ! isHovered ) {
+		// If selected by another source (list view, etc.) dismiss the overlay.
+		if ( isSelected && ! isHovered && isOverlayActive ) {
 			setIsOverlayActive( false );
 		}
 	}, [ isSelected, hasChildSelected, isOverlayActive, isHovered ] );

From b00bb3f6b3f6ee4cab62ae493a8c815176959503 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 7 May 2021 17:07:09 -0400
Subject: [PATCH 30/43] show overlay when highlighting list view

---
 .../src/components/block-content-overlay/style.scss         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index f49c24381bb0d0..5db54c6b8e0806 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -2,6 +2,12 @@
 	max-width: none;
 }
 
+// Show overlay color when block is highlighted by list veiw.
+.wp-block.is-highlighted > .block-editor-block-content-overlay > .block-editor-block-content-overlay__overlay {
+	background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+	box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+}
+
 .block-editor-block-content-overlay {
 	position: relative;
 

From d52dc45db7d84021864ce233d5b9b7886bdab4dc Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Mon, 10 May 2021 08:43:36 -0400
Subject: [PATCH 31/43] use selector for highlight style

---
 .../src/components/block-content-overlay/index.js      | 10 +++++++++-
 .../src/components/block-content-overlay/style.scss    |  9 ++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js
index 46b38aa9bd199a..139c07b1029116 100644
--- a/packages/block-editor/src/components/block-content-overlay/index.js
+++ b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -19,17 +19,24 @@ export default function BlockContentOverlay( { clientId, children } ) {
 	const [ isOverlayActive, setIsOverlayActive ] = useState( true );
 	const [ isHovered, setIsHovered ] = useState( false );
 
-	const { isSelected, hasChildSelected, isDraggingBlocks } = useSelect(
+	const {
+		isSelected,
+		hasChildSelected,
+		isDraggingBlocks,
+		isParentHighlighted,
+	} = useSelect(
 		( select ) => {
 			const {
 				isBlockSelected,
 				hasSelectedInnerBlock,
 				isDraggingBlocks: _isDraggingBlocks,
+				isBlockHighlighted,
 			} = select( blockEditorStore );
 			return {
 				isSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
 				isDraggingBlocks: _isDraggingBlocks(),
+				isParentHighlighted: isBlockHighlighted( clientId ),
 			};
 		},
 		[ clientId ]
@@ -37,6 +44,7 @@ export default function BlockContentOverlay( { clientId, children } ) {
 
 	const classes = classnames( baseClassName, {
 		'overlay-active': isOverlayActive,
+		'parent-highlighted': isParentHighlighted,
 		'child-selected': hasChildSelected,
 		'is-dragging-blocks': isDraggingBlocks,
 	} );
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 5db54c6b8e0806..bd064fde2a92de 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -2,12 +2,6 @@
 	max-width: none;
 }
 
-// Show overlay color when block is highlighted by list veiw.
-.wp-block.is-highlighted > .block-editor-block-content-overlay > .block-editor-block-content-overlay__overlay {
-	background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-	box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-}
-
 .block-editor-block-content-overlay {
 	position: relative;
 
@@ -22,7 +16,8 @@
 		border-radius: $radius-block-ui;
 	}
 
-	&.overlay-active:hover:not(.child-selected):not(.is-dragging-blocks) {
+	&.overlay-active:hover:not(.child-selected):not(.is-dragging-blocks),
+	&.parent-highlighted {
 		> .block-editor-block-content-overlay__overlay {
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
 			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);

From ff04eb3959876698ceb138c3a1d6d95679af2f85 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Mon, 10 May 2021 09:38:44 -0400
Subject: [PATCH 32/43] refactor and comments

---
 .../components/block-content-overlay/index.js | 27 ++++++++++++-------
 .../block-content-overlay/style.scss          | 13 ++++++---
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js
index 139c07b1029116..cdf6ad96fb6cf0 100644
--- a/packages/block-editor/src/components/block-content-overlay/index.js
+++ b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -20,7 +20,7 @@ export default function BlockContentOverlay( { clientId, children } ) {
 	const [ isHovered, setIsHovered ] = useState( false );
 
 	const {
-		isSelected,
+		isParentSelected,
 		hasChildSelected,
 		isDraggingBlocks,
 		isParentHighlighted,
@@ -33,7 +33,7 @@ export default function BlockContentOverlay( { clientId, children } ) {
 				isBlockHighlighted,
 			} = select( blockEditorStore );
 			return {
-				isSelected: isBlockSelected( clientId ),
+				isParentSelected: isBlockSelected( clientId ),
 				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
 				isDraggingBlocks: _isDraggingBlocks(),
 				isParentHighlighted: isBlockHighlighted( clientId ),
@@ -45,22 +45,30 @@ export default function BlockContentOverlay( { clientId, children } ) {
 	const classes = classnames( baseClassName, {
 		'overlay-active': isOverlayActive,
 		'parent-highlighted': isParentHighlighted,
-		'child-selected': hasChildSelected,
 		'is-dragging-blocks': isDraggingBlocks,
 	} );
 
 	useEffect( () => {
-		if ( ! isSelected && ! hasChildSelected && ! isOverlayActive ) {
+		// Reenable when blocks are not in use.
+		if ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {
 			setIsOverlayActive( true );
 		}
-		// If selected by another source (list view, etc.) dismiss the overlay.
-		if ( isSelected && ! isHovered && isOverlayActive ) {
+		// Disable if parent selected by another means (such as list view).
+		// We check hover to ensure the overlay click interaction is not taking place.
+		// Trying to click the overlay will select the parent block via its 'focusin'
+		// listener on the wrapper, so if the block is selected while hovered we will
+		// let the mouseup disable the overlay instead.
+		if ( isParentSelected && ! isHovered && isOverlayActive ) {
 			setIsOverlayActive( false );
 		}
-	}, [ isSelected, hasChildSelected, isOverlayActive, isHovered ] );
+		// Ensure overlay is disabled if a child block is selected.
+		if ( hasChildSelected && isOverlayActive ) {
+			setIsOverlayActive( false );
+		}
+	}, [ isParentSelected, hasChildSelected, isOverlayActive, isHovered ] );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
-	// as far as the user is concerned. We're just catching the first click so that
+	// as far as the a11y is concerned. We're just catching the first click so that
 	// the block can be selected without interacting with its contents.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
@@ -69,8 +77,7 @@ export default function BlockContentOverlay( { clientId, children } ) {
 			onMouseEnter={ () => setIsHovered( true ) }
 			onMouseLeave={ () => setIsHovered( false ) }
 		>
-			{ ( ( isOverlayActive && ! hasChildSelected ) ||
-				isDraggingBlocks ) && (
+			{ isOverlayActive && (
 				<div
 					className={ `${ baseClassName }__overlay` }
 					onMouseUp={ () => setIsOverlayActive( false ) }
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index bd064fde2a92de..ca83801905f6d1 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -1,3 +1,6 @@
+// Specificity required to ensure overlay width is not restricted to that
+// of standard block content.  The overlay's width should be as wide as
+// its children require.
 .editor-styles-wrapper .wp-block .block-editor-block-content-overlay {
 	max-width: none;
 }
@@ -16,7 +19,7 @@
 		border-radius: $radius-block-ui;
 	}
 
-	&.overlay-active:hover:not(.child-selected):not(.is-dragging-blocks),
+	&:hover:not(.is-dragging-blocks),
 	&.parent-highlighted {
 		> .block-editor-block-content-overlay__overlay {
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
@@ -24,14 +27,16 @@
 		}
 	}
 
-	&.overlay-active:not(.child-selected):not(.is-dragging-blocks) .block-editor-block-content-overlay__content-wrapper {
+	&.overlay-active:not(.is-dragging-blocks) .block-editor-block-content-overlay__content-wrapper {
 		* {
 			pointer-events: none;
 		}
 	}
 
-	&.is-dragging-blocks .block-editor-block-content-overlay__overlay {
-		pointer-events: none;
+	&.is-dragging-blocks {
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+		.block-editor-block-content-overlay__overlay {
+			pointer-events: none;
+		}
 	}
 }

From 57e6a8da6f3d9119a9dd1d2401055782580c00d1 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Mon, 10 May 2021 13:22:29 -0400
Subject: [PATCH 33/43] position overlay above resize containers

---
 packages/base-styles/_z-index.scss                             | 3 +++
 .../src/components/block-content-overlay/style.scss            | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 92efe18d7ecdb0..24feea28b2aa37 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -72,6 +72,9 @@ $z-layers: (
 	// The toolbar, when contextual, should be above any adjacent nested block click overlays.
 	".block-editor-block-contextual-toolbar": 61,
 
+	// Ensures content overlay appears higher than resize containers used for image/video/etc.
+	".block-editor-block-content-overlay__overlay": 10,
+
 	// The block mover, particularly in nested contexts,
 	// should overlap most block content.
 	".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 61,
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index ca83801905f6d1..208586919b2c22 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -17,6 +17,7 @@
 		background: transparent;
 		border: none;
 		border-radius: $radius-block-ui;
+		z-index: z-index(".block-editor-block-content-overlay__overlay");
 	}
 
 	&:hover:not(.is-dragging-blocks),

From 6a6ad3a56e6a11c617f5645a09fe1a59275450fd Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Mon, 10 May 2021 14:41:40 -0400
Subject: [PATCH 34/43] fix nested entity test

---
 .../e2e-tests/specs/experiments/multi-entity-editing.test.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
index e23c5180828d27..fd89eacfde853e 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -276,10 +276,10 @@ describe( 'Multi-entity editor states', () => {
 			await canvas().click( '.wp-block-template-part' );
 			// Select child TP to unlock selecting content.
 			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part'
+				'.wp-block-template-part.block-editor-block-list__layout .wp-block-template-part'
 			);
 			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
+				'.wp-block-template-part.block-editor-block-list__layout .wp-block-template-part .wp-block[data-type="core/paragraph"]'
 			);
 			await page.keyboard.type( 'Nested test words!' );
 

From 2fe7645ba1a1a1fb04b883daac10e9d7b6b47144 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Mon, 10 May 2021 14:50:17 -0400
Subject: [PATCH 35/43] fix template part test

---
 .../specs/experiments/template-part.test.js          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
index ea6a3fa74caf35..58ad9feba3336b 100644
--- a/packages/e2e-tests/specs/experiments/template-part.test.js
+++ b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -105,7 +105,7 @@ describe( 'Template Part', () => {
 			await updateHeader( 'Header Template Part 456' );
 
 			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
+				'.wp-block-template-part.block-editor-block-list__layout'
 			);
 
 			// Select the header template part block.
@@ -120,7 +120,7 @@ describe( 'Template Part', () => {
 
 			// Verify there is one less template part on the page.
 			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
+				'.wp-block-template-part.block-editor-block-list__layout'
 			);
 			expect(
 				initialTemplateParts.length - finalTemplateParts.length
@@ -168,7 +168,7 @@ describe( 'Template Part', () => {
 				'.wp-block-template-part.block-editor-block-list__layout'
 			);
 			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
+				'.wp-block-template-part.block-editor-block-list__layout'
 			);
 
 			// Add some block and select it.
@@ -196,7 +196,7 @@ describe( 'Template Part', () => {
 
 			// Verify there is 1 more template part on the page than previously.
 			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
+				'.wp-block-template-part.block-editor-block-list__layout'
 			);
 			expect(
 				finalTemplateParts.length - initialTemplateParts.length
@@ -208,7 +208,7 @@ describe( 'Template Part', () => {
 				'.wp-block-template-part.block-editor-block-list__layout'
 			);
 			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
+				'.wp-block-template-part.block-editor-block-list__layout'
 			);
 
 			// Add two blocks and select them.
@@ -248,7 +248,7 @@ describe( 'Template Part', () => {
 
 			// Verify there is 1 more template part on the page than previously.
 			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part'
+				'.wp-block-template-part.block-editor-block-list__layout'
 			);
 			expect(
 				finalTemplateParts.length - initialTemplateParts.length

From 5344a223966668020eb2ae4a0090ccb306496508 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Mon, 10 May 2021 15:58:30 -0400
Subject: [PATCH 36/43] fix intermittent errors on conversion tests

---
 .../specs/experiments/template-part.test.js     | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
index 58ad9feba3336b..f3d73f005c9a60 100644
--- a/packages/e2e-tests/specs/experiments/template-part.test.js
+++ b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -94,6 +94,15 @@ describe( 'Template Part', () => {
 			expect( paragraphInTemplatePart ).not.toBeNull();
 		}
 
+		async function awaitHeaderAndFooterLoad() {
+			await canvas().waitForSelector(
+				'.wp-block-template-part.site-header.block-editor-block-list__layout'
+			);
+			await canvas().waitForSelector(
+				'.wp-block-template-part.site-footer.block-editor-block-list__layout'
+			);
+		}
+
 		it( 'Should load customizations when in a template even if only the slug and theme attributes are set.', async () => {
 			await updateHeader( 'Header Template Part 123' );
 
@@ -164,9 +173,7 @@ describe( 'Template Part', () => {
 		} );
 
 		it( 'Should convert selected block to template part', async () => {
-			await canvas().waitForSelector(
-				'.wp-block-template-part.block-editor-block-list__layout'
-			);
+			await awaitHeaderAndFooterLoad();
 			const initialTemplateParts = await canvas().$$(
 				'.wp-block-template-part.block-editor-block-list__layout'
 			);
@@ -204,9 +211,7 @@ describe( 'Template Part', () => {
 		} );
 
 		it( 'Should convert multiple selected blocks to template part', async () => {
-			await canvas().waitForSelector(
-				'.wp-block-template-part.block-editor-block-list__layout'
-			);
+			await awaitHeaderAndFooterLoad();
 			const initialTemplateParts = await canvas().$$(
 				'.wp-block-template-part.block-editor-block-list__layout'
 			);

From 3a3f3986de7483665e14d141fa1197a25f4dc826 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 11 May 2021 11:19:46 -0400
Subject: [PATCH 37/43] remove box shadow on hover - block hover style will
 already be present

---
 .../block-editor/src/components/block-content-overlay/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index 208586919b2c22..cf905a5d4b5689 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -24,7 +24,6 @@
 	&.parent-highlighted {
 		> .block-editor-block-content-overlay__overlay {
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 		}
 	}
 

From ba5deccfee92e025e7df0623a03dfff0c0be7945 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 19 May 2021 10:18:01 -0400
Subject: [PATCH 38/43] add border back to overlay

---
 .../block-editor/src/components/block-content-overlay/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index cf905a5d4b5689..c1d7036828d890 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -24,6 +24,7 @@
 	&.parent-highlighted {
 		> .block-editor-block-content-overlay__overlay {
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 		}
 	}
 

From 6055b4906c3f0172fbb2cad4633a4302d23b29ed Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 19 May 2021 13:46:28 -0400
Subject: [PATCH 39/43] use blockProps in innerBlockProps as well

---
 packages/block-library/src/block/edit.js      | 30 +++++++++++--------
 .../src/template-part/edit/inner-blocks.js    | 10 ++++++-
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index bdb1489af6f076..89ac5e4d63bc3f 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -71,20 +71,19 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		ref
 	);
 
-	const innerBlocksProps = useInnerBlocksProps(
-		{},
-		{
-			value: blocks,
-			onInput,
-			onChange,
-			renderAppender: blocks?.length
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
-		}
-	);
-
 	const blockProps = useBlockProps();
 
+	// Use blockProps as the starting point for innerBlockProps to ensure
+	// the overlay does not cause style and layout regressions.
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput,
+		onChange,
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
 	if ( hasAlreadyRendered ) {
 		return (
 			<div { ...blockProps }>
@@ -139,7 +138,12 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 				</InspectorControls>
 				<BlockContentOverlay clientId={ clientId }>
 					<div className="block-library-block__reusable-block-container">
-						{ <div { ...innerBlocksProps } /> }
+						{
+							// Set tabIndex to remove this from keyboard nav since we have
+							// duplicated blockProps into this wrapper.  Otherwise keyboard nav
+							// will seem to stay on this block for one extra key press.
+							<div { ...innerBlocksProps } tabIndex={ -1 } />
+						}
 					</div>
 				</BlockContentOverlay>
 			</div>
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index f7b0f879557a96..88769900fc30d0 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -35,6 +35,9 @@ export default function TemplatePartInnerBlocks( {
 		'wp_template_part',
 		{ id }
 	);
+
+	// Use blockProps as the starting point for innerBlockProps to ensure
+	// the overlay does not cause style and layout regressions.
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		value: blocks,
 		onInput,
@@ -52,7 +55,12 @@ export default function TemplatePartInnerBlocks( {
 	return (
 		<TagName { ...blockProps }>
 			<BlockContentOverlay clientId={ clientId }>
-				<div { ...innerBlocksProps } />
+				{
+					// Set tabIndex to remove this from keyboard nav since we have
+					// duplicated blockProps into this wrapper.  Otherwise keyboard nav
+					// will seem to stay on this block for one extra key press.
+					<div { ...innerBlocksProps } tabIndex={ -1 } />
+				}
 			</BlockContentOverlay>
 		</TagName>
 	);

From a471f051c82d5c54c65f50f1a0833d02d249ca55 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Thu, 20 May 2021 09:25:33 -0400
Subject: [PATCH 40/43] cleanup which blockProps are passed to innerBlockProps

---
 packages/block-library/src/block/edit.js      | 31 +++++++------
 .../src/template-part/edit/inner-blocks.js    | 43 ++++++++++---------
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 89ac5e4d63bc3f..32f08970f6bb9e 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -73,16 +73,20 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	const blockProps = useBlockProps();
 
-	// Use blockProps as the starting point for innerBlockProps to ensure
-	// the overlay does not cause style and layout regressions.
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		value: blocks,
-		onInput,
-		onChange,
-		renderAppender: blocks?.length
-			? undefined
-			: InnerBlocks.ButtonBlockAppender,
-	} );
+	const { className, 'data-type': dataType, style } = blockProps;
+	// Use classnames, common selectors, and style from blockProps in the
+	// innerBlockProps to ensure the overlay does not cause style and layout regressions.
+	const innerBlocksProps = useInnerBlocksProps(
+		{ className, 'data-type': dataType, style },
+		{
+			value: blocks,
+			onInput,
+			onChange,
+			renderAppender: blocks?.length
+				? undefined
+				: InnerBlocks.ButtonBlockAppender,
+		}
+	);
 
 	if ( hasAlreadyRendered ) {
 		return (
@@ -138,12 +142,7 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 				</InspectorControls>
 				<BlockContentOverlay clientId={ clientId }>
 					<div className="block-library-block__reusable-block-container">
-						{
-							// Set tabIndex to remove this from keyboard nav since we have
-							// duplicated blockProps into this wrapper.  Otherwise keyboard nav
-							// will seem to stay on this block for one extra key press.
-							<div { ...innerBlocksProps } tabIndex={ -1 } />
-						}
+						{ <div { ...innerBlocksProps } /> }
 					</div>
 				</BlockContentOverlay>
 			</div>
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 88769900fc30d0..16911102ef7959 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -36,31 +36,34 @@ export default function TemplatePartInnerBlocks( {
 		{ id }
 	);
 
-	// Use blockProps as the starting point for innerBlockProps to ensure
-	// the overlay does not cause style and layout regressions.
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		value: blocks,
-		onInput,
-		onChange,
-		renderAppender: hasInnerBlocks
-			? undefined
-			: InnerBlocks.ButtonBlockAppender,
-		__experimentalLayout: {
-			type: 'default',
-			// Find a way to inject this in the support flag code (hooks).
-			alignments: themeSupportsLayout ? alignments : undefined,
+	const { className, 'data-type': dataType, style } = blockProps;
+	// Use classnames, common selectors, and style from blockProps in the
+	// innerBlockProps to ensure the overlay does not cause style and layout regressions.
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className,
+			'data-type': dataType,
+			style,
 		},
-	} );
+		{
+			value: blocks,
+			onInput,
+			onChange,
+			renderAppender: hasInnerBlocks
+				? undefined
+				: InnerBlocks.ButtonBlockAppender,
+			__experimentalLayout: {
+				type: 'default',
+				// Find a way to inject this in the support flag code (hooks).
+				alignments: themeSupportsLayout ? alignments : undefined,
+			},
+		}
+	);
 
 	return (
 		<TagName { ...blockProps }>
 			<BlockContentOverlay clientId={ clientId }>
-				{
-					// Set tabIndex to remove this from keyboard nav since we have
-					// duplicated blockProps into this wrapper.  Otherwise keyboard nav
-					// will seem to stay on this block for one extra key press.
-					<div { ...innerBlocksProps } tabIndex={ -1 } />
-				}
+				<div { ...innerBlocksProps } />
 			</BlockContentOverlay>
 		</TagName>
 	);

From 8f7d8bed979ea321c6ec1656817935df8df29915 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 16 Jun 2021 12:01:37 -0400
Subject: [PATCH 41/43] use component as wrapper

---
 .../components/block-content-overlay/index.js | 31 +++++++++-----
 .../block-content-overlay/style.scss          |  8 ++--
 packages/block-library/src/block/edit.js      | 15 +++----
 .../src/template-part/edit/inner-blocks.js    | 40 +++++++------------
 4 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js
index cdf6ad96fb6cf0..d75d2716c9eb5c 100644
--- a/packages/block-editor/src/components/block-content-overlay/index.js
+++ b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -14,7 +14,12 @@ import { store as blockEditorStore } from '../../store';
  */
 import classnames from 'classnames';
 
-export default function BlockContentOverlay( { clientId, children } ) {
+export default function BlockContentOverlay( {
+	clientId,
+	tagName: TagName = 'div',
+	wrapperProps,
+	className,
+} ) {
 	const baseClassName = 'block-editor-block-content-overlay';
 	const [ isOverlayActive, setIsOverlayActive ] = useState( true );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -42,11 +47,16 @@ export default function BlockContentOverlay( { clientId, children } ) {
 		[ clientId ]
 	);
 
-	const classes = classnames( baseClassName, {
-		'overlay-active': isOverlayActive,
-		'parent-highlighted': isParentHighlighted,
-		'is-dragging-blocks': isDraggingBlocks,
-	} );
+	const classes = classnames(
+		baseClassName,
+		wrapperProps?.className,
+		className,
+		{
+			'overlay-active': isOverlayActive,
+			'parent-highlighted': isParentHighlighted,
+			'is-dragging-blocks': isDraggingBlocks,
+		}
+	);
 
 	useEffect( () => {
 		// Reenable when blocks are not in use.
@@ -72,7 +82,8 @@ export default function BlockContentOverlay( { clientId, children } ) {
 	// the block can be selected without interacting with its contents.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
-		<div
+		<TagName
+			{ ...wrapperProps }
 			className={ classes }
 			onMouseEnter={ () => setIsHovered( true ) }
 			onMouseLeave={ () => setIsHovered( false ) }
@@ -83,10 +94,8 @@ export default function BlockContentOverlay( { clientId, children } ) {
 					onMouseUp={ () => setIsOverlayActive( false ) }
 				/>
 			) }
-			<div className={ `${ baseClassName }__content-wrapper` }>
-				{ children }
-			</div>
-		</div>
+			{ wrapperProps?.children }
+		</TagName>
 	);
 }
 /* eslint-enable jsx-a11y/no-static-element-interactions */
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index c1d7036828d890..35cd3afcd8a897 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -1,13 +1,11 @@
 // Specificity required to ensure overlay width is not restricted to that
 // of standard block content.  The overlay's width should be as wide as
 // its children require.
-.editor-styles-wrapper .wp-block .block-editor-block-content-overlay {
+.editor-styles-wrapper .wp-block .block-editor-block-content-overlay__overlay {
 	max-width: none;
 }
 
 .block-editor-block-content-overlay {
-	position: relative;
-
 	.block-editor-block-content-overlay__overlay {
 		position: absolute;
 		top: 0;
@@ -28,8 +26,8 @@
 		}
 	}
 
-	&.overlay-active:not(.is-dragging-blocks) .block-editor-block-content-overlay__content-wrapper {
-		* {
+	&.overlay-active:not(.is-dragging-blocks) {
+		*:not(.block-editor-block-content-overlay__overlay) {
 			pointer-events: none;
 		}
 	}
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 32f08970f6bb9e..bf4f933773d6bf 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -73,11 +73,8 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	const blockProps = useBlockProps();
 
-	const { className, 'data-type': dataType, style } = blockProps;
-	// Use classnames, common selectors, and style from blockProps in the
-	// innerBlockProps to ensure the overlay does not cause style and layout regressions.
 	const innerBlocksProps = useInnerBlocksProps(
-		{ className, 'data-type': dataType, style },
+		{},
 		{
 			value: blocks,
 			onInput,
@@ -140,11 +137,11 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 						/>
 					</PanelBody>
 				</InspectorControls>
-				<BlockContentOverlay clientId={ clientId }>
-					<div className="block-library-block__reusable-block-container">
-						{ <div { ...innerBlocksProps } /> }
-					</div>
-				</BlockContentOverlay>
+				<BlockContentOverlay
+					clientId={ clientId }
+					wrapperProps={ innerBlocksProps }
+					className="block-library-block__reusable-block-container"
+				/>
 			</div>
 		</RecursionProvider>
 	);
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 5afb526800775b..9d1196aa68459c 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -16,7 +16,7 @@ export default function TemplatePartInnerBlocks( {
 	postId: id,
 	hasInnerBlocks,
 	layout,
-	tagName: TagName,
+	tagName,
 	blockProps,
 	clientId,
 } ) {
@@ -48,31 +48,21 @@ export default function TemplatePartInnerBlocks( {
 		{ id }
 	);
 
-	const { className, 'data-type': dataType, style } = blockProps;
-	// Use classnames, common selectors, and style from blockProps in the
-	// innerBlockProps to ensure the overlay does not cause style and layout regressions.
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className,
-			'data-type': dataType,
-			style,
-		},
-		{
-			value: blocks,
-			onInput,
-			onChange,
-			renderAppender: hasInnerBlocks
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: _layout,
-		}
-	);
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput,
+		onChange,
+		renderAppender: hasInnerBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+		__experimentalLayout: _layout,
+	} );
 
 	return (
-		<TagName { ...blockProps }>
-			<BlockContentOverlay clientId={ clientId }>
-				<div { ...innerBlocksProps } />
-			</BlockContentOverlay>
-		</TagName>
+		<BlockContentOverlay
+			clientId={ clientId }
+			tagName={ tagName }
+			wrapperProps={ innerBlocksProps }
+		/>
 	);
 }

From 2bf4aca7e56f0b5002850d037951c699071e099c Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 16 Jun 2021 13:17:44 -0400
Subject: [PATCH 42/43] remove unnecessary layout selectors on TP e2es

---
 .../specs/experiments/multi-entity-editing.test.js   |  4 ++--
 .../specs/experiments/template-part.test.js          | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
index fd89eacfde853e..e23c5180828d27 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -276,10 +276,10 @@ describe( 'Multi-entity editor states', () => {
 			await canvas().click( '.wp-block-template-part' );
 			// Select child TP to unlock selecting content.
 			await canvas().click(
-				'.wp-block-template-part.block-editor-block-list__layout .wp-block-template-part'
+				'.wp-block-template-part .wp-block-template-part'
 			);
 			await canvas().click(
-				'.wp-block-template-part.block-editor-block-list__layout .wp-block-template-part .wp-block[data-type="core/paragraph"]'
+				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
 			);
 			await page.keyboard.type( 'Nested test words!' );
 
diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
index 542eafc4ade6cc..4e16c07c4e88c1 100644
--- a/packages/e2e-tests/specs/experiments/template-part.test.js
+++ b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -114,7 +114,7 @@ describe( 'Template Part', () => {
 			await updateHeader( 'Header Template Part 456' );
 
 			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part.block-editor-block-list__layout'
+				'.wp-block-template-part'
 			);
 
 			// Select the header template part block.
@@ -129,7 +129,7 @@ describe( 'Template Part', () => {
 
 			// Verify there is one less template part on the page.
 			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part.block-editor-block-list__layout'
+				'.wp-block-template-part'
 			);
 			expect(
 				initialTemplateParts.length - finalTemplateParts.length
@@ -175,7 +175,7 @@ describe( 'Template Part', () => {
 		it( 'Should convert selected block to template part', async () => {
 			await awaitHeaderAndFooterLoad();
 			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part.block-editor-block-list__layout'
+				'.wp-block-template-part'
 			);
 
 			// Add some block and select it.
@@ -203,7 +203,7 @@ describe( 'Template Part', () => {
 
 			// Verify there is 1 more template part on the page than previously.
 			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part.block-editor-block-list__layout'
+				'.wp-block-template-part'
 			);
 			expect(
 				finalTemplateParts.length - initialTemplateParts.length
@@ -213,7 +213,7 @@ describe( 'Template Part', () => {
 		it( 'Should convert multiple selected blocks to template part', async () => {
 			await awaitHeaderAndFooterLoad();
 			const initialTemplateParts = await canvas().$$(
-				'.wp-block-template-part.block-editor-block-list__layout'
+				'.wp-block-template-part'
 			);
 
 			// Add two blocks and select them.
@@ -253,7 +253,7 @@ describe( 'Template Part', () => {
 
 			// Verify there is 1 more template part on the page than previously.
 			const finalTemplateParts = await canvas().$$(
-				'.wp-block-template-part.block-editor-block-list__layout'
+				'.wp-block-template-part'
 			);
 			expect(
 				finalTemplateParts.length - initialTemplateParts.length

From a7ea5e4bcce8ba6ea3baee6c9bd05e7ffc2a479d Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Wed, 16 Jun 2021 14:08:06 -0400
Subject: [PATCH 43/43] fix reusable blocks test xpath

---
 packages/e2e-test-utils/src/inserter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js
index b5041992f2bbc4..48a4985bfe62fe 100644
--- a/packages/e2e-test-utils/src/inserter.js
+++ b/packages/e2e-test-utils/src/inserter.js
@@ -196,7 +196,7 @@ export async function insertReusableBlock( searchTerm ) {
 	await waitForInserterCloseAndContentFocus();
 	// We should wait until the block is loaded
 	await page.waitForXPath(
-		'//*[@class="block-library-block__reusable-block-container"]'
+		'//*[contains(@class,"block-library-block__reusable-block-container")]'
 	);
 }