Edit Post: Render Manage Blocks Visibility as checklist

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,25 +8,15 @@ import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
  */
 import InserterListItem from '../inserter-list-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 }>
+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 ) =>
 				<InserterListItem
 					key={ item.id }
 					className={ getBlockMenuDefaultClassName( item.id ) }
@@ -50,18 +35,7 @@ function BlockTypesList( {
 					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,7 +7,6 @@ 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/components/CHANGELOG.md

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

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

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

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

@@ -1,68 +1,54 @@
 /**
  * External dependencies
  */
-import { includes, map } from 'lodash';
+import { without, 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';
+
+/**
+ * Internal dependencies
+ */
+import BlockManagerHideAll from './hide-all';
+import BlockTypesChecklist from './checklist';
 
 function BlockManagerCategory( {
 	category,
-	blockItems,
+	blockTypes,
 	hiddenBlockTypes,
-	opened,
-	onToggle,
-	showBlockTypes,
-	hideBlockTypes,
+	toggleVisible,
 	toggleAllHidden,
 } ) {
-	if ( ! blockItems.length ) {
+	if ( ! blockTypes.length ) {
 		return null;
 	}
 
-	const isAllHidden = blockItems.every( ( blockItem ) => {
-		return hiddenBlockTypes.includes( blockItem.id );
-	} );
+	const checkedBlockNames = without(
+		map( blockTypes, 'name' ),
+		...hiddenBlockTypes
+	);
 
 	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,
-					} );
-				} }
+		<section className="edit-post-manage-blocks-modal__category">
+			<header className="edit-post-manage-blocks-modal__category-header">
+				<h2 className="edit-post-manage-blocks-modal__category-title">
+					{ category.title }
+				</h2>
+				<BlockManagerHideAll
+					category={ category }
+					checked={ ! checkedBlockNames.length }
+					onChange={ toggleAllHidden }
+				/>
+			</header>
+			<BlockTypesChecklist
+				blockTypes={ blockTypes }
+				value={ checkedBlockNames }
+				onItemChange={ toggleVisible }
 			/>
-		</PanelBody>
+		</section>
 	);
 }
 
@@ -75,18 +61,22 @@ export default compose( [
 		};
 	} ),
 	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 ) {
+			toggleVisible( blockName, nextIsChecked ) {
+				if ( nextIsChecked ) {
+					showBlockTypes( blockName );
+				} else {
+					hideBlockTypes( blockName );
+				}
+			},
+			toggleAllHidden( nextIsChecked ) {
+				const blockNames = map( ownProps.blockTypes, 'name' );
+				if ( nextIsChecked ) {
 					hideBlockTypes( blockNames );
 				} else {
 					showBlockTypes( blockNames );

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

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { partial } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { BlockIcon } from '@wordpress/block-editor';
+import { CheckboxControl } from '@wordpress/components';
+
+function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
+	return (
+		<ul className="edit-post-manage-blocks-modal__checklist">
+			{ blockTypes.map( ( blockType ) => (
+				<li
+					key={ blockType.name }
+					className="edit-post-manage-blocks-modal__checklist-item"
+				>
+					<CheckboxControl
+						label={ (
+							<Fragment>
+								<BlockIcon icon={ blockType.icon } />
+								{ blockType.title }
+							</Fragment>
+						) }
+						checked={ value.includes( blockType.name ) }
+						onChange={ partial( onItemChange, blockType.name ) }
+					/>
+				</li>
+			) ) }
+		</ul>
+	);
+}
+
+export default BlockTypesChecklist;

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

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+import { FormToggle } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+function BlockManagerHideAll( { instanceId, category, checked, onChange } ) {
+	const id = 'edit-post-manage-blocks-modal__hide-all-' + instanceId;
+
+	return (
+		<div className="edit-post-manage-blocks-modal__hide-all">
+			<label
+				htmlFor={ id }
+				className="edit-post-manage-blocks-modal__hide-all-label"
+			>
+				{
+					/* translators: Checkbox toggle label */
+					__( 'Hide all' )
+				}
+			</label>
+			<FormToggle
+				id={ id }
+				checked={ checked }
+				onChange={ ( event ) => onChange( event.target.checked ) }
+				aria-label={ sprintf(
+					/* translators: Block Visibility accessible checkbox toggle label */
+					__( 'Hide all blocks in category: %s' ),
+					category.title
+				) }
+			/>
+		</div>
+	);
+}
+
+export default withInstanceId( BlockManagerHideAll );