Pull changes from wp-calypso

Automattic · Mar 26, 2019 · ccc5e82 · ccc5e82
1 parent 7fc90d1
commit ccc5e82
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -41,6 +41,10 @@ export const settings = {
 			type: 'string',
 			default: DEFAULT_FORMAT,
 		},
+		hideMobile: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 
 	category: 'jetpack',