Add margin-bottom lint rules for ToggleGroupControl (WordPress#63960)

* Add margin-bottom lint rules for ToggleGroupControl * BackgroundControlsPanel: Tangential fixes * Fix new violation in Query Loop block Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
tmatsuur · Jul 29, 2024 · 628d7a6 · 628d7a6
1 parent 6c26d0b
commit 628d7a6
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 4 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -296,6 +296,7 @@ module.exports = {
 						'RangeControl',
 						'SearchControl',
 						'TextareaControl',
+						'ToggleGroupControl',
 						'TreeSelect',
 					].map( ( componentName ) => ( {
 						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__nextHasNoMarginBottom"]))`,

diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
@@ -105,6 +105,7 @@ export default function ScaleTool( {
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				label={ __( 'Scale' ) }
 				isBlock
 				help={ scaleHelp[ displayValue ] }

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -569,6 +569,7 @@ function BackgroundSizeControls( {
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Fixed background' ) }
 				checked={ attachmentValue === 'fixed' }
 				onChange={ toggleScrollWithPage }
@@ -577,6 +578,7 @@ function BackgroundSizeControls( {
 				) }
 			/>
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
@@ -626,6 +628,7 @@ function BackgroundSizeControls( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Repeat' ) }
 					checked={ repeatCheckedValue }
 					onChange={ toggleIsRepeated }

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -193,10 +193,6 @@
 .block-editor-global-styles-background-panel__dropdown-content-wrapper {
 	min-width: 260px;
 	overflow-x: hidden;
-	.components-base-control__help,
-	.components-toggle-control {
-		margin-bottom: 0;
-	}
 
 	.components-focal-point-picker-wrapper {
 		background-color: $gray-100;

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -147,6 +147,7 @@ export default function QueryInspectorControls( props ) {
 					{ showInheritControl && (
 						<ToggleGroupControl
 							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 							label={ __( 'Query type' ) }
 							isBlock
 							onChange={ ( value ) => {