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 '

' . $notice_content . '

'; + }, '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',