@automattic/newspack-blocks 1.67.0 → 1.68.0

package/src/blocks/checkout-button/block.json

@@ -0,0 +1,79 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "newspack-blocks/checkout-button",
+	"title": "Checkout Button",
+	"category": "newspack",
+	"description": "Modal checkout button for WooCommerce products.",
+	"keywords": [ "woocommerce", "product", "checkout", "button" ],
+	"textdomain": "newspack-blocks",
+	"attributes": {
+		"product": {
+			"type": "string"
+		},
+		"price": {
+			"type": "string"
+		},
+		"text": {
+			"type": "string"
+		},
+		"placeholder": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"gradient": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": [ "center", "wide" ],
+		"color": {
+			"__experimentalSkipSerialization": true,
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"shadow": true,
+		"spacing": {
+			"__experimentalSkipSerialization": true,
+			"padding": [ "horizontal", "vertical" ],
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
+		}
+	},
+	"styles": [
+		{ "name": "fill", "label": "Fill", "isDefault": true },
+		{ "name": "outline", "label": "Outline" }
+	],
+	"editorStyle": "newspack-checkout-button-editor",
+	"style": "newspack-checkout-block-button"
+}

package/src/blocks/checkout-button/edit.js

@@ -0,0 +1,247 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { debounce, invert } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	BaseControl,
+	TextControl,
+	FormTokenField,
+	Button,
+	Spinner,
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import './edit.scss';
+
+function ProductControl( props ) {
+	const [ inFlight, setInFlight ] = useState( false );
+	const [ suggestions, setSuggestions ] = useState( {} );
+	const [ selected, setSelected ] = useState( false );
+	const [ isChanging, setIsChanging ] = useState( false );
+	function fetchSuggestions( search ) {
+		setInFlight( true );
+		return apiFetch( {
+			path: `/wc/v2/products?search=${ encodeURIComponent( search ) }`,
+		} )
+			.then( products => {
+				const _suggestions = {};
+				products.forEach( product => {
+					_suggestions[ product.id ] = `${ product.id }: ${ product.name }`;
+				} );
+				setSuggestions( _suggestions );
+			} )
+			.finally( () => setInFlight( false ) );
+	}
+	function fetchSaved() {
+		setInFlight( true );
+		return apiFetch( {
+			path: `/wc/v2/products/${ props.value }`,
+		} )
+			.then( product => {
+				setSuggestions( { [ product.id ]: `${ product.id }: ${ product.name }` } );
+				setSelected( product );
+				props.onProduct( product );
+			} )
+			.finally( () => setInFlight( false ) );
+	}
+	useEffect( () => {
+		setIsChanging( false );
+		if ( props.value ) {
+			fetchSaved();
+		} else {
+			setSelected( false );
+		}
+	}, [ props.value ] );
+	function onChange( tokens ) {
+		const productName = tokens[ 0 ];
+		const productId = invert( suggestions )[ productName ];
+		setIsChanging( false );
+		props.onChange( productId );
+	}
+	const debouncedFetchProductSuggestions = debounce( fetchSuggestions, 200 );
+	const handleInputChange = value => {
+		if ( value.length > 2 ) {
+			setInFlight( true );
+			debouncedFetchProductSuggestions( value );
+		} else {
+			setInFlight( false );
+		}
+	};
+	if ( props.value && ! selected && inFlight ) {
+		return <Spinner />;
+	}
+	return (
+		<div className="newspack-checkout-button__product-field">
+			{ selected && ! isChanging ? (
+				<>
+					<BaseControl
+						className="newspack-checkout-button__product-field__selected"
+						help={ __( 'Click to change the selected product', 'newspack-blocks' ) }
+					>
+						<Button
+							isSecondary
+							onClick={ () => setIsChanging( true ) }
+							aria-label={ __( 'Change the selected product', 'newspack-blocks' ) }
+						>
+							{ selected.name }
+						</Button>
+					</BaseControl>
+				</>
+			) : (
+				<>
+					<div className="newspack-checkout-button__product-field__tokenfield">
+						<FormTokenField
+							placeholder={
+								props.placeholder || __( 'Type to search for a product…', 'newspack-blocks' )
+							}
+							label={ __( 'Select a product', 'newspack-blocks' ) }
+							maxLength={ 1 }
+							onChange={ onChange }
+							onInputChange={ handleInputChange }
+							suggestions={ Object.values( suggestions ) }
+						/>
+						{ inFlight && <Spinner /> }
+					</div>
+					{ selected && (
+						<Button isSecondary onClick={ () => setIsChanging( false ) }>
+							{ __( 'Cancel', 'newspack-blocks' ) }
+						</Button>
+					) }
+				</>
+			) }
+		</div>
+	);
+}
+
+function CheckoutButtonEdit( props ) {
+	const { attributes, setAttributes, className } = props;
+	const { placeholder, style, text, product, price } = attributes;
+
+	const [ nyp, setNYP ] = useState( false );
+	function handleProduct( data ) {
+		const _nyp = {
+			isNYP: data?.meta_data?.some( meta => meta.key === '_nyp' && meta.value === 'yes' ),
+			suggestedPrice: data?.meta_data?.find( meta => meta.key === '_suggested_price' )?.value,
+			minPrice: data?.meta_data?.find( meta => meta.key === '_min_price' )?.value,
+			maxPrice: data?.meta_data?.find( meta => meta.key === '_maximum_price' )?.value,
+		};
+		setNYP( _nyp );
+		if ( ! price ) {
+			setAttributes( { price: _nyp?.suggestedPrice } );
+		}
+	}
+
+	function setButtonText( newText ) {
+		// Remove anchor tags from button text content.
+		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
+	}
+
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const blockProps = useBlockProps();
+	return (
+		<>
+			<div
+				{ ...blockProps }
+				className={ classnames( blockProps.className, {
+					[ `wp-block-button` ]: true,
+					[ `has-custom-font-size` ]: blockProps.style.fontSize,
+				} ) }
+			>
+				<RichText
+					aria-label={ __( 'Button text' ) }
+					placeholder={ placeholder || __( 'Add text…' ) }
+					value={ text }
+					onChange={ value => setButtonText( value ) }
+					withoutInteractiveFormatting
+					className={ classnames(
+						className,
+						'wp-block-button__link',
+						'wp-block-newspack-blocks-checkout-button__button',
+						colorProps.className,
+						borderProps.className,
+						{
+							// For backwards compatibility add style that isn't
+							// provided via block support.
+							'no-border-radius': style?.border?.radius === 0,
+						}
+					) }
+					style={ {
+						...borderProps.style,
+						...colorProps.style,
+						...spacingProps.style,
+					} }
+					identifier="text"
+				/>
+			</div>
+			<InspectorControls>
+				<PanelBody title={ __( 'Product', 'newspack-blocks' ) }>
+					<ProductControl
+						value={ product }
+						price={ price }
+						onChange={ value => setAttributes( { product: value } ) }
+						onProduct={ handleProduct }
+					/>
+				</PanelBody>
+				{ nyp?.isNYP && (
+					<PanelBody title={ __( 'Name Your Price', 'newspack-blocks' ) }>
+						<p>
+							{ __(
+								'This product has "Name Your Price" toggled on. You can set the custom price for this checkout.',
+								'newspack-blocks'
+							) }
+						</p>
+						<p>
+							<strong>{ __( 'Suggested price:', 'newspack-blocks' ) }</strong>{ ' ' }
+							{ nyp.suggestedPrice || 0 }
+							{ nyp.minPrice && (
+								<>
+									<br />
+									<strong>{ __( 'Minimum price:', 'newspack-blocks' ) }</strong> { nyp.minPrice }
+								</>
+							) }
+							{ nyp.maxPrice && (
+								<>
+									<br />
+									<strong>{ __( 'Maximum price:', 'newspack-blocks' ) }</strong> { nyp.maxPrice }
+								</>
+							) }
+						</p>
+						<TextControl
+							type="number"
+							label={ __( 'Custom Price', 'newspack-blocks' ) }
+							placeholder={ nyp.suggestedPrice }
+							value={ price }
+							min={ parseFloat( nyp.minPrice ) || null }
+							max={ parseFloat( nyp.maxPrice ) || null }
+							onChange={ value => setAttributes( { price: value } ) }
+						/>
+					</PanelBody>
+				) }
+			</InspectorControls>
+		</>
+	);
+}
+
+export default CheckoutButtonEdit;

package/src/blocks/checkout-button/edit.scss

@@ -0,0 +1,40 @@
+.newspack-checkout-button {
+	&__product-field {
+		&__selected {
+			.components-button {
+				display: block;
+				width: 100%;
+				text-align: left;
+			}
+		}
+		/* Workaround for hard-coded help text in FormTokenField. */
+		.components-form-token-field__help {
+			display: none;
+		}
+		&__tokenfield {
+			position: relative;
+			.components-spinner {
+				position: absolute;
+				top: 2em;
+				right: 0;
+			}
+		}
+	}
+}
+
+.wp-block-newspack-blocks-checkout-button {
+	[data-align='center'] & {
+		display: flex;
+		flex-direction: column;
+	}
+	&__button {
+		[data-align='full'] &,
+		[data-align='wide'] & {
+			width: 100%;
+		}
+		[data-align='center'] & {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+}

package/src/blocks/checkout-button/editor.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { name, settings } from '.';
+
+registerBlockType( name, settings );
+
+addFilter(
+	'blockEditor.useSetting.before',
+	'newspack-blocks/add-border-radius-support',
+	( value, path, clientId, blockName ) => {
+		if ( path === 'border.radius' && blockName === 'newspack-blocks/checkout-button' ) {
+			return true;
+		}
+		return value;
+	}
+);

package/src/blocks/checkout-button/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, button } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+// Name must be exported separately.
+export { name };
+
+export const settings = {
+	...metadata,
+
+	icon: {
+		src: <Icon icon={ button } />,
+		foreground: '#36f',
+	},
+	edit,
+	save,
+};

package/src/blocks/checkout-button/save.js

@@ -0,0 +1,64 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+} from '@wordpress/block-editor';
+
+export default function save( { attributes, className } ) {
+	const { textAlign, fontSize, style, text, product, price } = attributes;
+
+	if ( ! text || ! product ) {
+		return null;
+	}
+
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const colorProps = getColorClassesAndStyles( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
+	const buttonClasses = classnames(
+		'wp-block-button__link',
+		colorProps.className,
+		borderProps.className,
+		{
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+			// For backwards compatibility add style that isn't provided via
+			// block support.
+			'no-border-radius': style?.border?.radius === 0,
+		}
+	);
+	const buttonStyle = {
+		...borderProps.style,
+		...colorProps.style,
+		...spacingProps.style,
+	};
+
+	const wrapperClasses = classnames( className, {
+		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+	} );
+
+	return (
+		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+			<form>
+				<RichText.Content
+					tagName="button"
+					className={ buttonClasses }
+					style={ buttonStyle }
+					value={ text }
+				/>
+				<input type="hidden" name="product_id" value={ product } />
+				<input type="hidden" name="newspack_checkout" value="1" />
+				{ price && <input type="hidden" name="price" value={ price } /> }
+			</form>
+		</div>
+	);
+}

package/src/blocks/{donate/checkout-modal/index.js → checkout-button/view.js}

@@ -1,4 +1,4 @@
 /**
- * Style dependencies
+ * Internal dependencies
  */
 import './view.scss';

package/src/blocks/checkout-button/view.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Checkout Button Block Front-End Functions
+ *
+ * @package Newspack_Blocks
+ */
+
+namespace Newspack_Blocks\Checkout_Button;
+
+/**
+ * Register the block.
+ */
+function register_block() {
+	register_block_type_from_metadata(
+		__DIR__ . '/block.json',
+		[
+			'render_callback' => __NAMESPACE__ . '\\render_callback',
+		]
+	);
+}
+add_action( 'init', __NAMESPACE__ . '\\register_block' );
+
+/**
+ * Render the block.
+ *
+ * @param array  $attributes Block attributes.
+ * @param string $content    Block content.
+ *
+ * @return string
+ */
+function render_callback( $attributes, $content ) {
+	\Newspack_Blocks\Modal_Checkout::enqueue_modal();
+	\Newspack_Blocks::enqueue_view_assets( 'checkout-button' );
+	return $content;
+}

package/src/blocks/checkout-button/view.scss

@@ -0,0 +1,18 @@
+.wp-block-newspack-blocks-checkout-button {
+	&.alignwide,
+	&.alignfull {
+		button {
+			width: 100%;
+		}
+	}
+	&.aligncenter {
+    form {
+      display: flex;
+      flex-direction: column;
+    }
+		button {
+      margin-left: auto;
+      margin-right: auto;
+		}
+	}
+}