From d18c7294c1c273b6dddd780ebda1f6be1915e673 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Thu, 15 Aug 2024 10:34:35 +0530 Subject: [PATCH 1/4] Update the letterCase typogrpahy panel to use toggleGroupOption component --- .../segmented-text-control/index.js | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js index 28f049bfb40ec9..fce3cc3a39d2b2 100644 --- a/packages/block-editor/src/components/segmented-text-control/index.js +++ b/packages/block-editor/src/components/segmented-text-control/index.js @@ -6,7 +6,10 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { BaseControl, Button } from '@wordpress/components'; +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, +} from '@wordpress/components'; /** * @typedef {Object} Option @@ -41,22 +44,27 @@ export default function SegmentedTextControl( { className ) } > - - { label } -
- { options.map( ( option ) => { - return ( -
); From 4206c46d299a8d1228166d347aadbf5c71ea1863 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Thu, 15 Aug 2024 19:03:51 +0530 Subject: [PATCH 2/4] Remove unecessary style for segmented text control and match height with components --- .../src/components/segmented-text-control/index.js | 1 + .../src/components/segmented-text-control/style.scss | 10 ---------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js index fce3cc3a39d2b2..c1534287dc5d52 100644 --- a/packages/block-editor/src/components/segmented-text-control/index.js +++ b/packages/block-editor/src/components/segmented-text-control/index.js @@ -47,6 +47,7 @@ export default function SegmentedTextControl( {
{ diff --git a/packages/block-editor/src/components/segmented-text-control/style.scss b/packages/block-editor/src/components/segmented-text-control/style.scss index 7a4a3bbea7cb33..95c179f65ba3d8 100644 --- a/packages/block-editor/src/components/segmented-text-control/style.scss +++ b/packages/block-editor/src/components/segmented-text-control/style.scss @@ -2,14 +2,4 @@ border: 0; margin: 0; padding: 0; - - .block-editor-segmented-text-control__buttons { - // 4px of padding makes the row 40px high, same as an input. - padding: $grid-unit-05 0; - display: flex; - } - - .components-button.has-icon { - margin-right: $grid-unit-05; - } } From 6b0f5a3ea36737fa4f62de7c057d54ff603502a3 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Fri, 16 Aug 2024 09:33:26 +0530 Subject: [PATCH 3/4] Remove SegmentedTextControl component and use toggleControl --- .../segmented-text-control/index.js | 72 ------------------- .../segmented-text-control/style.scss | 5 -- .../text-alignment-control/index.js | 30 +++++--- .../text-decoration-control/index.js | 30 +++++--- .../text-transform-control/index.js | 30 +++++--- .../components/writing-mode-control/index.js | 30 +++++--- packages/block-editor/src/style.scss | 1 - 7 files changed, 84 insertions(+), 114 deletions(-) delete mode 100644 packages/block-editor/src/components/segmented-text-control/index.js delete mode 100644 packages/block-editor/src/components/segmented-text-control/style.scss diff --git a/packages/block-editor/src/components/segmented-text-control/index.js b/packages/block-editor/src/components/segmented-text-control/index.js deleted file mode 100644 index c1534287dc5d52..00000000000000 --- a/packages/block-editor/src/components/segmented-text-control/index.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - -/** - * WordPress dependencies - */ -import { - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, -} from '@wordpress/components'; - -/** - * @typedef {Object} Option - * @property {string} label The label of the option. - * @property {string} value The value of the option. - * @property {string} icon The icon of the option. - */ - -/** - * Control to facilitate selecting a text style from a set of options. - * - * @param {Object} props Component props. - * @param {string} props.label A label for the option. - * @param {string} props.value Currently selected value. - * @param {Function} props.onChange Callback to handle onChange. - * @param {Option[]} props.options Array of options to display. - * @param {string} props.className Additional class name to apply. - * - * @return {Element} Element to render. - */ -export default function SegmentedTextControl( { - label, - value, - options, - onChange, - className, -} ) { - return ( -
-
- { - onChange( newValue ); - } } - value={ value } - > - { options.map( ( option ) => { - return ( - - ); - } ) } - -
-
- ); -} diff --git a/packages/block-editor/src/components/segmented-text-control/style.scss b/packages/block-editor/src/components/segmented-text-control/style.scss deleted file mode 100644 index 95c179f65ba3d8..00000000000000 --- a/packages/block-editor/src/components/segmented-text-control/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.block-editor-segmented-text-control { - border: 0; - margin: 0; - padding: 0; -} diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js index 88a6fe274ea09b..65d6da6066eca7 100644 --- a/packages/block-editor/src/components/text-alignment-control/index.js +++ b/packages/block-editor/src/components/text-alignment-control/index.js @@ -14,11 +14,10 @@ import { alignJustify, } from '@wordpress/icons'; import { useMemo } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import SegmentedTextControl from '../segmented-text-control'; +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, +} from '@wordpress/components'; const TEXT_ALIGNMENT_OPTIONS = [ { @@ -75,17 +74,30 @@ export default function TextAlignmentControl( { } return ( - { onChange( newValue === value ? undefined : newValue ); } } - /> + value={ value } + > + { validOptions.map( ( option ) => { + return ( + + ); + } ) } + ); } diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js index d06632afdbb3ca..cec3e1f171e27a 100644 --- a/packages/block-editor/src/components/text-decoration-control/index.js +++ b/packages/block-editor/src/components/text-decoration-control/index.js @@ -8,11 +8,10 @@ import clsx from 'clsx'; */ import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import SegmentedTextControl from '../segmented-text-control'; +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, +} from '@wordpress/components'; const TEXT_DECORATIONS = [ { @@ -48,17 +47,30 @@ export default function TextDecorationControl( { className, } ) { return ( - { onChange( newValue === value ? undefined : newValue ); } } - /> + value={ value } + > + { TEXT_DECORATIONS.map( ( option ) => { + return ( + + ); + } ) } + ); } diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js index f448a55ed946c3..d01cf72bdc1a64 100644 --- a/packages/block-editor/src/components/text-transform-control/index.js +++ b/packages/block-editor/src/components/text-transform-control/index.js @@ -13,11 +13,10 @@ import { formatLowercase, formatUppercase, } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import SegmentedTextControl from '../segmented-text-control'; +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, +} from '@wordpress/components'; const TEXT_TRANSFORMS = [ { @@ -54,17 +53,30 @@ const TEXT_TRANSFORMS = [ */ export default function TextTransformControl( { className, value, onChange } ) { return ( - { onChange( newValue === value ? undefined : newValue ); } } - /> + value={ value } + > + { TEXT_TRANSFORMS.map( ( option ) => { + return ( + + ); + } ) } + ); } diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js index 7732f54b1569a7..29db2e01f6f104 100644 --- a/packages/block-editor/src/components/writing-mode-control/index.js +++ b/packages/block-editor/src/components/writing-mode-control/index.js @@ -8,11 +8,10 @@ import clsx from 'clsx'; */ import { __, isRTL } from '@wordpress/i18n'; import { textHorizontal, textVertical } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import SegmentedTextControl from '../segmented-text-control'; +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, +} from '@wordpress/components'; const WRITING_MODES = [ { @@ -39,14 +38,27 @@ const WRITING_MODES = [ */ export default function WritingModeControl( { className, value, onChange } ) { return ( - { onChange( newValue === value ? undefined : newValue ); } } - /> + value={ value } + > + { WRITING_MODES.map( ( option ) => { + return ( + + ); + } ) } + ); } diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 47b87bb50918df..feaabbbda94426 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -40,7 +40,6 @@ @import "./components/multi-selection-inspector/style.scss"; @import "./components/responsive-block-control/style.scss"; @import "./components/rich-text/style.scss"; -@import "./components/segmented-text-control/style.scss"; @import "./components/skip-to-selected-block/style.scss"; @import "./components/tabbed-sidebar/style.scss"; @import "./components/tool-selector/style.scss"; From 42889a2b4c51856158fa0a0838c2487a9091901f Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Fri, 16 Aug 2024 09:37:59 +0530 Subject: [PATCH 4/4] Reduce the diff change in the PR --- .../block-editor/src/components/text-alignment-control/index.js | 2 +- .../src/components/text-decoration-control/index.js | 2 +- .../block-editor/src/components/text-transform-control/index.js | 2 +- .../block-editor/src/components/writing-mode-control/index.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js index 65d6da6066eca7..6eeaad784db0f0 100644 --- a/packages/block-editor/src/components/text-alignment-control/index.js +++ b/packages/block-editor/src/components/text-alignment-control/index.js @@ -83,10 +83,10 @@ export default function TextAlignmentControl( { 'block-editor-text-alignment-control', className ) } + value={ value } onChange={ ( newValue ) => { onChange( newValue === value ? undefined : newValue ); } } - value={ value } > { validOptions.map( ( option ) => { return ( diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js index cec3e1f171e27a..720f3d2d9558eb 100644 --- a/packages/block-editor/src/components/text-decoration-control/index.js +++ b/packages/block-editor/src/components/text-decoration-control/index.js @@ -56,10 +56,10 @@ export default function TextDecorationControl( { 'block-editor-text-decoration-control', className ) } + value={ value } onChange={ ( newValue ) => { onChange( newValue === value ? undefined : newValue ); } } - value={ value } > { TEXT_DECORATIONS.map( ( option ) => { return ( diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js index d01cf72bdc1a64..a3183e630c328a 100644 --- a/packages/block-editor/src/components/text-transform-control/index.js +++ b/packages/block-editor/src/components/text-transform-control/index.js @@ -62,10 +62,10 @@ export default function TextTransformControl( { className, value, onChange } ) { 'block-editor-text-transform-control', className ) } + value={ value } onChange={ ( newValue ) => { onChange( newValue === value ? undefined : newValue ); } } - value={ value } > { TEXT_TRANSFORMS.map( ( option ) => { return ( diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js index 29db2e01f6f104..bffccfd579c6b0 100644 --- a/packages/block-editor/src/components/writing-mode-control/index.js +++ b/packages/block-editor/src/components/writing-mode-control/index.js @@ -44,10 +44,10 @@ export default function WritingModeControl( { className, value, onChange } ) { __next40pxDefaultSize label={ __( 'Orientation' ) } className={ clsx( 'block-editor-writing-mode-control', className ) } + value={ value } onChange={ ( newValue ) => { onChange( newValue === value ? undefined : newValue ); } } - value={ value } > { WRITING_MODES.map( ( option ) => { return (