From 3b74d9c6022009c95dd6f13b5ead727c222442e3 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 21 Aug 2019 14:28:58 +0100
Subject: [PATCH] Add: Disabled block count in the block manager (#17103)

---
 .../components/manage-blocks-modal/manager.js | 23 +++++++++++++++++--
 .../components/manage-blocks-modal/style.scss | 11 +++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/manage-blocks-modal/manager.js b/packages/edit-post/src/components/manage-blocks-modal/manager.js
index 7cf25463e8a4d..1992baf878928 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/manager.js
+++ b/packages/edit-post/src/components/manage-blocks-modal/manager.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter } from 'lodash';
+import { filter, isArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -9,7 +9,7 @@ import { filter } from 'lodash';
 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 );
diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss
index 46b877d631573..a763b04483bb1 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/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;
 }