Remove borders around inserter items for blocks with children blocks (#…

…17083)
WordPress · Aug 29, 2019 · e33d5ac · e33d5ac
1 parent af58a9e
commit e33d5ac
Show file tree

Hide file tree

Showing 6 changed files with 2 additions and 50 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -8,7 +8,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Dropdown, IconButton, Toolbar, PanelBody, Path, SVG } from '@wordpress/components';
-import { getBlockType, getPossibleBlockTransformations, switchToBlockType, hasChildBlocksWithInserterSupport, cloneBlock } from '@wordpress/blocks';
+import { getBlockType, getPossibleBlockTransformations, switchToBlockType, cloneBlock } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -151,7 +151,6 @@ export class BlockSwitcher extends Component {
 												id: destinationBlockType.name,
 												icon: destinationBlockType.icon,
 												title: destinationBlockType.title,
-												hasChildBlocksWithInserterSupport: hasChildBlocksWithInserterSupport( destinationBlockType.name ),
 											} ) ) }
 											onSelect={ ( item ) => {
 												onTransform( blocks, item.id );

diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
@@ -21,9 +21,6 @@ function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
 					key={ item.id }
 					className={ getBlockMenuDefaultClassName( item.id ) }
 					icon={ item.icon }
-					hasChildBlocksWithInserterSupport={
-						item.hasChildBlocksWithInserterSupport
-					}
 					onClick={ () => {
 						onSelect( item );
 						onHover( null );

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -10,7 +10,6 @@ import BlockIcon from '../block-icon';
 
 function InserterListItem( {
 	icon,
-	hasChildBlocksWithInserterSupport,
 	onClick,
 	isDisabled,
 	title,
@@ -21,21 +20,14 @@ function InserterListItem( {
 		backgroundColor: icon.background,
 		color: icon.foreground,
 	} : {};
-	const itemIconStackStyle = icon && icon.shadowColor ? {
-		backgroundColor: icon.shadowColor,
-	} : {};
 
 	return (
 		<li className="editor-block-types-list__list-item block-editor-block-types-list__list-item">
 			<button
 				className={
 					classnames(
 						'editor-block-types-list__item block-editor-block-types-list__item',
-						className,
-						{
-							'editor-block-types-list__item-has-children block-editor-block-types-list__item-has-children':
-								hasChildBlocksWithInserterSupport,
-						}
+						className
 					)
 				}
 				onClick={ ( event ) => {
@@ -50,12 +42,6 @@ function InserterListItem( {
 					style={ itemIconStyle }
 				>
 					<BlockIcon icon={ icon } showColors />
-					{ hasChildBlocksWithInserterSupport &&
-						<span
-							className="editor-block-types-list__item-icon-stack block-editor-block-types-list__item-icon-stack"
-							style={ itemIconStackStyle }
-						/>
-					}
 				</span>
 				<span className="editor-block-types-list__item-title block-editor-block-types-list__item-title">
 					{ title }

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -92,30 +92,3 @@
 .block-editor-block-types-list__item-title {
 	padding: 4px 2px 8px;
 }
-
-.block-editor-block-types-list__item-has-children {
-	.block-editor-block-types-list__item-icon {
-		background: $white;
-		margin-right: 3px;
-		margin-bottom: 6px;
-		padding: 9px 20px 9px;
-		position: relative;
-		top: -2px;
-		left: -2px;
-		box-shadow: 0 0 0 1px $light-gray-500;
-	}
-
-	// Show a "stacked card" below an item that has children.
-	.block-editor-block-types-list__item-icon-stack {
-		display: block;
-		background: $white;
-		box-shadow: 0 0 0 1px $light-gray-500;
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		z-index: -1; // Show below the card as a shadow
-		bottom: -6px;
-		right: -6px;
-		border-radius: 4px;
-	}
-}
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -24,7 +24,6 @@ import {
 	getBlockType,
 	getBlockTypes,
 	hasBlockSupport,
-	hasChildBlocksWithInserterSupport,
 } from '@wordpress/blocks';
 
 // Module constants
@@ -1241,7 +1240,6 @@ export const getInserterItems = createSelector(
 				isDisabled,
 				utility: calculateUtility( blockType.category, count, isContextual ),
 				frecency: calculateFrecency( time, count ),
-				hasChildBlocksWithInserterSupport: hasChildBlocksWithInserterSupport( blockType.name ),
 			};
 		};
 

diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
@@ -1971,7 +1971,6 @@ describe( 'selectors', () => {
 				isDisabled: false,
 				utility: 0,
 				frecency: 0,
-				hasChildBlocksWithInserterSupport: false,
 			} );
 			const reusableBlockItem = items.find( ( item ) => item.id === 'core/block/1' );
 			expect( reusableBlockItem ).toEqual( {