Restores the Fill/Slot logic for the BlockSettingsButton

WordPress · Jul 13, 2023 · 4ed6b7a · 4ed6b7a
1 parent 18ef27f
commit 4ed6b7a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/block-settings/button.native.js b/packages/block-editor/src/components/block-settings/button.native.js
@@ -1,20 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { createSlotFill, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { withDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
 
-const SettingsButton = ( { onOpenBlockSettings } ) => {
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				title={ __( 'Open Settings' ) }
-				icon={ cog }
-				onClick={ onOpenBlockSettings }
-			/>
-		</ToolbarGroup>
-	);
-};
+const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
 
-export default SettingsButton;
+const SettingsButton = ( { openGeneralSidebar } ) => (
+	<ToolbarButton
+		title={ __( 'Open Settings' ) }
+		icon={ cog }
+		onClick={ openGeneralSidebar }
+	/>
+);
+
+const SettingsButtonFill = ( props ) => (
+	<Fill>
+		<SettingsButton { ...props } />
+	</Fill>
+);
+
+const SettingsToolbarButton = withDispatch( ( dispatch ) => {
+	const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+
+	return {
+		openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
+	};
+} )( SettingsButtonFill );
+
+SettingsToolbarButton.Slot = Slot;
+
+export default SettingsToolbarButton;
diff --git a/packages/block-editor/src/components/block-toolbar/index.native.js b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -20,7 +20,7 @@ const REMOVE_EMPY_PARENT_BLOCKS = [
 	'core/social-links',
 ];
 
-export default function BlockToolbar( { anchorNodeRef, onOpenBlockSettings } ) {
+export default function BlockToolbar( { anchorNodeRef } ) {
 	const {
 		rootClientId,
 		blockClientId,
@@ -93,9 +93,15 @@ export default function BlockToolbar( { anchorNodeRef, onOpenBlockSettings } ) {
 		<>
 			{ isValidAndVisual && (
 				<>
-					<BlockSettingsButton
-						onOpenBlockSettings={ onOpenBlockSettings }
-					/>
+					<BlockSettingsButton.Slot>
+						{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
+						{ ( fills = [ null ] ) => {
+							if ( ! fills?.length > 0 ) {
+								return null;
+							}
+							return fills[ 0 ];
+						} }
+					</BlockSettingsButton.Slot>
 
 					<BlockControls.Slot group="block" />
 					<BlockControls.Slot />

diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js
@@ -6,6 +6,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
+import { Children } from '@wordpress/element';
 import { BottomSheetConsumer } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
@@ -15,6 +16,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import groups from './groups';
 import useDisplayBlockControls from '../use-display-block-controls';
+import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
 	children,
@@ -53,6 +55,7 @@ export default function InspectorControlsFill( {
 					</BottomSheetConsumer>
 				}
 			</Fill>
+			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>
 	);
 }
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js
@@ -55,7 +55,6 @@ function HeaderToolbar( {
 	showKeyboardHideButton,
 	insertBlock,
 	onHideKeyboard,
-	onOpenBlockSettings,
 	isRTL,
 	noContentSelected,
 } ) {
@@ -193,10 +192,7 @@ function HeaderToolbar( {
 				<Inserter disabled={ ! showInserter } />
 
 				{ noContentSelected && renderMediaButtons }
-				<BlockToolbar
-					anchorNodeRef={ anchorNodeRef.current }
-					onOpenBlockSettings={ onOpenBlockSettings }
-				/>
+				<BlockToolbar anchorNodeRef={ anchorNodeRef.current } />
 			</ScrollView>
 			{ showKeyboardHideButton && (
 				<ToolbarGroup passedStyle={ showKeyboardButtonStyles }>
@@ -243,7 +239,6 @@ export default compose( [
 	withDispatch( ( dispatch ) => {
 		const { clearSelectedBlock, insertBlock } =
 			dispatch( blockEditorStore );
-		const { openGeneralSidebar } = dispatch( editPostStore );
 		const { togglePostTitleSelection } = dispatch( editorStore );
 
 		return {
@@ -254,9 +249,6 @@ export default compose( [
 				togglePostTitleSelection( false );
 			},
 			insertBlock,
-			onOpenBlockSettings() {
-				openGeneralSidebar( 'edit-post/block' );
-			},
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),