Merge pull request #1873 from woocommerce/update/1787-support-portrai…

…t-marketing-image PMax Assets: Support the portrait marketing images
woocommerce · Feb 14, 2023 · 583af8b · 583af8b
2 parents fd50fcb + cbcabcc
commit 583af8b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 6 deletions.
diff --git a/js/src/components/paid-ads/asset-group/images-selector.scss b/js/src/components/paid-ads/asset-group/images-selector.scss
@@ -15,6 +15,7 @@
 	}
 
 	&__replace-image-button {
+		justify-content: center;
 		width: 100px;
 		height: 100px;
 		padding: 0;

diff --git a/js/src/components/paid-ads/assetSpecs.js b/js/src/components/paid-ads/assetSpecs.js
@@ -32,7 +32,7 @@ const ASSET_IMAGE_SPECS = [
 	{
 		key: ASSET_FORM_KEY.MARKETING_IMAGE,
 		min: 1,
-		max: 20,
+		max: 8,
 		imageConfig: {
 			minWidth: 600,
 			minHeight: 314,
@@ -58,7 +58,7 @@ const ASSET_IMAGE_SPECS = [
 	{
 		key: ASSET_FORM_KEY.SQUARE_MARKETING_IMAGE,
 		min: 1,
-		max: 20,
+		max: 8,
 		imageConfig: {
 			minWidth: 300,
 			minHeight: 300,
@@ -81,6 +81,32 @@ const ASSET_IMAGE_SPECS = [
 			'google-listings-and-ads'
 		),
 	},
+	{
+		key: ASSET_FORM_KEY.PORTRAIT_MARKETING_IMAGE,
+		min: 0,
+		max: 4,
+		imageConfig: {
+			minWidth: 480,
+			minHeight: 600,
+			suggestedWidth: 960,
+			suggestedHeight: 1200,
+		},
+		heading: _x(
+			'Portrait images',
+			'Plural asset field name as the heading',
+			'google-listings-and-ads'
+		),
+		helpSubheading: _x(
+			'Portrait image (4:5)',
+			'Asset field name with its aspect ratio as the subheading within a help tip',
+			'google-listings-and-ads'
+		),
+		lowercaseName: _x(
+			'portrait',
+			'Lowercase asset field name',
+			'google-listings-and-ads'
+		),
+	},
 	{
 		key: ASSET_FORM_KEY.LOGO,
 		min: 1,

diff --git a/js/src/components/paid-ads/campaign-assets-form.js b/js/src/components/paid-ads/campaign-assets-form.js
@@ -22,6 +22,7 @@ const emptyAssetGroup = {
 	[ ASSET_FORM_KEY.BUSINESS_NAME ]: null,
 	[ ASSET_FORM_KEY.MARKETING_IMAGE ]: [],
 	[ ASSET_FORM_KEY.SQUARE_MARKETING_IMAGE ]: [],
+	[ ASSET_FORM_KEY.PORTRAIT_MARKETING_IMAGE ]: [],
 	[ ASSET_FORM_KEY.LOGO ]: [],
 	[ ASSET_FORM_KEY.HEADLINE ]: [],
 	[ ASSET_FORM_KEY.LONG_HEADLINE ]: [],

diff --git a/js/src/components/paid-ads/validateAssetGroup.test.js b/js/src/components/paid-ads/validateAssetGroup.test.js
@@ -30,6 +30,7 @@ describe( 'validateAssetGroup', () => {
 		values = {
 			[ ASSET_FORM_KEY.MARKETING_IMAGE ]: [ 'https://image_1' ],
 			[ ASSET_FORM_KEY.SQUARE_MARKETING_IMAGE ]: [ 'https://image_1' ],
+			[ ASSET_FORM_KEY.PORTRAIT_MARKETING_IMAGE ]: [ 'https://image_1' ],
 			[ ASSET_FORM_KEY.LOGO ]: [ 'https://logo_1' ],
 			[ ASSET_FORM_KEY.HEADLINE ]: [
 				'headline 1',
@@ -55,6 +56,11 @@ describe( 'validateAssetGroup', () => {
 		it.each( ASSET_IMAGE_SPECS.map( ( spec ) => [ spec.key, spec.min ] ) )(
 			'When the length of values.%s is less than %s, it should not pass',
 			( key, min ) => {
+				// It's impossible to get an array with a negative length, so this test doesn't need to cover this case.
+				if ( min === 0 ) {
+					return;
+				}
+
 				values[ key ] = Array.from( { length: min - 1 }, toUrl );
 				const error = validateAssetGroup( values );
 

diff --git a/js/src/constants.js b/js/src/constants.js
@@ -85,6 +85,7 @@ export const ASSET_KEY = {
 	BUSINESS_NAME: 'business_name',
 	MARKETING_IMAGE: 'marketing_image',
 	SQUARE_MARKETING_IMAGE: 'square_marketing_image',
+	PORTRAIT_MARKETING_IMAGE: 'portrait_marketing_image',
 	LOGO: 'logo',
 	HEADLINE: 'headline',
 	LONG_HEADLINE: 'long_headline',

diff --git a/js/src/data/types.js b/js/src/data/types.js
@@ -5,8 +5,9 @@
  * @property {string[]} headline The headlines for the ad.
  * @property {string[]} long_headline The headlines for the larger ad.
  * @property {string[]} description The descriptive text for the ad to provide additional context or details.
- * @property {string[]} marketing_images The URLs of the landscape images.
- * @property {string[]} square_marketing_images The URLs of the square images.
+ * @property {string[]} marketing_image The URLs of the landscape images.
+ * @property {string[]} square_marketing_image The URLs of the square images.
+ * @property {string[]} portrait_marketing_image The URLs of the portrait images.
  * @property {string[]} logo The URLs of the logo images.
  * @property {string[]} display_url_path The path part of the display URL on the ad.
  * @property {string | null} call_to_action_selection The call-to-action text on the ad to let users know what the ad will get them to do. `null` if not selected.
@@ -24,8 +25,9 @@
  * @property {AssetEntity[]} [headline] The headlines for the ad.
  * @property {AssetEntity[]} [long_headline] The headlines for the larger ad.
  * @property {AssetEntity[]} [description] The descriptive text for the ad to provide additional context or details.
- * @property {AssetEntity[]} [marketing_images] The URLs of the landscape images.
- * @property {AssetEntity[]} [square_marketing_images] The URLs of the square images.
+ * @property {AssetEntity[]} [marketing_image] The URLs of the landscape images.
+ * @property {AssetEntity[]} [square_marketing_image] The URLs of the square images.
+ * @property {AssetEntity[]} [portrait_marketing_image] The URLs of the portrait images.
  * @property {AssetEntity[]} [logo] The URLs of the logo images.
  * @property {AssetEntity} [call_to_action_selection] The call-to-action text on the ad to let users know what the ad will get them to do. `null` if not selected.
  */