ToggleControl: remove margin overrides and add opt-in prop

WordPress · Feb 8, 2023 · c47da73 · c47da73
1 parent 6b75d2e
commit c47da73
Show file tree

Hide file tree

Showing 48 changed files with 89 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
@@ -187,6 +187,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					</ul>
 					{ hasTemplateLock && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							className="block-editor-block-lock-modal__template-lock"
 							label={ __( 'Apply to all blocks inside' ) }
 							checked={ applyTemplateLock }

diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss
@@ -18,11 +18,6 @@
 	.components-checkbox-control__label {
 		font-weight: 600;
 	}
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-	}
 }
 .block-editor-block-lock-modal__checklist-item {
 	display: flex;
@@ -48,10 +43,6 @@
 	border-top: $border-width solid $gray-300;
 	margin-top: $grid-unit-20;
 	padding: $grid-unit-15 0;
-
-	.components-base-control__field {
-		margin: 0;
-	}
 }
 
 .block-editor-block-lock-modal__actions {

diff --git a/packages/block-editor/src/components/link-control/settings.js b/packages/block-editor/src/components/link-control/settings.js
@@ -20,6 +20,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 
 	const theSettings = settings.map( ( setting ) => (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			className="block-editor-link-control__setting"
 			key={ setting.id }
 			label={ setting.title }

diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -92,6 +92,7 @@ function ResponsiveBlockControl( props ) {
 
 			<div className="block-editor-responsive-block-control__inner">
 				<ToggleControl
+					__nextHasNoMarginBottom
 					className="block-editor-responsive-block-control__toggle"
 					label={ toggleControlLabel }
 					checked={ ! isResponsive }

diff --git a/packages/block-editor/src/components/url-popover/stories/index.js b/packages/block-editor/src/components/url-popover/stories/index.js
@@ -28,6 +28,7 @@ const TestURLPopover = () => {
 					onClose={ close }
 					renderSettings={ () => (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ setTarget }
 						/>

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -199,6 +199,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					{ showInheritToggle && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								className="block-editor-hooks__toggle-control"
 								label={ __( 'Inner blocks use content width' ) }
 								checked={

diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
@@ -347,6 +347,7 @@ function FlexWrapControl( { layout, onChange } ) {
 	const { flexWrap = 'wrap' } = layout;
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow to wrap to multiple lines' ) }
 			onChange={ ( value ) => {
 				onChange( {

diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
@@ -19,6 +19,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
 						onChange={ () =>
@@ -29,6 +30,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					/>
 					{ displayAsDropdown && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show label' ) }
 							checked={ showLabel }
 							onChange={ () =>
@@ -39,6 +41,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ () =>

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -207,12 +207,14 @@ function AudioEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Autoplay' ) }
 						onChange={ toggleAttribute( 'autoplay' ) }
 						checked={ autoplay }
 						help={ getAutoplayHelp }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Loop' ) }
 						onChange={ toggleAttribute( 'loop' ) }
 						checked={ loop }

diff --git a/packages/block-library/src/avatar/edit.js b/packages/block-library/src/avatar/edit.js
@@ -48,6 +48,7 @@ const AvatarInspectorControls = ( {
 				value={ attributes?.size }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link to user profile' ) }
 				onChange={ () =>
 					setAttributes( { isLink: ! attributes.isLink } )

diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
@@ -143,27 +143,32 @@ export default function CategoriesEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show only top level categories' ) }
 						checked={ showOnlyTopLevel }
 						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show empty categories' ) }
 						checked={ showEmpty }
 						onChange={ toggleAttribute( 'showEmpty' ) }
 					/>
 					{ ! showOnlyTopLevel && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show hierarchy' ) }
 							checked={ showHierarchy }
 							onChange={ toggleAttribute( 'showHierarchy' ) }

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
@@ -110,6 +110,7 @@ function ColumnsEditContainer( {
 						</Notice>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Stack on mobile' ) }
 						checked={ isStackedOnMobile }
 						onChange={ () =>

diff --git a/packages/block-library/src/comment-author-name/edit.js b/packages/block-library/src/comment-author-name/edit.js
@@ -72,12 +72,14 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Link settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link to authors URL' ) }
 					onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					checked={ isLink }
 				/>
 				{ isLink && (
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						onChange={ ( value ) =>
 							setAttributes( {

diff --git a/packages/block-library/src/comment-date/edit.js b/packages/block-library/src/comment-date/edit.js
@@ -48,6 +48,7 @@ export default function Edit( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link to comment' ) }
 					onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					checked={ isLink }

diff --git a/packages/block-library/src/comment-edit-link/edit.js b/packages/block-library/src/comment-edit-link/edit.js
@@ -39,6 +39,7 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Link settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }
 					onChange={ ( value ) =>
 						setAttributes( {

diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
@@ -110,13 +110,15 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show post title' ) }
 					checked={ showPostTitle }
 					onChange={ ( value ) =>
 						setAttributes( { showPostTitle: value } )
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show comments count' ) }
 					checked={ showCommentsCount }
 					onChange={ ( value ) =>

diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -171,12 +171,14 @@ export default function CoverInspectorControls( {
 						{ isImageBackground && (
 							<>
 								<ToggleControl
+									__nextHasNoMarginBottom
 									label={ __( 'Fixed background' ) }
 									checked={ hasParallax }
 									onChange={ toggleParallax }
 								/>
 
 								<ToggleControl
+									__nextHasNoMarginBottom
 									label={ __( 'Repeated background' ) }
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }

diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js
@@ -49,6 +49,7 @@ const EmbedControls = ( {
 					className="blocks-responsive"
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Resize for smaller devices' ) }
 						checked={ allowResponsive }
 						help={ getResponsiveHelp }

diff --git a/packages/block-library/src/file/inspector.js b/packages/block-library/src/file/inspector.js
@@ -43,6 +43,7 @@ export default function FileBlockInspector( {
 				{ href.endsWith( '.pdf' ) && (
 					<PanelBody title={ __( 'PDF settings' ) }>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show inline embed' ) }
 							help={
 								displayPreview
@@ -78,11 +79,13 @@ export default function FileBlockInspector( {
 						onChange={ changeLinkDestinationOption }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						checked={ openInNewWindow }
 						onChange={ changeOpenInNewWindow }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show download button' ) }
 						checked={ showDownloadButton }
 						onChange={ changeShowDownloadButton }

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -565,6 +565,7 @@ function GalleryEdit( props ) {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Crop images' ) }
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }
@@ -580,6 +581,7 @@ function GalleryEdit( props ) {
 					/>
 					{ hasLinkTo && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							checked={ linkTarget === '_blank' }
 							onChange={ toggleOpenInNewTab }

diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js
@@ -413,6 +413,7 @@ function GalleryEdit( props ) {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Crop images' ) }
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }

diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js
@@ -33,20 +33,23 @@ export default function LatestComments( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display avatar' ) }
 						checked={ displayAvatar }
 						onChange={ () =>
 							setAttributes( { displayAvatar: ! displayAvatar } )
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display date' ) }
 						checked={ displayDate }
 						onChange={ () =>
 							setAttributes( { displayDate: ! displayDate } )
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display excerpt' ) }
 						checked={ displayExcerpt }
 						onChange={ () =>

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
@@ -247,13 +247,15 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 			<PanelBody title={ __( 'Post meta settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display author name' ) }
 					checked={ displayAuthor }
 					onChange={ ( value ) =>
 						setAttributes( { displayAuthor: value } )
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display post date' ) }
 					checked={ displayPostDate }
 					onChange={ ( value ) =>
@@ -264,6 +266,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 			<PanelBody title={ __( 'Featured image settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display featured image' ) }
 					checked={ displayFeaturedImage }
 					onChange={ ( value ) =>
@@ -315,6 +318,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							/>
 						</BaseControl>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Add link to featured image' ) }
 							checked={ addLinkToFeaturedImage }
 							onChange={ ( value ) =>

diff --git a/packages/block-library/src/list/ordered-list-settings.js b/packages/block-library/src/list/ordered-list-settings.js
@@ -25,6 +25,7 @@ const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
 				step="1"
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Reverse list numbering' ) }
 				checked={ reversed || false }
 				onChange={ ( value ) => {

diff --git a/packages/block-library/src/loginout/edit.js b/packages/block-library/src/loginout/edit.js
@@ -13,6 +13,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display login as form' ) }
 						checked={ displayLoginAsForm }
 						onChange={ () =>
@@ -22,6 +23,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Redirect to current URL' ) }
 						checked={ redirectToCurrent }
 						onChange={ () =>

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -243,6 +243,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const mediaTextGeneralSettings = (
 		<PanelBody title={ __( 'Settings' ) }>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Stack on mobile' ) }
 				checked={ isStackedOnMobile }
 				onChange={ () =>
@@ -253,6 +254,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			/>
 			{ mediaType === 'image' && (
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Crop image to fill entire column' ) }
 					checked={ imageFill }
 					onChange={ () =>

diff --git a/packages/block-library/src/more/edit.js b/packages/block-library/src/more/edit.js
@@ -43,6 +43,7 @@ export default function MoreEdit( {
 			<InspectorControls>
 				<PanelBody>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __(
 							'Hide the excerpt on the full content page'
 						) }

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -598,6 +598,7 @@ function Navigation( {
 							<>
 								<h3>{ __( 'Submenus' ) }</h3>
 								<ToggleControl
+									__nextHasNoMarginBottom
 									checked={ openSubmenusOnClick }
 									onChange={ ( value ) => {
 										setAttributes( {
@@ -611,6 +612,7 @@ function Navigation( {
 								/>
 
 								<ToggleControl
+									__nextHasNoMarginBottom
 									checked={ showSubmenuIcon }
 									onChange={ ( value ) => {
 										setAttributes( {