Changed approach to have the margin set on the first dom child of Bas…

…eControl
WordPress · Mar 4, 2019 · a98629b · a98629b
1 parent 880534c
commit a98629b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -3,6 +3,7 @@
  */
 import { getBlobByURL, isBlobURL } from '@wordpress/blob';
 import {
+	BaseControl,
 	Button,
 	Disabled,
 	IconButton,
@@ -210,12 +211,12 @@ class VideoEdit extends Component {
 							] }
 						/>
 						<MediaUploadCheck>
-							<div
+							<BaseControl
 								className="editor-video-poster-control"
 							>
-								<span>
+								<div>
 									{ __( 'Poster Image' ) }
-								</span>
+								</div>
 								<MediaUpload
 									title={ __( 'Select Poster Image' ) }
 									onSelect={ this.onSelectPoster }
@@ -235,7 +236,7 @@ class VideoEdit extends Component {
 										{ __( 'Remove Poster Image' ) }
 									</Button>
 								}
-							</div>
+							</BaseControl>
 						</MediaUploadCheck>
 					</PanelBody>
 				</InspectorControls>

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
@@ -9,8 +9,3 @@
 .editor-video-poster-control .components-button + .components-button {
 	margin-top: 1em;
 }
-
-.editor-video-poster-control > span {
-	display: block;
-	margin-bottom: 4px;
-}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 - `withFilters` has been optimized to avoid binding hook handlers for each mounted instance of the component, instead using a single centralized hook delegator.
 - `withFilters` has been optimized to reuse a single shared component definition for all filtered instances of the component.
 - Make `RangeControl` validate min and max properties.
+- Added a margin-bottom to the first dom child inside `BaseControl`, previously only the dom element representing the label contained the margin.
 
 ### Bug Fixes
 

diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss
@@ -5,14 +5,18 @@
 	.components-base-control__field {
 		margin-bottom: $grid-size;
 
+		& > *:first-child {
+			margin-bottom: $grid-size-small;
+		}
+
 		.components-panel__row & {
 			margin-bottom: inherit;
 		}
 	}
 
 	.components-base-control__label {
 		display: block;
-		margin-bottom: $grid-size-small;
+
 	}
 
 	.components-base-control__help {