Add margin-bottom lint rules for ToggleControl (WordPress#64213)

* Fix in ImageSettingsPanel * Fix in block hooks * Fix in Avatar block * Fix in Details block * Fix in Latest posts block * Fix in Query Loop block * Fix in Tag Cloud block * Fix in Add New Pattern modal * Fix in Create pattern modal * Fix in ReusableBlockConvertButton * Add eslint rule * Add prop to docs * Fix up Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
MaxMood96 · Aug 6, 2024 · 0f81a42 · 0f81a42
1 parent 4efb352
commit 0f81a42
Show file tree

Hide file tree

Showing 13 changed files with 21 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -297,6 +297,7 @@ module.exports = {
 						'SearchControl',
 						'TextControl',
 						'TextareaControl',
+						'ToggleControl',
 						'ToggleGroupControl',
 						'TreeSelect',
 					].map( ( componentName ) => ( {

diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js
@@ -67,6 +67,7 @@ export default function ImageSettingsPanel( {
 					panelId={ panelId }
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Expand on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }

diff --git a/packages/block-editor/src/hooks/block-hooks.js b/packages/block-editor/src/hooks/block-hooks.js
@@ -201,6 +201,7 @@ function BlockHooksControlPure( {
 
 								return (
 									<ToggleControl
+										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
 										label={

diff --git a/packages/block-library/src/avatar/edit.js b/packages/block-library/src/avatar/edit.js
@@ -58,6 +58,7 @@ const AvatarInspectorControls = ( {
 			/>
 			{ attributes.isLink && (
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }
 					onChange={ ( value ) =>
 						setAttributes( {

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
@@ -48,6 +48,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open by default' ) }
 						checked={ showContent }
 						onChange={ () =>

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
@@ -202,6 +202,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		<InspectorControls>
 			<PanelBody title={ __( 'Post content' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Post content' ) }
 					checked={ displayPostContent }
 					onChange={ ( value ) =>

diff --git a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
@@ -36,6 +36,7 @@ export default function EnhancedPaginationControl( {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Force page reload' ) }
 				help={ help }
 				checked={

diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
@@ -169,6 +169,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 					required
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show tag counts' ) }
 					checked={ showTagCounts }
 					onChange={ () =>

diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
@@ -15,6 +15,7 @@ const MyToggleControl = () => {
 
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label="Fixed Background"
 			help={
 				hasFixedBackground
@@ -78,3 +79,11 @@ The class that will be added with `components-base-control` and `components-togg
 
 -		Type: `String`
 -		Required: No
+
+### `__nextHasNoMarginBottom`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
@@ -113,6 +113,7 @@ function UnforwardedToggleControl(
  *
  *   return (
  *     <ToggleControl
+ *       __nextHasNoMarginBottom
  *       label="Fixed Background"
  *       checked={ value }
  *       onChange={ () => setValue( ( state ) => ! state ) }

diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js
@@ -74,6 +74,7 @@ export default function InitPatternModal() {
 								__next40pxDefaultSize
 							/>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ _x( 'Synced', 'pattern (singular)' ) }
 								help={ __(
 									'Sync this pattern across multiple locations.'

diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js
@@ -131,6 +131,7 @@ export function CreatePatternModalContents( {
 					categoryMap={ categoryMap }
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ _x( 'Synced', 'pattern (singular)' ) }
 					help={ __(
 						'Sync this pattern across multiple locations.'

diff --git a/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -176,6 +176,7 @@ export default function ReusableBlockConvertButton( {
 								placeholder={ __( 'My pattern' ) }
 							/>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ _x( 'Synced', 'pattern (singular)' ) }
 								help={ __(
 									'Sync this pattern across multiple locations.'