mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Add block styling settings
This commit is contained in:
Alex P
parent
b014403031
commit
2492957dba
3 changed files with 244 additions and 4 deletions
|
|
@ -1003,6 +1003,9 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
|
|||
'shape' => $this->style_for_context( 'shape', $this->context() ),
|
||||
'label' => $this->style_for_context( 'label', $this->context() ),
|
||||
'tagline' => $this->style_for_context( 'tagline', $this->context() ),
|
||||
'height' => in_array( $this->context(), array( 'cart-block', 'checkout-block' ), true )
|
||||
? $this->normalize_height( $this->style_for_context( 'height', $this->context(), 48 ), 40, 55 )
|
||||
: null,
|
||||
)
|
||||
),
|
||||
),
|
||||
|
|
@ -1351,8 +1354,9 @@ document.querySelector("#payment").before(document.querySelector("#ppcp-messages
|
|||
* @return string|int
|
||||
*/
|
||||
private function style_for_context( string $style, string $context, $default = null ) {
|
||||
// Use the cart/checkout styles for blocks.
|
||||
$context = str_replace( '-block', '', $context );
|
||||
if ( $context === 'checkout-block' ) {
|
||||
$context = 'checkout-block-express';
|
||||
}
|
||||
|
||||
$defaults = array(
|
||||
'layout' => 'vertical',
|
||||
|
|
|
|||
|
|
@ -310,7 +310,7 @@ document.addEventListener(
|
|||
|
||||
loadPaypalScript(oldScriptSettings, () => {
|
||||
const payLaterMessagingLocations = ['product', 'cart', 'checkout', 'shop', 'home', 'general'];
|
||||
const paypalButtonLocations = ['product', 'cart', 'checkout', 'mini-cart', 'general'];
|
||||
const paypalButtonLocations = ['product', 'cart', 'checkout', 'mini-cart', 'cart-block', 'checkout-block-express', 'general'];
|
||||
|
||||
paypalButtonLocations.forEach((location) => {
|
||||
const inputNamePrefix = location === 'checkout' ? '#ppcp-button' : '#ppcp-button_' + location;
|
||||
|
|
@ -323,7 +323,7 @@ document.addEventListener(
|
|||
'layout': inputNamePrefix + '_layout',
|
||||
}
|
||||
|
||||
if (location === 'mini-cart') {
|
||||
if (document.querySelector(inputNamePrefix + '_height')) {
|
||||
fields['height'] = inputNamePrefix + '_height';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -802,6 +802,242 @@ return function ( ContainerInterface $container, array $fields ): array {
|
|||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
|
||||
// Block express checkout settings.
|
||||
'button_checkout-block-express_heading' => array(
|
||||
'heading' => __( 'Block Express Checkout Buttons', 'woocommerce-paypal-payments' ),
|
||||
'description' => sprintf(
|
||||
// translators: %1$s and %2$s are the opening and closing of HTML <a> tag.
|
||||
__(
|
||||
'Customize the appearance of the PayPal smart buttons on the %1$sBlock Express Checkout%2$s.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'<a href="https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-block-express-checkout" target="_blank">',
|
||||
'</a>'
|
||||
),
|
||||
'type' => 'ppcp-heading',
|
||||
'screens' => array( State::STATE_START, State::STATE_ONBOARDED ),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_checkout-block-express_label' => array(
|
||||
'title' => __( 'Button Label', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
/**
|
||||
* Returns default label ID of the PayPal button in block express checkout.
|
||||
*/
|
||||
'default' => apply_filters( 'woocommerce_paypal_payments_button_checkout_block_express_label_default', 'paypal' ),
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'This controls the label on the primary button.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'options' => array(
|
||||
'paypal' => __( 'PayPal', 'woocommerce-paypal-payments' ),
|
||||
'checkout' => __( 'Checkout', 'woocommerce-paypal-payments' ),
|
||||
'buynow' => __( 'PayPal Buy Now', 'woocommerce-paypal-payments' ),
|
||||
'pay' => __( 'Pay with PayPal', 'woocommerce-paypal-payments' ),
|
||||
),
|
||||
'screens' => array(
|
||||
State::STATE_START,
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_checkout-block-express_color' => array(
|
||||
'title' => __( 'Color', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'gold',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'Controls the background color of the primary button. Use "Gold" to leverage PayPal\'s recognition and preference, or change it to match your site design or aesthetic.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'options' => array(
|
||||
'gold' => __( 'Gold (Recommended)', 'woocommerce-paypal-payments' ),
|
||||
'blue' => __( 'Blue', 'woocommerce-paypal-payments' ),
|
||||
'silver' => __( 'Silver', 'woocommerce-paypal-payments' ),
|
||||
'black' => __( 'Black', 'woocommerce-paypal-payments' ),
|
||||
'white' => __( 'White', 'woocommerce-paypal-payments' ),
|
||||
),
|
||||
'screens' => array(
|
||||
State::STATE_START,
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_checkout-block-express_shape' => array(
|
||||
'title' => __( 'Shape', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'rect',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'The pill-shaped button\'s unique and powerful shape signifies PayPal in people\'s minds. Use the rectangular button as an alternative when pill-shaped buttons might pose design challenges.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'options' => array(
|
||||
'pill' => __( 'Pill', 'woocommerce-paypal-payments' ),
|
||||
'rect' => __( 'Rectangle', 'woocommerce-paypal-payments' ),
|
||||
),
|
||||
'screens' => array(
|
||||
State::STATE_START,
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_checkout-block-express_height' => array(
|
||||
'title' => __( 'Button Height', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'number',
|
||||
'default' => '48',
|
||||
'custom_attributes' => array(
|
||||
'min' => 40,
|
||||
'max' => 55,
|
||||
),
|
||||
'desc_tip' => true,
|
||||
'description' => __( 'Set a value from 40 to 55.', 'woocommerce-paypal-payments' ),
|
||||
'screens' => array(
|
||||
State::STATE_START,
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_checkout-block-express_preview' => array(
|
||||
'type' => 'ppcp-text',
|
||||
'text' => $render_preview_element( 'ppcpCheckoutBlockExpressButtonPreview' ),
|
||||
'screens' => array(
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
|
||||
// Block cart settings.
|
||||
'button_cart-block_heading' => array(
|
||||
'heading' => __( 'Block Cart Buttons', 'woocommerce-paypal-payments' ),
|
||||
'description' => sprintf(
|
||||
// translators: %1$s and %2$s are the opening and closing of HTML <a> tag.
|
||||
__(
|
||||
'Customize the appearance of the PayPal smart buttons on the %1$sBlock Cart%2$s.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'<a href="https://woocommerce.com/document/woocommerce-paypal-payments/#button-on-cart-block" target="_blank">',
|
||||
'</a>'
|
||||
),
|
||||
'type' => 'ppcp-heading',
|
||||
'screens' => array( State::STATE_START, State::STATE_ONBOARDED ),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_cart-block_label' => array(
|
||||
'title' => __( 'Button Label', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
/**
|
||||
* Returns default label ID of the PayPal button in block cart.
|
||||
*/
|
||||
'default' => apply_filters( 'woocommerce_paypal_payments_button_cart_block_label_default', 'paypal' ),
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'This controls the label on the primary button.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'options' => array(
|
||||
'paypal' => __( 'PayPal', 'woocommerce-paypal-payments' ),
|
||||
'checkout' => __( 'Checkout', 'woocommerce-paypal-payments' ),
|
||||
'buynow' => __( 'PayPal Buy Now', 'woocommerce-paypal-payments' ),
|
||||
'pay' => __( 'Pay with PayPal', 'woocommerce-paypal-payments' ),
|
||||
),
|
||||
'screens' => array(
|
||||
State::STATE_START,
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_cart-block_color' => array(
|
||||
'title' => __( 'Color', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'gold',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'Controls the background color of the primary button. Use "Gold" to leverage PayPal\'s recognition and preference, or change it to match your site design or aesthetic.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'options' => array(
|
||||
'gold' => __( 'Gold (Recommended)', 'woocommerce-paypal-payments' ),
|
||||
'blue' => __( 'Blue', 'woocommerce-paypal-payments' ),
|
||||
'silver' => __( 'Silver', 'woocommerce-paypal-payments' ),
|
||||
'black' => __( 'Black', 'woocommerce-paypal-payments' ),
|
||||
'white' => __( 'White', 'woocommerce-paypal-payments' ),
|
||||
),
|
||||
'screens' => array(
|
||||
State::STATE_START,
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_cart-block_shape' => array(
|
||||
'title' => __( 'Shape', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'select',
|
||||
'class' => array(),
|
||||
'input_class' => array( 'wc-enhanced-select' ),
|
||||
'default' => 'rect',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'The pill-shaped button\'s unique and powerful shape signifies PayPal in people\'s minds. Use the rectangular button as an alternative when pill-shaped buttons might pose design challenges.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'options' => array(
|
||||
'pill' => __( 'Pill', 'woocommerce-paypal-payments' ),
|
||||
'rect' => __( 'Rectangle', 'woocommerce-paypal-payments' ),
|
||||
),
|
||||
'screens' => array(
|
||||
State::STATE_START,
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_cart-block_height' => array(
|
||||
'title' => __( 'Button Height', 'woocommerce-paypal-payments' ),
|
||||
'type' => 'number',
|
||||
'default' => '48',
|
||||
'custom_attributes' => array(
|
||||
'min' => 40,
|
||||
'max' => 55,
|
||||
),
|
||||
'desc_tip' => true,
|
||||
'description' => __( 'Set a value from 40 to 55.', 'woocommerce-paypal-payments' ),
|
||||
'screens' => array(
|
||||
State::STATE_START,
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
'button_cart-block_preview' => array(
|
||||
'type' => 'ppcp-text',
|
||||
'text' => $render_preview_element( 'ppcpCartBlockButtonPreview' ),
|
||||
'screens' => array(
|
||||
State::STATE_ONBOARDED,
|
||||
),
|
||||
'requirements' => array(),
|
||||
'gateway' => 'paypal',
|
||||
),
|
||||
);
|
||||
|
||||
return array_merge( $fields, $smart_button_fields );
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
