From b122a98551472761c8e448813a38b2eabdd541a0 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 23 May 2024 07:42:51 +0200 Subject: [PATCH] Add vw and vh units to the custom font size picker (#60607) Add vw and vh to the list of default units in the font size picker. Co-authored-by: carolinan Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ramonjd Co-authored-by: t-hamano Co-authored-by: jasmussen Co-authored-by: geriux Co-authored-by: jameskoster Co-authored-by: richtabor --- packages/components/CHANGELOG.md | 1 + packages/components/src/font-size-picker/index.native.js | 2 +- packages/components/src/font-size-picker/index.tsx | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 09ff36f34def5e..d9e21c2788d9e2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -22,6 +22,7 @@ ### Enhancements +- `FontSizePicker`: Add `vw` and `vh` units to the default units in the font size picker ([#60507]((https://github.com/WordPress/gutenberg/pull/60607)). - `PaletteEdit`: Use consistent spacing and metrics. ([#61368](https://github.com/WordPress/gutenberg/pull/61368)). - `FormTokenField`: Hide label when not defined ([#61336](https://github.com/WordPress/gutenberg/pull/61336)). - `ComboboxControl`: supports disabled items ([#61294](https://github.com/WordPress/gutenberg/pull/61294)). diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js index ad9b7a54248d00..06f0d386b74d78 100644 --- a/packages/components/src/font-size-picker/index.native.js +++ b/packages/components/src/font-size-picker/index.native.js @@ -59,7 +59,7 @@ function FontSizePicker( { const label = __( 'Font Size' ); const units = useCustomUnits( { - availableUnits: [ 'px', 'em', 'rem' ], + availableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ], } ); const accessibilityLabel = sprintf( diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 6a18660adfda1d..cb17b7a16e3637 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -36,7 +36,7 @@ import FontSizePickerSelect from './font-size-picker-select'; import FontSizePickerToggleGroup from './font-size-picker-toggle-group'; import { T_SHIRT_NAMES } from './constants'; -const DEFAULT_UNITS = [ 'px', 'em', 'rem' ]; +const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ]; const UnforwardedFontSizePicker = ( props: FontSizePickerProps, @@ -112,7 +112,7 @@ const UnforwardedFontSizePicker = ( units ); const isValueUnitRelative = - !! valueUnit && [ 'em', 'rem' ].includes( valueUnit ); + !! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit ); const isDisabled = value === undefined; return (