close
Skip to content

Image Block: Add content tab and reorganize inspector controls #74201

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
youknowriad merged 5 commits into from
Dec 26, 2025
Merged

Image Block: Add content tab and reorganize inspector controls #74201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9a793b4
Image Block: Add content tab and reorganize inspector controls
youknowriad Dec 24, 2025
f75921b
Use useSelect getter
youknowriad Dec 24, 2025
3dc1062
Fix reset behavior
youknowriad Dec 25, 2025
bdddac1
Fix e2e tests
youknowriad Dec 25, 2025
e93c110
Hide the settings panel from the settings tab if empty
youknowriad Dec 25, 2025
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
1 change: 1 addition & 0 deletions packages/block-editor/src/components/inspector-controls-tabs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export default function InspectorControlsTabs( {
/>
</Tabs.TabPanel>
<Tabs.TabPanel tabId={ TAB_CONTENT.name } focusable={ false }>
<InspectorControls.Slot group="content" />
<ContentTab
rootClientId={ clientId }
contentClientIds={ contentClientIds }
Expand Down
22 changes: 17 additions & 5 deletions packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default function useInspectorControlsTabs(
bindings: bindingsGroup,
border: borderGroup,
color: colorGroup,
content: contentGroup,
default: defaultGroup,
dimensions: dimensionsGroup,
list: listGroup,
Expand All @@ -52,6 +53,10 @@ export default function useInspectorControlsTabs(
const listFills = useSlotFills( listGroup.name );
const hasListFills = !! listFills && listFills.length;

// Content Tab: If there are any fills for the content group add that tab.
const contentFills = useSlotFills( contentGroup.name );
const hasContentFills = !! contentFills && contentFills.length;

// Styles Tab: Add this tab if there are any fills for block supports
// e.g. border, color, spacing, typography, etc.
const styleFills = [
Expand Down Expand Up @@ -79,21 +84,28 @@ export default function useInspectorControlsTabs(
...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
];

const hasContentTab = !! (
contentClientIds && contentClientIds.length > 0
);
const hasContentTab =
hasContentFills ||
!! ( contentClientIds && contentClientIds.length > 0 );

const hasListTab = hasListFills && ! isSectionBlock;

// Add the tabs in the order that they will default to if available.
// List View > Content > Settings > Styles.
if ( hasListFills && ! isSectionBlock ) {
if ( hasListTab ) {
tabs.push( TAB_LIST_VIEW );
}

if ( hasContentTab ) {
tabs.push( TAB_CONTENT );
}

if ( settingsFills.length && ! isSectionBlock ) {
if (
( settingsFills.length ||
// Advanded fills who up in settings tab if available or they blend into the default tab, if there's only one tab.
( advancedFills.length && ( hasContentTab || hasListTab ) ) ) &&
! isSectionBlock
) {
tabs.push( TAB_SETTINGS );
}

Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/inspector-controls/groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const InspectorControlsTypography = createSlotFill(
const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' );
const InspectorControlsContent = createSlotFill( 'InspectorControlsContent' );

const groups = {
default: InspectorControlsDefault,
Expand All @@ -30,6 +31,7 @@ const groups = {
bindings: InspectorControlsBindings,
border: InspectorControlsBorder,
color: InspectorControlsColor,
content: InspectorControlsContent,
dimensions: InspectorControlsDimensions,
effects: InspectorControlsEffects,
filter: InspectorControlsFilter,
Expand Down
18 changes: 16 additions & 2 deletions packages/block-editor/src/components/media-replace-flow/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -55,6 +60,7 @@ const MediaReplaceFlow = ( {
multiple = false,
addToGallery,
handleUpload = true,
variant,
popoverProps,
renderToggle,
className,
Expand Down Expand Up @@ -148,11 +154,19 @@ const MediaReplaceFlow = ( {

const gallery = multiple && onlyAllowsImages();

const mergedPopoverProps = {
...popoverProps,
variant,
};

return (
<Dropdown
popoverProps={ popoverProps }
popoverProps={ mergedPopoverProps }
className={ className }
contentClassName="block-editor-media-replace-flow__options"
contentClassName={ clsx(
'block-editor-media-replace-flow__options',
variant && `is-variant-${ variant }`
) }
renderToggle={ ( { isOpen, onToggle } ) => {
if ( renderToggle ) {
return renderToggle( {
Expand Down
9 changes: 8 additions & 1 deletion packages/block-editor/src/components/media-replace-flow/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,18 @@
}

.block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
border-top: $border-width solid $gray-900;
border-top: $border-width solid $gray-300;
margin-top: $grid-unit-10;
padding-bottom: $grid-unit-10;
}

// Toolbar variant: Dark border (high contrast)
.block-editor-media-replace-flow__options.is-variant-toolbar {
.block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
border-top-color: $gray-900;
}
}

.block-editor-media-flow__url-input {
margin-right: -$grid-unit-10;
margin-left: -$grid-unit-10;
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/audio/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ function AudioEdit( {
onSelectURL={ onSelectURL }
onError={ onUploadError }
onReset={ () => onSelectAudio( undefined ) }
variant="toolbar"
/>
</BlockControls>
) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/cover/edit/block-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export default function CoverBlockControls( {
useFeaturedImage={ useFeaturedImage }
name={ ! url ? __( 'Add media' ) : __( 'Replace' ) }
onReset={ onClearMedia }
variant="toolbar"
>
{ ( { onClose } ) => (
<MenuItem
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use "@wordpress/base-styles/mixins" as *;
@use "./utils/media-control.scss" as *;
@use "./archives/editor.scss" as *;
@use "./audio/editor.scss" as *;
@use "./avatar/editor.scss" as *;
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -907,6 +907,7 @@ export default function GalleryEdit( props ) {
.filter( ( image ) => image.id )
.map( ( image ) => image.id ) }
addToGallery={ hasImageIds }
variant="toolbar"
/>
</BlockControls>
) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/image/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,3 +158,4 @@ figure.wp-block-image:not(.wp-block) {
// Corresponds to the size of the textarea in the block inspector.
width: 250px;
}

87 changes: 59 additions & 28 deletions packages/block-library/src/image/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import { unlock } from '../lock-unlock';
import { createUpgradedEmbedBlock } from '../embed/util';
import { isExternalImage } from './edit';
import { Caption } from '../utils/caption';
import { MediaControl } from '../utils/media-control';
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
import {
MIN_SIZE,
Expand Down Expand Up @@ -549,6 +550,7 @@ export default function Image( {
isResizable &&
( SIZED_LAYOUTS.includes( parentLayoutType ) ? (
<DimensionsTool
panelId={ clientId }
value={ { aspectRatio } }
onChange={ ( { aspectRatio: newAspectRatio } ) => {
setAttributes( {
Expand All @@ -561,6 +563,7 @@ export default function Image( {
/>
) : (
<DimensionsTool
panelId={ clientId }
value={ { width, height, scale, aspectRatio } }
onChange={ ( {
width: newWidth,
Expand Down Expand Up @@ -589,30 +592,13 @@ export default function Image( {
/>
) );

const resetAll = () => {
const resetSettings = () => {
setAttributes( {
alt: undefined,
width: undefined,
height: undefined,
scale: undefined,
aspectRatio: undefined,
lightbox: undefined,
} );
updateImage( DEFAULT_MEDIA_SIZE_SLUG );
};

const sizeControls = (
<InspectorControls>
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ resetAll }
dropdownMenuProps={ dropdownMenuProps }
>
{ dimensionsControl }
</ToolsPanel>
</InspectorControls>
);

const arePatternOverridesEnabled =
metadata?.bindings?.__default?.source === 'core/pattern-overrides';

Expand Down Expand Up @@ -721,6 +707,7 @@ export default function Image( {
onError={ onUploadError }
name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
onReset={ () => onSelectImage( undefined ) }
variant="toolbar"
/>
</BlockControls>
);
Expand Down Expand Up @@ -787,12 +774,38 @@ export default function Image( {
/>
</BlockControls>
) }
<InspectorControls>
<InspectorControls group="content">
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ resetAll }
label={ __( 'Media' ) }
resetAll={ () => onSelectImage( undefined ) }
dropdownMenuProps={ dropdownMenuProps }
>
{ isSingleSelected && ! lockUrlControls && (
<ToolsPanelItem
label={ __( 'Image' ) }
hasValue={ () => !! url }
onDeselect={ () => onSelectImage( undefined ) }
Copy link
Copy Markdown
Member

@SirLouen SirLouen Dec 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@youknowriad

It's not working for me 🤔

74201.mp4

Check PG: https://playground.wordpress.net/?gutenberg-branch=trunk&gutenberg-pr=74201

Copy link
Copy Markdown
Contributor Author

@youknowriad youknowriad Dec 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is weird, it's definitely working for me.

Copy link
Copy Markdown
Contributor Author

@youknowriad youknowriad Dec 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works for me, even in your playground link, so I think maybe when you tested the playground was outdated or something.

isShownByDefault
>
<MediaControl
mediaId={ id }
mediaUrl={ url }
alt={ alt }
filename={
image?.media_details?.sizes?.full?.file ||
image?.slug ||
getFilename( url )
}
allowedTypes={ ALLOWED_MEDIA_TYPES }
onSelect={ onSelectImage }
onSelectURL={ onSelectURL }
onError={ onUploadError }
onReset={ () => onSelectImage( undefined ) }
isUploading={ !! temporaryURL }
emptyLabel={ __( 'Add image' ) }
/>
</ToolsPanelItem>
) }
{ isSingleSelected && (
<ToolsPanelItem
label={ __( 'Alternative text' ) }
Expand Down Expand Up @@ -834,17 +847,36 @@ export default function Image( {
/>
</ToolsPanelItem>
) }
{ dimensionsControl }
{ !! imageSizeOptions.length && (
</ToolsPanel>
</InspectorControls>
<InspectorControls
group="dimensions"
resetAllFilter={ ( attrs ) => ( {
...attrs,
aspectRatio: undefined,
width: undefined,
height: undefined,
scale: undefined,
} ) }
>
{ dimensionsControl }
</InspectorControls>
{ !! imageSizeOptions.length && (
<InspectorControls>
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ resetSettings }
dropdownMenuProps={ dropdownMenuProps }
>
<ResolutionTool
value={ sizeSlug }
defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
onChange={ updateImage }
options={ imageSizeOptions }
/>
) }
</ToolsPanel>
</InspectorControls>
</ToolsPanel>
</InspectorControls>
) }
<InspectorControls group="advanced">
<TextControl
__next40pxDefaultSize
Expand Down Expand Up @@ -1086,8 +1118,7 @@ export default function Image( {
return (
<>
{ mediaReplaceFlow }
{ /* Add all controls if the image attributes are connected. */ }
{ metadata?.bindings ? controls : sizeControls }
{ controls }
</>
);
}
Expand Down
Loading
Loading