Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides #44141

Merged
merged 8 commits into from
Sep 29, 2022
Merged

Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides #44141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
91ce418
Modify the styling of the input controls when in unlinked mode in ord…
glendaviesnz Sep 14, 2022
8d868d6
Style changes from PR feedback
glendaviesnz Sep 14, 2022
44b5bff
Tweaks from code review
glendaviesnz Sep 16, 2022
b724337
some more tweaks
glendaviesnz Sep 23, 2022
3a4ee0b
more tweaks
glendaviesnz Sep 23, 2022
0e5f434
More tweaks to layout
glendaviesnz Sep 26, 2022
39bc327
switch to using vars instead of fixed values
glendaviesnz Sep 27, 2022
d357d97
A few more tweaks from code review
glendaviesnz Sep 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions packages/block-editor/src/components/spacing-sizes-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { __experimentalText as Text } from '@wordpress/components';
import { BaseControl } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -68,8 +73,15 @@ export default function SpacingSizesControl( {
};

return (
<fieldset role="region" className="component-spacing-sizes-control">
<Text as="legend">{ label }</Text>
<fieldset
role="region"
className={ classnames( 'component-spacing-sizes-control', {
'is-unlinked': ! isLinked,
} ) }
>
<BaseControl.VisualLabel as="legend">
{ label }
</BaseControl.VisualLabel>
{ ! hasOneSide && (
<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
) }
Expand Down
15 changes: 8 additions & 7 deletions packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ import classnames from 'classnames';
import { useState, useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import {
BaseControl,
Button,
RangeControl,
CustomSelectControl,
__experimentalUnitControl as UnitControl,
__experimentalHStack as HStack,
__experimentalText as Text,
__experimentalUseCustomUnits as useCustomUnits,
__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
} from '@wordpress/components';
Expand Down Expand Up @@ -167,21 +167,21 @@ export default function SpacingInputControl( {
<>
{ side !== 'all' && (
<HStack className="components-spacing-sizes-control__side-labels">
<Text className="components-spacing-sizes-control__side-label">
<BaseControl.VisualLabel className="components-spacing-sizes-control__side-label">
{ LABELS[ side ] }
</Text>
</BaseControl.VisualLabel>

{ showHint && (
<Text className="components-spacing-sizes-control__hint-single">
<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-single">
{ currentValueHint }
</Text>
</BaseControl.VisualLabel>
) }
</HStack>
) }
{ side === 'all' && showHint && (
<Text className="components-spacing-sizes-control__hint-all">
<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-all">
{ currentValueHint }
</Text>
</BaseControl.VisualLabel>
) }

{ ! disableCustomSpacingSizes && (
Expand Down Expand Up @@ -256,6 +256,7 @@ export default function SpacingInputControl( {
marks={ marks }
label={ ariaLabel }
hideLabelFromVision={ true }
__nextHasNoMarginBottom={ true }
/>
) }
{ ! showRangeControl && ! showCustomValueControl && (
Expand Down
52 changes: 28 additions & 24 deletions packages/block-editor/src/components/spacing-sizes-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.tools-panel-item-spacing {
display: grid;
grid-template-columns: auto 1fr auto;
grid-row-gap: $grid-unit-05;
align-items: center;
grid-template-rows: 25px auto;
}

.component-spacing-sizes-control {
Expand All @@ -17,21 +18,34 @@
align-self: center;
}

.components-base-control__label {
margin-bottom: 0;
height: $grid-unit-20;
}

.components-spacing-sizes-control__side-labels {
grid-column: 1 / 1;
min-height: 30px;
justify-content: left;
height: $grid-unit-20;
margin-top: $grid-unit-15;
}

.components-spacing-sizes-control__side-label {
grid-column: 1 / 1;
justify-self: left;
margin-bottom: 0;
}

.components-spacing-sizes-control__hint-single {
margin-top: 0;
margin-left: 0;
&.is-unlinked {
.components-range-control.components-spacing-sizes-control__range-control {
margin-top: $grid-unit-15;
}
}

.components-spacing-sizes-control__hint-single,
.components-spacing-sizes-control__hint-all {
color: $gray-700;
font-size: 12px;
margin-bottom: 0;
}

.components-spacing-sizes-control__hint-all {
Expand All @@ -47,6 +61,11 @@
grid-row: 1 / 1;
justify-self: end;
padding: 0;
&.is-small.has-icon {
padding: 0;
min-width: $icon-size;
height: $grid-unit-20;
}
}

.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
Expand All @@ -56,13 +75,11 @@
.components-spacing-sizes-control__custom-toggle-single {
grid-column: 3 / 3;
justify-self: end;
}

.components-spacing-sizes-control__custom-toggle-all,
.components-spacing-sizes-control__custom-toggle-single {
&.is-small.has-icon {
padding: 0;
min-width: $icon-size;
height: $grid-unit-20;
margin-top: $grid-unit-15;
}
}

Expand All @@ -75,7 +92,6 @@
.components-spacing-sizes-control__custom-value-range {
grid-column: span 2;
margin-left: $grid-unit-10;
padding-right: $grid-unit-10;
height: 30px;
}

Expand All @@ -85,12 +101,7 @@

.components-spacing-sizes-control__range-control {
grid-column: span 3;
padding-right: $grid-unit-10;
height: 30px;
}

.components-range-control__wrapper {
margin-bottom: 0;
height: 40px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use $grid-unit-50 here? Unsure how the other control updates have specified their height.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the moment color indicator is the only component using that var, and it does a *0.5 on it to get 20px.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps it doesn't matter too much at this point. The Spacing Range component may need to be refactored a bit to align with other controls? cc @ciampo @mirka

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not use $grid-unit-50 — it's not something that we've been using much in @wordpress/components (color indicator is a legacy component and in this case a bit of an exception)

}

.components-range-control__mark {
Expand All @@ -112,13 +123,6 @@
z-index: 3;
}

.components-spacing-sizes-control__side-label {
margin-right: $grid-unit-05;
grid-column: 1 / 1;
justify-self: left;
font-size: 12px;
}

.components-spacing-sizes-control__custom-select-control {
grid-column: span 3;
}
Expand Down