Editor: Bring back Inspector Advanced 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.
@@ -58,22 +58,29 @@ 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>,
-		];
+		const hasAnchor = hasBlockSupport( props.name, 'anchor' );
+
+		if ( hasAnchor && props.isSelected ) {
+			return (
+				<Fragment>
+					<BlockEdit { ...props } />
+					<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>
+			);
+		}
+
+		return <BlockEdit { ...props } />;
 	};
 }, '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
@@ -49,22 +49,28 @@ export function addAttribute( settings ) {
  */
 export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
-		const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true ) && props.isSelected;
+		const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true );
 
-		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>,
-		];
+		if ( hasCustomClassName && props.isSelected ) {
+			return (
+				<Fragment>
+					<BlockEdit { ...props } />
+					<InspectorAdvancedControls>
+						<TextControl
+							label={ __( 'Additional CSS Class' ) }
+							value={ props.attributes.className || '' }
+							onChange={ ( nextValue ) => {
+								props.setAttributes( {
+									className: nextValue,
+								} );
+							} }
+						/>
+					</InspectorAdvancedControls>
+				</Fragment>
+			);
+		}
+
+		return <BlockEdit { ...props } />;
 	};
 }, '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/README.md

@@ -42,13 +42,48 @@ Any Fill will automatically occupy this Slot space, even if rendered elsewhere i
 
 You can either use the Fill component directly, or a wrapper component type as in the above example to abstract the slot name from consumer awareness.
 
+There is also `createSlotFill` helper method which was created to simplify the process of matching the corresponding `Slot` and `Fill` components:
+
+```jsx
+const Toolbar = createSlotFill( 'Toolbar' );
+
+const MyToolbarItem = () => (
+	<Toolbar>
+		My item
+	</Toolbar>
+);
+
+const MyToolbar = () => (
+	<div className="toolbar">
+		<Toolbar.Slot />
+	</div>
+); 
+```
+
 ## Props
 
 The `SlotFillProvider` component does not accept any props.
 
 Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given `name` will render the `children` of any associated `Fill`s.
 
-`Slot` also accepts a `bubblesVirtually` prop which changes the event bubbling behaviour:
+`Slot` accepts a `bubblesVirtually` prop which changes the event bubbling behaviour:
 
  - By default, events will bubble to their parents on the DOM hierarchy (native event bubbling)
  - If `bubblesVirtually` is set to true, events will bubble to their virtual parent in the React elements hierarchy instead.
+
+`Slot` also accepts optional `children` function prop, which takes `fills` as a param. It allows to perform additional processing and wrap `fills` conditionally.
+
+_Example_:
+```jsx
+const Toolbar = ( { isMobile } ) => (
+	<div className="toolbar">
+		<Slot name="Toolbar">
+			{ ( fills ) => {
+				return isMobile && fills.length > 3 ?
+					<div className="toolbar__mobile-long">{ fills }</div> :
+					fills;
+			} }	
+		</Slot>
+	</div>
+);
+```

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>
 		);
 	}

components/slot-fill/test/index.js

@@ -0,0 +1,28 @@
+/**
+ * External dependecies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill, Fill, Slot } from '../';
+
+describe( 'createSlotFill', () => {
+	const SLOT_NAME = 'MyFill';
+	const MyFill = createSlotFill( SLOT_NAME );
+
+	test( 'should match snapshot for Fill', () => {
+		const wrapper = shallow( <MyFill /> );
+
+		expect( wrapper.type() ).toBe( Fill );
+		expect( wrapper ).toHaveProp( 'name', SLOT_NAME );
+	} );
+
+	test( 'should match snapshot for Slot', () => {
+		const wrapper = shallow( <MyFill.Slot /> );
+
+		expect( wrapper.type() ).toBe( Slot );
+		expect( wrapper ).toHaveProp( 'name', SLOT_NAME );
+	} );
+} );

components/slot-fill/test/slot.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { mount } from 'enzyme';
+import { isEmpty } from 'lodash';
 
 /**
  * Internal dependencies
@@ -103,6 +104,42 @@ describe( 'Slot', () => {
 		expect( onClose ).toHaveBeenCalledTimes( 1 );
 	} );
 
+	it( 'should render empty Fills without HTML wrapper when render props used', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="chicken">
+					{ ( fills ) => ( ! isEmpty( fills ) && (
+						<blockquote>
+							{ fills }
+						</blockquote>
+					) ) }
+				</Slot>
+				<Fill name="chicken" />
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div></div>' );
+	} );
+
+	it( 'should render a string Fill with HTML wrapper when render props used', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="chicken">
+					{ ( fills ) => ( fills && (
+						<blockquote>
+							{ fills }
+						</blockquote>
+					) ) }
+				</Slot>
+				<Fill name="chicken">
+					content
+				</Fill>
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div><blockquote>content</blockquote></div>' );
+	} );
+
 	it( 'should re-render Slot when not bubbling virtually', () => {
 		const element = mount(
 			<Provider>

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

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