@automattic/newspack-blocks 4.31.1 → 4.32.0-alpha.2

package/newspack-blocks.php

@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.com/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         4.31.1
+ * Version:         4.32.0-alpha.2
  *
  * @package         Newspack_Blocks
  */
@@ -15,7 +15,7 @@
 define( 'NEWSPACK_BLOCKS__PLUGIN_FILE', __FILE__ );
 define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
 define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( NEWSPACK_BLOCKS__PLUGIN_FILE ) );
-define( 'NEWSPACK_BLOCKS__VERSION', '4.31.1' );
+define( 'NEWSPACK_BLOCKS__VERSION', '4.32.0-alpha.2' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "4.31.1",
+	"version": "4.32.0-alpha.2",
 	"author": "Automattic",
 	"description": "=== Newspack Blocks === Contributors: (this should be a list of wordpress.org userid's) Donate link: https://example.com/ Tags: comments, spam Requires at least: 4.5 Tested up to: 5.1.1 Stable tag: 0.1.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html",
 	"repository": {
@@ -45,6 +45,7 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
+		"@wordpress/ui": "^0.16.0",
 		"classnames": "^2.5.1",
 		"lodash": "^4.17.21",
 		"newspack-colors": "1.1.4",
@@ -56,7 +57,7 @@
 	},
 	"devDependencies": {
 		"@types/lodash": "^4.17.23",
-		"newspack-components": "4.7.0",
+		"newspack-components": "4.8.0-alpha.1",
 		"newspack-scripts": "5.11.0"
 	},
 	"overrides": {

package/src/blocks/carousel/edit.js

@@ -413,7 +413,7 @@ class Edit extends Component {
 													</div>
 												) }
 												{ showTagLabels && post.newspack_tag_labels && (
-													<div className="cat-links tag-labels">
+													<div className="tag-labels">
 														{ post.newspack_tag_labels.map( ( newspack_tag_label, index ) => {
 															return newspack_tag_label.link ? (
 																<a key={ index } href="#" className="tag-label flag">

package/src/blocks/carousel/view.scss

@@ -263,7 +263,11 @@
 			margin-right: 1.5em;
 		}
 	}
-	.cat-links {
+	// One source for the carousel's chip styling, shared so the two stay in step.
+	// A tag label carries only `tag-labels`, so a publisher rule written for
+	// `.cat-links a` cannot reach it.
+	.cat-links,
+	.tag-labels {
 		color: np-colors.$neutral-000;
 		font-size: 0.6em;
 		font-weight: bold;

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

@@ -56,6 +56,9 @@
 		},
 		"coupon": {
 			"type": "string"
+		},
+		"quantity": {
+			"type": "number"
 		}
 	},
 	"supports": {

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

@@ -207,11 +207,17 @@ function ProductControl( props ) {
 
 function CheckoutButtonEdit( props ) {
 	const { attributes, setAttributes, className } = props;
-	const { placeholder, style, text, product, price, variation, width, coupon } = attributes;
+	const { placeholder, style, text, product, price, variation, width, coupon, quantity } = attributes;
 
 	const [ productData, setProductData ] = useState( {} );
 	const [ variations, setVariations ] = useState( [] );
 	const [ nyp, setNYP ] = useState( false );
+	// Resolved server-side, like the donation flag: a seat count is only honoured
+	// for a product sold per seat, so offering the control anywhere else would
+	// invite a number that is discarded at checkout. Per-seat meta lives on the
+	// variation for a tiered plan, hence the separate state for the chosen one.
+	const [ variationHasSeats, setVariationHasSeats ] = useState( false );
+	const hasSeats = variation ? variationHasSeats : !! productData?.newspack_has_seats;
 
 	// Resolved server-side, since a donation is not always identifiable from the
 	// product meta. Variations inherit it from their parent, which is the product
@@ -249,10 +255,17 @@ function CheckoutButtonEdit( props ) {
 	useEffect( () => {
 		if ( variation ) {
 			apiFetch( { path: `/wc/v2/products/${ product }/variations/${ variation }` } )
-				.then( res => setNYP( getNYP( res ) ) )
-				.catch( () => setNYP( {} ) );
+				.then( res => {
+					setNYP( getNYP( res ) );
+					setVariationHasSeats( !! res?.newspack_has_seats );
+				} )
+				.catch( () => {
+					setNYP( {} );
+					setVariationHasSeats( false );
+				} );
 		} else {
 			setNYP( getNYP( productData ) );
+			setVariationHasSeats( false );
 		}
 	}, [ variation ] );
 
@@ -312,7 +325,7 @@ function CheckoutButtonEdit( props ) {
 					<ProductControl
 						value={ product }
 						price={ price }
-						onChange={ value => setAttributes( { product: value, variation: '', price: '' } ) }
+						onChange={ value => setAttributes( { product: value, variation: '', price: '', quantity: undefined } ) }
 						onProduct={ handleProduct }
 					>
 						{ productData?.variations?.length > 0 && (
@@ -324,6 +337,7 @@ function CheckoutButtonEdit( props ) {
 										setAttributes( {
 											variation: value ? '' : variations[ 0 ].id.toString(),
 											price: '',
+											quantity: undefined,
 										} )
 									}
 								/>
@@ -340,7 +354,7 @@ function CheckoutButtonEdit( props ) {
 												value: item.id,
 											} ) ),
 										] }
-										onChange={ value => setAttributes( { variation: value.toString(), price: '' } ) }
+										onChange={ value => setAttributes( { variation: value.toString(), price: '', quantity: undefined } ) }
 									/>
 								) : (
 									<Spinner />
@@ -410,6 +424,19 @@ function CheckoutButtonEdit( props ) {
 						/>
 					</PanelBody>
 				) }
+				{ hasSeats && (
+					<PanelBody title={ __( 'Seats', 'newspack-blocks' ) } initialOpen={ false }>
+						<p>{ __( 'Optional. Pre-fill the number of seats. Readers can change it before paying.', 'newspack-blocks' ) }</p>
+						<TextControl
+							type="number"
+							label={ __( 'Default seats', 'newspack-blocks' ) }
+							value={ quantity || '' }
+							min={ 1 }
+							onChange={ value => setAttributes( { quantity: value ? parseInt( value, 10 ) : undefined } ) }
+							__next40pxDefaultSize
+						/>
+					</PanelBody>
+				) }
 			</InspectorControls>
 		</>
 	);

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

@@ -56,6 +56,37 @@ function register_donation_rest_field() {
 }
 add_action( 'rest_api_init', __NAMESPACE__ . '\\register_donation_rest_field' );
 
+/**
+ * Expose whether a product is sold per seat on the products REST response.
+ *
+ * The block editor needs this to decide whether to offer a default seat count:
+ * a quantity on any other product is discarded at checkout, so a control for one
+ * would invite the publisher to set a number that never takes effect.
+ */
+function register_seats_rest_field() {
+	if ( ! class_exists( '\Newspack\Group_Subscription_Seats' ) || ! method_exists( '\Newspack\Group_Subscription_Seats', 'get_field_args' ) ) {
+		return;
+	}
+	// Both object types: per-seat meta lives on the variation for a tiered plan, and
+	// the editor fetches the chosen variation separately from its parent.
+	register_rest_field(
+		[ 'product', 'product_variation' ],
+		'newspack_has_seats',
+		[
+			'get_callback' => function ( $product ) {
+				return ! empty( \Newspack\Group_Subscription_Seats::get_field_args( $product['id'] ) );
+			},
+			'schema'       => [
+				'description' => __( 'Whether the product is sold per seat, so a seat count can be chosen for it.', 'newspack-blocks' ),
+				'type'        => 'boolean',
+				'context'     => [ 'view', 'edit' ],
+				'readonly'    => true,
+			],
+		]
+	);
+}
+add_action( 'rest_api_init', __NAMESPACE__ . '\\register_seats_rest_field' );
+
 /**
  * Render the block.
  *
@@ -95,6 +126,7 @@ function render_callback( $attributes ) {
 	$after_success_button_label = $attributes['afterSuccessButtonLabel'] ?? '';
 	$after_success_url          = $attributes['afterSuccessURL'] ?? '';
 	$coupon                     = $attributes['coupon'] ?? '';
+	$quantity                   = absint( $attributes['quantity'] ?? 0 );
 	$is_variable                = $attributes['is_variable'];
 
 	if ( $is_variable && $variation_id ) {
@@ -157,6 +189,11 @@ function render_callback( $attributes ) {
 	if ( '' !== $coupon ) {
 		$hidden_fields .= '<input type="hidden" name="coupon" value="' . esc_attr( $coupon ) . '" />';
 	}
+	// Only emitted above 1: the server already defaults to a single seat, and a
+	// reader-editable field inside the modal wins over this default anyway.
+	if ( $quantity > 1 ) {
+		$hidden_fields .= '<input type="hidden" name="quantity" value="' . esc_attr( $quantity ) . '" />';
+	}
 
 	ob_start();
 	/**

package/src/blocks/donate/consts.ts

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import type { DonationFrequencySlug, DonateBlockAttributes } from './types';
+import { FREQUENCY_SLUGS as DONATE_FREQUENCY_SLUGS } from './frequency-slugs';
 
 export const FREQUENCIES: Record< DonationFrequencySlug, string > = {
 	once: __( 'One-time', 'newspack-blocks' ),
@@ -14,7 +15,7 @@ export const FREQUENCIES: Record< DonationFrequencySlug, string > = {
 	year: __( 'Annually', 'newspack-blocks' ),
 };
 
-export const FREQUENCY_SLUGS: DonationFrequencySlug[] = Object.keys( FREQUENCIES ) as DonationFrequencySlug[];
+export const FREQUENCY_SLUGS = DONATE_FREQUENCY_SLUGS as DonationFrequencySlug[];
 
 export const LAYOUT_OPTIONS: { label: string; key: DonateBlockAttributes[ 'layoutOption' ] }[] = [
 	{ label: __( 'Frequency', 'newspack-blocks' ), key: 'frequency' },

package/src/blocks/donate/frequency-slugs.js

@@ -0,0 +1,10 @@
+/**
+ * Donation frequency slugs, on their own so any bundle can consume them:
+ * consts.ts attaches translated labels (pulling in @wordpress/i18n at module
+ * scope), which the modal checkout's donate-trigger resolver must not drag
+ * into its bundles just to validate trigger params. The PHP renderers
+ * hardcode the same set (class-newspack-blocks-donate-renderer-base.php).
+ *
+ * @type {string[]}
+ */
+export const FREQUENCY_SLUGS = [ 'once', 'month', 'year' ];

package/src/blocks/donate/tiers-based/view.ts

@@ -1,5 +1,6 @@
 import { setupSlider } from './slider';
 import { parseTiersBasedConfig } from './utils';
+import { TIERS_BASED_READY_EVENT, TIERS_BASED_READY_ATTRIBUTE } from '../../../shared/js/tiers-based-ready';
 
 const BUTTON_ACTIVE_CLASSNAME = 'wpbnbd__button--active';
 
@@ -129,4 +130,11 @@ export default ( parentEl: HTMLElement ) => {
 			backButton.style.display = 'none';
 		}
 	} );
+
+	// Mark the block as ready for programmatic triggering (see
+	// src/modal-checkout/donate-trigger.js): the listeners above are attached,
+	// so a tab click now synchronously updates the tier submit buttons. The
+	// event lets a URL trigger that ran before this init retry immediately.
+	parentEl.setAttribute( TIERS_BASED_READY_ATTRIBUTE, '' );
+	parentEl.dispatchEvent( new CustomEvent( TIERS_BASED_READY_EVENT, { bubbles: true } ) );
 };

package/src/blocks/homepage-articles/edit.tsx

@@ -115,7 +115,7 @@ class Edit extends Component< HomepageArticlesProps > {
 						</div>
 					) }{ ' ' }
 					{ showTagLabels && post.newspack_tag_labels && (
-						<div className="cat-links tag-labels">
+						<div className="tag-labels">
 							{ post.newspack_tag_labels.map( ( newspack_tag_label, index ) => {
 								return newspack_tag_label.link ? (
 									<a key={ index } href="#" className="tag-label flag">

package/src/blocks/homepage-articles/editor.scss

@@ -39,7 +39,8 @@
 		}
 	}
 
-	.cat-links {
+	.cat-links,
+	.tag-labels {
 		font-size: variables.$font__size-xs;
 	}
 

package/src/blocks/homepage-articles/view.scss

@@ -271,6 +271,7 @@
 		.cat-links,
 		.cat-links a,
 		.cat-links a:visited,
+		.tag-labels,
 		figcaption {
 			color: inherit;
 		}
@@ -429,7 +430,8 @@
 	&.has-text-align-center {
 		.cat-links,
 		.entry-meta,
-		.entry-sponsors {
+		.entry-sponsors,
+		.tag-labels {
 			justify-content: center;
 		}
 
@@ -444,7 +446,8 @@
 		.cat-links,
 		.entry-meta,
 		.entry-sponsors,
-		.sponsor-logos {
+		.sponsor-logos,
+		.tag-labels {
 			justify-content: flex-end;
 			text-align: right;
 		}
@@ -463,7 +466,12 @@
 	}
 
 	/* Article meta */
-	.cat-links {
+	// `.tag-labels` shares this rule rather than repeating it, so an edit to one
+	// cannot silently diverge from the other. The wrapper carries only
+	// `tag-labels`, which is what keeps a publisher's per-section `.cat-links a`
+	// rule from reaching a tag label; sharing layout here does not give that back.
+	.cat-links,
+	.tag-labels {
 		display: flex;
 		flex-wrap: wrap;
 		font-size: variables.$font__size-xxs;
@@ -516,7 +524,8 @@
 			.cat-links,
 			.entry-meta,
 			.entry-sponsors,
-			.sponsor-logos {
+			.sponsor-logos,
+			.tag-labels {
 				justify-content: flex-start;
 			}
 		}
@@ -525,7 +534,8 @@
 			.cat-links,
 			.entry-meta,
 			.entry-sponsors,
-			.sponsor-logos {
+			.sponsor-logos,
+			.tag-labels {
 				justify-content: flex-end;
 			}
 		}

package/src/components/autocomplete-tokenfield.js

@@ -45,15 +45,29 @@ class AutocompleteTokenField extends Component {
 		if ( this.isFetchingInfoOnLoad() ) {
 			const { tokens, fetchSavedInfo } = this.props;
 
-			fetchSavedInfo( tokens ).then( results => {
-				const { validValues } = this.state;
+			fetchSavedInfo( tokens )
+				.then( results => {
+					const { validValues } = this.state;
 
-				results.forEach( suggestion => {
-					validValues[ suggestion.value ] = suggestion.label;
-				} );
+					results.forEach( suggestion => {
+						validValues[ suggestion.value ] = suggestion.label;
+					} );
 
-				this.setState( { validValues, loading: false } );
-			} );
+					this.setState( { validValues, loading: false } );
+				} )
+				.catch( error => {
+					// eslint-disable-next-line no-console
+					console.error( 'Newspack Blocks: could not load the titles for the saved selection.', error );
+					// Without labels the field would render no tokens, and the next
+					// selection would then write back a list missing every saved ID.
+					const { validValues } = this.state;
+
+					tokens.forEach( token => {
+						validValues[ token ] = String( token );
+					} );
+
+					this.setState( { validValues, loading: false } );
+				} );
 		}
 	}
 

package/src/components/autocomplete-tokenfield.scss

@@ -22,6 +22,6 @@
 	.autocomplete-tokenfield__help {
 		color: wp-colors.$gray-700;
 		font-size: 12px;
-		margin: 8px 0;
+		margin: 8px 0 0;
 	}
 }

package/src/components/autocomplete-tokenfield.test.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import AutocompleteTokenField from './autocomplete-tokenfield';
+
+const noop = () => {};
+
+describe( 'AutocompleteTokenField when the saved titles cannot be loaded', () => {
+	let errorSpy;
+
+	beforeEach( () => {
+		errorSpy = jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+	} );
+
+	afterEach( () => {
+		errorSpy.mockRestore();
+	} );
+
+	const renderField = () => {
+		const onChange = jest.fn();
+		render(
+			<AutocompleteTokenField
+				tokens={ [ 11, 22 ] }
+				onChange={ onChange }
+				fetchSuggestions={ noop }
+				fetchSavedInfo={ () => Promise.reject( new Error( 'unreachable' ) ) }
+				label="Content"
+			/>
+		);
+		return { onChange };
+	};
+
+	it( 'shows the IDs rather than dropping the saved selection', async () => {
+		renderField();
+		expect( await screen.findByText( '11' ) ).toBeInTheDocument();
+		expect( screen.getByText( '22' ) ).toBeInTheDocument();
+	} );
+
+	// The field looks settled once the spinner goes, so the console is the only
+	// trace left of why the titles turned into numbers.
+	it( 'leaves the cause in the console', async () => {
+		renderField();
+		await screen.findByText( '11' );
+		expect( errorSpy ).toHaveBeenCalledWith( expect.stringContaining( 'could not load the titles' ), expect.any( Error ) );
+	} );
+
+	it( 'keeps the remaining IDs when one token is removed', async () => {
+		const { onChange } = renderField();
+		await screen.findByText( '11' );
+		fireEvent.click( document.querySelectorAll( '.components-form-token-field__remove-token' )[ 0 ] );
+		expect( onChange ).toHaveBeenCalledWith( [ '22' ] );
+	} );
+} );

package/src/components/query-controls.js

@@ -22,6 +22,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies.
  */
 import AutocompleteTokenField from './autocomplete-tokenfield';
+import SpecificPostsControl from './specific-posts-control';
 
 const getCategoryTitle = category => decodeEntities( category.name ) || __( '(no title)', 'newspack-blocks' );
 
@@ -50,19 +51,42 @@ class QueryControls extends Component {
 	fetchSavedPosts = postIDs => {
 		const { postType } = this.props;
 		const restUrl = window.newspack_blocks_data.posts_rest_url;
+		// An empty `include` is dropped server-side, which would answer with the
+		// most recent post rather than nothing.
+		if ( ! postIDs.length ) {
+			return Promise.resolve( [] );
+		}
 		return apiFetch( {
 			url: addQueryArgs( restUrl, {
 				// These params use the block query parameters (see Newspack_Blocks::build_articles_query).
-				postsToShow: 100,
+				postsToShow: postIDs.length,
 				include: postIDs.join( ',' ),
 				_fields: 'id,title',
 				postType,
 			} ),
 		} ).then( function ( posts ) {
-			return posts.map( post => ( {
+			const allPosts = posts.map( post => ( {
 				value: post.id,
 				label: decodeEntities( post.title.rendered ) || __( '(no title)', 'newspack-blocks' ),
 			} ) );
+			// An ID the endpoint did not return still needs an entry, or the token
+			// field drops it from the block on the next edit. The ID goes in the
+			// label because labels are matched back to IDs, and a shared label
+			// would collapse two items onto one.
+			postIDs.forEach( postID => {
+				const id = parseInt( postID );
+				if ( ! allPosts.find( post => post.value === id ) ) {
+					allPosts.push( {
+						value: id,
+						label: sprintf(
+							/* translators: %d: numeric ID of content that could not be found. */
+							__( 'Unavailable content (%d)', 'newspack-blocks' ),
+							id
+						),
+					} );
+				}
+			} );
+			return allPosts;
 		} );
 	};
 
@@ -307,13 +331,11 @@ class QueryControls extends Component {
 					</ToggleGroupControl>
 				) }
 				{ specificMode ? (
-					<AutocompleteTokenField
-						tokens={ specificPosts || [] }
+					<SpecificPostsControl
+						postIds={ specificPosts || [] }
 						onChange={ onSpecificPostsChange }
 						fetchSuggestions={ this.fetchPostSuggestions }
 						fetchSavedInfo={ this.fetchSavedPosts }
-						label={ __( 'Content', 'newspack-blocks' ) }
-						help={ __( 'Begin typing any word in a title. Click on an autocomplete result to select it.', 'newspack-blocks' ) }
 					/>
 				) : (
 					<>

package/src/components/query-controls.test.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import QueryControls from './query-controls';
+
+jest.mock( '@wordpress/api-fetch' );
+
+const fetchSavedPosts = ( postIDs, posts ) => {
+	apiFetch.mockResolvedValue( posts );
+	return new QueryControls( { postType: 'post' } ).fetchSavedPosts( postIDs );
+};
+
+describe( 'fetchSavedPosts', () => {
+	beforeAll( () => {
+		window.newspack_blocks_data = { posts_rest_url: 'https://example.test/wp-json/newspack-blocks/v1/newspack-blocks-posts' };
+	} );
+
+	beforeEach( () => {
+		apiFetch.mockClear();
+	} );
+
+	it( 'labels the content the endpoint returned', async () => {
+		await expect( fetchSavedPosts( [ 11 ], [ { id: 11, title: { rendered: 'Alpha' } } ] ) ).resolves.toEqual( [ { value: 11, label: 'Alpha' } ] );
+	} );
+
+	// Without an entry the token field renders no token for the ID, and the next
+	// selection writes the attribute back without it.
+	it( 'keeps an entry for an ID the endpoint did not return', async () => {
+		await expect( fetchSavedPosts( [ 11, 22 ], [ { id: 11, title: { rendered: 'Alpha' } } ] ) ).resolves.toEqual( [
+			{ value: 11, label: 'Alpha' },
+			{ value: 22, label: 'Unavailable content (22)' },
+		] );
+	} );
+
+	// A label is matched back to its ID, so two unavailable items sharing one
+	// would collapse onto a single ID.
+	it( 'tells two unavailable IDs apart', async () => {
+		const posts = await fetchSavedPosts( [ 22, 33 ], [] );
+		expect( posts.map( post => post.label ) ).toEqual( [ 'Unavailable content (22)', 'Unavailable content (33)' ] );
+	} );
+
+	it( 'still marks the content unavailable when the title is empty', async () => {
+		const posts = await fetchSavedPosts( [ 11, 22 ], [ { id: 11, title: { rendered: '' } } ] );
+		expect( posts.map( post => post.label ) ).toEqual( [ '(no title)', 'Unavailable content (22)' ] );
+	} );
+
+	it( 'asks for nothing when nothing is saved', async () => {
+		await expect( fetchSavedPosts( [], [] ) ).resolves.toEqual( [] );
+		expect( apiFetch ).not.toHaveBeenCalled();
+	} );
+} );