Block Editor: Add controlled inner blocks focus styles.

WordPress · Feb 25, 2020 · 821c25c · 821c25c
1 parent f054565
commit 821c25c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -149,13 +149,17 @@ class InnerBlocks extends Component {
 			clientId,
 			hasOverlay,
 			__experimentalCaptureToolbars: captureToolbars,
+			onInput,
+			isSelected,
 			...props
 		} = this.props;
 		const { templateInProcess } = this.state;
 
 		const classes = classnames( 'block-editor-inner-blocks', {
 			'has-overlay': enableClickThrough && hasOverlay,
 			'is-capturing-toolbar': captureToolbars,
+			'is-controlled': onInput,
+			'is-selected': isSelected,
 		} );
 
 		return (
@@ -185,14 +189,15 @@ InnerBlocks = compose( [
 		const { clientId, isSmallScreen } = ownProps;
 		const block = getBlock( clientId );
 		const rootClientId = getBlockRootClientId( clientId );
+		const isSelected =
+			isBlockSelected( clientId ) ||
+			hasSelectedInnerBlock( clientId, true );
 
 		return {
 			block,
 			blockListSettings: getBlockListSettings( clientId ),
-			hasOverlay:
-				block.name !== 'core/template' &&
-				! isBlockSelected( clientId ) &&
-				! hasSelectedInnerBlock( clientId, true ),
+			hasOverlay: block.name !== 'core/template' && ! isSelected,
+			isSelected,
 			parentLock: getTemplateLock( rootClientId ),
 			enableClickThrough: isNavigationMode() || isSmallScreen,
 			isLastBlockChangePersistent: isLastBlockChangePersistent(),

diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss
@@ -17,3 +17,8 @@
 	right: 0;
 	left: 0;
 }
+
+.block-editor-inner-blocks.is-controlled.is-selected {
+	box-shadow: 0 0 0 1600px rgba(0, 0, 0, 0.65);
+	padding: 1px 30px;
+}