Add: Disabled block count in the block manager (WordPress#17103)

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

@@ -1,15 +1,15 @@
 /**
  * External dependencies
  */
-import { filter } from 'lodash';
+import { filter, isArray } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
 import { compose, withState } from '@wordpress/compose';
 import { TextControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -23,6 +23,7 @@ function BlockManager( {
 	categories,
 	hasBlockSupport,
 	isMatchingSearchTerm,
+	numberOfHiddenBlocks,
 } ) {
 	// Filtering occurs here (as opposed to `withSelect`) to avoid wasted
 	// wasted renders by consequence of `Array#filter` producing a new
@@ -43,6 +44,20 @@ function BlockManager( {
 				} ) }
 				className="edit-post-manage-blocks-modal__search"
 			/>
+			{ !! numberOfHiddenBlocks && (
+				<div className="edit-post-manage-blocks-modal__disabled-blocks-count">
+					{
+						sprintf(
+							_n(
+								'%1$d block is disabled.',
+								'%1$d blocks are disabled.',
+								numberOfHiddenBlocks
+							),
+							numberOfHiddenBlocks
+						)
+					}
+				</div>
+			) }
 			<div
 				tabIndex="0"
 				role="region"
@@ -77,12 +92,16 @@ export default compose( [
 			hasBlockSupport,
 			isMatchingSearchTerm,
 		} = select( 'core/blocks' );
+		const { getPreference } = select( 'core/edit-post' );
+		const hiddenBlockTypes = getPreference( 'hiddenBlockTypes' );
+		const numberOfHiddenBlocks = isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
 
 		return {
 			blockTypes: getBlockTypes(),
 			categories: getCategories(),
 			hasBlockSupport,
 			isMatchingSearchTerm,
+			numberOfHiddenBlocks,
 		};
 	} ),
 ] )( BlockManager );

packages/edit-post/src/components/manage-blocks-modal/style.scss

@@ -45,6 +45,17 @@
 	}
 }
 
+.edit-post-manage-blocks-modal__disabled-blocks-count {
+	border-top: 1px solid $light-gray-500;
+	margin-left: -$grid-size-xlarge;
+	margin-right: -$grid-size-xlarge;
+	padding-top: 0.6rem;
+	padding-bottom: 0.6rem;
+	padding-left: $grid-size-xlarge;
+	padding-right: $grid-size-xlarge;
+	background-color: $light-gray-200;
+}
+
 .edit-post-manage-blocks-modal__category {
 	margin: 0 0 2rem 0;
 }