From 0409a741eb43a28ea8244da9655af15a2d075bbc Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 28 Aug 2024 12:08:12 +0200 Subject: [PATCH 1/6] Remove confusing icons. --- .../src/components/global-styles/dimensions-panel.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 241d3bb93d1b1..ebf4b7be002a1 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -14,9 +14,7 @@ import { __experimentalHStack as HStack, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, - __experimentalView as View, } from '@wordpress/components'; -import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; import { useCallback, useState, Platform } from '@wordpress/element'; /** @@ -480,16 +478,12 @@ export default function DimensionsPanel( { __next40pxDefaultSize={ false } label={ __( 'Content' ) } labelPosition="top" - __unstableInputWidth="80px" value={ contentSizeValue || '' } onChange={ ( nextContentSize ) => { setContentSizeValue( nextContentSize ); } } units={ units } /> - - - ) } @@ -510,16 +504,12 @@ export default function DimensionsPanel( { __next40pxDefaultSize={ false } label={ __( 'Wide' ) } labelPosition="top" - __unstableInputWidth="80px" value={ wideSizeValue || '' } onChange={ ( nextWideSize ) => { setWideSizeValue( nextWideSize ); } } units={ units } /> - - - ) } From 2274d2db59d71845718bebfb97e91945013f5a01 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 28 Aug 2024 12:22:00 +0200 Subject: [PATCH 2/6] Used 40px input size. --- .../src/components/global-styles/dimensions-panel.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index ebf4b7be002a1..26c4ef31bff31 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -474,8 +474,7 @@ export default function DimensionsPanel( { > Date: Wed, 28 Aug 2024 15:39:58 +0200 Subject: [PATCH 3/6] Improve content and wide widths labeling. --- .../global-styles/dimensions-panel.js | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 26c4ef31bff31..e5fa48d3c73dd 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -11,7 +11,6 @@ import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalBoxControl as BoxControl, - __experimentalHStack as HStack, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; @@ -250,7 +249,7 @@ export default function DimensionsPanel( { const minimumMargin = -Infinity; const [ minMarginValue, setMinMarginValue ] = useState( minimumMargin ); - // Content Size + // Content Width const showContentSizeControl = useHasContentSize( settings ) && includeLayoutControls; const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize ); @@ -266,7 +265,7 @@ export default function DimensionsPanel( { const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize; const resetContentSizeValue = () => setContentSizeValue( undefined ); - // Wide Size + // Wide Width const showWideSizeControl = useHasWideSize( settings ) && includeLayoutControls; const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize ); @@ -462,8 +461,7 @@ export default function DimensionsPanel( { ) } { showContentSizeControl && ( - - { - setContentSizeValue( nextContentSize ); - } } - units={ units } - /> - + { + setContentSizeValue( nextContentSize ); + } } + units={ units } + /> ) } { showWideSizeControl && ( - - { - setWideSizeValue( nextWideSize ); - } } - units={ units } - /> - + { + setWideSizeValue( nextWideSize ); + } } + units={ units } + /> ) } { showPaddingControl && ( From aee726260fac1b6aba4792041b1cb90bd8c87737 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 28 Aug 2024 15:58:57 +0200 Subject: [PATCH 4/6] Remove confusing icons from block settings constrained layout widths. --- packages/block-editor/src/hooks/layout.scss | 14 --- .../block-editor/src/layouts/constrained.js | 97 ++++++++----------- 2 files changed, 42 insertions(+), 69 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss index 83a044e3cdca7..555701700dd78 100644 --- a/packages/block-editor/src/hooks/layout.scss +++ b/packages/block-editor/src/hooks/layout.scss @@ -1,17 +1,3 @@ -.block-editor-hooks__layout-controls { - display: flex; - margin-bottom: $grid-unit-10; - - .block-editor-hooks__layout-controls-unit { - display: flex; - margin-right: $grid-unit-30; - - svg { - margin: auto 0 $grid-unit-05 $grid-unit-10; - } - } -} - .block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input { margin-bottom: 0; } diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index b8dcde637a4d3..c42f510844f2a 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -8,14 +8,7 @@ import { __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { - Icon, - positionCenter, - stretchWide, - justifyLeft, - justifyCenter, - justifyRight, -} from '@wordpress/icons'; +import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons'; import { getCSSRules } from '@wordpress/style-engine'; /** @@ -72,53 +65,47 @@ export default { <> { allowCustomContentAndWideSize && ( <> -
-
- { - nextWidth = - 0 > parseFloat( nextWidth ) - ? '0' - : nextWidth; - onChange( { - ...layout, - contentSize: nextWidth, - } ); - } } - units={ units } - /> - -
-
- { - nextWidth = - 0 > parseFloat( nextWidth ) - ? '0' - : nextWidth; - onChange( { - ...layout, - wideSize: nextWidth, - } ); - } } - units={ units } - /> - -
+
+ { + nextWidth = + 0 > parseFloat( nextWidth ) + ? '0' + : nextWidth; + onChange( { + ...layout, + contentSize: nextWidth, + } ); + } } + units={ units } + /> +
+
+ { + nextWidth = + 0 > parseFloat( nextWidth ) + ? '0' + : nextWidth; + onChange( { + ...layout, + wideSize: nextWidth, + } ); + } } + units={ units } + />

{ __( From 5c6c889f405dae581e3f91e707b2ffa3d343936f Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 30 Aug 2024 12:39:26 +0200 Subject: [PATCH 5/6] Try icons in input prefix. --- .../global-styles/dimensions-panel.js | 14 ++++++++++-- .../block-editor/src/layouts/constrained.js | 22 ++++++++++++++++--- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index e5fa48d3c73dd..8430703aec966 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -13,7 +13,9 @@ import { __experimentalBoxControl as BoxControl, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, + __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, } from '@wordpress/components'; +import { Icon, alignNone, stretchWide } from '@wordpress/icons'; import { useCallback, useState, Platform } from '@wordpress/element'; /** @@ -474,12 +476,16 @@ export default function DimensionsPanel( { __next40pxDefaultSize label={ __( 'Content width' ) } labelPosition="top" - __unstableInputWidth="112px" value={ contentSizeValue || '' } onChange={ ( nextContentSize ) => { setContentSizeValue( nextContentSize ); } } units={ units } + prefix={ + + + + } /> ) } @@ -497,12 +503,16 @@ export default function DimensionsPanel( { __next40pxDefaultSize label={ __( 'Wide width' ) } labelPosition="top" - __unstableInputWidth="112px" value={ wideSizeValue || '' } onChange={ ( nextWideSize ) => { setWideSizeValue( nextWideSize ); } } units={ units } + prefix={ + + + + } /> ) } diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index c42f510844f2a..99a9eb9cc56e3 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -6,9 +6,17 @@ import { __experimentalUnitControl as UnitControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, + __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons'; +import { + Icon, + alignNone, + stretchWide, + justifyLeft, + justifyCenter, + justifyRight, +} from '@wordpress/icons'; import { getCSSRules } from '@wordpress/style-engine'; /** @@ -71,7 +79,6 @@ export default { className="block-editor-hooks__layout-controls-unit-input" label={ __( 'Content width' ) } labelPosition="top" - __unstableInputWidth="112px" value={ contentSize || wideSize || '' } onChange={ ( nextWidth ) => { nextWidth = @@ -84,6 +91,11 @@ export default { } ); } } units={ units } + prefix={ + + + + } />

@@ -92,7 +104,6 @@ export default { className="block-editor-hooks__layout-controls-unit-input" label={ __( 'Wide width' ) } labelPosition="top" - __unstableInputWidth="112px" value={ wideSize || contentSize || '' } onChange={ ( nextWidth ) => { nextWidth = @@ -105,6 +116,11 @@ export default { } ); } } units={ units } + prefix={ + + + + } />

From abe58c3d6bf9c4c3fd02b62f550c8b43b9c2c46c Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 2 Sep 2024 12:45:52 +0200 Subject: [PATCH 6/6] Adjust vertical spacing. --- packages/block-editor/src/hooks/layout.scss | 6 ++ .../block-editor/src/layouts/constrained.js | 100 +++++++++--------- 2 files changed, 54 insertions(+), 52 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss index 555701700dd78..3eedd1f629a63 100644 --- a/packages/block-editor/src/hooks/layout.scss +++ b/packages/block-editor/src/hooks/layout.scss @@ -1,3 +1,9 @@ +.block-editor-hooks__layout-controls-units { + display: flex; + flex-direction: column; + gap: $grid-unit-20; +} + .block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input { margin-bottom: 0; } diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index 99a9eb9cc56e3..21aca422a315f 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -72,63 +72,59 @@ export default { return ( <> { allowCustomContentAndWideSize && ( - <> -

- { - nextWidth = - 0 > parseFloat( nextWidth ) - ? '0' - : nextWidth; - onChange( { - ...layout, - contentSize: nextWidth, - } ); - } } - units={ units } - prefix={ - - - - } - /> -
-
- { - nextWidth = - 0 > parseFloat( nextWidth ) - ? '0' - : nextWidth; - onChange( { - ...layout, - wideSize: nextWidth, - } ); - } } - units={ units } - prefix={ - - - - } - /> -
+
+ { + nextWidth = + 0 > parseFloat( nextWidth ) + ? '0' + : nextWidth; + onChange( { + ...layout, + contentSize: nextWidth, + } ); + } } + units={ units } + prefix={ + + + + } + /> + { + nextWidth = + 0 > parseFloat( nextWidth ) + ? '0' + : nextWidth; + onChange( { + ...layout, + wideSize: nextWidth, + } ); + } } + units={ units } + prefix={ + + + + } + />

{ __( 'Customize the width for all elements that are assigned to the center or wide columns.' ) }

- +
) } { allowJustification && (