Merge pull request #2448 from woocommerce/PCP-3202-retrieve-button-styling-properties-from-woo-commerce-checkout-block-ver-2

POC: Receive button properties from the Checkout Block (3202)

modules/ppcp-blocks/resources/css/gateway-editor.scss

@@ -0,0 +1,3 @@
+li[id^="express-payment-method-ppcp-"] div[class^="ppc-button-container-"] {
+		display: flex;
+}

modules/ppcp-blocks/resources/js/checkout-block.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useMemo } from '@wordpress/element';
 import {
 	registerExpressPaymentMethod,
 	registerPaymentMethod,
@@ -41,6 +41,7 @@ const PayPalComponent = ( {
 	shippingData,
 	isEditing,
 	fundingSource,
+	buttonAttributes,
 } ) => {
 	const { onPaymentSetup, onCheckoutFail, onCheckoutValidation } =
 		eventRegistration;
@@ -614,6 +615,15 @@ const PayPalComponent = ( {
 		fundingSource
 	);
 
+	if ( typeof buttonAttributes !== 'undefined' ) {
+		style.height = buttonAttributes?.height
+			? Number( buttonAttributes.height )
+			: style.height;
+		style.borderRadius = buttonAttributes?.borderRadius
+			? Number( buttonAttributes.borderRadius )
+			: style.borderRadius;
+	}
+
 	if ( ! paypalScriptLoaded ) {
 		return null;
 	}
@@ -688,20 +698,46 @@ const PayPalComponent = ( {
 	);
 };
 
-const BlockEditorPayPalComponent = ({ fundingSource } ) => {
-	const urlParams = {
-		clientId: 'test',
-		...config.scriptData.url_params,
-		dataNamespace: 'ppcp-blocks-editor-paypal-buttons',
-		components: 'buttons',
-	};
+const BlockEditorPayPalComponent = ( { fundingSource, buttonAttributes } ) => {
+	const urlParams = useMemo(
+		() => ( {
+			clientId: 'test',
+			...config.scriptData.url_params,
+			dataNamespace: 'ppcp-blocks-editor-paypal-buttons',
+			components: 'buttons',
+		} ),
+		[]
+	);
+
+	const style = useMemo( () => {
+		const configStyle = normalizeStyleForFundingSource(
+			config.scriptData.button.style,
+			fundingSource
+		);
+
+		if ( buttonAttributes ) {
+			return {
+				...configStyle,
+				height: buttonAttributes.height
+					? Number( buttonAttributes.height )
+					: configStyle.height,
+				borderRadius: buttonAttributes.borderRadius
+					? Number( buttonAttributes.borderRadius )
+					: configStyle.borderRadius,
+			};
+		}
+
+		return configStyle;
+	}, [ fundingSource, buttonAttributes ] );
+
 	return (
 		<PayPalScriptProvider options={ urlParams }>
 			<PayPalButtons
-				onClick={ ( data, actions ) => {
-					return false;
-				} }
-                fundingSource={ fundingSource }
+				className={ `ppc-button-container-${ fundingSource }` }
+				fundingSource={ fundingSource }
+				style={ style }
+				forceReRender={ [ buttonAttributes || {} ] }
+				onClick={ () => false }
 			/>
 		</PayPalScriptProvider>
 	);
@@ -787,7 +823,7 @@ if ( block_enabled ) {
 			name: config.id,
 			label: <div dangerouslySetInnerHTML={ { __html: config.title } } />,
 			content: <PayPalComponent isEditing={ false } />,
-			edit: <BlockEditorPayPalComponent fundingSource={ 'paypal' }/>,
+			edit: <BlockEditorPayPalComponent fundingSource={ 'paypal' } />,
 			ariaLabel: config.title,
 			canMakePayment: () => {
 				return true;
@@ -819,9 +855,11 @@ if ( block_enabled ) {
 						fundingSource={ fundingSource }
 					/>
 				),
-				edit: <BlockEditorPayPalComponent
-                    fundingSource={ fundingSource }
-                />,
+				edit: (
+					<BlockEditorPayPalComponent
+						fundingSource={ fundingSource }
+					/>
+				),
 				ariaLabel: config.title,
 				canMakePayment: async () => {
 					if ( ! paypalScriptPromise ) {
@@ -845,6 +883,7 @@ if ( block_enabled ) {
 				},
 				supports: {
 					features,
+					style: [ 'height', 'borderRadius' ],
 				},
 			} );
 		}

modules/ppcp-blocks/src/BlocksModule.php

@@ -126,6 +126,23 @@ class BlocksModule implements ServiceModule, ExtendingModule, ExecutableModule {
 			}
 		);
 
+		// Enqueue editor styles.
+		add_action(
+			'enqueue_block_editor_assets',
+			static function () use ( $c ) {
+				$module_url    = $c->get( 'blocks.url' );
+				$asset_version = $c->get( 'ppcp.asset-version' );
+
+				wp_register_style(
+					'wc-ppcp-blocks-editor',
+					untrailingslashit( $module_url ) . '/assets/css/gateway-editor.css',
+					array(),
+					$asset_version
+				);
+				wp_enqueue_style( 'wc-ppcp-blocks-editor' );
+			}
+		);
+
 		add_filter(
 			'woocommerce_paypal_payments_sdk_components_hook',
 			function( array $components ) {

modules/ppcp-blocks/webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
     entry: {
         'checkout-block': path.resolve('./resources/js/checkout-block.js'),
         'advanced-card-checkout-block': path.resolve('./resources/js/advanced-card-checkout-block.js'),
-        "gateway": path.resolve('./resources/css/gateway.scss')
+        "gateway": path.resolve('./resources/css/gateway.scss'),
+        "gateway-editor": path.resolve('./resources/css/gateway-editor.scss')
     },
     output: {
         path: path.resolve(__dirname, 'assets/'),

modules/ppcp-wc-gateway/resources/css/gateway-settings.scss

@@ -32,7 +32,7 @@
 
 	@media (min-width: 1200px) {
 		float: right;
-		margin-top: -300px;
+		margin-top: -250px;
 		max-width: calc(100vw - 850px);
 	}
 

modules/ppcp-wc-gateway/services.php

@@ -1843,6 +1843,24 @@ return array(
 		unset( $button_locations['mini-cart'] );
 		return array_keys( $button_locations );
 	},
+	'wcgateway.button.recommended-styling-notice'          => static function ( ContainerInterface $container ) : string {
+		if ( CartCheckoutDetector::has_block_checkout() ) {
+			$block_checkout_page_string_html = '<a href="' . esc_url( wc_get_page_permalink( 'checkout' ) ) . '">' . __( 'Checkout block', 'woocommerce-paypal-payments' ) . '</a>';
+		} else {
+			$block_checkout_page_string_html = __( 'Checkout block', 'woocommerce-paypal-payments' );
+		}
+
+		$notice_content = sprintf(
+		/* translators: %1$s: URL to the Checkout edit page. */
+			__(
+				'<span class="highlight">Important:</span> The <code>Cart</code> & <code>Express Checkout</code> <strong>Smart Button Stylings</strong> may be controlled by the %1$s configuration.',
+				'woocommerce-paypal-payments'
+			),
+			$block_checkout_page_string_html
+		);
+
+		return '<div class="ppcp-notice ppcp-notice-warning"><p>' . $notice_content . '</p></div>';
+	},
 	'wcgateway.settings.pay-later.messaging-locations'     => static function( ContainerInterface $container ): array {
 		$button_locations = $container->get( 'wcgateway.button.locations' );
 		unset( $button_locations['mini-cart'] );

modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php

@@ -88,6 +88,7 @@ return function ( ContainerInterface $container, array $fields ): array {
 			'type'         => 'checkbox',
 			'label'        => __( 'Customize smart button style per location', 'woocommerce-paypal-payments' ),
 			'default'      => false,
+			'description'  => $container->has( 'wcgateway.button.recommended-styling-notice' ) ? $container->get( 'wcgateway.button.recommended-styling-notice' ) : '',
 			'screens'      => array( State::STATE_START, State::STATE_ONBOARDED ),
 			'requirements' => array(),
 			'gateway'      => 'paypal',