Use fillProps for filtering contentOnly block tools

jeryj · jeryj · commit df2028fe6d9b · 2025-09-05T08:46:44.000-05:00
diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js
@@ -11,7 +11,6 @@ import { Children } from '@wordpress/element';
  * Internal dependencies
  */
 import useBlockControlsFill from './hook';
-import { useBlockEditingMode } from '../block-editing-mode';
 
 export default function BlockControlsFill( {
 	group = 'default',
@@ -23,40 +22,39 @@ export default function BlockControlsFill( {
 		group,
 		__experimentalShareWithChildBlocks
 	);
-	const blockEditingMode = useBlockEditingMode();
 
 	if ( ! Fill ) {
 		return null;
 	}
 
-	// Filter children in content-only mode
-	let filteredChildren = children;
-	if ( blockEditingMode === 'contentOnly' ) {
-		const childrenArray = Children.toArray( children );
-		filteredChildren = childrenArray.filter( ( child ) => {
-			return child?.props?.category === 'content';
-		} );
-	}
-
-	const innerMarkup = (
-		<>
-			{ group === 'default' && <ToolbarGroup controls={ controls } /> }
-			{ filteredChildren }
-		</>
-	);
-
 	return (
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
 					// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
 					// that should wrap the fill markup.
-					const { forwardedContext = [] } = fillProps;
+					const { forwardedContext = [], shouldRender = () => true } =
+						fillProps;
+
+					// Filter children based on shouldRender callback
+					const childrenArray = Children.toArray( children );
+					const filteredChildren =
+						childrenArray.filter( shouldRender );
+
+					const filteredMarkup = (
+						<>
+							{ group === 'default' && (
+								<ToolbarGroup controls={ controls } />
+							) }
+							{ filteredChildren }
+						</>
+					);
+
 					return forwardedContext.reduce(
 						( inner, [ Provider, props ] ) => (
 							<Provider { ...props }>{ inner }</Provider>
 						),
-						innerMarkup
+						filteredMarkup
 					);
 				} }
 			</Fill>
diff --git a/packages/block-editor/src/components/block-controls/slot.js b/packages/block-editor/src/components/block-controls/slot.js
@@ -15,20 +15,33 @@ import warning from '@wordpress/warning';
  */
 import groups from './groups';
 import { unlock } from '../../lock-unlock';
+import { useBlockEditingMode } from '../block-editing-mode';
 
 const { ComponentsContext } = unlock( privateApis );
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const toolbarState = useContext( ToolbarContext );
 	const contextState = useContext( ComponentsContext );
+
+	// Get the block editing mode for the current block
+	const blockEditingMode = useBlockEditingMode();
+
 	const fillProps = useMemo(
 		() => ( {
 			forwardedContext: [
 				[ ToolbarContext.Provider, { value: toolbarState } ],
 				[ ComponentsContext.Provider, { value: contextState } ],
 			],
+			shouldRender: ( element ) => {
+				// In content-only mode, only render elements with category="content"
+				if ( blockEditingMode === 'contentOnly' ) {
+					return element?.props?.category === 'content';
+				}
+				// In other modes, render all elements
+				return true;
+			},
 		} ),
-		[ toolbarState, contextState ]
+		[ toolbarState, contextState, blockEditingMode ]
 	);
 
 	const slotFill = groups[ group ];
