feat: editable donate button text (#535)

Automattic · Jun 25, 2020 · 6261e3f · 6261e3f
1 parent af31efe
commit 6261e3f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/src/blocks/donate/edit.js b/src/blocks/donate/edit.js
@@ -18,6 +18,7 @@ import {
 	TextControl,
 	ToggleControl,
 } from '@wordpress/components';
+import { RichText } from '@wordpress/block-editor';
 
 class Edit extends Component {
 	constructor( props ) {
@@ -141,7 +142,8 @@ class Edit extends Component {
 	}
 
 	renderUntieredForm() {
-		const { className } = this.props;
+		const { attributes, className, setAttributes } = this.props;
+		const { buttonText } = attributes;
 		const { uid } = this.state;
 		const { currencySymbol, customDonationAmounts, selectedFrequency } = this.blockData();
 
@@ -196,15 +198,21 @@ class Edit extends Component {
 						{ __( 'Your contribution is appreciated.', 'newspack-blocks' ) }
 					</p>
 					<button type="submit" onClick={ evt => evt.preventDefault() }>
-						{ __( 'Donate now!', 'newspack-blocks' ) }
+						<RichText
+							onChange={ value => setAttributes( { buttonText: value } ) }
+							placeholder={ __( 'Button text…', 'newspack-blocks' ) }
+							value={ buttonText }
+							tagName="span"
+						/>
 					</button>
 				</form>
 			</div>
 		);
 	}
 
 	renderTieredForm() {
-		const { className } = this.props;
+		const { attributes, className, setAttributes } = this.props;
+		const { buttonText } = attributes;
 		const { uid } = this.state;
 		const {
 			activeTier,
@@ -301,7 +309,12 @@ class Edit extends Component {
 						{ __( 'Your contribution is appreciated.', 'newspack-blocks' ) }
 					</p>
 					<button type="submit" onClick={ evt => evt.preventDefault() }>
-						{ __( 'Donate now!', 'newspack-blocks' ) }
+						<RichText
+							onChange={ value => setAttributes( { buttonText: value } ) }
+							placeholder={ __( 'Button text…', 'newspack-blocks' ) }
+							value={ buttonText }
+							tagName="span"
+						/>
 					</button>
 				</form>
 			</div>

diff --git a/src/blocks/donate/index.js b/src/blocks/donate/index.js
@@ -58,6 +58,10 @@ export const settings = {
 		campaign: {
 			type: 'string',
 		},
+		buttonText: {
+			type: 'string',
+			default: __( 'Donate now!', 'newspack-blocks' ),
+		},
 	},
 	supports: {
 		html: false,

diff --git a/src/blocks/donate/view.php b/src/blocks/donate/view.php
@@ -42,6 +42,8 @@ function newspack_blocks_render_block_donate( $attributes ) {
 
 	$uid = rand(); // Unique identifier to prevent labels colliding with other instances of Donate block.
 
+	$button_text = $attributes['buttonText'];
+
 	ob_start();
 
 	/**
@@ -102,7 +104,7 @@ class='donate-label'
 					<?php echo esc_html__( 'Your contribution is appreciated.', 'newspack-blocks' ); ?>
 				</p>
 				<button type='submit'>
-					<?php echo esc_html__( 'Donate now!', 'newspack-blocks' ); ?>
+					<?php echo wp_kses_post( $button_text ); ?>
 				</button>
 				<?php if ( $campaign ) : ?>
 					<input type='hidden' name='campaign' value='<?php echo esc_attr( $campaign ); ?>' />
@@ -202,7 +204,7 @@ class='other-donate-label'
 					<?php echo esc_html__( 'Your contribution is appreciated.', 'newspack-blocks' ); ?>
 				</p>
 				<button type='submit'>
-					<?php echo esc_html__( 'Donate now!', 'newspack-blocks' ); ?>
+					<?php echo wp_kses_post( $button_text ); ?>
 				</button>
 				<?php if ( $campaign ) : ?>
 					<input type='hidden' name='campaign' value='<?php echo esc_attr( $campaign ); ?>' />
@@ -243,7 +245,11 @@ function newspack_blocks_register_donate() {
 				],
 				'campaign'                => [
 					'type'    => 'string',
-				]
+				],
+				'buttonText'              => [
+					'type'    => 'string',
+					'default' => __( 'Donate now!', 'newspack-blocks' ),
+				],
 			),
 			'render_callback' => 'newspack_blocks_render_block_donate',
 		)