From ccc5e8293d2d8c22fbf7690365d0544af751d9ce Mon Sep 17 00:00:00 2001
From: Jon Surrell <jon.surrell@automattic.com>
Date: Tue, 26 Mar 2019 17:19:00 +0100
Subject: [PATCH] Pull changes from wp-calypso

---
 extensions/blocks/wordads/constants.js |  4 ++--
 extensions/blocks/wordads/edit.js      | 15 +++++++++++----
 extensions/blocks/wordads/editor.scss  | 23 ++++++++---------------
 extensions/blocks/wordads/index.js     |  4 ++++
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/extensions/blocks/wordads/constants.js b/extensions/blocks/wordads/constants.js
index 1c56fd7d589f1..b0d21b8fae9c5 100644
--- a/extensions/blocks/wordads/constants.js
+++ b/extensions/blocks/wordads/constants.js
@@ -34,7 +34,7 @@ export const AD_FORMATS = [
 		name: __( 'Leaderboard 728x90' ),
 		tag: 'leaderboard',
 		width: 728,
-		editorPadding: 40,
+		editorPadding: 60,
 	},
 	{
 		height: 50,
@@ -47,7 +47,7 @@ export const AD_FORMATS = [
 		name: __( 'Mobile Leaderboard 320x50' ),
 		tag: 'mobile_leaderboard',
 		width: 320,
-		editorPadding: 60,
+		editorPadding: 100,
 	},
 	{
 		height: 600,
diff --git a/extensions/blocks/wordads/edit.js b/extensions/blocks/wordads/edit.js
index 720588f25bb48..8bb8a74a088f1 100644
--- a/extensions/blocks/wordads/edit.js
+++ b/extensions/blocks/wordads/edit.js
@@ -4,7 +4,7 @@
 import { __ } from '../../utils/i18n';
 import { BlockControls } from '@wordpress/editor';
 import { Component, Fragment } from '@wordpress/element';
-import { Placeholder } from '@wordpress/components';
+import { Placeholder, ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -16,9 +16,13 @@ import { icon, title } from './';
 import './editor.scss';
 
 class WordAdsEdit extends Component {
+	handleHideMobileChange = hideMobile => {
+		this.props.setAttributes( { hideMobile: !! hideMobile } );
+	};
+
 	render() {
 		const { attributes, setAttributes } = this.props;
-		const { format } = attributes;
+		const { format, hideMobile } = attributes;
 		const selectedFormatObject = AD_FORMATS.filter( ( { tag } ) => tag === format )[ 0 ];
 
 		return (
@@ -37,9 +41,12 @@ class WordAdsEdit extends Component {
 							height: selectedFormatObject.height + selectedFormatObject.editorPadding,
 						} }
 					>
-						<div className="jetpack-wordads__header">{ __( 'Advertisements' ) }</div>
 						<Placeholder icon={ icon } label={ title } />
-						<div className="jetpack-wordads__footer">{ __( 'Report this Ad' ) }</div>
+						<ToggleControl
+							checked={ Boolean( hideMobile ) }
+							label={ __( 'Hide ad on mobile views' ) }
+							onChange={ this.handleHideMobileChange }
+						/>
 					</div>
 				</div>
 			</Fragment>
diff --git a/extensions/blocks/wordads/editor.scss b/extensions/blocks/wordads/editor.scss
index 5643383ec889f..a7d08227a4dd8 100644
--- a/extensions/blocks/wordads/editor.scss
+++ b/extensions/blocks/wordads/editor.scss
@@ -6,21 +6,6 @@
 	margin: 0 auto;
 }
 
-.jetpack-wordads__header,
-.jetpack-wordads__footer {
-	font-size: 10px;
-	font-family: sans-serif;
-}
-
-.jetpack-wordads__header {
-	text-align: left;
-}
-
-.jetpack-wordads__footer {
-	text-transform: uppercase;
-	text-align: right;
-}
-
 .jetpack-wordads__ad {
 	display: flex;
 	overflow: hidden;
@@ -30,6 +15,14 @@
 	.components-placeholder {
 		flex-grow: 2;
 	}
+
+	.components-toggle-control__label {
+		line-height: 1.4em;
+	}
+
+	.components-base-control__field {
+		padding: 7px;
+	}
 }
 
 .jetpack-wordads-leaderboard .components-placeholder {
diff --git a/extensions/blocks/wordads/index.js b/extensions/blocks/wordads/index.js
index c42d1bfb29506..9a96630d18060 100644
--- a/extensions/blocks/wordads/index.js
+++ b/extensions/blocks/wordads/index.js
@@ -41,6 +41,10 @@ export const settings = {
 			type: 'string',
 			default: DEFAULT_FORMAT,
 		},
+		hideMobile: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 
 	category: 'jetpack',