From a9f3f117e69554a1a2baa933c203659b46fbac84 Mon Sep 17 00:00:00 2001 From: JeanDavidDaviet Date: Sat, 30 Nov 2019 15:09:49 +0100 Subject: [PATCH 1/5] Fixes the FontSizePicker Custom option This commit prevent the "Custom" option still showing up in the font sizes drop down when a WordPress theme uses the `add_theme_support( 'disable-custom-font-sizes' )` feature. --- packages/components/src/font-size-picker/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 726812a5c4feb..f00f84158e5d2 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -21,14 +21,19 @@ function getSelectValueFromFontSize( fontSizes, value ) { return 'normal'; } -function getSelectOptions( optionsArray ) { +function getSelectOptions( optionsArray, disableCustomFontSizes ) { + if ( ! disableCustomFontSizes ) { + optionsArray = [ + ...optionsArray, + { slug: 'custom', name: __( 'Custom' ) }, + ]; + } return [ ...optionsArray.map( ( option ) => ( { key: option.slug, name: option.name, style: { fontSize: option.size }, } ) ), - { key: 'custom', name: __( 'Custom' ) }, ]; } @@ -62,7 +67,7 @@ function FontSizePicker( { onChange( selectedItem.style && selectedItem.style.fontSize ); }; - const items = getSelectOptions( fontSizes ); + const items = getSelectOptions( fontSizes, disableCustomFontSizes ); const rangeControlNumberId = `components-range-control__number#${ instanceId }`; return (
From 05ffa1f47568fe9c157908243f6b0260e8012e70 Mon Sep 17 00:00:00 2001 From: JeanDavidDaviet Date: Sun, 1 Dec 2019 16:06:24 +0100 Subject: [PATCH 2/5] Return directly the optionArray for the FontSizePicker instead of spread --- packages/components/src/font-size-picker/index.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index f00f84158e5d2..46c252014eba9 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -28,13 +28,11 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) { { slug: 'custom', name: __( 'Custom' ) }, ]; } - return [ - ...optionsArray.map( ( option ) => ( { - key: option.slug, - name: option.name, - style: { fontSize: option.size }, - } ) ), - ]; + return optionsArray.map( ( option ) => ( { + key: option.slug, + name: option.name, + style: { fontSize: option.size }, + } ) ); } function FontSizePicker( { From 73f952f33e22723718b73f5cb2ce4cf90085cae4 Mon Sep 17 00:00:00 2001 From: JeanDavidDaviet Date: Sun, 1 Dec 2019 16:10:48 +0100 Subject: [PATCH 3/5] Update the fontSizePicker when font size slider is used The slider didn't update the select options. In the new `onSliderChangeValue` function, we set the new fontSize state with the props function `onChange` and we also set the selection option given the new font size. --- packages/components/src/font-size-picker/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 46c252014eba9..a8a2008ba9ddf 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -65,6 +65,11 @@ function FontSizePicker( { onChange( selectedItem.style && selectedItem.style.fontSize ); }; + const onSliderChangeValue = ( sliderValue ) => { + onChange( sliderValue ); + setCurrentSelectValue( getSelectValueFromFontSize( fontSizes, sliderValue ) ); + }; + const items = getSelectOptions( fontSizes, disableCustomFontSizes ); const rangeControlNumberId = `components-range-control__number#${ instanceId }`; return ( @@ -115,7 +120,7 @@ function FontSizePicker( { label={ __( 'Custom Size' ) } value={ value || '' } initialPosition={ fallbackFontSize } - onChange={ onChange } + onChange={ onSliderChangeValue } min={ 12 } max={ 100 } beforeIcon="editor-textcolor" From aa626435c519b76688b33e2556b01036f823082b Mon Sep 17 00:00:00 2001 From: JeanDavidDaviet Date: Sun, 1 Dec 2019 16:10:48 +0100 Subject: [PATCH 4/5] Revert "Update the fontSizePicker when font size slider is used" This reverts commit 73f952f33e22723718b73f5cb2ce4cf90085cae4. I don't know why Travis doesn't accept this commit. --- packages/components/src/font-size-picker/index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index a8a2008ba9ddf..46c252014eba9 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -65,11 +65,6 @@ function FontSizePicker( { onChange( selectedItem.style && selectedItem.style.fontSize ); }; - const onSliderChangeValue = ( sliderValue ) => { - onChange( sliderValue ); - setCurrentSelectValue( getSelectValueFromFontSize( fontSizes, sliderValue ) ); - }; - const items = getSelectOptions( fontSizes, disableCustomFontSizes ); const rangeControlNumberId = `components-range-control__number#${ instanceId }`; return ( @@ -120,7 +115,7 @@ function FontSizePicker( { label={ __( 'Custom Size' ) } value={ value || '' } initialPosition={ fallbackFontSize } - onChange={ onSliderChangeValue } + onChange={ onChange } min={ 12 } max={ 100 } beforeIcon="editor-textcolor" From 77e61cd5dd829012e5f3c5dd9b9363c2fd641d6b Mon Sep 17 00:00:00 2001 From: JeanDavidDaviet Date: Tue, 3 Dec 2019 17:24:21 +0100 Subject: [PATCH 5/5] Update the fontSizePicker when font size slider is used This reverts commit aa626435c519b76688b33e2556b01036f823082b. --- packages/components/src/font-size-picker/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 46c252014eba9..a8a2008ba9ddf 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -65,6 +65,11 @@ function FontSizePicker( { onChange( selectedItem.style && selectedItem.style.fontSize ); }; + const onSliderChangeValue = ( sliderValue ) => { + onChange( sliderValue ); + setCurrentSelectValue( getSelectValueFromFontSize( fontSizes, sliderValue ) ); + }; + const items = getSelectOptions( fontSizes, disableCustomFontSizes ); const rangeControlNumberId = `components-range-control__number#${ instanceId }`; return ( @@ -115,7 +120,7 @@ function FontSizePicker( { label={ __( 'Custom Size' ) } value={ value || '' } initialPosition={ fallbackFontSize } - onChange={ onChange } + onChange={ onSliderChangeValue } min={ 12 } max={ 100 } beforeIcon="editor-textcolor"