diff --git a/blocks/hooks/anchor.js b/blocks/hooks/anchor.js
index 65371a4088c43..315fdd9f7d291 100644
--- a/blocks/hooks/anchor.js
+++ b/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 [
- ,
- hasAnchor &&
- {
- nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
- props.setAttributes( {
- anchor: nextValue,
- } );
- } } />
- ,
- ];
+ return (
+
+
+ { hasAnchor && (
+
+ {
+ nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
+ props.setAttributes( {
+ anchor: nextValue,
+ } );
+ } } />
+
+ ) }
+
+ );
};
}, 'withInspectorControl' );
diff --git a/blocks/hooks/custom-class-name.js b/blocks/hooks/custom-class-name.js
index a8a8fa07591e7..612a315774767 100644
--- a/blocks/hooks/custom-class-name.js
+++ b/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 [
- ,
- hasCustomClassName &&
- {
- props.setAttributes( {
- className: nextValue,
- } );
- } }
- />
- ,
- ];
+ return (
+
+
+ { hasCustomClassName && (
+
+ {
+ props.setAttributes( {
+ className: nextValue,
+ } );
+ } }
+ />
+
+ ) }
+
+ );
};
}, 'withInspectorControl' );
diff --git a/blocks/index.js b/blocks/index.js
index c157fc834c928..9adcc900ddb50 100644
--- a/blocks/index.js
+++ b/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';
diff --git a/blocks/inspector-advanced-controls/index.js b/blocks/inspector-advanced-controls/index.js
new file mode 100644
index 0000000000000..b725f38ee72bf
--- /dev/null
+++ b/blocks/inspector-advanced-controls/index.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+export default createSlotFill( 'InspectorAdvancedControls' );
diff --git a/blocks/inspector-controls/index.js b/blocks/inspector-controls/index.js
index 05c1dea42d559..4a91e43d798fe 100644
--- a/blocks/inspector-controls/index.js
+++ b/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 (
-
- { children }
-
- );
-}
+export default createSlotFill( 'InspectorControls' );
diff --git a/components/index.js b/components/index.js
index 789c92124067d..c50b14168b770 100644
--- a/components/index.js
+++ b/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';
diff --git a/components/slot-fill/index.js b/components/slot-fill/index.js
index 6f4e9f2141e5b..c81d29eafd2e3 100644
--- a/components/slot-fill/index.js
+++ b/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 } ) => (
+
+ { children }
+
+ );
+ Component.displayName = name;
+
+ Component.Slot = ( { children, ...props } ) => (
+
+ { children }
+
+ );
+
+ return Component;
+}
diff --git a/components/slot-fill/slot.js b/components/slot-fill/slot.js
index 60df7a4987344..4785e6e0837d1 100644
--- a/components/slot-fill/slot.js
+++ b/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
;
}
+ 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 (
- { 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 }
);
}
diff --git a/edit-post/components/sidebar/block-inspector-panel/style.scss b/edit-post/components/sidebar/block-inspector-panel/style.scss
index 636e072142529..51e1d92bc785c 100644
--- a/edit-post/components/sidebar/block-inspector-panel/style.scss
+++ b/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;
+ }
}
diff --git a/editor/components/block-inspector/index.js b/editor/components/block-inspector/index.js
index 6d9b054543077..12ef69b4e4f2f 100644
--- a/editor/components/block-inspector/index.js
+++ b/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 } ) => {
{ blockType.description }
,
- ,
+ ,
+
+ { ( fills ) => fills.length && (
+
+ { fills }
+
+ ) }
+ ,
];
};