Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Remove the ToggleButtonControl in favor of ToggleGroupControl (#5967)
Browse files Browse the repository at this point in the history 
* Remove the ToggleButtonControl in favor of ToggleGroupControl

* Remove ESLint errors. Use experimental feature as this is low risk

* Fix the 'Expected preceding comment block' ESLint error

Co-authored-by: Luigi Teschio <[email protected]>
  • Loading branch information
@danieldudzic @gigitux
danieldudzic and gigitux authored Apr 11, 2022
1 parent f652740 commit 562a414
Show file tree
Hide file tree
Showing 10 changed files with 189 additions and 352 deletions.
95 changes: 50 additions & 45 deletions assets/js/atomic/blocks/product-elements/image/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,18 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { createInterpolateElement } from '@wordpress/element';
import ToggleButtonControl from '@woocommerce/editor-components/toggle-button-control';
import { getAdminLink } from '@woocommerce/settings';
import {
Disabled,
PanelBody,
ToggleControl,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControl as ToggleGroupControl,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -64,41 +71,40 @@ const Edit = ( { attributes, setAttributes } ) => {
}
/>
{ showSaleBadge && (
<ToggleButtonControl
<ToggleGroupControl
label={ __(
'Sale Badge Alignment',
'woo-gutenberg-products-block'
) }
value={ saleBadgeAlign }
options={ [
{
label: __(
'Left',
'woo-gutenberg-products-block'
),
value: 'left',
},
{
label: __(
'Center',
'woo-gutenberg-products-block'
),
value: 'center',
},
{
label: __(
'Right',
'woo-gutenberg-products-block'
),
value: 'right',
},
] }
onChange={ ( value ) =>
setAttributes( { saleBadgeAlign: value } )
}
/>
>
<ToggleGroupControlOption
value="left"
label={ __(
'Left',
'woo-gutenberg-products-block'
) }
/>
<ToggleGroupControlOption
value="center"
label={ __(
'Center',
'woo-gutenberg-products-block'
) }
/>
<ToggleGroupControlOption
value="right"
label={ __(
'Right',
'woo-gutenberg-products-block'
) }
/>
</ToggleGroupControl>
) }
<ToggleButtonControl
<ToggleGroupControl
label={ __(
'Image Sizing',
'woo-gutenberg-products-block'
Expand All @@ -122,26 +128,25 @@ const Edit = ( { attributes, setAttributes } ) => {
}
) }
value={ imageSizing }
options={ [
{
label: __(
'Full Size',
'woo-gutenberg-products-block'
),
value: 'full-size',
},
{
label: __(
'Cropped',
'woo-gutenberg-products-block'
),
value: 'cropped',
},
] }
onChange={ ( value ) =>
setAttributes( { imageSizing: value } )
}
/>
>
<ToggleGroupControlOption
value="full-size"
label={ __(
'Full Size',
'woo-gutenberg-products-block'
) }
/>
<ToggleGroupControlOption
value="cropped"
label={ __(
'Cropped',
'woo-gutenberg-products-block'
) }
/>
</ToggleGroupControl>
</PanelBody>
</InspectorControls>
<Disabled>
Expand Down
47 changes: 26 additions & 21 deletions assets/js/blocks/active-filters/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,17 @@
*/
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { Disabled, PanelBody, withSpokenMessages } from '@wordpress/components';
import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
import BlockTitle from '@woocommerce/editor-components/block-title';
import ToggleButtonControl from '@woocommerce/editor-components/toggle-button-control';
import {
Disabled,
PanelBody,
withSpokenMessages,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControl as ToggleGroupControl,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -29,35 +36,33 @@ const Edit = ( { attributes, setAttributes } ) => {
'woo-gutenberg-products-block'
) }
>
<ToggleButtonControl
<ToggleGroupControl
label={ __(
'Display Style',
'woo-gutenberg-products-block'
) }
value={ displayStyle }
options={ [
{
label: __(
'List',
'woo-gutenberg-products-block'
),
value: 'list',
},
{
/* translators: "Chips" is a tag-like display style for chosen attributes. */
label: __(
'Chips',
'woo-gutenberg-products-block'
),
value: 'chips',
},
] }
onChange={ ( value ) =>
setAttributes( {
displayStyle: value,
} )
}
/>
>
<ToggleGroupControlOption
value="list"
label={ __(
'List',
'woo-gutenberg-products-block'
) }
/>
<ToggleGroupControlOption
value="chips"
label={ __(
'Chips',
'woo-gutenberg-products-block'
) }
/>
</ToggleGroupControl>
<p>
{ __(
'Heading Level',
Expand Down
86 changes: 42 additions & 44 deletions assets/js/blocks/attribute-filter/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@ import {
BlockControls,
useBlockProps,
} from '@wordpress/block-editor';
import { Icon, category, external } from '@wordpress/icons';
import { SearchListControl } from '@woocommerce/editor-components/search-list-control';
import { mapValues, toArray, sortBy } from 'lodash';
import { getAdminLink, getSetting } from '@woocommerce/settings';
import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
import BlockTitle from '@woocommerce/editor-components/block-title';
import classnames from 'classnames';
import {
Placeholder,
Disabled,
Expand All @@ -16,15 +23,11 @@ import {
Button,
ToolbarGroup,
withSpokenMessages,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControl as ToggleGroupControl,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';
import { Icon, category, external } from '@wordpress/icons';
import { SearchListControl } from '@woocommerce/editor-components/search-list-control';
import { mapValues, toArray, sortBy } from 'lodash';
import { getAdminLink, getSetting } from '@woocommerce/settings';
import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
import BlockTitle from '@woocommerce/editor-components/block-title';
import ToggleButtonControl from '@woocommerce/editor-components/toggle-button-control';
import classnames from 'classnames';

/**
* Internal dependencies
Expand Down Expand Up @@ -121,7 +124,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
'woo-gutenberg-products-block'
) }
>
<ToggleButtonControl
<ToggleGroupControl
label={ __(
'Query Type',
'woo-gutenberg-products-block'
Expand All @@ -138,56 +141,51 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
)
}
value={ queryType }
options={ [
{
label: __(
'And',
'woo-gutenberg-products-block'
),
value: 'and',
},
{
label: __(
'Or',
'woo-gutenberg-products-block'
),
value: 'or',
},
] }
onChange={ ( value ) =>
setAttributes( {
queryType: value,
} )
}
/>
<ToggleButtonControl
>
<ToggleGroupControlOption
value="and"
label={ __(
'And',
'woo-gutenberg-products-block'
) }
/>
<ToggleGroupControlOption
value="or"
label={ __( 'Or', 'woo-gutenberg-products-block' ) }
/>
</ToggleGroupControl>
<ToggleGroupControl
label={ __(
'Display Style',
'woo-gutenberg-products-block'
) }
value={ displayStyle }
options={ [
{
label: __(
'List',
'woo-gutenberg-products-block'
),
value: 'list',
},
{
label: __(
'Dropdown',
'woo-gutenberg-products-block'
),
value: 'dropdown',
},
] }
onChange={ ( value ) =>
setAttributes( {
displayStyle: value,
} )
}
/>
>
<ToggleGroupControlOption
value="list"
label={ __(
'List',
'woo-gutenberg-products-block'
) }
/>
<ToggleGroupControlOption
value="dropdown"
label={ __(
'Dropdown',
'woo-gutenberg-products-block'
) }
/>
</ToggleGroupControl>
<ToggleControl
label={ __(
'Filter button',
Expand Down
Loading

0 comments on commit 562a414

Please sign in to comment.