Add promoted card to in-App marketplace page

[corsonr]

All Submissions:

• Have you followed the WooCommerce Contributing guideline?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

The search on WooCommerce > Marketplace page that shows product from the WooCommerce.com marketplace as cards. During previous re-design phase we added updated product cards in #30410.

This PR adds a new style of "promoted" product cards by:

• adding a new style card
• adding a top border to the card (the color is defined in the JSON feed)
• adding a colored button (the color is defined in the JSON feed)
• adding an automated logic that changes the button text color base on the button background-color

Closes Automattic/woocommerce.com#10885

Screenshots

How to test the changes in this Pull Request:

• Check out this branch.
• Edit includes/admin/class-wc-admin-addons.php.
• On line 66, change $featured = get_transient( 'wc_addons_featured' ); to bypass the transient check:

$featured = false; // TODO - REMOVE THIS

• On line 83, change https://woocommerce.com/wp-json/wccom-extensions/2.0/featured' . $parameter_string to point to our mock WCCOM featured API data: https://gist.githubusercontent.com/corsonr/6ac9a36583dce3a2d2d9e97f4ddf7847/raw/60a38e52de705566bdb74b2059d6acc6a086379b/featured.json.

$raw_featured = wp_safe_remote_get(
	'https://gist.githubusercontent.com/andfinally/be6f6caae34f3f3c1c5de1df0ba30681/raw/featured.json',
	array(
		'headers'    => $headers,
		'user-agent' => 'WooCommerce Addons Page',
	)
);

the headers could have to be removed from the wp_safe_remote_get call.

• On line 142, change 'https://woocommerce.com/wp-json/wccom-extensions/1.0/search' . $parameters, to point to another mock JSON endpoint: https://gist.githubusercontent.com/andfinally/cdea0c85da10bc037dad6aaa8bf28d0e/raw/search.json.

$raw_extensions = wp_safe_remote_get(
	'https://gist.githubusercontent.com/andfinally/cdea0c85da10bc037dad6aaa8bf28d0e/raw/search.json',
	array( 'headers' => $headers )
);

• View the Featured page of WooCommerce > Marketplace on your WooCommerce site wp-admin/admin.php?page=wc-addons&section=_featured.
• In the Discover our favorites group you should see the two new styles of card shown in this screenshot:

• View a category page like wp-admin/admin.php?page=wc-addons&section=marketing-extensions or search results page. You should see the two styles of card shown here at the top:

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully run tests with your changes locally?

Changelog entry

Tweak - Add promoted cards styling to marketplace section. #30861

FOR PR REVIEWER ONLY:

• I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

[andfinally]

I'm currently having trouble getting the API request to work locally with my Woo Core development environment site – I'm getting cURL error 7: Failed to connect to woocommerce.test port 443: Connection refused despite having a filter to set the correct HTTP options. I'll try again later!

[corsonr]

@andfinally I'm testing from the test customer site if that helps 😉

[madeincosmos]

Thank you for the PR @corsonr! Everything looks good to me except for the test site URL that accidentally made its way to the commit, we'll need to replace it with the original feed before merging. Other than that, the cards are looking great on all screen sizes 🌟

[tgglv]

Thanks, @corsonr!

It works like a charm! 🍀

I've made it as a comment rather than approval to ask you to apply Maria's and mine suggestions first.

[andfinally]

Hi @Konamiman, I've set the base to release/5.9, resolved the conflicts and tested again – this is good for review again, thank you!

[github-actions]

Hi @Konamiman, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

• Add the status: needs changelog label
• Add the status: needs testing instructions label

[Konamiman]

Merged into release/5.9 for inclusion in WooCommerce 5.9 RC. Needs to be cherry-picked into trunk.

[Konamiman]

Additional pull request to incorporate these changes in WooCommerce 6.0: #31090