woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Render pay later blocks

Browse source
This commit is contained in:
Alex P 2023-12-06 17:31:56 +02:00
parent d8ff7f79e6
commit baa3afeb9b
No known key found for this signature in database
GPG key ID: 54487A734A204D71
6 changed files with 46 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

3
modules/ppcp-paylater-block/block.json
View file

@ -8,6 +8,9 @@
"description": "Pay Later",
"example": {},
"attributes": {
"id": {
"type": "string"
},
"layout": {
"type": "string",
"default": "flex"

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

@ -1,11 +1,11 @@
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useState, useEffect } from '@wordpress/element';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, SelectControl, Spinner } from '@wordpress/components';
import { PayPalScriptProvider, PayPalMessages } from "@paypal/react-paypal-js";
export default function Edit( { attributes, setAttributes } ) {
const { layout, logo, position, color, flexColor, flexRatio } = attributes;
export default function Edit( { attributes, clientId, setAttributes } ) {
const { layout, logo, position, color, flexColor, flexRatio, id } = attributes;
const isFlex = layout === 'flex';
const [loaded, setLoaded] = useState(false);
@ -22,6 +22,13 @@ export default function Edit( { attributes, setAttributes } ) {
color,
},
};
useEffect(() => {
if (!id) {
setAttributes({id: 'ppcp-' + clientId});
}
}, []);
return (
<>
<InspectorControls>

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

@ -1,8 +1,8 @@
import { useBlockProps } from '@wordpress/block-editor';
export default function save( { attributes } ) {
const { layout, logo, position, color, flexColor, flexRatio } = attributes;
const dataAttributes = layout === 'flex' ? {
const { layout, logo, position, color, flexColor, flexRatio, id } = attributes;
const paypalAttributes = layout === 'flex' ? {
'data-pp-style-layout': 'flex',
'data-pp-style-color': flexColor,
'data-pp-style-ratio': flexRatio,
@ -14,7 +14,8 @@ export default function save( { attributes } ) {
};
const props = {
className: 'ppcp-paylater-message-block',
...dataAttributes,
id,
...paypalAttributes,
};
return <div { ...useBlockProps.save(props) }></div>;