diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js index 23a8c76a11d25b..147d66df20c388 100644 --- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js +++ b/packages/block-editor/src/components/font-sizes/with-font-sizes.js @@ -64,7 +64,7 @@ export default ( ...fontSizeNames ) => { createSetFontSize( fontSizeAttributeName, customFontSizeAttributeName ) { return ( fontSizeValue ) => { - const fontSizeObject = find( this.props.fontSizes, { size: fontSizeValue } ); + const fontSizeObject = find( this.props.fontSizes, { size: Number( fontSizeValue ) } ); this.props.setAttributes( { [ fontSizeAttributeName ]: fontSizeObject && fontSizeObject.slug ? fontSizeObject.slug : undefined, [ customFontSizeAttributeName ]: fontSizeObject && fontSizeObject.slug ? undefined : fontSizeValue, diff --git a/packages/components/src/base-control/index.js b/packages/components/src/base-control/index.js index 37a5939e10775c..3abe25ee062823 100644 --- a/packages/components/src/base-control/index.js +++ b/packages/components/src/base-control/index.js @@ -3,11 +3,14 @@ */ import classnames from 'classnames'; -function BaseControl( { id, label, help, className, children } ) { +function BaseControl( { id, label, hideLabelFromVision, help, className, children } ) { return (
- { label && id && } + { label && id && } { label && ! id && { label } } { children }
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 6f6c22e12ff017..0143c04fa098ca 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -1,22 +1,31 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; /** * WordPress dependencies */ -import { __, _x, sprintf } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import Dashicon from '../dashicon'; -import BaseControl from '../base-control'; import Button from '../button'; -import Dropdown from '../dropdown'; import RangeControl from '../range-control'; -import { NavigableMenu } from '../navigable-container'; +import SelectControl from '../select-control'; + +function getSelectValueFromFontSize( fontSizes, value ) { + if ( value ) { + const fontSizeValue = fontSizes.find( ( font ) => font.size === value ); + return fontSizeValue ? fontSizeValue.slug : 'custom'; + } + return 'normal'; +} + +function getSelectOptions( optionsArray ) { + return [ + ...optionsArray.map( ( option ) => ( { value: option.slug, label: option.name } ) ), + { value: 'custom', label: __( 'Custom' ) }, + ]; +} function FontSizePicker( { fallbackFontSize, @@ -26,11 +35,16 @@ function FontSizePicker( { value, withSlider = false, } ) { + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const [ currentSelectValue, setCurrentSelectValue ] = useState( getSelectValueFromFontSize( fontSizes, value ) ); + if ( disableCustomFontSizes && ! fontSizes.length ) { return null; } + const onChangeValue = ( event ) => { const newValue = event.target.value; + setCurrentSelectValue( getSelectValueFromFontSize( fontSizes, Number( newValue ) ) ); if ( newValue === '' ) { onChange( undefined ); return; @@ -38,56 +52,28 @@ function FontSizePicker( { onChange( Number( newValue ) ); }; - const currentFont = fontSizes.find( ( font ) => font.size === value ); - const currentFontSizeName = ( currentFont && currentFont.name ) || ( ! value && _x( 'Normal', 'font size name' ) ) || _x( 'Custom', 'font size name' ); + const onSelectChangeValue = ( eventValue ) => { + setCurrentSelectValue( eventValue ); + const selectedFont = fontSizes.find( ( font ) => font.slug === eventValue ); + if ( selectedFont ) { + onChange( selectedFont.size ); + } + }; return ( - - +
+ { __( 'Font Size' ) } - -
+ +
{ ( fontSizes.length > 0 ) && - ( - - ) } - renderContent={ () => ( - - { map( fontSizes, ( { name, size, slug } ) => { - const isSelected = ( value === size || ( ! value && slug === 'normal' ) ); - - return ( - - ); - } ) } - - ) } + } { ( ! withSlider && ! disableCustomFontSizes ) && @@ -95,7 +81,7 @@ function FontSizePicker( { className="components-range-control__number" type="number" onChange={ onChangeValue } - aria-label={ __( 'Custom font size' ) } + aria-label={ __( 'Custom' ) } value={ value || '' } /> } @@ -103,7 +89,10 @@ function FontSizePicker( { className="components-color-palette__clear" type="button" disabled={ value === undefined } - onClick={ () => onChange( undefined ) } + onClick={ () => { + onChange( undefined ); + setCurrentSelectValue( getSelectValueFromFontSize( fontSizes, undefined ) ); + } } isSmall isDefault > @@ -123,7 +112,7 @@ function FontSizePicker( { afterIcon="editor-textcolor" /> } - +
); } diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss index 1841375ccf397d..00c140099f7f98 100644 --- a/packages/components/src/font-size-picker/style.scss +++ b/packages/components/src/font-size-picker/style.scss @@ -1,8 +1,9 @@ -.components-font-size-picker__buttons { +.components-font-size-picker__controls { max-width: $sidebar-width - ( 2 * $panel-padding ); display: flex; justify-content: space-between; align-items: center; + margin-bottom: $grid-size * 3; // Apply the same height as the isSmall Reset button. .components-range-control__number { @@ -18,6 +19,12 @@ } } +// needed to override CSS set in https://github.com/WordPress/gutenberg/blob/9c438f93a7215d50d1efc0492c308e4cbaa59c52/packages/edit-post/src/components/sidebar/settings-sidebar/style.scss#L6 +.components-font-size-picker__select.components-font-size-picker__select.components-font-size-picker__select.components-font-size-picker__select, +.components-font-size-picker__select .components-base-control__field { + margin-bottom: 0; +} + .components-font-size-picker__custom-input { .components-range-control__slider + .dashicon { width: 30px; @@ -25,44 +32,3 @@ } } -.components-font-size-picker__dropdown-content .components-button { - display: block; - position: relative; - padding: 10px 20px 10px 40px; - width: 100%; - text-align: left; - - .dashicon { - position: absolute; - top: calc(50% - 10px); - left: 10px; - } - - &:hover { - @include menu-style__hover; - } - - &:focus { - @include menu-style__focus; - } -} - -.components-font-size-picker__buttons .components-font-size-picker__selector { - border: 1px solid; - background: none; - position: relative; - width: 110px; - - @include input-style__neutral(); - - &:focus { - @include input-style__focus(); - } - - &::after { - @include dropdown-arrow(); - right: 8px; - top: 12px; - position: absolute; - } -} diff --git a/packages/components/src/select-control/index.js b/packages/components/src/select-control/index.js index 3d1755060e1130..abc72be25be091 100644 --- a/packages/components/src/select-control/index.js +++ b/packages/components/src/select-control/index.js @@ -21,6 +21,7 @@ function SelectControl( { onChange, options = [], className, + hideLabelFromVision, ...props } ) { const id = `inspector-select-control-${ instanceId }`; @@ -38,7 +39,7 @@ function SelectControl( { /* eslint-disable jsx-a11y/no-onchange */ return ! isEmpty( options ) && ( - +