From 79f9b425919ac34735bf3a7f8332f5b163777afe Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 6 Feb 2024 09:13:30 +0900 Subject: [PATCH 1/4] FontSizePicker: Hard deprecate bottom margin --- .../components/src/font-size-picker/README.md | 8 -- .../font-size-picker-toggle-group.tsx | 11 +- .../components/src/font-size-picker/index.tsx | 24 +--- .../font-size-picker/stories/index.story.tsx | 1 - .../components/src/font-size-picker/styles.ts | 7 -- .../src/font-size-picker/test/index.tsx | 115 +++--------------- .../components/src/font-size-picker/types.ts | 4 +- 7 files changed, 24 insertions(+), 146 deletions(-) diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 56391ad0c7c33f..3baf0527d9313e 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -29,7 +29,6 @@ const MyFontSizePicker = () => { return ( { - const { - fontSizes, - value, - __nextHasNoMarginBottom, - __next40pxDefaultSize, - size, - onChange, - } = props; + const { fontSizes, value, __next40pxDefaultSize, size, onChange } = props; return ( ) => { const { - /** Start opting into the new margin-free styles that will become the default in a future version. */ - __nextHasNoMarginBottom = false, __next40pxDefaultSize = false, fallbackFontSize, fontSizes = [], @@ -57,14 +53,6 @@ const UnforwardedFontSizePicker = ( withReset = true, } = props; - if ( ! __nextHasNoMarginBottom ) { - deprecated( 'Bottom margin styles for wp.components.FontSizePicker', { - since: '6.1', - version: '6.4', - hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.', - } ); - } - const units = useCustomUnits( { availableUnits: unitsProp || [ 'px', 'em', 'rem' ], } ); @@ -159,10 +147,7 @@ const UnforwardedFontSizePicker = ( ) } - +
{ !! fontSizes.length && shouldUseSelectControl && ! showCustomValueControl && ( @@ -196,7 +181,6 @@ const UnforwardedFontSizePicker = ( { @@ -243,9 +227,7 @@ const UnforwardedFontSizePicker = ( ) } - +
); }; diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx index 69043278389c75..6ea47742ba783f 100644 --- a/packages/components/src/font-size-picker/stories/index.story.tsx +++ b/packages/components/src/font-size-picker/stories/index.story.tsx @@ -66,7 +66,6 @@ const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( { export const Default: StoryFn< typeof FontSizePicker > = FontSizePickerWithState.bind( {} ); Default.args = { - __nextHasNoMarginBottom: true, disableCustomFontSizes: false, fontSizes: [ { diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index ef8ec8ebb30cb2..f47ca41b51eb71 100644 --- a/packages/components/src/font-size-picker/styles.ts +++ b/packages/components/src/font-size-picker/styles.ts @@ -36,10 +36,3 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )` export const HeaderHint = styled.span` color: ${ COLORS.gray[ 700 ] }; `; - -export const Controls = styled.div< { - __nextHasNoMarginBottom: boolean; -} >` - ${ ( props ) => - ! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` } -`; diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index 0d7816399b3652..9bb3b2d8677b69 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -21,13 +21,7 @@ describe( 'FontSizePicker', () => { async ( { value, expectedValue } ) => { const user = userEvent.setup(); const onChange = jest.fn(); - render( - - ); + render( ); const input = screen.getByLabelText( 'Custom' ); await user.clear( input ); await user.type( input, '80' ); @@ -48,7 +42,6 @@ describe( 'FontSizePicker', () => { const onChange = jest.fn(); render( @@ -99,12 +92,7 @@ describe( 'FontSizePicker', () => { it( 'displays a select control', async () => { const user = userEvent.setup(); - render( - - ); + render( ); await user.click( screen.getByRole( 'button', { name: 'Font size' } ) ); @@ -128,11 +116,7 @@ describe( 'FontSizePicker', () => { 'displays $expectedLabel as label when value is $value', ( { value, expectedLabel } ) => { render( - + ); expect( screen.getByLabelText( expectedLabel ) @@ -158,7 +142,6 @@ describe( 'FontSizePicker', () => { const onChange = jest.fn(); render( { it( 'displays a select control', async () => { const user = userEvent.setup(); - render( - - ); + render( ); await user.click( screen.getByRole( 'button', { name: 'Font size' } ) ); @@ -244,11 +222,7 @@ describe( 'FontSizePicker', () => { 'defaults to $option when value is $value', ( { value, option } ) => { render( - + ); expect( screen.getByRole( 'button', { name: 'Font size' } ) @@ -267,11 +241,7 @@ describe( 'FontSizePicker', () => { 'displays $expectedLabel as label when value is $value', ( { value, expectedLabel } ) => { render( - + ); expect( screen.getByLabelText( expectedLabel ) @@ -315,7 +285,6 @@ describe( 'FontSizePicker', () => { const onChange = jest.fn(); render( { ]; it( 'displays a toggle group control with t-shirt sizes', () => { - render( - - ); + render( ); const options = screen.getAllByRole( 'radio' ); expect( options ).toHaveLength( 5 ); expect( options[ 0 ] ).toHaveTextContent( 'S' ); @@ -394,11 +358,7 @@ describe( 'FontSizePicker', () => { 'displays $expectedLabel as label when value is $value', ( { value, expectedLabel } ) => { render( - + ); expect( screen.getByLabelText( expectedLabel ) @@ -410,11 +370,7 @@ describe( 'FontSizePicker', () => { const user = userEvent.setup(); const onChange = jest.fn(); render( - + ); await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) ); expect( onChange ).toHaveBeenCalledTimes( 1 ); @@ -450,12 +406,7 @@ describe( 'FontSizePicker', () => { ]; it( 'displays a toggle group control with t-shirt sizes', () => { - render( - - ); + render( ); const options = screen.getAllByRole( 'radio' ); expect( options ).toHaveLength( 4 ); expect( options[ 0 ] ).toHaveTextContent( 'S' ); @@ -481,11 +432,7 @@ describe( 'FontSizePicker', () => { 'displays $expectedLabel as label when value is $value', ( { value, expectedLabel } ) => { render( - + ); expect( screen.getByLabelText( expectedLabel ) @@ -511,7 +458,6 @@ describe( 'FontSizePicker', () => { const onChange = jest.fn(); render( @@ -532,7 +478,6 @@ describe( 'FontSizePicker', () => { it( 'defaults to M when value is 16px', () => { render( @@ -546,11 +491,7 @@ describe( 'FontSizePicker', () => { 'has no selection when value is %p', ( value ) => { render( - + ); expect( screen.getByRole( 'radiogroup' ) ).toBeInTheDocument(); expect( @@ -565,11 +506,7 @@ describe( 'FontSizePicker', () => { const user = userEvent.setup(); const onChange = jest.fn(); render( - + ); await user.click( screen.getByRole( 'button', { name: 'Font size' } ) @@ -584,13 +521,7 @@ describe( 'FontSizePicker', () => { function commonTests( fontSizes: FontSize[] ) { it( 'shows custom input when value is unknown', () => { - render( - - ); + render( ); expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument(); } ); @@ -598,11 +529,7 @@ describe( 'FontSizePicker', () => { const user = userEvent.setup(); const onChange = jest.fn(); render( - + ); await user.click( screen.getByRole( 'button', { name: 'Set custom size' } ) @@ -615,7 +542,6 @@ describe( 'FontSizePicker', () => { it( 'does not allow custom values when disableCustomFontSizes is set', () => { render( @@ -627,12 +553,7 @@ describe( 'FontSizePicker', () => { it( 'does not display a slider by default', async () => { const user = userEvent.setup(); - render( - - ); + render( ); await user.click( screen.getByRole( 'button', { name: 'Set custom size' } ) ); @@ -646,7 +567,6 @@ describe( 'FontSizePicker', () => { const onChange = jest.fn(); render( { const onChange = jest.fn(); render( { const user = userEvent.setup(); render( { render( & { fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >; onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >; From afae1e5950ba56b3c70f9cb2284b6ab7a4f6698b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 6 Feb 2024 09:07:25 +0900 Subject: [PATCH 2/4] Remove usages in app --- .../block-editor/src/components/font-sizes/README.MD | 9 --------- .../src/components/global-styles/typography-panel.js | 1 - packages/block-editor/src/hooks/font-size.js | 1 - 3 files changed, 11 deletions(-) diff --git a/packages/block-editor/src/components/font-sizes/README.MD b/packages/block-editor/src/components/font-sizes/README.MD index adfe0ca8853d8d..69354b90f2a351 100644 --- a/packages/block-editor/src/components/font-sizes/README.MD +++ b/packages/block-editor/src/components/font-sizes/README.MD @@ -31,7 +31,6 @@ const MyFontSizePicker = () => { return ( { @@ -80,11 +79,3 @@ If `true`, the UI will contain a slider, instead of a numeric text input field. - Type: `Boolean` - Required: no - Default: `false` - -### __nextHasNoMarginBottom - -Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.) - -- Type: `Boolean` -- Required: no -- Default: `false` diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 5347ddab922651..e689d84c83c981 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -373,7 +373,6 @@ export default function TypographyPanel( { withReset={ false } withSlider size="__unstable-large" - __nextHasNoMarginBottom /> ) } diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 12d9412181d705..e9a7a81aafbdf0 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -131,7 +131,6 @@ export function FontSizeEdit( props ) { withReset={ false } withSlider size="__unstable-large" - __nextHasNoMarginBottom /> ); } From 3a738f546d16ca54b2a34f4796e22a041c713d2b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 6 Feb 2024 09:15:42 +0900 Subject: [PATCH 3/4] Update changelog --- packages/components/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 72e22bbe0c1178..c7d1f4a8e2a3f2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +### Breaking Changes + +- `FontSizePicker`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58702](https://github.com/WordPress/gutenberg/pull/58702)). ### Enhancements From 034b1f8adee64b9728d5599e1dcc540a26f3ef5b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 7 Feb 2024 00:16:38 +0900 Subject: [PATCH 4/4] Update changelog for block-editor package --- packages/block-editor/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index ecacd192751ed4..666859c602b81e 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- `FontSizePicker`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58702](https://github.com/WordPress/gutenberg/pull/58702)). + ## 12.18.0 (2024-01-24) - Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`.