Skip to content

Icon block: Move flip controls to toolbar group. #79192

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
Mamaduka merged 3 commits into from
Jun 15, 2026
Merged

Icon block: Move flip controls to toolbar group. #79192

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc5521a
Icon block: Move flip controls to toolbar group.
jasmussen Jun 15, 2026
5f2f527
Remove toolbargroup.
jasmussen Jun 15, 2026
0a38a8a
Consolidate same control groups
Mamaduka Jun 15, 2026
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
144 changes: 70 additions & 74 deletions packages/block-library/src/icon/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
DropdownMenu,
TextControl,
ToolbarButton,
ToolbarGroup,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
Expand Down Expand Up @@ -102,83 +101,80 @@ export function Edit( { attributes, setAttributes } ) {

const blockControls = (
<>
<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
<ToolbarGroup>
{ icon && (
<BlockControls group="block">
<ToolbarButton
icon={ flipHorizontalIcon }
label={ __( 'Flip horizontal' ) }
isPressed={ flipHorizontal }
onClick={ () =>
setAttributes( {
flipHorizontal: ! flipHorizontal,
} )
}
/>
<ToolbarButton
icon={ flipVerticalIcon }
label={ __( 'Flip vertical' ) }
isPressed={ flipVertical }
onClick={ () =>
setAttributes( {
flipVertical: ! flipVertical,
} )
}
/>
<ToolbarButton
onClick={ () => {
setInserterOpen( true );
icon={ rotateRight }
label={ __( 'Rotate' ) }
onClick={ () =>
setAttributes( {
rotation: ( ( rotation || 0 ) + 90 ) % 360,
} )
}
/>
</BlockControls>
) }
<BlockControls group="other">
<ToolbarButton
onClick={ () => {
setInserterOpen( true );
} }
>
{ icon ? __( 'Replace' ) : __( 'Choose icon' ) }
</ToolbarButton>
{ isContentOnlyMode && icon && (
// Add some extra controls for content attributes when content only mode is active.
// With content only mode active, the inspector is hidden, so users need another way
// to edit these attributes.
<DropdownMenu
icon=""
toggleProps={ {
as: ToolbarButton,
} }
popoverProps={ {
className: 'is-alternate',
} }
text={ __( 'Label' ) }
>
{ icon ? __( 'Replace' ) : __( 'Choose icon' ) }
</ToolbarButton>
</ToolbarGroup>
{ () => (
<TextControl
className="wp-block-icon__toolbar-content"
label={ __( 'Label' ) }
value={ ariaLabel || '' }
onChange={ ( value ) =>
setAttributes( {
ariaLabel: value,
} )
}
help={ __(
'Briefly describe the icon to help screen reader users. Leave blank for decorative icons.'
) }
__next40pxDefaultSize
/>
) }
</DropdownMenu>
) }
</BlockControls>
{ icon && (
<BlockControls group="other">
<ToolbarGroup>
<ToolbarButton
icon={ flipHorizontalIcon }
label={ __( 'Flip horizontal' ) }
isPressed={ flipHorizontal }
onClick={ () =>
setAttributes( {
flipHorizontal: ! flipHorizontal,
} )
}
/>
<ToolbarButton
icon={ flipVerticalIcon }
label={ __( 'Flip vertical' ) }
isPressed={ flipVertical }
onClick={ () =>
setAttributes( {
flipVertical: ! flipVertical,
} )
}
/>
<ToolbarButton
icon={ rotateRight }
label={ __( 'Rotate' ) }
onClick={ () =>
setAttributes( {
rotation: ( ( rotation || 0 ) + 90 ) % 360,
} )
}
/>
</ToolbarGroup>
</BlockControls>
) }
{ isContentOnlyMode && icon && (
// Add some extra controls for content attributes when content only mode is active.
// With content only mode active, the inspector is hidden, so users need another way
// to edit these attributes.
<BlockControls group="other">
<ToolbarGroup>
<DropdownMenu
icon=""
popoverProps={ {
className: 'is-alternate',
} }
text={ __( 'Label' ) }
>
{ () => (
<TextControl
className="wp-block-icon__toolbar-content"
label={ __( 'Label' ) }
value={ ariaLabel || '' }
onChange={ ( value ) =>
setAttributes( { ariaLabel: value } )
}
help={ __(
'Briefly describe the icon to help screen reader users. Leave blank for decorative icons.'
) }
__next40pxDefaultSize
/>
) }
</DropdownMenu>
</ToolbarGroup>
</BlockControls>
) }
</>
);
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
Expand Down
Loading