Fix: Block manager doesn't respect allowed_block_types hook (#16586)

WordPress · Aug 5, 2019 · e830071 · e830071
1 parent 54323e9
commit e830071
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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={ <span id={ titleId }>{ category.title }</span> }
 			/>
 			<BlockTypesChecklist
-				blockTypes={ blockTypes }
+				blockTypes={ filteredBlockTypes }
 				value={ checkedBlockNames }
 				onItemChange={ toggleVisible }
 			/>

diff --git 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 (
 			<StrictMode>
-				<SlotFillProvider>
-					<DropZoneProvider>
-						<EditorProvider
-							settings={ editorSettings }
-							post={ post }
-							initialEdits={ initialEdits }
-							useSubRegistry={ false }
-							{ ...props }
-						>
-							<ErrorBoundary onError={ onError }>
-								<EditorInitialization postId={ postId } />
-								<Layout />
-								<KeyboardShortcuts shortcuts={ preventEventDiscovery } />
-							</ErrorBoundary>
-							<PostLockedModal />
-						</EditorProvider>
-					</DropZoneProvider>
-				</SlotFillProvider>
+				<EditPostSettings.Provider value={ settings }>
+					<SlotFillProvider>
+						<DropZoneProvider>
+							<EditorProvider
+								settings={ editorSettings }
+								post={ post }
+								initialEdits={ initialEdits }
+								useSubRegistry={ false }
+								{ ...props }
+							>
+								<ErrorBoundary onError={ onError }>
+									<EditorInitialization postId={ postId } />
+									<Layout />
+									<KeyboardShortcuts shortcuts={ preventEventDiscovery } />
+								</ErrorBoundary>
+								<PostLockedModal />
+							</EditorProvider>
+						</DropZoneProvider>
+					</SlotFillProvider>
+				</EditPostSettings.Provider>
 			</StrictMode>
 		);
 	}