Inner Blocks: Show overlay for small screen, unselected root block

WordPress · May 24, 2018 · b2c869a · b2c869a
1 parent 3a0aac3
commit b2c869a
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 3 deletions.
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -47,6 +47,10 @@ $z-layers: (
 	// should overlap most block content.
 	'.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}': 80,
 
+	// Small screen inner blocks overlay must be displayed above drop zone,
+	// settings menu, and movers.
+	'.editor-inner-blocks__small-screen-overlay:after': 120,
+
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	'.edit-post-sidebar': 100000,

diff --git a/editor/components/block-edit/index.js b/editor/components/block-edit/index.js
@@ -34,6 +34,7 @@ export class BlockEdit extends Component {
 		} = this.props;
 
 		return {
+			uid,
 			BlockList: createInnerBlockList( uid ),
 			canUserUseUnfilteredHTML: get( user.data, [
 				'capabilities',
@@ -76,6 +77,7 @@ export class BlockEdit extends Component {
 }
 
 BlockEdit.childContextTypes = {
+	uid: noop,
 	BlockList: noop,
 	canUserUseUnfilteredHTML: noop,
 };

diff --git a/editor/components/inner-blocks/index.js b/editor/components/inner-blocks/index.js
@@ -1,13 +1,53 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { withContext } from '@wordpress/components';
+import { withViewportMatch } from '@wordpress/viewport';
+import { compose } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
 
-function InnerBlocks( { BlockList, layouts, allowedBlocks, template } ) {
-	return <BlockList { ...{ layouts, allowedBlocks, template } } />;
+function InnerBlocks( {
+	BlockList,
+	layouts,
+	allowedBlocks,
+	template,
+	isSmallScreen,
+	isSelectedBlockInRoot,
+} ) {
+	const classes = classnames( 'editor-inner-blocks', {
+		'has-overlay': isSmallScreen && ! isSelectedBlockInRoot,
+	} );
+
+	return (
+		<div className={ classes }>
+			<BlockList { ...{ layouts, allowedBlocks, template } } />
+		</div>
+	);
 }
 
-InnerBlocks = withContext( 'BlockList' )()( InnerBlocks );
+InnerBlocks = compose( [
+	withContext( 'BlockList' )(),
+	withContext( 'uid' )(),
+	withViewportMatch( { isSmallScreen: '< medium' } ),
+	withSelect( ( select, ownProps ) => {
+		const { isBlockSelected, hasSelectedInnerBlock } = select( 'core/editor' );
+		const { uid } = ownProps;
+
+		return {
+			isSelectedBlockInRoot: isBlockSelected( uid ) || hasSelectedInnerBlock( uid ),
+		};
+	} ),
+] )( InnerBlocks );
 
 InnerBlocks.Content = ( { BlockContent } ) => {
 	return <BlockContent />;

diff --git a/editor/components/inner-blocks/style.scss b/editor/components/inner-blocks/style.scss
@@ -0,0 +1,9 @@
+.editor-inner-blocks.has-overlay:after {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: z-index( '.editor-inner-blocks__small-screen-overlay:after' );
+}