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

RangeControl: remove margin override and add new opt-in prop #45985

Merged
merged 6 commits into from
Nov 30, 2022
Merged

RangeControl: remove margin override and add new opt-in prop #45985

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a99840e
RangeControl: Add new opt-in margin bottom prop
brookewp Nov 19, 2022
eaadf52
Add prop to deprecated blocks
brookewp Nov 23, 2022
0b2a766
Add prop to gallery v1 block
brookewp Nov 23, 2022
2b06d5e
remove additional margin overrides and add prop to components based o…
brookewp Nov 30, 2022
5bcda3b
move changelog entry to correct changelog
brookewp Nov 30, 2022
baad15a
Merge branch 'trunk' into update/rangecontrol-margin
ciampo Nov 30, 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
1 change: 1 addition & 0 deletions changelog.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ The following contributors merged PRs in this release:
- FocalPointPicker: Update the design of the focal point handle. ([45053](https://github.com/WordPress/gutenberg/pull/45053))
- FontSizePicker: Update hint text to match the design. ([44966](https://github.com/WordPress/gutenberg/pull/44966))
- CheckboxControl: Move icons out of labels. ([45535](https://github.com/WordPress/gutenberg/pull/45535))
- RangeControl: remove margin overrides and add new opt-in prop. ([45985](https://github.com/WordPress/gutenberg/pull/45985))

#### Block Editor

Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/image-editor/zoom-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default function ZoomDropdown() {
) }
renderContent={ () => (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Zoom' ) }
min={ MIN_ZOOM }
max={ MAX_ZOOM }
Expand Down
1 change: 1 addition & 0 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 @@ -248,6 +248,7 @@ export default function SpacingInputControl( {
withInputField={ false }
onChange={ handleCustomValueSliderChange }
className="components-spacing-sizes-control__custom-value-range"
__nextHasNoMarginBottom
/>
</>
) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/avatar/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const AvatarInspectorControls = ( {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Image size' ) }
onChange={ ( newSize ) =>
setAttributes( {
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/columns/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ function ColumnsEditContainer( {
<InspectorControls>
<PanelBody>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Columns' ) }
value={ count }
onChange={ ( value ) => updateColumns( count, value ) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/comment-author-avatar/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default function Edit( {
<InspectorControls>
<PanelBody title={ __( 'Avatar Settings' ) }>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Image size' ) }
onChange={ ( newWidth ) =>
setAttributes( {
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/cover/edit/inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,7 @@ export default function CoverInspectorControls( {
panelId={ clientId }
>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Overlay opacity' ) }
value={ dimRatio }
onChange={ ( newDimRation ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/file/inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export default function FileBlockInspector( {
/>
{ displayPreview && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Height in pixels' ) }
min={ MIN_PREVIEW_HEIGHT }
max={ Math.max(
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,6 +486,7 @@ function GalleryEdit( props ) {
<PanelBody title={ __( 'Settings' ) }>
{ images.length > 1 && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Columns' ) }
value={
columns
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/gallery/v1/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,6 +403,7 @@ function GalleryEdit( props ) {
<PanelBody title={ __( 'Settings' ) }>
{ images.length > 1 && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Columns' ) }
value={ columns }
onChange={ setColumnsNumber }
Expand Down
11 changes: 0 additions & 11 deletions packages/block-library/src/image/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,17 +161,6 @@ figure.wp-block-image:not(.wp-block) {
min-width: 260px;
overflow: visible !important;
}

.components-range-control {
flex: 1;
}

.components-base-control__field {
display: flex;
margin-bottom: 0;
flex-direction: column;
align-items: flex-start;
}
}

.wp-block-image__aspect-ratio {
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/latest-comments/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
}
/>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Number of comments' ) }
value={ commentsToShow }
onChange={ ( value ) =>
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/latest-posts/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
{ displayPostContent &&
displayPostContentRadio === 'excerpt' && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Max number of words in excerpt' ) }
value={ excerptLength }
onChange={ ( value ) =>
Expand Down Expand Up @@ -355,6 +356,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {

{ postLayout === 'grid' && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Columns' ) }
value={ columns }
onChange={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/media-text/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
) }
{ mediaUrl && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Media width' ) }
value={ temporaryMediaWidth || mediaWidth }
onChange={ commitWidthChange }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/post-featured-image/overlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ const Overlay = ( {
panelId={ clientId }
>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Overlay opacity' ) }
value={ dimRatio }
onChange={ ( newDimRatio ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export default function QueryInspectorControls( {
{ showColumnsControl && (
<>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Columns' ) }
value={ displayLayout.columns }
onChange={ ( value ) =>
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/rss/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Number of items' ) }
value={ itemsToShow }
onChange={ ( value ) =>
Expand All @@ -137,6 +138,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
/>
{ displayExcerpt && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Max number of words in excerpt' ) }
value={ excerptLength }
onChange={ ( value ) =>
Expand All @@ -149,6 +151,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
) }
{ blockLayout === 'grid' && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Columns' ) }
value={ columns }
onChange={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/site-logo/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,7 @@ const SiteLogo = ( {
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Image width' ) }
onChange={ ( newWidth ) =>
setAttributes( { width: newWidth } )
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/tag-cloud/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
}
/>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Number of tags' ) }
value={ numberOfTags }
onChange={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/text-columns/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
<InspectorControls>
<PanelBody>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Columns' ) }
value={ columns }
onChange={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/border-control/border-control/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const UnconnectedBorderControl = (
/>
{ withSlider && (
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Border width' ) }
hideLabelFromVision
className={ sliderClassName }
Expand Down
11 changes: 1 addition & 10 deletions packages/components/src/border-control/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,7 @@ import { css } from '@emotion/react';
*/
import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
import { space } from '../ui/utils/space';
import {
StyledField,
StyledLabel,
} from '../base-control/styles/base-control-styles';
import { StyledLabel } from '../base-control/styles/base-control-styles';
import {
ValueInput as UnitControlWrapper,
UnitSelect,
Expand Down Expand Up @@ -193,10 +190,4 @@ export const borderStyleButton = css`
export const borderSlider = () => css`
flex: 1 1 60%;
${ rtl( { marginRight: space( 3 ) } )() }

${ StyledField } {
margin-bottom: 0;
font-size: 0;
display: flex;
}
`;
1 change: 1 addition & 0 deletions packages/components/src/color-picker/input-with-slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export const InputWithSlider = ( {
size="__unstable-large"
/>
<RangeControl
__nextHasNoMarginBottom
label={ label }
hideLabelFromVision
min={ min }
Expand Down
4 changes: 0 additions & 4 deletions packages/components/src/color-picker/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,6 @@ export const SelectControl = styled( InnerSelectControl )`
export const RangeControl = styled( InnerRangeControl )`
flex: 1;
margin-right: ${ space( 2 ) };

${ StyledField } {
margin-bottom: 0;
}
`;

// Make the Hue circle picker not go out of the bar.
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/query-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export default function QueryControls( {
),
onNumberOfItemsChange && (
<RangeControl
__nextHasNoMarginBottom
key="query-controls-range-control"
label={ __( 'Number of items' ) }
value={ numberOfItems }
Expand Down