Skip to content

Commit 14ef4af

Browse files
mmtrMarco Pereirinha
mmtr
authored and
Marco Pereirinha
committed
[not verified] Donations: Save block content (#16705)
* Adds support for saving the content of a donations block into the post content, so the published view contains the block output. * It also follows up #16593 (comment) and implements the content sync logic as suggested there.
1 parent d89cc9e commit 14ef4af

File tree

12 files changed

+645
-322
lines changed

12 files changed

+645
-322
lines changed

‎extensions/blocks/donations/amount.js

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,35 @@ import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
1515
*/
1616
import { minimumTransactionAmountForCurrency } from '../../shared/currencies';
1717

18+
const parseAmount = ( amount, currency ) => {
19+
if ( ! amount ) {
20+
return null;
21+
}
22+
23+
if ( typeof amount === 'number' ) {
24+
return amount;
25+
}
26+
27+
amount = parseFloat(
28+
amount
29+
// Remove any thousand grouping separator.
30+
.replace( new RegExp( '\\' + CURRENCIES[ currency ].grouping, 'g' ), '' )
31+
// Replace the localized decimal separator with a dot (the standard decimal separator in float numbers).
32+
.replace( new RegExp( '\\' + CURRENCIES[ currency ].decimal, 'g' ), '.' )
33+
);
34+
35+
if ( isNaN( amount ) ) {
36+
return null;
37+
}
38+
39+
return amount;
40+
};
41+
1842
const Amount = ( {
1943
className = '',
2044
currency = null,
2145
defaultValue = null,
22-
editable = false,
46+
disabled = false,
2347
label = '',
2448
onChange = null,
2549
value = '',
@@ -31,33 +55,6 @@ const Amount = ( {
3155
const [ isInvalid, setIsInvalid ] = useState( false );
3256
const richTextRef = useRef( null );
3357

34-
const parseAmount = useCallback(
35-
amount => {
36-
if ( ! amount ) {
37-
return null;
38-
}
39-
40-
if ( typeof amount === 'number' ) {
41-
return amount;
42-
}
43-
44-
amount = parseFloat(
45-
amount
46-
// Remove any thousand grouping separator.
47-
.replace( new RegExp( '\\' + CURRENCIES[ currency ].grouping, 'g' ), '' )
48-
// Replace the localized decimal separator with a dot (the standard decimal separator in float numbers).
49-
.replace( new RegExp( '\\' + CURRENCIES[ currency ].decimal, 'g' ), '.' )
50-
);
51-
52-
if ( isNaN( amount ) ) {
53-
return null;
54-
}
55-
56-
return amount;
57-
},
58-
[ currency ]
59-
);
60-
6158
const setAmount = useCallback(
6259
amount => {
6360
setEditedValue( amount );
@@ -74,7 +71,7 @@ const Amount = ( {
7471
setIsInvalid( true );
7572
}
7673
},
77-
[ currency, parseAmount, onChange ]
74+
[ currency, onChange ]
7875
);
7976

8077
const setFocus = () => {
@@ -125,7 +122,7 @@ const Amount = ( {
125122
tabIndex={ 0 }
126123
>
127124
{ CURRENCIES[ currency ].symbol }
128-
{ editable ? (
125+
{ ! disabled ? (
129126
<RichText
130127
allowedFormats={ [] }
131128
aria-label={ label }
@@ -148,3 +145,4 @@ const Amount = ( {
148145
};
149146

150147
export default Amount;
148+
export { parseAmount };

‎extensions/blocks/donations/attributes.js

Lines changed: 29 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,41 +8,43 @@ export default {
88
type: 'string',
99
default: 'USD',
1010
},
11-
amounts: {
12-
type: 'array',
13-
items: {
14-
type: 'number',
11+
oneTimeDonation: {
12+
type: 'object',
13+
default: {
14+
show: true,
15+
planId: null,
16+
amounts: [ 5, 15, 100 ],
17+
heading: __( 'Make a one-time donation', 'jetpack' ),
18+
extraText: __( 'Your contribution is appreciated.', 'jetpack' ),
19+
buttonText: __( 'Donate', 'jetpack' ),
1520
},
16-
default: [ 5, 15, 100 ],
1721
},
18-
oneTimePlanId: {
19-
type: 'number',
20-
default: null,
21-
},
22-
monthlyPlanId: {
23-
type: 'number',
24-
default: null,
22+
monthlyDonation: {
23+
type: 'object',
24+
default: {
25+
show: true,
26+
planId: null,
27+
amounts: [ 5, 15, 100 ],
28+
heading: __( 'Make a monthly donation', 'jetpack' ),
29+
extraText: __( 'Your contribution is appreciated.', 'jetpack' ),
30+
buttonText: __( 'Donate monthly', 'jetpack' ),
31+
},
2532
},
26-
annuallyPlanId: {
27-
type: 'number',
28-
default: null,
33+
annualDonation: {
34+
type: 'object',
35+
default: {
36+
show: true,
37+
planId: null,
38+
amounts: [ 5, 15, 100 ],
39+
heading: __( 'Make a yearly donation', 'jetpack' ),
40+
extraText: __( 'Your contribution is appreciated.', 'jetpack' ),
41+
buttonText: __( 'Donate yearly', 'jetpack' ),
42+
},
2943
},
3044
showCustomAmount: {
3145
type: 'boolean',
3246
default: true,
3347
},
34-
oneTimeHeading: {
35-
type: 'string',
36-
default: __( 'Make a one-time donation', 'jetpack' ),
37-
},
38-
monthlyHeading: {
39-
type: 'string',
40-
default: __( 'Make a monthly donation', 'jetpack' ),
41-
},
42-
annualHeading: {
43-
type: 'string',
44-
default: __( 'Make a yearly donation', 'jetpack' ),
45-
},
4648
chooseAmountText: {
4749
type: 'string',
4850
default: __( 'Choose an amount', 'jetpack' ),
@@ -51,20 +53,4 @@ export default {
5153
type: 'string',
5254
default: __( 'Or enter a custom amount', 'jetpack' ),
5355
},
54-
extraText: {
55-
type: 'string',
56-
default: __( 'Your contribution is appreciated.', 'jetpack' ),
57-
},
58-
oneTimeButtonText: {
59-
type: 'string',
60-
default: __( 'Donate', 'jetpack' ),
61-
},
62-
monthlyButtonText: {
63-
type: 'string',
64-
default: __( 'Donate monthly', 'jetpack' ),
65-
},
66-
annualButtonText: {
67-
type: 'string',
68-
default: __( 'Donate yearly', 'jetpack' ),
69-
},
7056
};

‎extensions/blocks/donations/common.scss

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
// Common styles for both views (editor and frontend).
2+
3+
.wp-block-jetpack-donations {
4+
.donations__container {
5+
border: 1px solid $light-gray-700;
6+
}
7+
8+
.donations__nav {
9+
display: flex;
10+
border-bottom: 1px solid $light-gray-700;
11+
}
12+
13+
.donations__nav-item {
14+
font-weight: bold;
15+
display: inline-block;
16+
flex-grow: 1;
17+
text-align: center;
18+
font-size: 16px;
19+
padding: 16px;
20+
height: auto;
21+
border-radius: 0;
22+
border-left: 1px solid $light-gray-700;
23+
background-color: $white;
24+
color: $dark-gray-800;
25+
box-shadow: none;
26+
text-transform: none;
27+
text-decoration: none;
28+
outline: none;
29+
30+
&:focus,
31+
&:active {
32+
border-radius: 0;
33+
}
34+
35+
&:first-child {
36+
border-left: none;
37+
}
38+
39+
// Complex selector needed to override specificity.
40+
&:not(:disabled):not([aria-disabled=true]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
41+
background-color: $light-gray-100;
42+
box-shadow: none;
43+
}
44+
45+
// Complex selector needed to override specificity.
46+
&.is-active,
47+
&.is-active:not(:disabled):not([aria-disabled=true]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
48+
background-color: $blue-wordpress-700;
49+
box-shadow: none;
50+
color: $white;
51+
}
52+
}
53+
54+
.donations__content {
55+
padding: 0 24px;
56+
}
57+
58+
.donations__amounts {
59+
margin-top: 30px;
60+
margin-bottom: 30px;
61+
}
62+
63+
.donations__amount {
64+
display: inline-block;
65+
margin-top: 0;
66+
margin-bottom: 0;
67+
}
68+
69+
.donations__amount .wp-block-button__link {
70+
background-color: $white;
71+
color: $dark-gray-800;
72+
border: 1px solid $light-gray-700;
73+
cursor: text;
74+
text-decoration: none;
75+
text-transform: none;
76+
77+
&.has-focus {
78+
box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-wordpress-700;
79+
outline: 2px solid transparent;
80+
outline-offset: -2px;
81+
}
82+
83+
&.has-error {
84+
box-shadow: 0 0 0 1px $white, 0 0 0 3px $alert-red;
85+
outline: 2px solid transparent;
86+
outline-offset: -2px;
87+
}
88+
}
89+
90+
.donations__custom-amount .donations__amount-value {
91+
margin-left: 4px;
92+
min-width: 60px;
93+
}
94+
95+
.donations__separator {
96+
line-height: 8px;
97+
height: 8px;
98+
margin-bottom: 30px;
99+
margin-top: 30px;
100+
}
101+
102+
.donations__donate-button {
103+
margin-bottom: 30px;
104+
}
105+
}

‎extensions/blocks/donations/context.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎extensions/blocks/donations/controls.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,24 @@ import { CURRENCIES } from '@automattic/format-currency';
2424

2525
const Controls = props => {
2626
const { attributes, setAttributes, products, siteSlug } = props;
27-
const { currency, monthlyPlanId, annuallyPlanId, showCustomAmount } = attributes;
27+
const { currency, monthlyDonation, annualDonation, showCustomAmount } = attributes;
28+
29+
const toggleDonation = ( interval, show ) => {
30+
const donationAttributes = {
31+
'1 month': 'monthlyDonation',
32+
'1 year': 'annualDonation',
33+
};
34+
const donationAttribute = donationAttributes[ interval ];
35+
const donation = attributes[ donationAttribute ];
36+
37+
setAttributes( {
38+
[ donationAttribute ]: {
39+
...donation,
40+
show,
41+
planId: show ? products[ interval ] : null,
42+
},
43+
} );
44+
};
2845

2946
return (
3047
<>
@@ -78,17 +95,13 @@ const Controls = props => {
7895
<InspectorControls>
7996
<PanelBody title={ __( 'Settings', 'jetpack' ) }>
8097
<ToggleControl
81-
checked={ !! monthlyPlanId }
82-
onChange={ value =>
83-
setAttributes( { monthlyPlanId: value ? products[ '1 month' ] : null } )
84-
}
98+
checked={ monthlyDonation.show }
99+
onChange={ value => toggleDonation( '1 month', value ) }
85100
label={ __( 'Show monthly donations', 'jetpack' ) }
86101
/>
87102
<ToggleControl
88-
checked={ !! annuallyPlanId }
89-
onChange={ value =>
90-
setAttributes( { annuallyPlanId: value ? products[ '1 year' ] : null } )
91-
}
103+
checked={ annualDonation.show }
104+
onChange={ value => toggleDonation( '1 year', value ) }
92105
label={ __( 'Show annual donations', 'jetpack' ) }
93106
/>
94107
<ToggleControl

0 commit comments

Comments
 (0)