diff --git a/packages/e2e-tests/specs/plugins/allowed-blocks.test.js b/packages/e2e-tests/specs/plugins/allowed-blocks.test.js
index f7bdffcf3a703a..11d5bfc8303fce 100644
--- a/packages/e2e-tests/specs/plugins/allowed-blocks.test.js
+++ b/packages/e2e-tests/specs/plugins/allowed-blocks.test.js
@@ -38,4 +38,29 @@ describe( 'Allowed Blocks Filter', () => {
) )[ 0 ];
expect( galleryBlockButton ).toBeUndefined();
} );
+
+ it( 'should remove not allowed blocks from the block manager', async () => {
+ const BLOCK_LABEL_SELECTOR = '.edit-post-manage-blocks-modal__checklist-item .components-checkbox-control__label';
+ await page.click(
+ '.edit-post-more-menu [aria-label="More tools & options"]'
+ );
+ const [ button ] = await page.$x(
+ `//button[contains(text(), 'Block Manager')]`
+ );
+ await button.click( 'button' );
+
+ await page.waitForSelector( BLOCK_LABEL_SELECTOR );
+ const blocks = await page.evaluate(
+ ( selector ) => {
+ return Array.from( document.querySelectorAll( selector ) ).map(
+ ( element ) => ( ( element.innerText || '' ).trim() )
+ ).sort();
+ },
+ BLOCK_LABEL_SELECTOR
+ );
+ expect( blocks ).toEqual( [
+ 'Image',
+ 'Paragraph',
+ ] );
+ } );
} );
diff --git a/packages/edit-post/src/components/edit-post-settings/index.js b/packages/edit-post/src/components/edit-post-settings/index.js
new file mode 100644
index 00000000000000..db6c9f0454edfe
--- /dev/null
+++ b/packages/edit-post/src/components/edit-post-settings/index.js
@@ -0,0 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const EditPostSettings = createContext( {} );
+export default EditPostSettings;
diff --git a/packages/edit-post/src/components/manage-blocks-modal/category.js b/packages/edit-post/src/components/manage-blocks-modal/category.js
index 00a2ff15ab7937..c4beeebb642ea8 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/category.js
+++ b/packages/edit-post/src/components/manage-blocks-modal/category.js
@@ -1,11 +1,12 @@
/**
* External dependencies
*/
-import { without, map } from 'lodash';
+import { includes, map, without } from 'lodash';
/**
* WordPress dependencies
*/
+import { useContext, useMemo } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose, withInstanceId } from '@wordpress/compose';
import { CheckboxControl } from '@wordpress/components';
@@ -14,6 +15,7 @@ import { CheckboxControl } from '@wordpress/components';
* Internal dependencies
*/
import BlockTypesChecklist from './checklist';
+import EditPostSettings from '../edit-post-settings';
function BlockManagerCategory( {
instanceId,
@@ -23,18 +25,32 @@ function BlockManagerCategory( {
toggleVisible,
toggleAllVisible,
} ) {
- if ( ! blockTypes.length ) {
+ const settings = useContext( EditPostSettings );
+ const { allowedBlockTypes } = settings;
+ const filteredBlockTypes = useMemo(
+ () => {
+ if ( allowedBlockTypes === true ) {
+ return blockTypes;
+ }
+ return blockTypes.filter( ( { name } ) => {
+ return includes( allowedBlockTypes || [], name );
+ } );
+ },
+ [ allowedBlockTypes, blockTypes ]
+ );
+
+ if ( ! filteredBlockTypes.length ) {
return null;
}
const checkedBlockNames = without(
- map( blockTypes, 'name' ),
+ map( filteredBlockTypes, 'name' ),
...hiddenBlockTypes
);
const titleId = 'edit-post-manage-blocks-modal__category-title-' + instanceId;
- const isAllChecked = checkedBlockNames.length === blockTypes.length;
+ const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
let ariaChecked;
if ( isAllChecked ) {
@@ -59,7 +75,7 @@ function BlockManagerCategory( {
label={ { category.title } }
/>
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index 92fad75ebef7e8..70a29b54466a1d 100644
--- a/packages/edit-post/src/editor.js
+++ b/packages/edit-post/src/editor.js
@@ -22,6 +22,7 @@ import {
import preventEventDiscovery from './prevent-event-discovery';
import Layout from './components/layout';
import EditorInitialization from './components/editor-initialization';
+import EditPostSettings from './components/edit-post-settings';
class Editor extends Component {
constructor() {
@@ -93,24 +94,26 @@ class Editor extends Component {
return (
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}