diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index a9dc9ae26ddb0..13e9731470110 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -138,6 +138,8 @@ class InnerBlocks extends Component { clientId, hasOverlay, __experimentalCaptureToolbars: captureToolbars, + onInput, + isSelected, ...props } = this.props; const { templateInProcess } = this.state; @@ -145,6 +147,8 @@ class InnerBlocks extends Component { const classes = classnames( 'block-editor-inner-blocks', { 'has-overlay': enableClickThrough && hasOverlay, 'is-capturing-toolbar': captureToolbars, + 'is-controlled': onInput, + 'is-selected': isSelected, } ); return ( @@ -177,11 +181,13 @@ 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 index 4aaf47d696335..6182092667e22 100644 --- 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; +}