WIP Add: Hidden blocks feature

WordPress · Aug 23, 2018 · 8c3d8b8 · 8c3d8b8
1 parent a7c5937
commit 8c3d8b8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { filter, includes, map } from 'lodash';
+import { filter, includes, map, some } from 'lodash';
+import { hasBlockSupport } from '../api/';
 
 /**
  * Returns all the available block types.
@@ -86,13 +87,15 @@ export const getChildBlockNames = createSelector(
 );
 
 /**
- * Returns a boolean indicating if a block has child blocks or not.
+ * Returns a boolean indicating if a block has child blocks available on the inserter or not.
  *
  * @param {Object} state     Data state.
  * @param {string} blockName Block type name.
  *
  * @return {boolean} True if a block contains child blocks and false otherwise.
  */
 export const hasChildBlocks = ( state, blockName ) => {
-	return getChildBlockNames( state, blockName ).length > 0;
+	return some( getChildBlockNames( state, blockName ), ( currentBlockName ) => {
+		return hasBlockSupport( currentBlockName, 'inserter', true );
+	} );
 };
diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
@@ -19,6 +19,7 @@ import {
 	cloneBlock,
 	getBlockType,
 	getSaveElement,
+	hasBlockSupport,
 	isReusableBlock,
 	isUnmodifiedDefaultBlock,
 } from '@wordpress/blocks';
@@ -389,12 +390,14 @@ export class BlockListBlock extends Component {
 		// Empty paragraph blocks should always show up as unselected.
 		const showEmptyBlockSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
 		const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
-		const shouldAppearSelected = ! showSideInserter && isSelected && ! isTypingWithinBlock;
-		const shouldAppearSelectedParent = ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock;
+		const supportsHoverMarks = hasBlockSupport( blockName, 'hoverMarks', true );
+		const supportsSelectionMarks = hasBlockSupport( blockName, 'selectionMarks', true );
+		const shouldAppearSelected = supportsSelectionMarks && ! showSideInserter && isSelected && ! isTypingWithinBlock;
+		const shouldAppearSelectedParent = supportsSelectionMarks && ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock;
 		// We render block movers and block settings to keep them tabbale even if hidden
 		const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock;
 		const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection;
-		const shouldShowBreadcrumb = isHovered && ! isEmptyDefaultBlock;
+		const shouldShowBreadcrumb = supportsHoverMarks && isHovered && ! isEmptyDefaultBlock;
 		const shouldShowContextualToolbar = ! showSideInserter && ( ( isSelected && ! isTypingWithinBlock && isValid ) || isFirstMultiSelected ) && ( ! hasFixedToolbar || ! isLargeViewport );
 		const shouldShowMobileToolbar = shouldAppearSelected;
 		const { error, dragging } = this.state;
@@ -411,7 +414,7 @@ export class BlockListBlock extends Component {
 			'is-selected': shouldAppearSelected,
 			'is-multi-selected': isPartOfMultiSelection,
 			'is-selected-parent': shouldAppearSelectedParent,
-			'is-hovered': isHovered && ! isEmptyDefaultBlock,
+			'is-hovered': supportsHoverMarks && isHovered && ! isEmptyDefaultBlock,
 			'is-reusable': isReusableBlock( blockType ),
 			'is-hidden': dragging,
 			'is-typing': isTypingWithinBlock,

diff --git a/packages/editor/src/components/block-settings-menu/index.js b/packages/editor/src/components/block-settings-menu/index.js
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { IconButton, Dropdown, NavigableMenu, MenuItem, KeyboardShortcuts } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, ifCondition } from '@wordpress/compose';
 import { cloneBlock, hasBlockSupport } from '@wordpress/blocks';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
 
@@ -230,11 +230,16 @@ export default compose( [
 
 		const blocks = getBlocksByClientId( clientIds );
 
+		const isSupported = every( blocks, ( block ) => {
+			return !! block && hasBlockSupport( block.name, 'settingsMenu', true );
+		} );
+
 		const canDuplicate = every( blocks, ( block ) => {
 			return !! block && hasBlockSupport( block.name, 'multiple', true );
 		} );
 
 		return {
+			isSupported,
 			firstSelectedIndex: getBlockIndex( first( castArray( clientIds ) ), rootClientId ),
 			lastSelectedIndex: getBlockIndex( last( castArray( clientIds ) ), rootClientId ),
 			isLocked: !! getTemplateLock( rootClientId ),
@@ -243,6 +248,7 @@ export default compose( [
 			shortcuts,
 		};
 	} ),
+	ifCondition( ( { isSupported } ) => isSupported ),
 	withDispatch( ( dispatch, props ) => {
 		const {
 			clientIds,