Merge pull request #3577 from WordPress/update/block-settings-allowed…

…-types

Blocks: Filterable allowed inserter block types

blocks/block-alignment-toolbar/index.js

@@ -2,12 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Toolbar } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import withEditorSettings from '../with-editor-settings';
+import { Toolbar, withContext } from '@wordpress/components';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
@@ -59,7 +54,7 @@ function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS,
 	);
 }
 
-export default withEditorSettings(
+export default withContext( 'editor' )(
 	( settings ) => ( {
 		wideControlsEnabled: settings.wideImages,
 	} )

blocks/color-palette/index.js

@@ -7,14 +7,13 @@ import { ChromePicker } from 'react-color';
 /**
  * WordPress dependencies
  */
-import { Dropdown } from '@wordpress/components';
+import { Dropdown, withContext } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import withEditorSettings from '../with-editor-settings';
 
 function ColorPalette( { colors, value, onChange } ) {
 	return (
@@ -72,7 +71,7 @@ function ColorPalette( { colors, value, onChange } ) {
 	);
 }
 
-export default withEditorSettings(
+export default withContext( 'editor' )(
 	( settings ) => ( {
 		colors: settings.colors,
 	} )

blocks/library/image/block.js

@@ -24,12 +24,12 @@ import {
 	DropZone,
 	FormFileUpload,
 	withAPIData,
+	withContext,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import withEditorSettings from '../../with-editor-settings';
 import Editable from '../../editable';
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
@@ -282,7 +282,7 @@ class ImageBlock extends Component {
 }
 
 export default flowRight( [
-	withEditorSettings(),
+	withContext( 'editor' ),
 	withAPIData( ( props ) => {
 		const { id } = props.attributes;
 		if ( ! id ) {

blocks/with-editor-settings/index.js → components/higher-order/with-context/index.js

@@ -8,12 +8,17 @@ import { noop } from 'lodash';
  */
 import { Component } from '@wordpress/element';
 
-const withEditorSettings = ( mapSettingsToProps ) => ( OriginalComponent ) => {
+const withContext = ( contextName ) => ( mapSettingsToProps ) => ( OriginalComponent ) => {
+	// Allow call without explicit `mapSettingsToProps`
+	if ( mapSettingsToProps instanceof Component ) {
+		return withContext( contextName )()( mapSettingsToProps );
+	}
+
 	class WrappedComponent extends Component {
 		render() {
 			const extraProps = mapSettingsToProps ?
-				mapSettingsToProps( this.context.editor, this.props ) :
-				{ settings: this.context.editor };
+				mapSettingsToProps( this.context[ contextName ], this.props ) :
+				this.context[ contextName ];
 
 			return (
 				<OriginalComponent
@@ -25,10 +30,10 @@ const withEditorSettings = ( mapSettingsToProps ) => ( OriginalComponent ) => {
 	}
 
 	WrappedComponent.contextTypes = {
-		editor: noop,
+		[ contextName ]: noop,
 	};
 
 	return WrappedComponent;
 };
 
-export default withEditorSettings;
+export default withContext;

components/index.js

@@ -37,6 +37,7 @@ export { Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 // Higher-Order Components
 export { default as navigateRegions } from './higher-order/navigate-regions';
 export { default as withAPIData } from './higher-order/with-api-data';
+export { default as withContext } from './higher-order/with-context';
 export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withInstanceId } from './higher-order/with-instance-id';

editor/components/inserter/index.js

@@ -3,12 +3,13 @@
  */
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { flowRight, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown, IconButton } from '@wordpress/components';
+import { Dropdown, IconButton, withContext } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 
@@ -61,8 +62,13 @@ class Inserter extends Component {
 			children,
 			onInsertBlock,
 			insertionPoint,
+			hasSupportedBlocks,
 		} = this.props;
 
+		if ( ! hasSupportedBlocks ) {
+			return null;
+		}
+
 		return (
 			<Dropdown
 				className="editor-inserter"
@@ -97,24 +103,33 @@ class Inserter extends Component {
 	}
 }
 
-export default connect(
-	( state ) => {
+export default flowRight( [
+	connect(
+		( state ) => {
+			return {
+				insertionPoint: getBlockInsertionPoint( state ),
+				mode: getEditorMode( state ),
+			};
+		},
+		( dispatch ) => ( {
+			onInsertBlock( name, position ) {
+				dispatch( hideInsertionPoint() );
+				dispatch( insertBlock(
+					createBlock( name ),
+					position
+				) );
+			},
+			...bindActionCreators( {
+				setInsertionPoint: setBlockInsertionPoint,
+				clearInsertionPoint: clearBlockInsertionPoint,
+			}, dispatch ),
+		} )
+	),
+	withContext( 'editor' )( ( settings ) => {
+		const { blockTypes } = settings;
+
 		return {
-			insertionPoint: getBlockInsertionPoint( state ),
-			mode: getEditorMode( state ),
+			hasSupportedBlocks: true === blockTypes || ! isEmpty( blockTypes ),
 		};
-	},
-	( dispatch ) => ( {
-		onInsertBlock( name, position ) {
-			dispatch( hideInsertionPoint() );
-			dispatch( insertBlock(
-				createBlock( name ),
-				position
-			) );
-		},
-		...bindActionCreators( {
-			setInsertionPoint: setBlockInsertionPoint,
-			clearInsertionPoint: clearBlockInsertionPoint,
-		}, dispatch ),
-	} )
-)( Inserter );
+	} ),
+] )( Inserter );

editor/components/inserter/menu.js

@@ -24,6 +24,7 @@ import {
 	TabbableContainer,
 	withInstanceId,
 	withSpokenMessages,
+	withContext,
 } from '@wordpress/components';
 import { getCategories, getBlockTypes } from '@wordpress/blocks';
 import { keycodes } from '@wordpress/utils';
@@ -112,27 +113,56 @@ export class InserterMenu extends Component {
 	}
 
 	getBlockTypes() {
+		const { blockTypes } = this.props;
+
+		// If all block types disabled, return empty set
+		if ( ! blockTypes ) {
+			return [];
+		}
+
 		// Block types that are marked as private should not appear in the inserter
-		return getBlockTypes().filter( ( block ) => ! block.isPrivate );
+		return getBlockTypes().filter( ( block ) => {
+			if ( block.isPrivate ) {
+				return false;
+			}
+
+			// Block types defined as either `true` or array:
+			//  - True: Allow
+			//  - Array: Check block name within whitelist
+			return (
+				! Array.isArray( blockTypes ) ||
+				includes( blockTypes, block.name )
+			);
+		} );
 	}
 
 	searchBlocks( blockTypes ) {
 		return searchBlocks( blockTypes, this.state.filterValue );
 	}
 
 	getBlocksForTab( tab ) {
+		const blockTypes = this.getBlockTypes();
 		// if we're searching, use everything, otherwise just get the blocks visible in this tab
 		if ( this.state.filterValue ) {
-			return this.getBlockTypes();
+			return blockTypes;
 		}
+
+		let predicate;
 		switch ( tab ) {
 			case 'recent':
-				return this.props.recentlyUsedBlocks;
+				predicate = ( block ) => find( this.props.recentlyUsedBlocks, { name: block.name } );
+				break;
+
 			case 'blocks':
-				return filter( this.getBlockTypes(), ( block ) => block.category !== 'embed' );
+				predicate = ( block ) => block.category !== 'embed';
+				break;
+
 			case 'embeds':
-				return filter( this.getBlockTypes(), ( block ) => block.category === 'embed' );
+				predicate = ( block ) => block.category === 'embed';
+				break;
 		}
+
+		return filter( blockTypes, predicate );
 	}
 
 	sortBlocks( blockTypes ) {
@@ -201,17 +231,18 @@ export class InserterMenu extends Component {
 		this.setState( { tab } );
 	}
 
-	renderTabView( tab, visibleBlocks ) {
-		switch ( tab ) {
-			case 'recent':
-				return this.renderBlocks( this.props.recentlyUsedBlocks, undefined );
-
-			case 'embed':
-				return this.renderBlocks( visibleBlocks.embed, undefined );
+	renderTabView( tab ) {
+		const blocksForTab = this.getBlocksForTab( tab );
+		if ( 'recent' === tab ) {
+			return this.renderBlocks( blocksForTab );
+		}
 
-			default:
-				return this.renderCategories( visibleBlocks, undefined );
+		const visibleBlocks = this.getVisibleBlocksByCategory( blocksForTab );
+		if ( 'embed' === tab ) {
+			return this.renderBlocks( visibleBlocks.embed );
 		}
+
+		return this.renderCategories( visibleBlocks );
 	}
 
 	interceptArrows( event ) {
@@ -266,19 +297,12 @@ export class InserterMenu extends Component {
 							},
 						] }
 					>
-						{
-							( tabKey ) => {
-								const blocksForTab = this.getBlocksForTab( tabKey );
-								const visibleBlocks = this.getVisibleBlocksByCategory( blocksForTab );
-
-								return (
-									<div ref={ ( ref ) => this.tabContainer = ref }
-										className="editor-inserter__content">
-										{ this.renderTabView( tabKey, visibleBlocks ) }
-									</div>
-								);
-							}
-						}
+						{ ( tabKey ) => (
+							<div ref={ ( ref ) => this.tabContainer = ref }
+								className="editor-inserter__content">
+								{ this.renderTabView( tabKey ) }
+							</div>
+						) }
 					</TabPanel>
 				}
 				{ isSearching &&
@@ -304,5 +328,6 @@ const connectComponent = connect(
 export default flow(
 	withInstanceId,
 	withSpokenMessages,
+	withContext( 'editor' )( ( settings ) => pick( settings, 'blockTypes' ) ),
 	connectComponent
 )( InserterMenu );