feat(ads): use ad sizes from plugin (#1577)

assets/wizards/advertising/components/ad-unit-size-control/index.js

@@ -20,29 +20,44 @@ import { __ } from '@wordpress/i18n';
  */
 import { SelectControl, TextControl } from '../../../../components/src';
 
+const IAB_SIZES = window.newspack_ads_wizard.iab_sizes;
+
+/**
+ * Get the list of sizes.
+ *
+ * @return {Array} List of sizes.
+ */
+export function getSizes() {
+	return [
+		...Object.keys( IAB_SIZES ).map( sizeString => sizeString.split( 'x' ).map( Number ) ),
+		'fluid',
+	];
+}
+
 /**
- * Interactive Advertising Bureau's standard ad sizes.
+ * Get size label from IAB standard sizes. Returns {width}x{height} if label is
+ * not found.
+ *
+ * @param {Array|string} size Size array or string.
+ * @return {string} Size label.
  */
-export const DEFAULT_SIZES = [
-	[ 970, 250 ],
-	[ 970, 90 ],
-	[ 728, 90 ],
-	[ 300, 600 ],
-	[ 300, 250 ],
-	[ 300, 1050 ],
-	[ 160, 600 ],
-	[ 320, 50 ],
-	[ 320, 100 ],
-	[ 120, 60 ],
-	'fluid',
-];
+export function getSizeLabel( size ) {
+	if ( Array.isArray( size ) ) {
+		size = size.join( 'x' );
+	}
+	const label = IAB_SIZES[ size ];
+	if ( label ) {
+		return `${ label } (${ size })`;
+	}
+	return size;
+}
 
 /**
  * Ad Unit Size Control.
  */
 const AdUnitSizeControl = ( { value, selectedOptions, onChange } ) => {
 	const [ isCustom, setIsCustom ] = useState( false );
-	const options = DEFAULT_SIZES.filter(
+	const options = getSizes().filter(
 		size =>
 			JSON.stringify( value ) === JSON.stringify( size ) ||
 			! selectedOptions.find(
@@ -51,22 +66,15 @@ const AdUnitSizeControl = ( { value, selectedOptions, onChange } ) => {
 	);
 	const sizeIndex = isCustom
 		? -1
-		: options.findIndex( size => {
-				if ( typeof value === 'string' ) {
-					return value === size;
-				} else if ( Array.isArray( value ) ) {
-					return size[ 0 ] === value[ 0 ] && size[ 1 ] === value[ 1 ];
-				}
-				return false;
-		  } );
+		: options.findIndex( size => JSON.stringify( size ) === JSON.stringify( value ) );
 	return (
 		<>
 			<SelectControl
 				label={ __( 'Size', 'newspack' ) }
 				value={ sizeIndex }
 				options={ [
 					...options.map( ( size, index ) => ( {
-						label: Array.isArray( size ) ? `${ size[ 0 ] } x ${ size[ 1 ] }` : startCase( size ),
+						label: Array.isArray( size ) ? getSizeLabel( size ) : startCase( size ),
 						value: index,
 					} ) ),
 					{ label: __( 'Custom', 'newspack' ), value: -1 },

assets/wizards/advertising/index.js

@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 import { withWizard } from '../../components/src';
 import Router from '../../components/src/proxied-imports/router';
 import { AdUnit, AdUnits, Providers, Settings, Placements, Suppression, AddOns } from './views';
-import { DEFAULT_SIZES as adUnitSizes } from './components/ad-unit-size-control';
+import { getSizes } from './components/ad-unit-size-control';
 import './style.scss';
 
 const { HashRouter, Redirect, Route, Switch } = Router;
@@ -233,7 +233,7 @@ class AdvertisingWizard extends Component {
 											id: 0,
 											name: '',
 											code: '',
-											sizes: [ adUnitSizes[ 0 ] ],
+											sizes: [ getSizes()[ 0 ] ],
 											fluid: false,
 										}
 									}

assets/wizards/advertising/views/ad-unit/index.js

@@ -20,9 +20,7 @@ import {
 	TextControl,
 	withWizardScreen,
 } from '../../../../components/src';
-import AdUnitSizeControl, {
-	DEFAULT_SIZES as adUnitSizes,
-} from '../../components/ad-unit-size-control';
+import AdUnitSizeControl, { getSizes } from '../../components/ad-unit-size-control';
 
 /**
  * New/Edit Ad Unit Screen.
@@ -55,7 +53,12 @@ class AdUnit extends Component {
 	}
 
 	getNextAvailableSize() {
-		return adUnitSizes.find( size => ! this.getSizeOptions().includes( size ) ) || [];
+		const sizes = getSizes();
+		const options = this.getSizeOptions().map( size => size.toString() );
+		const index = sizes
+			.map( size => size.toString() )
+			.findIndex( size => ! options.includes( size ) );
+		return sizes[ index ] || [ 0, 0 ];
 	}
 
 	/**

assets/wizards/advertising/views/ad-units/index.js

@@ -174,11 +174,15 @@ const AdUnits = ( {
 												<i>{ __( 'Legacy ad unit.', 'newspack' ) }</i> |{ ' ' }
 											</>
 										) : null }
-										{ __( 'Sizes:', 'newspack' ) }{ ' ' }
-										{ adUnit.sizes.map( ( size, i ) => (
-											<code key={ i }>{ size.join( 'x' ) }</code>
-										) ) }
-										{ adUnit.fluid && <code>{ __( 'Fluid', 'newspack' ) }</code> }
+										{ adUnit.sizes?.length || adUnit.fluid ? (
+											<>
+												{ __( 'Sizes:', 'newspack' ) }{ ' ' }
+												{ adUnit.sizes.map( ( size, i ) => (
+													<code key={ i }>{ Array.isArray( size ) ? size.join( 'x' ) : size }</code>
+												) ) }
+												{ adUnit.fluid && <code>{ __( 'Fluid', 'newspack' ) }</code> }
+											</>
+										) : null }
 									</span>
 								) }
 								actionText={

includes/wizards/class-advertising-wizard.php

@@ -7,7 +7,9 @@
 
 namespace Newspack;
 
-use \WP_Error, \WP_Query;
+use \WP_Error;
+
+use \Newspack_Ads\Providers\GAM_Model;
 
 defined( 'ABSPATH' ) || exit;
 
@@ -341,11 +343,8 @@ function( $acc, $code ) {
 	 */
 	public function api_update_network_code( $request ) {
 		// Update GAM or legacy network code.
-		if ( $request['is_gam'] ) {
-			update_option( \Newspack_Ads\Providers\GAM_Model::OPTION_NAME_GAM_NETWORK_CODE, $request['network_code'] );
-		} else {
-			update_option( \Newspack_Ads\Providers\GAM_Model::OPTION_NAME_LEGACY_NETWORK_CODE, $request['network_code'] );
-		}
+		$option_name = $request['is_gam'] ? GAM_Model::OPTION_NAME_GAM_NETWORK_CODE : GAM_Model::OPTION_NAME_LEGACY_NETWORK_CODE;
+		update_option( $option_name, $request['network_code'] );
 		return \rest_ensure_response( [] );
 	}
 
@@ -575,6 +574,14 @@ public function enqueue_scripts_and_styles() {
 		);
 		\wp_style_add_data( 'newspack-advertising-wizard', 'rtl', 'replace' );
 		\wp_enqueue_style( 'newspack-advertising-wizard' );
+
+		\wp_localize_script(
+			'newspack-advertising-wizard',
+			'newspack_ads_wizard',
+			array(
+				'iab_sizes' => \Newspack_Ads\get_iab_sizes(),
+			)
+		);
 	}
 
 	/**