Edit Post: Add block management modal

docs/designers-developers/developers/data/data-core-blocks.md

@@ -129,6 +129,21 @@ Returns true if the block defines support for a feature, or false otherwise.
 
 Whether block supports feature.
 
+### isMatchingSearchTerm
+
+Returns true if the block type by the given name or object value matches a
+search term, or false otherwise.
+
+*Parameters*
+
+ * state: Blocks state.
+ * nameOrType: Block name or type object.
+ * searchTerm: Search term by which to filter.
+
+*Returns*
+
+Wheter block type matches search term.
+
 ### hasChildBlocks
 
 Returns a boolean indicating if a block has child blocks or not.

docs/designers-developers/developers/data/data-core-edit-post.md

@@ -339,6 +339,24 @@ Returns an action object used to toggle a plugin name flag.
 
  * pluginName: Plugin name.
 
+### hideBlockTypes
+
+Returns an action object used in signalling that block types by the given
+name(s) should be hidden.
+
+*Parameters*
+
+ * blockNames: Names of block types to hide.
+
+### showBlockTypes
+
+Returns an action object used in signalling that block types by the given
+name(s) should be shown.
+
+*Parameters*
+
+ * blockNames: Names of block types to show.
+
 ### setAvailableMetaBoxesPerLocation
 
 Returns an action object used in signaling

packages/block-editor/src/components/block-types-list/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -8,15 +13,25 @@ import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
  */
 import InserterListItem from '../inserter-list-item';
 
-function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
-	return (
-		/*
-		 * Disable reason: The `list` ARIA role is redundant but
-		 * Safari+VoiceOver won't announce the list otherwise.
-		 */
-		/* eslint-disable jsx-a11y/no-redundant-roles */
-		<ul role="list" className="editor-block-types-list">
-			{ items && items.map( ( item ) =>
+/**
+ * Stateless function component which renders its received `children` prop.
+ *
+ * @param {Object} props Props object.
+ *
+ * @return {WPElement} Rendered children.
+ */
+const RENDER_CHILDREN = ( props ) => props.children;
+
+function BlockTypesList( {
+	items,
+	onSelect,
+	onHover = () => {},
+	renderItem: RenderItem = RENDER_CHILDREN,
+	children,
+} ) {
+	items = map( items, ( item ) => {
+		return (
+			<RenderItem key={ item.id } item={ item }>
 				<InserterListItem
 					key={ item.id }
 					className={ getBlockMenuDefaultClassName( item.id ) }
@@ -35,7 +50,18 @@ function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
 					isDisabled={ item.isDisabled }
 					title={ item.title }
 				/>
-			) }
+			</RenderItem>
+		);
+	} );
+
+	return (
+		/*
+		 * Disable reason: The `list` ARIA role is redundant but
+		 * Safari+VoiceOver won't announce the list otherwise.
+		 */
+		/* eslint-disable jsx-a11y/no-redundant-roles */
+		<ul role="list" className="editor-block-types-list">
+			{ items }
 			{ children }
 		</ul>
 		/* eslint-enable jsx-a11y/no-redundant-roles */

packages/block-editor/src/components/index.js

@@ -7,6 +7,7 @@ export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as BlockIcon } from './block-icon';
+export { default as __experimentalBlockTypesList } from './block-types-list';
 export { default as ColorPalette } from './color-palette';
 export { default as withColorContext } from './color-palette/with-color-context';
 export * from './colors';

packages/blocks/src/store/selectors.js

@@ -2,7 +2,22 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { filter, get, includes, map, some } from 'lodash';
+import { filter, get, includes, map, some, flow, deburr } from 'lodash';
+
+/**
+ * Given a block name or block type object, returns the corresponding
+ * normalized block type object.
+ *
+ * @param {Object}          state      Blocks state.
+ * @param {(string|Object)} nameOrType Block name or type object
+ *
+ * @return {Object} Block type object.
+ */
+const getNormalizedBlockType = ( state, nameOrType ) => (
+	'string' === typeof nameOrType ?
+		getBlockType( state, nameOrType ) :
+		nameOrType
+);
 
 /**
  * Returns all the available block types.
@@ -120,9 +135,7 @@ export const getChildBlockNames = createSelector(
  * @return {?*} Block support value
  */
 export const getBlockSupport = ( state, nameOrType, feature, defaultSupports ) => {
-	const blockType = 'string' === typeof nameOrType ?
-		getBlockType( state, nameOrType ) :
-		nameOrType;
+	const blockType = getNormalizedBlockType( state, nameOrType );
 
 	return get( blockType, [
 		'supports',
@@ -145,6 +158,50 @@ export function hasBlockSupport( state, nameOrType, feature, defaultSupports ) {
 	return !! getBlockSupport( state, nameOrType, feature, defaultSupports );
 }
 
+/**
+ * Returns true if the block type by the given name or object value matches a
+ * search term, or false otherwise.
+ *
+ * @param {Object}          state      Blocks state.
+ * @param {(string|Object)} nameOrType Block name or type object.
+ * @param {string}          searchTerm Search term by which to filter.
+ *
+ * @return {Object[]} Wheter block type matches search term.
+ */
+export function isMatchingSearchTerm( state, nameOrType, searchTerm ) {
+	const blockType = getNormalizedBlockType( state, nameOrType );
+
+	const getNormalizedSearchTerm = flow( [
+		// Disregard diacritics.
+		//  Input: "média"
+		deburr,
+
+		// Lowercase.
+		//  Input: "MEDIA"
+		( term ) => term.toLowerCase(),
+
+		// Strip leading and trailing whitespace.
+		//  Input: " media "
+		( term ) => term.trim(),
+	] );
+
+	const normalizedSearchTerm = getNormalizedSearchTerm( searchTerm );
+
+	const isSearchMatch = flow( [
+		getNormalizedSearchTerm,
+		( normalizedCandidate ) => includes(
+			normalizedCandidate,
+			normalizedSearchTerm
+		),
+	] );
+
+	return (
+		isSearchMatch( blockType.title ) ||
+		some( blockType.keywords, isSearchMatch ) ||
+		isSearchMatch( blockType.category )
+	);
+}
+
 /**
  * Returns a boolean indicating if a block has child blocks or not.
  *

packages/components/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 7.2.0 (Unreleased)
+
+### New Features
+
+- `ToggleControl` now accepts a `className` prop to merge with its default-assigned classname.
+
 ## 7.1.0 (2019-03-06)
 
 ### New Features

packages/components/src/toggle-control/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { isFunction } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -29,7 +30,7 @@ class ToggleControl extends Component {
 	}
 
 	render() {
-		const { label, checked, help, instanceId } = this.props;
+		const { label, checked, help, instanceId, className } = this.props;
 		const id = `inspector-toggle-control-${ instanceId }`;
 
 		let describedBy, helpLabel;
@@ -42,7 +43,7 @@ class ToggleControl extends Component {
 			<BaseControl
 				id={ id }
 				help={ helpLabel }
-				className="components-toggle-control"
+				className={ classnames( 'components-toggle-control', className ) }
 			>
 				<FormToggle
 					id={ id }

packages/edit-post/src/components/layout/index.js

@@ -30,6 +30,7 @@ import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditorModeKeyboardShortcuts from '../keyboard-shortcuts';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
+import ManageBlocksModal from '../manage-blocks-modal';
 import OptionsModal from '../options-modal';
 import MetaBoxes from '../meta-boxes';
 import SettingsSidebar from '../sidebar/settings-sidebar';
@@ -83,6 +84,7 @@ function Layout( {
 				<PreserveScrollInReorder />
 				<EditorModeKeyboardShortcuts />
 				<KeyboardShortcutHelpModal />
+				<ManageBlocksModal />
 				<OptionsModal />
 				{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
 				{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }

packages/edit-post/src/components/manage-blocks-modal/category.js

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import { includes, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { cloneElement, Children } from '@wordpress/element';
+import { ToggleControl, PanelBody } from '@wordpress/components';
+import { __experimentalBlockTypesList as BlockTypesList } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+function BlockManagerCategory( {
+	category,
+	blockItems,
+	hiddenBlockTypes,
+	opened,
+	onToggle,
+	showBlockTypes,
+	hideBlockTypes,
+	toggleAllHidden,
+} ) {
+	if ( ! blockItems.length ) {
+		return null;
+	}
+
+	const isAllHidden = blockItems.every( ( blockItem ) => {
+		return hiddenBlockTypes.includes( blockItem.id );
+	} );
+
+	return (
+		<PanelBody
+			key={ category.slug }
+			title={ category.title }
+			icon={ category.icon }
+			opened={ opened }
+			onToggle={ onToggle }
+		>
+			<ToggleControl
+				label={ __( 'Hide all blocks' ) }
+				checked={ isAllHidden }
+				onChange={ toggleAllHidden }
+				className="edit-post-manage-blocks-modal__hide-all"
+			/>
+			<BlockTypesList
+				items={ blockItems }
+				onSelect={ ( item ) => (
+					includes( hiddenBlockTypes, item.id ) ?
+						showBlockTypes( item.id ) :
+						hideBlockTypes( item.id )
+				) }
+				renderItem={ ( { children, item } ) => {
+					const isHidden = includes( hiddenBlockTypes, item.id );
+					const child = Children.only( children );
+					return cloneElement( child, {
+						'aria-pressed': isHidden,
+						'aria-label': __( 'Hide block: %s' ),
+						'data-hidden': isHidden ? __( 'Hidden' ) : undefined,
+					} );
+				} }
+			/>
+		</PanelBody>
+	);
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const { getPreference } = select( 'core/edit-post' );
+
+		return {
+			hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps ) => {
+		const { blockItems } = ownProps;
+		const {
+			showBlockTypes,
+			hideBlockTypes,
+		} = dispatch( 'core/edit-post' );
+
+		return {
+			showBlockTypes,
+			hideBlockTypes,
+			toggleAllHidden( isToBeDisabled ) {
+				const blockNames = map( blockItems, 'id' );
+				if ( isToBeDisabled ) {
+					hideBlockTypes( blockNames );
+				} else {
+					showBlockTypes( blockNames );
+				}
+			},
+		};
+	} ),
+] )( BlockManagerCategory );