diff --git a/packages/block-editor/src/components/inspector-controls/fill.js b/packages/block-editor/src/components/inspector-controls/fill.js
index bb1c8fd7accdf..912c0a6d2db9f 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.js
+++ b/packages/block-editor/src/components/inspector-controls/fill.js
@@ -2,25 +2,22 @@
* WordPress dependencies
*/
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
-import warning from '@wordpress/warning';
/**
* Internal dependencies
*/
-import useDisplayBlockControls from '../use-display-block-controls';
-import groups from './groups';
+import useInspectorControlsFill from './hook';
export default function InspectorControlsFill( {
__experimentalGroup: group = 'default',
+ __experimentalExposeToChildren = false,
children,
} ) {
- const isDisplayed = useDisplayBlockControls();
- const Fill = groups[ group ]?.Fill;
+ const Fill = useInspectorControlsFill(
+ group,
+ __experimentalExposeToChildren
+ );
if ( ! Fill ) {
- warning( `Unknown InspectorControl group "${ group }" provided.` );
- return null;
- }
- if ( ! isDisplayed ) {
return null;
}
diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js
index 01ac32b256500..65e2308b9efa6 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.native.js
+++ b/packages/block-editor/src/components/inspector-controls/fill.native.js
@@ -8,27 +8,24 @@ import { View } from 'react-native';
*/
import { Children } from '@wordpress/element';
import { BottomSheetConsumer } from '@wordpress/components';
-import warning from '@wordpress/warning';
/**
* Internal dependencies
*/
-import groups from './groups';
-import { useBlockEditContext } from '../block-edit/context';
import { BlockSettingsButton } from '../block-settings';
+import useInspectorControlsFill from './hook';
export default function InspectorControlsFill( {
- children,
__experimentalGroup: group = 'default',
+ __experimentalExposeToChildren = false,
+ children,
...props
} ) {
- const { isSelected } = useBlockEditContext();
- const Fill = groups[ group ]?.Fill;
+ const Fill = useInspectorControlsFill(
+ group,
+ __experimentalExposeToChildren
+ );
if ( ! Fill ) {
- warning( `Unknown InspectorControl group "${ group }" provided.` );
- return null;
- }
- if ( ! isSelected ) {
return null;
}
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index a989132afd4c7..94fa9dc26d59b 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -5,10 +5,12 @@ import { createSlotFill } from '@wordpress/components';
const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsParent = createSlotFill( 'InspectorControlsParent' );
const groups = {
default: InspectorControlsDefault,
advanced: InspectorControlsAdvanced,
+ parent: InspectorControlsParent,
};
export default groups;
diff --git a/packages/block-editor/src/components/inspector-controls/hook.js b/packages/block-editor/src/components/inspector-controls/hook.js
new file mode 100644
index 0000000000000..db37a7cb5f168
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls/hook.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import groups from './groups';
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit/context';
+import useDisplayBlockControls from '../use-display-block-controls';
+
+export default function useInspectorControlsFill( group, exposeToChildren ) {
+ const isDisplayed = useDisplayBlockControls();
+ const { clientId } = useBlockEditContext();
+ const isParentDisplayed = useSelect(
+ ( select ) => {
+ const { getBlockName, hasSelectedInnerBlock } = select(
+ blockEditorStore
+ );
+ const { hasBlockSupport } = select( blocksStore );
+ return (
+ exposeToChildren &&
+ hasBlockSupport(
+ getBlockName( clientId ),
+ '__experimentalExposeControlsToChildren',
+ false
+ ) &&
+ hasSelectedInnerBlock( clientId )
+ );
+ },
+ [ exposeToChildren, clientId ]
+ );
+
+ if ( ! groups[ group ] ) {
+ warning( `Unknown InspectorControls group "${ group }" provided.` );
+ return null;
+ }
+ if ( isDisplayed ) {
+ return groups[ group ].Fill;
+ }
+ if ( isParentDisplayed ) {
+ return groups.parent.Fill;
+ }
+ return null;
+}
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index cd4a10b171adb..1cc0f0fb4d8fa 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -166,7 +166,7 @@ export function SocialLinksEdit( props ) {
) }
-
+