Skip to content

Commit

Permalink
Button: Replace ButtonGroup usage with ToggleGroupControl (WordPress#…
Browse files Browse the repository at this point in the history
…65346)


Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: andreawetzel <awetz583@git.wordpress.org>
  • Loading branch information
7 people authored and yogeshbhutkar committed Dec 18, 2024
1 parent 773e2e0 commit 8850e80
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 34 deletions.
48 changes: 20 additions & 28 deletions packages/block-library/src/button/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ import removeAnchorTag from '../utils/remove-anchor-tag';
import { __ } from '@wordpress/i18n';
import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
import {
Button,
ButtonGroup,
TextControl,
ToolbarButton,
Popover,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';
import {
AlignmentControl,
Expand Down Expand Up @@ -115,46 +115,38 @@ function useEnter( props ) {
}

function WidthPanel( { selectedWidth, setAttributes } ) {
function handleChange( newWidth ) {
// Check if we are toggling the width off
const width = selectedWidth === newWidth ? undefined : newWidth;

// Update attributes.
setAttributes( { width } );
}

return (
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
handleChange( undefined );
} }
resetAll={ () => setAttributes( { width: undefined } ) }
>
<ToolsPanelItem
label={ __( 'Button width' ) }
__nextHasNoMarginBottom
isShownByDefault
hasValue={ () => !! selectedWidth }
onDeselect={ () => handleChange( undefined ) }
onDeselect={ () => setAttributes( { width: undefined } ) }
__nextHasNoMarginBottom
>
<ButtonGroup aria-label={ __( 'Button width' ) }>
<ToggleGroupControl
label={ __( 'Button width' ) }
value={ selectedWidth }
onChange={ ( newWidth ) =>
setAttributes( { width: newWidth } )
}
isBlock
__next40pxDefaultSize
__nextHasNoMarginBottom
>
{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
return (
<Button
<ToggleGroupControlOption
key={ widthValue }
size="small"
variant={
widthValue === selectedWidth
? 'primary'
: undefined
}
onClick={ () => handleChange( widthValue ) }
>
{ widthValue }%
</Button>
value={ widthValue }
label={ `${ widthValue }%` }
/>
);
} ) }
</ButtonGroup>
</ToggleGroupControl>
</ToolsPanelItem>
</ToolsPanel>
);
Expand Down
14 changes: 8 additions & 6 deletions test/e2e/specs/editor/blocks/buttons.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -263,12 +263,14 @@ test.describe( 'Buttons', () => {
await editor.insertBlock( { name: 'core/buttons' } );
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();
await page.click(
`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
);
await page.click(
'role=group[name="Button width"i] >> role=button[name="25%"i]'
);
await page
.getByRole( 'region', { name: 'Editor settings' } )
.getByRole( 'tab', { name: 'Settings' } )
.click();
await page
.getByRole( 'radiogroup', { name: 'Button width' } )
.getByRole( 'radio', { name: '25%' } )
.click();

// Check the content.
const content = await editor.getEditedPostContent();
Expand Down

0 comments on commit 8850e80

Please sign in to comment.