Polish poster image button arrangement. (#20754)

Fixes #20704. This changes the phrasing, the button types, and the arrangement of the video poster buttons.
WordPress · Mar 10, 2020 · 8f337a8 · 8f337a8
1 parent f0ea36c
commit 8f337a8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -184,16 +184,16 @@ class VideoEdit extends Component {
 									}
 									render={ ( { open } ) => (
 										<Button
-											isSecondary
+											isPrimary
 											onClick={ open }
 											ref={ this.posterImageButton }
 											aria-describedby={
 												videoPosterDescription
 											}
 										>
 											{ ! this.props.attributes.poster
-												? __( 'Select Poster Image' )
-												: __( 'Replace image' ) }
+												? __( 'Select' )
+												: __( 'Replace' ) }
 										</Button>
 									) }
 								/>
@@ -212,10 +212,9 @@ class VideoEdit extends Component {
 								{ !! this.props.attributes.poster && (
 									<Button
 										onClick={ this.onRemovePoster }
-										isLink
-										isDestructive
+										isTertiary
 									>
-										{ __( 'Remove Poster Image' ) }
+										{ __( 'Remove' ) }
 									</Button>
 								) }
 							</BaseControl>

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
@@ -2,11 +2,12 @@
 	text-align: center;
 }
 
-.editor-video-poster-control .components-button {
-	display: block;
-	margin-right: 8px;
-}
+.editor-video-poster-control {
+	.components-base-control__label {
+		display: block;
+	}
 
-.editor-video-poster-control .components-button + .components-button {
-	margin-top: 1em;
+	.components-button {
+		margin-right: $grid-unit-10;
+	}
 }
diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss
@@ -12,7 +12,7 @@
 
 	.components-base-control__label {
 		display: inline-block;
-		margin-bottom: $grid-unit-05;
+		margin-bottom: $grid-unit-10;
 	}
 
 	.components-base-control__help {