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

Add margin-bottom lint rules for BaseControl #64355

Merged
merged 12 commits into from
Aug 12, 2024
Merged

Add margin-bottom lint rules for BaseControl #64355

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a7beddd
Fix in Gallery block
mirka Aug 7, 2024
aa333d5
Fix in Latest Posts block
mirka Aug 7, 2024
4ea9b9f
Fix in Search block
mirka Aug 7, 2024
9771ed8
Merge branch 'trunk' into base-control-margin
mirka Aug 9, 2024
58d1297
Fix in Tag Cloud block
mirka Aug 9, 2024
78bbf67
Fix in Video block
mirka Aug 9, 2024
fd1a731
Fix in Global Styles Font Size
mirka Aug 9, 2024
85f7e92
Fix in Global Styles PushChangesToGlobalStylesControl
mirka Aug 9, 2024
aec5c2d
Fix in new template part modal
mirka Aug 9, 2024
55ede85
Fix in pattern overrides block inspector
mirka Aug 9, 2024
f12b7fd
Add lint rule
mirka Aug 9, 2024
a9e31ed
Update docs
mirka Aug 9, 2024
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
5 changes: 4 additions & 1 deletion packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,7 +605,10 @@ function GalleryEdit( props ) {
/>
) }
{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
<BaseControl className="gallery-image-sizes">
<BaseControl
className="gallery-image-sizes"
__nextHasNoMarginBottom
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

Somewhere in this file, set the imageSizeOptions variable as false. In the editor, add a Gallery block with an image, and see the block inspector.

Resolution loading placeholder

>
<BaseControl.VisualLabel>
{ __( 'Resolution' ) }
</BaseControl.VisualLabel>
Expand Down
5 changes: 4 additions & 1 deletion 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 @@ -303,7 +303,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
} )
}
/>
<BaseControl className="editor-latest-posts-image-alignment-control">
<BaseControl
className="editor-latest-posts-image-alignment-control"
__nextHasNoMarginBottom
mirka marked this conversation as resolved.
Show resolved Hide resolved
>
<BaseControl.VisualLabel>
{ __( 'Image alignment' ) }
</BaseControl.VisualLabel>
Expand Down
18 changes: 9 additions & 9 deletions packages/block-library/src/search/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
ToolbarButton,
ResizableBox,
PanelBody,
BaseControl,
__experimentalVStack as VStack,
__experimentalUseCustomUnits as useCustomUnits,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components';
Expand Down Expand Up @@ -408,12 +408,14 @@ export default function SearchEdit( {

<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<BaseControl
label={ __( 'Width' ) }
id={ unitControlInputId }
<VStack
Copy link
Member Author

Choose a reason for hiding this comment

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

Testing instructions

In the editor, add a Search block and see the block inspector.

Before After
Search block inspector, before Search block inspector, after

This UI probably should be updated to DimensionTool, but I'll just do a quick fix here.

Spacing is the same as a similar pattern in the Latest Posts block.

Copy link
Member

Choose a reason for hiding this comment

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

Looks good, but it would have been suitable for another PR, perhaps with a design person taking a look 🤔

Copy link
Member Author

Choose a reason for hiding this comment

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

You may be right! This is still bad though, just incrementally better. I'm keeping an eye on #52223 to figure out what this UI should be ideally.

className="wp-block-search__inspector-controls"
spacing={ 4 }
>
<UnitControl
id={ unitControlInputId }
__next40pxDefaultSize
label={ __( 'Width' ) }
id={ unitControlInputId } // unused, kept for backwards compatibility
min={
isPercentageUnit( widthUnit ) ? 0 : MIN_WIDTH
}
Expand All @@ -427,7 +429,6 @@ export default function SearchEdit( {
parseInt( newWidth, 10 ) > 100
? 100
: newWidth;

setAttributes( {
width: parseInt( filteredWidth, 10 ),
} );
Expand All @@ -445,9 +446,8 @@ export default function SearchEdit( {
value={ `${ width }${ widthUnit }` }
units={ units }
/>

<ButtonGroup
className="wp-block-search__components-button-group"
className="wp-block-search__components-button-group" // unused, kept for backwards compatibility
aria-label={ __( 'Percentage Width' ) }
>
{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
Expand All @@ -473,7 +473,7 @@ export default function SearchEdit( {
);
} ) }
</ButtonGroup>
</BaseControl>
</VStack>
</PanelBody>
</InspectorControls>
</>
Expand Down
7 changes: 5 additions & 2 deletions packages/block-library/src/search/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,11 @@
justify-content: center;
text-align: center;
}
}

&__components-button-group {
margin-top: 10px;
.wp-block-search__inspector-controls {
.components-base-control {
// Counteract the margin added by the block inspector.
margin-bottom: 0;
}
}
Loading