woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

Adjust block options, add text-size

Browse source
This commit is contained in:
Narek Zakarian 2024-03-14 17:54:02 +04:00
parent 6f8131f864
commit dc002c7a9b
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
2 changed files with 21 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

32
modules/ppcp-paylater-block/resources/js/edit.js
View file

@ -7,7 +7,7 @@ import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Help
import PayPalMessages from "./components/PayPalMessages"; import PayPalMessages from "./components/PayPalMessages";
export default function Edit( { attributes, clientId, setAttributes } ) { export default function Edit( { attributes, clientId, setAttributes } ) {
const { layout, logo, position, color, flexColor, flexRatio, placement, id } = attributes; const { layout, logo, position, color, size, flexColor, flexRatio, placement, id } = attributes;
const isFlex = layout === 'flex'; const isFlex = layout === 'flex';
const [paypalScriptState, setPaypalScriptState] = useState(null); const [paypalScriptState, setPaypalScriptState] = useState(null);
@ -30,6 +30,7 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
ratio: flexRatio, ratio: flexRatio,
text: { text: {
color, color,
size
}, },
}; };
@ -129,10 +130,10 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
{ !isFlex && (<SelectControl { !isFlex && (<SelectControl
label={__('Logo', 'woocommerce-paypal-payments')} label={__('Logo', 'woocommerce-paypal-payments')}
options={[ options={[
{ label: __('Primary', 'woocommerce-paypal-payments'), value: 'primary' }, { label: __('Full logo', 'woocommerce-paypal-payments'), value: 'primary' },
{ label: __('Alternative', 'woocommerce-paypal-payments'), value: 'alternative' }, { label: __('Monogram', 'woocommerce-paypal-payments'), value: 'alternative' },
{ label: __('Inline', 'woocommerce-paypal-payments'), value: 'inline' }, { label: __('Inline', 'woocommerce-paypal-payments'), value: 'inline' },
{ label: __('None', 'woocommerce-paypal-payments'), value: 'none' }, { label: __('Message only', 'woocommerce-paypal-payments'), value: 'none' },
]} ]}
value={logo} value={logo}
onChange={(value) => setAttributes({logo: value})} onChange={(value) => setAttributes({logo: value})}
@ -150,24 +151,31 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
{ !isFlex && (<SelectControl { !isFlex && (<SelectControl
label={__('Text Color', 'woocommerce-paypal-payments')} label={__('Text Color', 'woocommerce-paypal-payments')}
options={[ options={[
{ label: __( 'Black', 'woocommerce-paypal-payments' ), value: 'black' }, { label: __( 'Black / Blue logo', 'woocommerce-paypal-payments' ), value: 'black' },
{ label: __( 'White', 'woocommerce-paypal-payments' ), value: 'white' }, { label: __( 'White / White logo', 'woocommerce-paypal-payments' ), value: 'white' },
{ label: __( 'Monochrome', 'woocommerce-paypal-payments' ), value: 'monochrome' }, { label: __( 'Monochrome', 'woocommerce-paypal-payments' ), value: 'monochrome' },
{ label: __( 'Grayscale', 'woocommerce-paypal-payments' ), value: 'grayscale' }, { label: __( 'Black / Gray logo', 'woocommerce-paypal-payments' ), value: 'grayscale' },
]} ]}
value={color} value={color}
onChange={(value) => setAttributes({color: value})} onChange={(value) => setAttributes({color: value})}
/>)} />)}
{ !isFlex && (<SelectControl
label={__('Text Size', 'woocommerce-paypal-payments')}
options={[
{ label: __( 'Small', 'woocommerce-paypal-payments' ), value: '12' },
{ label: __( 'Medium', 'woocommerce-paypal-payments' ), value: '14' },
{ label: __( 'Large', 'woocommerce-paypal-payments' ), value: '16' },
]}
value={size}
onChange={(value) => setAttributes({size: value})}
/>)}
{ isFlex && (<SelectControl { isFlex && (<SelectControl
label={__('Color', 'woocommerce-paypal-payments')} label={__('Color', 'woocommerce-paypal-payments')}
options={[ options={[
{ label: __( 'Blue', 'woocommerce-paypal-payments' ), value: 'blue' }, { label: __( 'Blue', 'woocommerce-paypal-payments' ), value: 'blue' },
{ label: __( 'Black', 'woocommerce-paypal-payments' ), value: 'black' }, { label: __( 'Black', 'woocommerce-paypal-payments' ), value: 'black' },
{ label: __( 'White', 'woocommerce-paypal-payments' ), value: 'white' }, { label: __( 'White', 'woocommerce-paypal-payments' ), value: 'white' },
{ label: __( 'White no border', 'woocommerce-paypal-payments' ), value: 'white-no-border' }, { label: __( 'White (no border)', 'woocommerce-paypal-payments' ), value: 'white-no-border' },
{ label: __( 'Gray', 'woocommerce-paypal-payments' ), value: 'gray' },
{ label: __( 'Monochrome', 'woocommerce-paypal-payments' ), value: 'monochrome' },
{ label: __( 'Grayscale', 'woocommerce-paypal-payments' ), value: 'grayscale' },
]} ]}
value={flexColor} value={flexColor}
onChange={(value) => setAttributes({flexColor: value})} onChange={(value) => setAttributes({flexColor: value})}
@ -175,8 +183,6 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
{ isFlex && (<SelectControl { isFlex && (<SelectControl
label={__('Ratio', 'woocommerce-paypal-payments')} label={__('Ratio', 'woocommerce-paypal-payments')}
options={[ options={[
{ label: __( '1x1', 'woocommerce-paypal-payments' ), value: '1x1' },
{ label: __( '1x4', 'woocommerce-paypal-payments' ), value: '1x4' },
{ label: __( '8x1', 'woocommerce-paypal-payments' ), value: '8x1' }, { label: __( '8x1', 'woocommerce-paypal-payments' ), value: '8x1' },
{ label: __( '20x1', 'woocommerce-paypal-payments' ), value: '20x1' }, { label: __( '20x1', 'woocommerce-paypal-payments' ), value: '20x1' },
]} ]}

3
modules/ppcp-paylater-block/resources/js/save.js
View file

@ -1,7 +1,7 @@
import { useBlockProps } from '@wordpress/block-editor'; import { useBlockProps } from '@wordpress/block-editor';
export default function save( { attributes } ) { export default function save( { attributes } ) {
const { layout, logo, position, color, flexColor, flexRatio, placement, id } = attributes; const { layout, logo, position, color, size, flexColor, flexRatio, placement, id } = attributes;
const paypalAttributes = layout === 'flex' ? { const paypalAttributes = layout === 'flex' ? {
'data-pp-style-layout': 'flex', 'data-pp-style-layout': 'flex',
'data-pp-style-color': flexColor, 'data-pp-style-color': flexColor,
@ -11,6 +11,7 @@ export default function save( { attributes } ) {
'data-pp-style-logo-type': logo, 'data-pp-style-logo-type': logo,
'data-pp-style-logo-position': position, 'data-pp-style-logo-position': position,
'data-pp-style-text-color': color, 'data-pp-style-text-color': color,
'data-pp-style-text-size': size,
}; };
if (placement && placement !== 'auto') { if (placement && placement !== 'auto') {
paypalAttributes['data-pp-placement'] = placement; paypalAttributes['data-pp-placement'] = placement;