@automattic/newspack-blocks 4.25.3 → 4.26.0-alpha.2

package/src/blocks/author-profile/templates.js

@@ -0,0 +1,263 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Helper to create a bound paragraph block with custom list view name.
+ * If wrapInLink is true, the content will be wrapped in an anchor tag for editor preview.
+ *
+ * @param {string}  key         Author data key for binding.
+ * @param {string}  className   CSS class for the paragraph.
+ * @param {string}  name        Display name shown in list view.
+ * @param {string}  placeholder Placeholder text (defaults to name).
+ * @param {boolean} wrapInLink  Whether to wrap content in a link.
+ * @return {Array} InnerBlocks template entry for a bound paragraph.
+ */
+const createBoundParagraph = ( key, className, name, placeholder, wrapInLink = false ) => {
+	const attributes = {
+		metadata: {
+			name, // Custom name shown in list view.
+			bindings: {
+				content: {
+					source: 'newspack-blocks/author',
+					args: { key },
+				},
+			},
+		},
+		className,
+		placeholder: placeholder || name,
+	};
+
+	// If wrapInLink is true, set initial content with link wrapper for editor preview.
+	if ( wrapInLink ) {
+		const linkText = placeholder || name;
+		attributes.content = `<a href="#" class="no-op">${ linkText }</a>`;
+	}
+
+	return [ 'core/paragraph', attributes ];
+};
+
+/**
+ * Shared block definition constants.
+ */
+
+// Styles applied to the content column in column-based layouts.
+const CONTENT_COLUMN_ATTRS = Object.freeze( {
+	className: 'author-profile-content-column',
+	templateLock: false,
+	allowedBlocks: [ 'core/heading', 'core/paragraph', 'core/separator', 'core/spacer', 'newspack/author-profile-social' ],
+	style: {
+		spacing: {
+			blockGap: 'var:preset|spacing|20',
+		},
+		elements: {
+			link: {
+				color: {
+					text: 'var:preset|color|contrast-3',
+				},
+			},
+		},
+	},
+	textColor: 'contrast-3',
+	fontSize: 'small',
+} );
+
+// Author name heading block.
+const HEADING_BLOCK = [
+	'core/heading',
+	{
+		level: 3,
+		metadata: {
+			name: __( 'Author Name', 'newspack-blocks' ),
+			bindings: {
+				content: {
+					source: 'newspack-blocks/author',
+					args: { key: 'name' },
+				},
+			},
+		},
+		className: 'author-name',
+		placeholder: __( 'Author Name', 'newspack-blocks' ),
+		textColor: 'contrast',
+		fontSize: 'large',
+	},
+];
+
+// Job title paragraph block with bold styling.
+const JOB_TITLE_BLOCK = [
+	'core/paragraph',
+	{
+		metadata: {
+			name: __( 'Job Title', 'newspack-blocks' ),
+			bindings: {
+				content: {
+					source: 'newspack-blocks/author',
+					args: { key: 'newspack_job_title' },
+				},
+			},
+		},
+		className: 'author-job-title',
+		placeholder: __( 'Job Title', 'newspack-blocks' ),
+		style: {
+			typography: {
+				fontStyle: 'normal',
+				fontWeight: '600',
+			},
+			elements: {
+				link: {
+					color: {
+						text: 'var:preset|color|contrast',
+					},
+				},
+			},
+		},
+		textColor: 'contrast',
+	},
+];
+
+// Bound paragraph blocks for author fields.
+const ROLE_BLOCK = createBoundParagraph( 'newspack_role', 'author-role', __( 'Role', 'newspack-blocks' ) );
+const EMPLOYER_BLOCK = createBoundParagraph( 'newspack_employer', 'author-employer', __( 'Employer', 'newspack-blocks' ) );
+const BIO_BLOCK = createBoundParagraph( 'bio', 'author-bio', __( 'Biography', 'newspack-blocks' ) );
+
+const archiveLinkLabel = sprintf(
+	/* translators: %s: author name. */
+	__( 'More by %s', 'newspack-blocks' ),
+	__( 'Author Name', 'newspack-blocks' )
+);
+const ARCHIVE_LINK_BLOCK = createBoundParagraph( 'archive_link_text', 'author-archive-link', archiveLinkLabel, undefined, true );
+
+// Social icons block with top padding.
+const SOCIAL_BLOCK = [
+	'newspack/author-profile-social',
+	{
+		style: {
+			spacing: {
+				padding: {
+					top: 'var:preset|spacing|20',
+				},
+			},
+		},
+	},
+];
+
+/**
+ * Returns a copy of a block template entry with center alignment added.
+ * Uses `textAlign` for headings, `align` for paragraphs.
+ *
+ * @param {Array}  block   InnerBlocks template entry [blockName, attributes].
+ * @param {string} block.0 Block name.
+ * @param {Object} block.1 Block attributes.
+ * @return {Array} New template entry with center alignment.
+ */
+const centered = ( [ blockName, attrs ] ) => [
+	blockName,
+	{ ...attrs, ...( blockName === 'core/heading' ? { textAlign: 'center' } : { align: 'center' } ) },
+];
+
+// Shared group styles for centered and compact layouts.
+const GROUP_STYLES = Object.freeze( {
+	spacing: {
+		blockGap: 'var:preset|spacing|20',
+	},
+	elements: {
+		link: {
+			color: {
+				text: 'var:preset|color|contrast-3',
+			},
+		},
+	},
+} );
+
+// Content blocks shared across all layouts.
+// Shallow-frozen to prevent push/splice; nested block definitions are safe because templates compose via spread.
+const CONTENT_BLOCKS = Object.freeze( [ HEADING_BLOCK, JOB_TITLE_BLOCK, ROLE_BLOCK, EMPLOYER_BLOCK, BIO_BLOCK, ARCHIVE_LINK_BLOCK, SOCIAL_BLOCK ] );
+
+// -- Layout Templates --------------------------------------------------------
+
+/**
+ * Avatar left layout: avatar on the left, content on the right.
+ */
+export const AVATAR_LEFT_TEMPLATE = [
+	[
+		'core/columns',
+		{ isStackedOnMobile: true, className: 'author-profile-columns', templateLock: 'insert' },
+		[
+			[
+				'core/column',
+				{
+					className: 'author-profile-avatar-column',
+					templateLock: 'insert',
+					allowedBlocks: [ 'newspack/avatar' ],
+				},
+				[ [ 'newspack/avatar', { size: 128 } ] ],
+			],
+			[ 'core/column', CONTENT_COLUMN_ATTRS, CONTENT_BLOCKS ],
+		],
+	],
+];
+
+/**
+ * Avatar right layout: avatar first in DOM for correct mobile stacking,
+ * CSS reorders content to the left on desktop.
+ */
+export const AVATAR_RIGHT_TEMPLATE = [
+	[
+		'core/columns',
+		{ isStackedOnMobile: true, className: 'author-profile-columns is-style-first-col-to-second', templateLock: 'insert' },
+		[
+			[
+				'core/column',
+				{
+					className: 'author-profile-avatar-column',
+					templateLock: 'insert',
+					allowedBlocks: [ 'newspack/avatar' ],
+				},
+				[ [ 'newspack/avatar', { size: 128 } ] ],
+			],
+			[ 'core/column', CONTENT_COLUMN_ATTRS, CONTENT_BLOCKS ],
+		],
+	],
+];
+
+/**
+ * Centered layout: large centered avatar with center-aligned text.
+ */
+export const CENTERED_TEMPLATE = [
+	[
+		'core/group',
+		{
+			layout: { type: 'flex', orientation: 'vertical', justifyContent: 'center' },
+			style: GROUP_STYLES,
+			textColor: 'contrast-3',
+			fontSize: 'small',
+		},
+		[
+			[ 'newspack/avatar', { size: 200 } ],
+			centered( HEADING_BLOCK ),
+			centered( JOB_TITLE_BLOCK ),
+			centered( ROLE_BLOCK ),
+			centered( EMPLOYER_BLOCK ),
+			centered( BIO_BLOCK ),
+			centered( ARCHIVE_LINK_BLOCK ),
+			SOCIAL_BLOCK,
+		],
+	],
+];
+
+/**
+ * Compact layout: no avatar.
+ */
+export const COMPACT_TEMPLATE = [
+	[
+		'core/group',
+		{
+			layout: { type: 'flex', orientation: 'vertical' },
+			style: GROUP_STYLES,
+			textColor: 'contrast-3',
+			fontSize: 'small',
+		},
+		CONTENT_BLOCKS,
+	],
+];

package/src/blocks/author-profile/variations.js

@@ -0,0 +1,86 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SVG, Path } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import { AVATAR_LEFT_TEMPLATE, AVATAR_RIGHT_TEMPLATE, CENTERED_TEMPLATE, COMPACT_TEMPLATE } from './templates';
+
+const ICON_COLOR = colors[ 'primary-400' ];
+
+// Variation icons: abstract layout representations.
+// Circle represents the avatar, rectangles represent text lines.
+
+const iconAvatarLeft = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+		<Path d="M31 33H17V32H31V33ZM39 30H17V29H39V30ZM37 27H17V26H37V27ZM41 24H17V23H41V24ZM11 15C13.2091 15 15 16.7909 15 19C15 21.2091 13.2091 23 11 23C8.79086 23 7 21.2091 7 19C7 16.7909 8.79086 15 11 15ZM37 21H17V20H37V21ZM41 18H17V15H41V18Z" />
+	</SVG>
+);
+
+const iconAvatarRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+		<Path d="M21 33H7V32H21V33ZM29 30H7V29H29V30ZM27 27H7V26H27V27ZM31 24H7V23H31V24ZM37 15C39.2091 15 41 16.7909 41 19C41 21.2091 39.2091 23 37 23C34.7909 23 33 21.2091 33 19C33 16.7909 34.7909 15 37 15ZM27 21H7V20H27V21ZM31 18H7V15H31V18Z" />
+	</SVG>
+);
+
+const iconCentered = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+		<Path d="M36 38H12V37H36V38ZM40 35H8V34H40V35ZM39 32H9V31H39V32ZM41 29H7V28H41V29ZM39 26H9V25H39V26ZM41 23H7V20H41V23ZM24 10C26.2091 10 27.9999 11.791 28 14C28 16.2091 26.2091 18 24 18C21.7909 18 20 16.2091 20 14C20.0001 11.791 21.7909 10 24 10Z" />
+	</SVG>
+);
+
+const iconCompact = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+		<Path d="M31 33H7V32H31V33ZM39 30H7V29H39V30ZM37 27H7V26H37V27ZM41 24H7V23H41V24ZM37 21H7V20H37V21ZM41 18H7V15H41V18Z" />
+	</SVG>
+);
+
+const variations = [
+	{
+		name: 'avatar-left',
+		title: __( 'Avatar left', 'newspack-blocks' ),
+		description: __( 'Avatar on the left, content on the right.', 'newspack-blocks' ),
+		icon: { src: iconAvatarLeft, foreground: ICON_COLOR },
+		attributes: { variation: 'avatar-left' },
+		innerBlocks: AVATAR_LEFT_TEMPLATE,
+		scope: [ 'block' ],
+		isDefault: true,
+	},
+	{
+		name: 'avatar-right',
+		title: __( 'Avatar right', 'newspack-blocks' ),
+		description: __( 'Content on the left, avatar on the right.', 'newspack-blocks' ),
+		icon: { src: iconAvatarRight, foreground: ICON_COLOR },
+		attributes: { variation: 'avatar-right' },
+		innerBlocks: AVATAR_RIGHT_TEMPLATE,
+		scope: [ 'block' ],
+	},
+	{
+		name: 'centered',
+		title: __( 'Centered', 'newspack-blocks' ),
+		description: __( 'Large centered avatar with center-aligned text.', 'newspack-blocks' ),
+		icon: { src: iconCentered, foreground: ICON_COLOR },
+		attributes: { variation: 'centered' },
+		innerBlocks: CENTERED_TEMPLATE,
+		scope: [ 'block' ],
+	},
+	{
+		name: 'compact',
+		title: __( 'Compact', 'newspack-blocks' ),
+		description: __( 'No avatar, vertical stack.', 'newspack-blocks' ),
+		icon: { src: iconCompact, foreground: ICON_COLOR },
+		attributes: { variation: 'compact' },
+		innerBlocks: COMPACT_TEMPLATE,
+		scope: [ 'block' ],
+	},
+];
+
+export default variations;

package/src/blocks/carousel/block.json

@@ -112,6 +112,10 @@
 			"items": {
 				"type": "string"
 			}
+		},
+		"deduplicate": {
+			"type": "boolean",
+			"default": true
 		}
 	}
 }

package/src/blocks/carousel/edit.js

@@ -228,6 +228,8 @@ class Edit extends Component {
 								specificPosts={ specificPosts }
 								onSpecificPostsChange={ _specificPosts => setAttributes( { specificPosts: _specificPosts } ) }
 								postType={ postType }
+								allowDedupeCurrentValue={ ! attributes.deduplicate }
+								onAllowDedupeChange={ value => setAttributes( { deduplicate: ! value } ) }
 							/>
 						) }
 					</PanelBody>

package/src/blocks/carousel/view.php

@@ -51,7 +51,9 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 			$article_query->the_post();
 			$post_id                             = get_the_ID();
 			$authors                             = Newspack_Blocks::prepare_authors();
-			$newspack_blocks_post_id[ $post_id ] = true;
+			if ( Newspack_Blocks::should_deduplicate_block( $attributes ) ) {
+				$newspack_blocks_post_id[ $post_id ] = true;
+			}
 
 			$article_classes = [
 				'post-has-image',

package/src/blocks/donate/styles/editor.scss

@@ -35,7 +35,7 @@
 
 	button,
 	.submit-button {
-		font-family: var(--newspack-theme-font-heading);
+		font-family: var(--newspack-theme-font-heading, sans-serif);
 		font-size: variables.$font__size-sm;
 		font-weight: bold;
 		outline: none;

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

@@ -285,12 +285,8 @@ class Edit extends Component< HomepageArticlesProps > {
 						customTaxonomyExclusions={ customTaxonomyExclusions }
 						onCustomTaxonomyExclusionsChange={ handleAttributeChange( 'customTaxonomyExclusions' ) }
 						postType={ postType }
-					/>
-					<ToggleControl
-						label={ __( 'Allow duplicate content', 'newspack-blocks' ) }
-						help={ __( "Exclude this block from the page's deduplication logic.", 'newspack-blocks' ) }
-						checked={ ! attributes.deduplicate }
-						onChange={ ( value: boolean ) => setAttributes( { deduplicate: ! value } ) }
+						allowDedupeCurrentValue={ ! attributes.deduplicate }
+						onAllowDedupeChange={ ( value: boolean ) => setAttributes( { deduplicate: ! value } ) }
 					/>
 					{ ! specificMode && isBlogPrivate() ? (
 						/*

package/src/components/query-controls.js

@@ -8,6 +8,7 @@ import {
 	CheckboxControl,
 	SelectControl,
 	QueryControls as BasicQueryControls,
+	ToggleControl,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
@@ -263,6 +264,8 @@ class QueryControls extends Component {
 			customTaxonomyExclusions,
 			onCustomTaxonomyExclusionsChange,
 			enableSpecific,
+			onAllowDedupeChange,
+			allowDedupeCurrentValue,
 		} = this.props;
 
 		const registeredCustomTaxonomies = window.newspack_blocks_data?.custom_taxonomies;
@@ -417,6 +420,15 @@ class QueryControls extends Component {
 									tokens={ getTermsOfCustomTaxonomy( customTaxonomyExclusions, slug ) }
 								/>
 							) ) }
+
+						{ onAllowDedupeChange && (
+							<ToggleControl
+								label={ __( 'Allow duplicate content', 'newspack-blocks' ) }
+								help={ __( "Exclude this block from the page's deduplication logic.", 'newspack-blocks' ) }
+								checked={ allowDedupeCurrentValue }
+								onChange={ value => onAllowDedupeChange( value ) }
+							/>
+						) }
 					</>
 				) }
 			</>

package/src/modal-checkout/checkout.scss

@@ -6,6 +6,11 @@
 	background: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
 	padding: var(--newspack-ui-spacer-5, 24px);
 
+	a,
+	a:hover {
+	  text-decoration: none;
+    }
+
 	form p {
 		margin: 0 0 var(--newspack-ui-spacer-5, 24px);
 
@@ -16,6 +21,11 @@
 	}
 
 	table.woocommerce-checkout-review-order-table {
+		tr,
+		th {
+			font-weight: normal;
+		}
+
 		thead > tr > th {
 			font-weight: var(--newspack-ui-font-weight-strong, 600);
 		}
@@ -821,6 +831,8 @@
 
 	// Order review table.
 	.woocommerce-checkout-review-order-table {
+		width: 100%;
+
 		th,
 		td,
 		label,
@@ -841,6 +853,22 @@
 				margin: 0;
 			}
 		}
+
+		td,
+		th {
+			border: 1px solid var(--newspack-ui-color-border, #ddd);
+			border-width: 0 0 1px;
+			word-break: break-all;
+		}
+
+        tfoot {
+          tr:last-child {
+              td,
+              th {
+                  border-bottom: 0;
+              }
+          }
+        }
 	}
 
 	.woocommerce .first-payment-date {

package/src/modal-checkout/index.js

@@ -685,7 +685,7 @@ import { domReady, onCheckoutPlaceOrderProcessing } from './utils';
 					// Serialize form and remove fields that shouldn't be included for validation.
 					const serializedForm = $form.serializeArray().filter( item => ! removeFromValidation.includes( item.name ) );
 					// Add 'update totals' parameter so it just performs validation.
-					serializedForm.push( { name: 'woocommerce_checkout_update_totals', value: '1' } );
+					serializedForm.push( { name: 'newspack_blocks_checkout_action', value: '1' } );
 					// Ajax request.
 					$.ajax( {
 						type: 'POST',

package/src/modal-checkout/templates/form-checkout.php

@@ -25,6 +25,7 @@ if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_requir
 ?>
 
 <form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
+	<?php wp_nonce_field( 'newspack_modal_checkout_nonce', 'newspack_checkout_nonce' ); ?>
 	<?php if ( $checkout->get_checkout_fields() ) : ?>
 		<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
 		<div id="customer_details">
@@ -34,6 +35,11 @@ if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_requir
 			<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide" id="checkout_continue" type="submit"><?php esc_html_e( 'Continue', 'newspack-blocks' ); ?></button>
 		</div>
 		<div id="after_customer_details">
+			<?php
+			if ( wp_is_block_theme() && function_exists( 'woocommerce_checkout_payment' ) ) {
+				woocommerce_checkout_payment();
+			}
+			?>
 			<div class="order-review-wrapper hidden">
 				<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
 				<button id="order_review_heading" aria-expanded="false" aria-controls="order_review_content" class="newspack-ui__button newspack-ui__button--ghost" type="button">
@@ -46,7 +52,13 @@ if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_requir
 					<div class="transaction-details-content-inner" id="order_review_content">
 						<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
 						<div id="order_review" class="woocommerce-checkout-review-order newspack-ui__box">
-							<?php do_action( 'woocommerce_checkout_order_review' ); ?>
+							<?php
+							if ( wp_is_block_theme() && function_exists( 'woocommerce_order_review' ) ) {
+								woocommerce_order_review();
+							} else {
+								do_action( 'woocommerce_checkout_order_review' );
+							}
+							?>
 						</div>
 						<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
 					</div>

package/vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'automattic/newspack-blocks',
         'pretty_version' => 'dev-trunk',
         'version' => 'dev-trunk',
-        'reference' => '205ae602a1cec474bddc287143fe548fa9035070',
+        'reference' => 'c033b36b1e6451553b1b7c2c048b0bae5f331695',
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         'automattic/newspack-blocks' => array(
             'pretty_version' => 'dev-trunk',
             'version' => 'dev-trunk',
-            'reference' => '205ae602a1cec474bddc287143fe548fa9035070',
+            'reference' => 'c033b36b1e6451553b1b7c2c048b0bae5f331695',
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),