Skip to content

Block Editor: Simplify InspectorControlsFill rendering logic #81286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
im3dabasia merged 1 commit into from
Aug 7, 2026
+22 −30
Merged

Block Editor: Simplify InspectorControlsFill rendering logic #81286

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 22 additions & 30 deletions packages/block-editor/src/components/inspector-controls/fill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ export default function InspectorControlsFill( {
}

const context = useBlockEditContext();
const isSelectedBlock = context[ mayDisplayControlsKey ];
const isPatternEditing = context[ mayDisplayPatternEditingControlsKey ];
const isInListViewTree = context[ isInListViewBlockSupportTreeKey ];

const Fill = groups[ group ]?.Fill;
if ( ! Fill ) {
Expand All @@ -57,7 +60,7 @@ export default function InspectorControlsFill( {
// - All blocks can show pattern editing groups (content, list).
// - Template parts can show any inspector group.
// - Other blocks cannot show a settings tab.
if ( context[ mayDisplayPatternEditingControlsKey ] ) {
if ( isPatternEditing ) {
// Template parts have also historically supported
// any block inspector groups for extenders. The settings
// tab is also used by core for the 'Design' panel. Specifically
Expand All @@ -69,49 +72,38 @@ export default function InspectorControlsFill( {
if ( ! canShowGroup ) {
return null;
}
}

// Outside pattern editing, use the standard rules for displaying controls.
if (
! context[ mayDisplayPatternEditingControlsKey ] &&
! context[ mayDisplayControlsKey ]
) {
} else if ( ! isSelectedBlock ) {
// Outside pattern editing, use the standard rules for displaying controls.
return null;
}

// When inside a section with a parent that has ListView block support,
// content controls are rendered as part of the ListView via a popover.
if (
group === 'content' &&
!! context[ isInListViewBlockSupportTreeKey ] &&
!! context[ mayDisplayPatternEditingControlsKey ]
) {
if ( context[ mayDisplayControlsKey ] ) {
return (
<StyleProvider document={ document }>
<ListViewContentFill>{ children }</ListViewContentFill>
</StyleProvider>
);
}
const rendersInListView =
group === 'content' && isPatternEditing && isInListViewTree;

// When using the ListView fill, only render controls for the selected
// block. Other blocks return `null`.
// When using the ListView fill, only render controls for the selected
// block. Other blocks return `null`.
if ( rendersInListView && ! isSelectedBlock ) {
return null;
}

return (
<StyleProvider document={ document }>
<Fill>
{ ( fillProps ) => {
return (
{ rendersInListView ? (
<ListViewContentFill>{ children }</ListViewContentFill>
) : (
<Fill>
{ ( fillProps ) => (
<ToolsPanelInspectorControl
fillProps={ fillProps }
children={ children }
resetAllFilter={ resetAllFilter }
/>
);
} }
</Fill>
>
{ children }
</ToolsPanelInspectorControl>
) }
</Fill>
) }
</StyleProvider>
);
}
Expand Down
Loading