TextControl: remove margin overrides and add new opt-in prop (pt 2/2) (…

…#47158) * TextControl: remove margin overrides and add new opt-in prop - with minor visual changes * Replace CSS with components based on PR feedback * Revert CSS to previous state based on unintended change * Add prop and VStack to additional component * Add VStack for extra spacing to match trunk
WordPress · Jan 27, 2023 · 493eac0 · 493eac0
1 parent 2b1b1b9
commit 493eac0
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 233 deletions.
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
@@ -9,8 +9,8 @@ import {
 	ExternalLink,
 	VisuallyHidden,
 	CustomSelectControl,
-	BaseControl,
 	ToggleControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 // So that we can illustrate the different formats in the dropdown properly,
@@ -110,31 +110,30 @@ function NonDefaultControls( { format, onChange } ) {
 	);
 
 	return (
-		<>
-			<BaseControl className="block-editor-date-format-picker__custom-format-select-control">
-				<CustomSelectControl
-					__nextUnconstrainedWidth
-					label={ __( 'Choose a format' ) }
-					options={ [ ...suggestedOptions, customOption ] }
-					value={
-						isCustom
-							? customOption
-							: suggestedOptions.find(
-									( option ) => option.format === format
-							  ) ?? customOption
+		<VStack>
+			<CustomSelectControl
+				__nextUnconstrainedWidth
+				label={ __( 'Choose a format' ) }
+				options={ [ ...suggestedOptions, customOption ] }
+				value={
+					isCustom
+						? customOption
+						: suggestedOptions.find(
+								( option ) => option.format === format
+						  ) ?? customOption
+				}
+				onChange={ ( { selectedItem } ) => {
+					if ( selectedItem === customOption ) {
+						setIsCustom( true );
+					} else {
+						setIsCustom( false );
+						onChange( selectedItem.format );
 					}
-					onChange={ ( { selectedItem } ) => {
-						if ( selectedItem === customOption ) {
-							setIsCustom( true );
-						} else {
-							setIsCustom( false );
-							onChange( selectedItem.format );
-						}
-					} }
-				/>
-			</BaseControl>
+				} }
+			/>
 			{ isCustom && (
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
 					help={ createInterpolateElement(
@@ -155,6 +154,6 @@ function NonDefaultControls( { format, onChange } ) {
 					onChange={ ( value ) => onChange( value ) }
 				/>
 			) }
-		</>
+		</VStack>
 	);
 }
diff --git a/packages/block-editor/src/components/date-format-picker/style.scss b/packages/block-editor/src/components/date-format-picker/style.scss
@@ -7,12 +7,6 @@
 	display: block;
 }
 
-.block-editor-date-format-picker__custom-format-select-control {
-	&.components-base-control {
-		margin-bottom: 0;
-	}
-}
-
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
 	border-top: 1px solid $gray-300;
 

diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -12,6 +12,7 @@ import {
 	TextControl,
 	SVG,
 	Path,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { link as linkIcon, close } from '@wordpress/icons';
 
@@ -209,23 +210,26 @@ const ImageURLInputUI = ( {
 	};
 
 	const advancedOptions = (
-		<>
+		<VStack spacing="3">
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Open in new tab' ) }
 				onChange={ onSetNewTab }
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link CSS Class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }
 			/>
-		</>
+		</VStack>
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;

diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
@@ -52,12 +52,6 @@
 		transform: rotate(180deg);
 	}
 }
-.block-editor-url-popover__input-container {
-	.components-base-control:last-child,
-	.components-base-control:last-child .components-base-control__field {
-		margin-bottom: 0;
-	}
-}
 
 .block-editor-url-popover__settings {
 	display: block;
@@ -68,10 +62,6 @@
 .block-editor-url-popover__link-editor,
 .block-editor-url-popover__link-viewer {
 	display: flex;
-
-	.block-editor-url-input .components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-url-popover__link-viewer-url {

diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
@@ -43,6 +43,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
 							setCommentIdInput( parseInt( val ) )

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -102,6 +102,7 @@ const SocialLinkEdit = ( {
 				>
 					<PanelRow>
 						<TextControl
+							__nextHasNoMarginBottom
 							label={ __( 'Link label' ) }
 							help={ __(
 								'Briefly describe the link to help screen reader users.'
@@ -116,6 +117,7 @@ const SocialLinkEdit = ( {
 			</InspectorControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
 					onChange={ ( value ) => setAttributes( { rel: value } ) }

diff --git a/packages/block-library/src/template-part/edit/title-modal.js b/packages/block-library/src/template-part/edit/title-modal.js
@@ -5,10 +5,10 @@ import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	TextControl,
-	Flex,
-	FlexItem,
 	Button,
 	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
@@ -33,16 +33,14 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 			onRequestClose={ onClose }
 		>
 			<form onSubmit={ submitForCreation }>
-				<TextControl
-					label={ __( 'Name' ) }
-					value={ title }
-					onChange={ setTitle }
-				/>
-				<Flex
-					className="wp-block-template-part__placeholder-create-new__title-form-actions"
-					justify="flex-end"
-				>
-					<FlexItem>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+					/>
+					<HStack justify="right">
 						<Button
 							variant="primary"
 							type="submit"
@@ -51,8 +49,8 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 						>
 							{ __( 'Create' ) }
 						</Button>
-					</FlexItem>
-				</Flex>
+					</HStack>
+				</VStack>
 			</form>
 		</Modal>
 	);

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
@@ -71,36 +71,15 @@
 }
 
 .block-library-video-tracks-editor__track-list-track {
-	display: flex;
-	place-content: space-between;
-	align-items: baseline;
 	padding-left: $grid-unit-15;
 }
 
-.block-library-video-tracks-editor__single-track-editor-label-language {
-	display: flex;
-	margin-top: $grid-unit-15;
-	& > .components-base-control {
-		width: 50%;
-	}
-	& > .components-base-control:first-child {
-		margin-right: $grid-unit-20;
-	}
-}
-
 .block-library-video-tracks-editor__single-track-editor-kind-select {
 	max-width: 240px;
 }
 
-.block-library-video-tracks-editor__single-track-editor-buttons-container {
-	display: flex;
-	place-content: space-between;
-	margin-top: $grid-unit-40;
-}
-
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
 	margin-top: $grid-unit-05;
-	margin-bottom: $grid-unit-15;
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
@@ -126,17 +105,3 @@
 	padding: $grid-unit-15;
 }
 
-.block-library-video-tracks-editor__single-track-editor .components-base-control {
-	.components-base-control__label {
-		margin-bottom: $grid-unit-05;
-	}
-	.components-base-control__field {
-		margin-bottom: $grid-unit-15;
-	}
-	.components-text-control__input {
-		margin-left: 0;
-	}
-	.components-input-control__label {
-		margin-bottom: $grid-unit-05;
-	}
-}