From 6bf54250e2ed5d8405a28a344591009eda0f219e Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 25 Oct 2021 14:48:38 +1000 Subject: [PATCH 1/3] Re-establish single column span for appropriate controls --- packages/block-editor/src/hooks/typography.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/hooks/typography.scss b/packages/block-editor/src/hooks/typography.scss index 293b66d7540537..8093312feb10c5 100644 --- a/packages/block-editor/src/hooks/typography.scss +++ b/packages/block-editor/src/hooks/typography.scss @@ -9,4 +9,8 @@ .block-editor-line-height-control input { max-width: 100%; } + + .single-column { + grid-column: span 1; + } } From b1baae800e1cde56fce034ee41bc14f7bf017998 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 25 Oct 2021 14:49:19 +1000 Subject: [PATCH 2/3] Update letter-spacing control layout This makes the letter-spacing control span a single layout and allow the field to stretch full width within that column. --- .../components/letter-spacing-control/index.js | 17 +++++++++++------ .../block-editor/src/hooks/letter-spacing.js | 1 + packages/block-editor/src/hooks/typography.js | 1 + 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js index a4365267853f68..2c86d98a330023 100644 --- a/packages/block-editor/src/components/letter-spacing-control/index.js +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -15,12 +15,17 @@ import useSetting from '../../components/use-setting'; /** * Control for letter-spacing. * - * @param {Object} props Component props. - * @param {string} props.value Currently selected letter-spacing. - * @param {Function} props.onChange Handles change in letter-spacing selection. - * @return {WPElement} Letter-spacing control. + * @param {Object} props Component props. + * @param {string} props.value Currently selected letter-spacing. + * @param {Function} props.onChange Handles change in letter-spacing selection. + * @param {boolean} props.withMaxWidth Whether to restrict the field's max width. + * @return {WPElement} Letter-spacing control. */ -export default function LetterSpacingControl( { value, onChange } ) { +export default function LetterSpacingControl( { + value, + onChange, + withMaxWidth = true, +} ) { const units = useCustomUnits( { availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], defaultValues: { px: '2', em: '.2', rem: '.2' }, @@ -29,7 +34,7 @@ export default function LetterSpacingControl( { value, onChange } ) { diff --git a/packages/block-editor/src/hooks/letter-spacing.js b/packages/block-editor/src/hooks/letter-spacing.js index 51dbe207f52ccb..126d6503c27ef3 100644 --- a/packages/block-editor/src/hooks/letter-spacing.js +++ b/packages/block-editor/src/hooks/letter-spacing.js @@ -45,6 +45,7 @@ export function LetterSpacingEdit( props ) { ); } diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index ea724c8b0644be..847c6b9c8d52ac 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -216,6 +216,7 @@ export function TypographyPanel( props ) { ) } { ! isLetterSpacingDisabled && ( hasLetterSpacingValue( props ) } label={ __( 'Letter-spacing' ) } onDeselect={ () => resetLetterSpacing( props ) } From 9fd53858aec857add5aa85a8413135ef18de9a38 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 27 Oct 2021 11:30:19 +1000 Subject: [PATCH 3/3] Pass through __unstableInputWidth to UnitControl --- .../components/letter-spacing-control/index.js | 15 ++++++++------- packages/block-editor/src/hooks/letter-spacing.js | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js index 2c86d98a330023..0c44196673f20c 100644 --- a/packages/block-editor/src/components/letter-spacing-control/index.js +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -15,16 +15,17 @@ import useSetting from '../../components/use-setting'; /** * Control for letter-spacing. * - * @param {Object} props Component props. - * @param {string} props.value Currently selected letter-spacing. - * @param {Function} props.onChange Handles change in letter-spacing selection. - * @param {boolean} props.withMaxWidth Whether to restrict the field's max width. - * @return {WPElement} Letter-spacing control. + * @param {Object} props Component props. + * @param {string} props.value Currently selected letter-spacing. + * @param {Function} props.onChange Handles change in letter-spacing selection. + * @param {boolean} props.__unstableInputWidth Input width to pass through to inner UnitControl. + * + * @return {WPElement} Letter-spacing control. */ export default function LetterSpacingControl( { value, onChange, - withMaxWidth = true, + __unstableInputWidth = '60px', } ) { const units = useCustomUnits( { availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], @@ -34,7 +35,7 @@ export default function LetterSpacingControl( { diff --git a/packages/block-editor/src/hooks/letter-spacing.js b/packages/block-editor/src/hooks/letter-spacing.js index 126d6503c27ef3..7aa76307d6dd4b 100644 --- a/packages/block-editor/src/hooks/letter-spacing.js +++ b/packages/block-editor/src/hooks/letter-spacing.js @@ -45,7 +45,7 @@ export function LetterSpacingEdit( props ) { ); }