diff --git a/modules/ppcp-blocks/resources/css/gateway-editor.scss b/modules/ppcp-blocks/resources/css/gateway-editor.scss
new file mode 100644
index 000000000..68c419cb8
--- /dev/null
+++ b/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;
+}
diff --git a/modules/ppcp-blocks/resources/js/checkout-block.js b/modules/ppcp-blocks/resources/js/checkout-block.js
index 31b7c1fda..21c0c40cd 100644
--- a/modules/ppcp-blocks/resources/js/checkout-block.js
+++ b/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 (
{
- return false;
- } }
- fundingSource={ fundingSource }
+ className={ `ppc-button-container-${ fundingSource }` }
+ fundingSource={ fundingSource }
+ style={ style }
+ forceReRender={ [ buttonAttributes || {} ] }
+ onClick={ () => false }
/>
);
@@ -787,7 +823,7 @@ if ( block_enabled ) {
name: config.id,
label:
,
content: ,
- edit: ,
+ edit: ,
ariaLabel: config.title,
canMakePayment: () => {
return true;
@@ -819,9 +855,11 @@ if ( block_enabled ) {
fundingSource={ fundingSource }
/>
),
- edit: ,
+ edit: (
+
+ ),
ariaLabel: config.title,
canMakePayment: async () => {
if ( ! paypalScriptPromise ) {
@@ -845,6 +883,7 @@ if ( block_enabled ) {
},
supports: {
features,
+ style: [ 'height', 'borderRadius' ],
},
} );
}
diff --git a/modules/ppcp-blocks/src/BlocksModule.php b/modules/ppcp-blocks/src/BlocksModule.php
index dc30664f4..01cb9ae15 100644
--- a/modules/ppcp-blocks/src/BlocksModule.php
+++ b/modules/ppcp-blocks/src/BlocksModule.php
@@ -126,6 +126,23 @@ static function () use ( $c ) {
}
);
+ // 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 ) {
diff --git a/modules/ppcp-blocks/webpack.config.js b/modules/ppcp-blocks/webpack.config.js
index 44ab3e68f..72bbc93ea 100644
--- a/modules/ppcp-blocks/webpack.config.js
+++ b/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/'),
diff --git a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
index 23e642c8f..768f95c75 100644
--- a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
+++ b/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);
}
diff --git a/modules/ppcp-wc-gateway/services.php b/modules/ppcp-wc-gateway/services.php
index 7e4617b46..61b7772e9 100644
--- a/modules/ppcp-wc-gateway/services.php
+++ b/modules/ppcp-wc-gateway/services.php
@@ -1843,6 +1843,24 @@ static function ( ContainerInterface $container ): string {
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 = '' . __( 'Checkout block', 'woocommerce-paypal-payments' ) . '';
+ } else {
+ $block_checkout_page_string_html = __( 'Checkout block', 'woocommerce-paypal-payments' );
+ }
+
+ $notice_content = sprintf(
+ /* translators: %1$s: URL to the Checkout edit page. */
+ __(
+ 'Important: The Cart
& Express Checkout
Smart Button Stylings may be controlled by the %1$s configuration.',
+ 'woocommerce-paypal-payments'
+ ),
+ $block_checkout_page_string_html
+ );
+
+ return '';
+ },
'wcgateway.settings.pay-later.messaging-locations' => static function( ContainerInterface $container ): array {
$button_locations = $container->get( 'wcgateway.button.locations' );
unset( $button_locations['mini-cart'] );
diff --git a/modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php b/modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php
index 18f7cdc48..9f02cc873 100644
--- a/modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php
+++ b/modules/ppcp-wc-gateway/src/Settings/Fields/paypal-smart-button-fields.php
@@ -88,6 +88,7 @@
'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',