From a98629b177cdb7eb92e3e431477b1dbbf153f7e1 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 4 Mar 2019 09:11:32 +0000
Subject: [PATCH] Changed approach to have the margin set on the first dom
 child of BaseControl

---
 packages/block-library/src/video/edit.js        | 9 +++++----
 packages/block-library/src/video/editor.scss    | 5 -----
 packages/components/CHANGELOG.md                | 1 +
 packages/components/src/base-control/style.scss | 6 +++++-
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index fb076b28550e4..ddaefc54c55f8 100644
--- 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
index 207ee72afe05b..e75b149e5077c 100644
--- 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
index f8ad35ad5c426..505ffc0a0608e 100644
--- 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
index e3af118add5e1..8253830b370bb 100644
--- a/packages/components/src/base-control/style.scss
+++ b/packages/components/src/base-control/style.scss
@@ -5,6 +5,10 @@
 	.components-base-control__field {
 		margin-bottom: $grid-size;
 
+		& > *:first-child {
+			margin-bottom: $grid-size-small;
+		}
+
 		.components-panel__row & {
 			margin-bottom: inherit;
 		}
@@ -12,7 +16,7 @@
 
 	.components-base-control__label {
 		display: block;
-		margin-bottom: $grid-size-small;
+
 	}
 
 	.components-base-control__help {