diff --git a/assets/js/atomic/blocks/product-elements/image/edit.js b/assets/js/atomic/blocks/product-elements/image/edit.js index 1cbd5271249..d1a49967610 100644 --- a/assets/js/atomic/blocks/product-elements/image/edit.js +++ b/assets/js/atomic/blocks/product-elements/image/edit.js @@ -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 @@ -64,41 +71,40 @@ const Edit = ( { attributes, setAttributes } ) => { } /> { showSaleBadge && ( - setAttributes( { saleBadgeAlign: value } ) } - /> + > + + + + ) } - { } ) } 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 } ) } - /> + > + + + diff --git a/assets/js/blocks/active-filters/edit.js b/assets/js/blocks/active-filters/edit.js index 68b5c1449de..848d8e77a68 100644 --- a/assets/js/blocks/active-filters/edit.js +++ b/assets/js/blocks/active-filters/edit.js @@ -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 @@ -29,35 +36,33 @@ const Edit = ( { attributes, setAttributes } ) => { 'woo-gutenberg-products-block' ) } > - setAttributes( { displayStyle: value, } ) } - /> + > + + +

{ __( 'Heading Level', diff --git a/assets/js/blocks/attribute-filter/edit.js b/assets/js/blocks/attribute-filter/edit.js index 3714204106e..273627fe963 100644 --- a/assets/js/blocks/attribute-filter/edit.js +++ b/assets/js/blocks/attribute-filter/edit.js @@ -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, @@ -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 @@ -121,7 +124,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => { 'woo-gutenberg-products-block' ) } > - { ) } value={ queryType } - options={ [ - { - label: __( - 'And', - 'woo-gutenberg-products-block' - ), - value: 'and', - }, - { - label: __( - 'Or', - 'woo-gutenberg-products-block' - ), - value: 'or', - }, - ] } onChange={ ( value ) => setAttributes( { queryType: value, } ) } - /> - + + + + setAttributes( { displayStyle: value, } ) } - /> + > + + + - setAttributes( { showInputFields: value === 'editable', } ) } - /> + > + + + ( { ) } initialOpen > - setAttributes( { isDropdown: value === 'dropdown', } ) } - /> + > + + + ( @@ -106,32 +109,31 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => { /> { attributes.showReviewImage && ( <> - setAttributes( { imageType: value } ) } - /> + > + + + { attributes.imageType === 'reviewer' && ! showAvatars && ( setAttributes( { isDropdown: 'dropdown' === value } ) } - /> -) ); -``` - -## Props - -The component accepts the following props: - -### label - -If this property is added, a label will be generated using label property as the content. - -- Type: `String` -- Required: No - -### help - -If this property is added, a help text will be generated using help property as the content. - -- Type: `String|WPElement` -- Required: No - -### value - -If value is passed, one of the options will have pressed state. -If no value is passed no button will have pressed state. - -- Type: `String` -- Required: No - -### onChange - -A function that receives the selected value (string) as input. - -- Type: `function` -- Required: Yes - -### className - -The class that will be added with `components-base-control` and `components-toggle-button-control` to the classes of the wrapper div. If no className is passed only `components-base-control` and `components-toggle-button-control` are used. - -Type: String -Required: No - -#### options - -An array of objects containing the following properties: -- `label`: (string) The label to be shown to the user. -- `value`: (Object) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected. - -Type: `Array` -Required: No diff --git a/assets/js/editor-components/toggle-button-control/index.js b/assets/js/editor-components/toggle-button-control/index.js deleted file mode 100644 index 5f729ef230a..00000000000 --- a/assets/js/editor-components/toggle-button-control/index.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; -import { BaseControl, ButtonGroup, Button } from '@wordpress/components'; -import { Component } from '@wordpress/element'; -import { withInstanceId } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import './style.scss'; - -class ToggleButtonControl extends Component { - constructor() { - super( ...arguments ); - - this.onClick = this.onClick.bind( this ); - } - - onClick( event ) { - if ( this.props.onChange ) { - this.props.onChange( event.target.value ); - } - } - - render() { - const { - label, - checked, - instanceId, - className, - help, - options, - value, - } = this.props; - const id = `inspector-toggle-button-control-${ instanceId }`; - - let helpLabel; - - if ( help ) { - helpLabel = typeof help === 'function' ? help( checked ) : help; - } - - return ( - - - - { options.map( ( option, index ) => { - const buttonArgs = {}; - - // Change button depending on pressed state. - if ( value === option.value ) { - buttonArgs.isPrimary = true; - buttonArgs[ 'aria-pressed' ] = true; - } else { - buttonArgs.isSecondary = true; - buttonArgs[ 'aria-pressed' ] = false; - } - - return ( - - ); - } ) } - - - ); - } -} - -export default withInstanceId( ToggleButtonControl ); diff --git a/assets/js/editor-components/toggle-button-control/screenshot.png b/assets/js/editor-components/toggle-button-control/screenshot.png deleted file mode 100644 index 8f22082ebd0..00000000000 Binary files a/assets/js/editor-components/toggle-button-control/screenshot.png and /dev/null differ diff --git a/assets/js/editor-components/toggle-button-control/style.scss b/assets/js/editor-components/toggle-button-control/style.scss deleted file mode 100644 index 4394a425251..00000000000 --- a/assets/js/editor-components/toggle-button-control/style.scss +++ /dev/null @@ -1,13 +0,0 @@ -.components-toggle-button-control { - .components-base-control__field { - flex-wrap: wrap; - } - .components-toggle-button-control__label { - width: 100%; - margin-bottom: 8px; - display: block; - } - .components-base-control__help { - margin-top: 0; - } -}