Editor: Bring back Inspector Advnaced Controls

blocks/hooks/anchor.js

@@ -6,7 +6,7 @@ import { assign } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/element';
+import { createHigherOrderComponent, Fragment } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { hasBlockSupport } from '../api';
-import InspectorControls from '../inspector-controls';
+import InspectorAdvancedControls from '../inspector-advanced-controls';
 
 /**
  * Regular expression matching invalid anchor characters for replacement.
@@ -59,21 +59,25 @@ export function addAttribute( settings ) {
 export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
 		const hasAnchor = hasBlockSupport( props.name, 'anchor' ) && props.isSelected;
-		return [
-			<BlockEdit key="block-edit-anchor" { ...props } />,
-			hasAnchor && <InspectorControls key="inspector-anchor">
-				<TextControl
-					label={ __( 'HTML Anchor' ) }
-					help={ __( 'Anchors lets you link directly to a section on a page.' ) }
-					value={ props.attributes.anchor || '' }
-					onChange={ ( nextValue ) => {
-						nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
-						props.setAttributes( {
-							anchor: nextValue,
-						} );
-					} } />
-			</InspectorControls>,
-		];
+		return (
+			<Fragment>
+				<BlockEdit { ...props } />
+				{ hasAnchor && (
+					<InspectorAdvancedControls>
+						<TextControl
+							label={ __( 'HTML Anchor' ) }
+							help={ __( 'Anchors lets you link directly to a section on a page.' ) }
+							value={ props.attributes.anchor || '' }
+							onChange={ ( nextValue ) => {
+								nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
+								props.setAttributes( {
+									anchor: nextValue,
+								} );
+							} } />
+					</InspectorAdvancedControls>
+				) }
+			</Fragment>
+		);
 	};
 }, 'withInspectorControl' );
 

blocks/hooks/custom-class-name.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/element';
+import { createHigherOrderComponent, Fragment } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { hasBlockSupport } from '../api';
-import InspectorControls from '../inspector-controls';
+import InspectorAdvancedControls from '../inspector-advanced-controls';
 
 /**
  * Filters registered block settings, extending attributes with anchor using ID
@@ -51,20 +51,24 @@ export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) =>
 	return ( props ) => {
 		const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true ) && props.isSelected;
 
-		return [
-			<BlockEdit key="block-edit-custom-class-name" { ...props } />,
-			hasCustomClassName && <InspectorControls key="inspector-custom-class-name">
-				<TextControl
-					label={ __( 'Additional CSS Class' ) }
-					value={ props.attributes.className || '' }
-					onChange={ ( nextValue ) => {
-						props.setAttributes( {
-							className: nextValue,
-						} );
-					} }
-				/>
-			</InspectorControls>,
-		];
+		return (
+			<Fragment>
+				<BlockEdit { ...props } />
+				{ hasCustomClassName && (
+					<InspectorAdvancedControls>
+						<TextControl
+							label={ __( 'Additional CSS Class' ) }
+							value={ props.attributes.className || '' }
+							onChange={ ( nextValue ) => {
+								props.setAttributes( {
+									className: nextValue,
+								} );
+							} }
+						/>
+					</InspectorAdvancedControls>
+				) }
+			</Fragment>
+		);
 	};
 }, 'withInspectorControl' );
 

blocks/index.js

@@ -24,6 +24,7 @@ export { default as Editable } from './rich-text/editable';
 export { default as ImagePlaceholder } from './image-placeholder';
 export { default as InnerBlocks } from './inner-blocks';
 export { default as InspectorControls } from './inspector-controls';
+export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
 export { default as PlainText } from './plain-text';
 export { default as MediaUpload } from './media-upload';
 export { default as RichText } from './rich-text';

blocks/inspector-advanced-controls/index.js

@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+export default createSlotFill( 'InspectorAdvancedControls' );

blocks/inspector-controls/index.js

@@ -1,12 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { Fill } from '@wordpress/components';
+import { createSlotFill } from '@wordpress/components';
 
-export default function InspectorControls( { children } ) {
-	return (
-		<Fill name="Inspector.Controls">
-			{ children }
-		</Fill>
-	);
-}
+export default createSlotFill( 'InspectorControls' );

components/index.js

@@ -49,7 +49,7 @@ export { default as ToggleControl } from './toggle-control';
 export { default as Toolbar } from './toolbar';
 export { default as Tooltip } from './tooltip';
 export { default as TreeSelect } from './tree-select';
-export { Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
+export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 
 // Higher-Order Components
 export { default as ifCondition } from './higher-order/if-condition';

components/slot-fill/index.js

@@ -9,4 +9,19 @@ export { Slot };
 export { Fill };
 export { Provider };
 
-export default { Slot, Fill, Provider };
+export function createSlotFill( name ) {
+	const Component = ( { children, ...props } ) => (
+		<Fill name={ name } { ...props }>
+			{ children }
+		</Fill>
+	);
+	Component.displayName = name;
+
+	Component.Slot = ( { children, ...props } ) => (
+		<Slot name={ name } { ...props }>
+			{ children }
+		</Slot>
+	);
+
+	return Component;
+}

components/slot-fill/slot.js

@@ -45,32 +45,34 @@ class Slot extends Component {
 	}
 
 	render() {
-		const { name, bubblesVirtually = false, fillProps = {} } = this.props;
+		const { children, name, bubblesVirtually = false, fillProps = {} } = this.props;
 		const { getFills = noop } = this.context;
 
 		if ( bubblesVirtually ) {
 			return <div ref={ this.bindNode } />;
 		}
 
+		const fills = map( getFills( name ), ( fill ) => {
+			const fillKey = fill.occurrence;
+
+			// If a function is passed as a child, render it with the fillProps.
+			if ( isFunction( fill.props.children ) ) {
+				return cloneElement( fill.props.children( fillProps ), { key: fillKey } );
+			}
+
+			return Children.map( fill.props.children, ( child, childIndex ) => {
+				if ( ! child || isString( child ) ) {
+					return child;
+				}
+
+				const childKey = `${ fillKey }---${ child.key || childIndex }`;
+				return cloneElement( child, { key: childKey } );
+			} );
+		} );
+
 		return (
 			<div ref={ this.bindNode }>
-				{ map( getFills( name ), ( fill ) => {
-					const fillKey = fill.occurrence;
-
-					// If a function is passed as a child, render it with the fillProps.
-					if ( isFunction( fill.props.children ) ) {
-						return cloneElement( fill.props.children( fillProps ), { key: fillKey } );
-					}
-
-					return Children.map( fill.props.children, ( child, childIndex ) => {
-						if ( ! child || isString( child ) ) {
-							return child;
-						}
-
-						const childKey = `${ fillKey }---${ child.key || childIndex }`;
-						return cloneElement( child, { key: childKey } );
-					} );
-				} ) }
+				{ isFunction( children ) ? children( fills.filter( Boolean ) ) : fills }
 			</div>
 		);
 	}

edit-post/components/sidebar/block-inspector-panel/style.scss

@@ -9,4 +9,8 @@
 	.components-panel__body-toggle {
 		color: $dark-gray-500;
 	}
+
+	&.editor-block-inspector__advanced {
+		margin-bottom: -16px;
+	}
 }

editor/components/block-inspector/index.js

@@ -7,8 +7,13 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Slot } from '@wordpress/components';
-import { getBlockType, BlockIcon } from '@wordpress/blocks';
+import {
+	BlockIcon,
+	getBlockType,
+	InspectorControls,
+	InspectorAdvancedControls,
+} from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
 
 /**
  * Internal Dependencies
@@ -37,7 +42,17 @@ const BlockInspector = ( { selectedBlock, count } ) => {
 				<div className="editor-block-inspector__card-description">{ blockType.description }</div>
 			</div>
 		</div>,
-		<Slot name="Inspector.Controls" key="inspector-controls" />,
+		<InspectorControls.Slot key="inspector-controls" />,
+		<InspectorAdvancedControls.Slot key="inspector-advanced-controls">
+			{ ( fills ) => fills.length && (
+				<PanelBody
+					className="editor-block-inspector__advanced"
+					title={ __( 'Advanced' ) }
+				>
+					{ fills }
+				</PanelBody>
+			) }
+		</InspectorAdvancedControls.Slot>,
 	];
 };