@automattic/newspack-blocks 4.11.0 → 4.12.0

package/src/block-styles/core/columns/view.scss

@@ -1,7 +1,7 @@
 @use "../../../shared/sass/variables";
 @use "../../../shared/sass/mixins";
 
-body:not([class*="block-theme"]) div.wp-block-columns {
+body:not(.is-block-theme) div.wp-block-columns {
 	gap: 32px;
 
 	&.is-style-borders {

package/src/blocks/carousel/edit.js

@@ -35,8 +35,7 @@ import QueryControls from '../../components/query-controls';
 import { PostTypesPanel, PostStatusesPanel } from '../../components/editor-panels';
 import createSwiper from './create-swiper';
 import {
-	formatAvatars,
-	formatByline,
+	getBylineHTML,
 	formatSponsorLogos,
 	formatSponsorByline,
 	getPostStatusLabel,
@@ -320,14 +319,10 @@ class Edit extends Component {
 														</span>
 													) }
 													{ showAuthor &&
-														showAvatar &&
-														( ! post.newspack_post_sponsors ||
-															post.newspack_sponsors_show_author ) &&
-														formatAvatars( post.newspack_author_info ) }
-													{ showAuthor &&
-														( ! post.newspack_post_sponsors ||
-															post.newspack_sponsors_show_author ) &&
-														formatByline( post.newspack_author_info ) }
+														! post.newspack_listings_hide_author &&
+														( ! post.newspack_post_sponsors || post.newspack_sponsors_show_author ) &&
+														<RawHTML className="byline-container">{ getBylineHTML( post, showAvatar ) }</RawHTML>
+													}
 													{ showDate && (
 														<time className="entry-date published" key="pub-date">
 															{ dateI18n( dateFormat, post.date ) }

package/src/blocks/carousel/editor.scss

@@ -33,6 +33,14 @@
 			visibility: hidden;
 		}
 	}
+
+	// Work around RawHTML `<div />` encapsulation.
+	.entry-meta div.byline-container {
+		display: inline;
+		display: flex;
+		align-items: center;
+		margin-right: 1.5em;
+	}
 }
 .editor-block-list__layout .editor-block-list__block .wpnbpc .entry-title a,
 .editor-block-list__layout .editor-block-list__block .wpnbpc .entry-meta .byline a {

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

@@ -6,8 +6,7 @@
 import QueryControls from '../../components/query-controls';
 import { postsBlockSelector, postsBlockDispatch, isBlogPrivate, shouldReflow } from './utils';
 import {
-	formatAvatars,
-	formatByline,
+	getBylineHTML,
 	formatSponsorLogos,
 	formatSponsorByline,
 	getPostStatusLabel,
@@ -236,14 +235,9 @@ class Edit extends Component< HomepageArticlesProps > {
 
 						{ showAuthor &&
 							! post.newspack_listings_hide_author &&
-							showAvatar &&
 							( ! post.newspack_post_sponsors || post.newspack_sponsors_show_author ) &&
-							formatAvatars( post.newspack_author_info ) }
-
-						{ showAuthor &&
-							! post.newspack_listings_hide_author &&
-							( ! post.newspack_post_sponsors || post.newspack_sponsors_show_author ) &&
-							formatByline( post.newspack_author_info ) }
+							<RawHTML className="byline-container">{ getBylineHTML( post, showAvatar ) }</RawHTML>
+						}
 
 						{ showDate && ! post.newspack_listings_hide_publish_date && (
 							<time className="entry-date published" key="pub-date">

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

@@ -30,18 +30,22 @@
 		flex-wrap: wrap;
 		align-items: center;
 		margin-top: 0.5em;
+		// Work around RawHTML `<div />` encapsulation.
+		div.byline-container {
+			display: inline;
+			display: flex;
+			align-items: center;
+			margin-right: 1.5em;
+		}
 	}
 
 	.cat-links {
 		font-size: variables.$font__size-xs;
 	}
 
-	span.avatar {
+	.entry-meta .avatar {
 		display: inline-block;
 		margin-right: 0.5em;
-		div {
-			display: inline;
-		}
 	}
 
 	/* Article excerpt */

package/src/blocks/homepage-articles/utils.ts

@@ -176,14 +176,13 @@ const generatePreviewPost = ( id: PostId ) => {
 			rendered: __( 'Post Title', 'newspack-blocks' ),
 		},
 		newspack_article_classes: 'type-post',
-		newspack_author_info: [
-			{
-				display_name: __( 'Author Name', 'newspack-blocks' ),
-				avatar: `<div style="background: #e8e8e8;width: 40px;height: 40px;display: block;overflow: hidden;border-radius: 50%; max-width: 100%; max-height: 100%;"></div>`,
-				id: 1,
-				author_link: '/',
-			},
-		],
+		newspack_post_avatars: `<div style="background: #e8e8e8;width: 40px;height: 40px;display: block;overflow: hidden;border-radius: 50%; max-width: 100%; max-height: 100%;" class="avatar"></div>`,
+		newspack_post_byline: `<span class="byline">
+			<span class="author-prefix">${ __( 'by', 'newspack-blocks' ) }</span>
+			<span class="author vcard">
+				<a class="url fn n" href="/">Author Name</a>
+			</span>
+		</span>`,
 		newspack_category_info: __( 'Category', 'newspack-blocks' ),
 		newspack_featured_image_caption: __( 'Featured image caption', 'newspack-blocks' ),
 		newspack_featured_image_src: {

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

@@ -467,7 +467,7 @@ function newspack_blocks_format_avatars( $author_info ) {
 /**
  * Renders byline markup.
  *
- * @param array $author_info Author info array.
+ * @param object[] $author_info Author info array.
  *
  * @return string Returns byline markup.
  */
@@ -500,7 +500,15 @@ function newspack_blocks_format_byline( $author_info ) {
 		)
 	);
 
-	return implode( '', $elements );
+	$byline = implode( '', $elements );
+
+	/**
+	 * Filters the byline markup.
+	 *
+	 * @param string   $byline      Byline markup.
+	 * @param objcet[] $author_info Author info array.
+	 */
+	return apply_filters( 'newspack_blocks_post_byline', $byline, $author_info );
 }
 
 /**

package/src/modal-checkout/analytics/ga4/checkout-attempt.js

@@ -11,23 +11,7 @@ export const manageCheckoutAttempt = () => {
 		return;
 	}
 
-	const { action_type, amount, currency, product_id, product_type, recurrence, referrer, variation_id = '' } = getProductDetails( 'modal-checkout-product-details' );
-
-	const params = {
-		action_type,
-		amount,
-		currency,
-		product_id,
-		product_type,
-		recurrence,
-		referrer,
-	};
-
-	// There's only a variation ID for variable products, after you've selected one.
-	if ( variation_id ) {
-		params.variation_id = variation_id;
-	}
-
+	const params = getProductDetails( 'modal-checkout-product-details' );
 	const payload = getEventPayload( 'form_submission', params );
 	sendEvent( payload );
 };

package/src/modal-checkout/analytics/ga4/checkout-success.js

@@ -0,0 +1,17 @@
+import { getEventPayload, getProductDetails, sendEvent } from './utils';
+
+/**
+ * Event fired when switching between steps of the multi-step checkout flow.
+ *
+ * @param {string} action Action name for the event: 'continue' or 'back'.
+ */
+
+export const manageCheckoutSuccess = () => {
+	if ( 'function' !== typeof window.gtag ) {
+		return;
+	}
+
+	const params = getProductDetails( 'modal-checkout-product-details' );
+	const payload = getEventPayload( 'form_submission_success', params );
+	sendEvent( payload );
+};

package/src/modal-checkout/analytics/ga4/dismissed.js

@@ -12,27 +12,6 @@ export const manageDismissed = ( data ) => {
 
 	data = data || getProductDetails( 'newspack_modal_checkout' );
 
-	const { action_type, amount = '', currency, price = '', product_id, product_type, recurrence, referrer, variation_id = '' } = data;
-
-	const params = {
-		action_type,
-		currency,
-		product_id,
-		product_type,
-		recurrence,
-		referrer,
-	};
-
-	// On the first variable screen, there may not be a price so we want to check for it.
-	if ( amount || price ) {
-		params.amount = amount ? amount : price;
-	}
-
-	// There's only a variation ID for variable products, after you've selected one.
-	if ( variation_id ) {
-		params.variation_id = variation_id;
-	}
-
-	const payload = getEventPayload( 'dismissed', params );
+	const payload = getEventPayload( 'dismissed', data );
 	sendEvent( payload );
 };

package/src/modal-checkout/analytics/ga4/loaded.js

@@ -9,33 +9,7 @@ export const manageLoaded = () => {
 		if ( 'function' !== typeof window.gtag ) {
 			return;
 		}
-
-		const {
-			action_type,
-			amount,
-			currency,
-			product_id,
-			product_type,
-			recurrence,
-			referrer,
-			variation_id = ''
-		} = getProductDetails( 'modal-checkout-product-details' );
-
-		const params = {
-			action_type,
-			amount,
-			currency,
-			product_id,
-			product_type,
-			recurrence,
-			referrer,
-		};
-
-		// There's only a variation ID for variable products, after you've selected one.
-		if ( variation_id ) {
-			params.variation_id = variation_id;
-		}
-
+		const params = getProductDetails( 'modal-checkout-product-details' );
 		const payload = getEventPayload( 'loaded', params );
 
 		sendEvent( payload );

package/src/modal-checkout/analytics/ga4/opened.js

@@ -13,24 +13,14 @@ export const manageOpened = ( data ) => {
 	let action = 'opened';
 
 	const {
-		action_type,
 		amount = '',
-		currency,
 		is_variable = '',
 		price = '',
-		product_id,
-		product_type,
-		recurrence,
-		referrer,
 		variation_id = '',
 	} = data;
 
 	const params = {
-		action_type,
-		currency,
-		product_id,
-		product_type,
-		referrer,
+		...data,
 	};
 
 	// On the first variable screen, there may not be a price so we want to check for it.
@@ -38,21 +28,6 @@ export const manageOpened = ( data ) => {
 		params.amount = amount ? amount : price;
 	}
 
-	// Only pass is_variable if available -- it only is for variable products.
-	if ( is_variable ) {
-		params.is_variable = is_variable;
-	}
-
-	// Only pass the variation_id if available -- it only is when a variation is picked.
-	if ( variation_id ) {
-		params.variation_id = variation_id;
-	}
-
-	// Only pass the recurrence if available -- for variable products, it won't be until a variation is picked.
-	if ( recurrence ) {
-		params.recurrence = recurrence;
-	}
-
 	// Change the action when opening the initial variation modal.
 	if ( is_variable && ! variation_id ) {
 		action = 'opened_variations';

package/src/modal-checkout/analytics/ga4/pagination.js

@@ -11,7 +11,17 @@ export const managePagination = ( action = 'continue' ) => {
 		return;
 	}
 
-	const { action_type, amount, currency, product_id, product_type, recurrence, referrer, variation_id = '' } = getProductDetails( 'modal-checkout-product-details' );
+	const {
+		action_type,
+		amount,
+		currency,
+		product_id,
+		product_type,
+		recurrence,
+		referrer,
+		variation_id = '',
+		gate_post_id = '',
+	} = getProductDetails( 'modal-checkout-product-details' );
 
 	const params = {
 		action_type,
@@ -28,6 +38,11 @@ export const managePagination = ( action = 'continue' ) => {
 		params.variation_id = variation_id;
 	}
 
+	// If this checkout started from a content gate, add the gate ID to the payload.
+	if ( gate_post_id ) {
+		params.gate_post_id = gate_post_id;
+	}
+
 	const payload = getEventPayload( action, params );
 	sendEvent( payload );
 };

package/src/modal-checkout/analytics/index.js

@@ -1,5 +1,6 @@
 export { manageCheckoutAttempt } from './ga4/checkout-attempt';
+export { manageCheckoutSuccess } from './ga4/checkout-success';
 export { manageDismissed } from './ga4/dismissed';
 export { manageLoaded } from './ga4/loaded';
 export { manageOpened } from './ga4/opened';
-export { managePagination } from './ga4/pagination';
+export { managePagination } from './ga4/pagination';

package/src/modal-checkout/index.js

@@ -7,7 +7,7 @@ import './checkout.scss';
 /**
  * Internal dependencies
  */
-import { manageCheckoutAttempt, manageLoaded, managePagination } from './analytics';
+import { manageCheckoutAttempt, manageCheckoutSuccess, manageLoaded, managePagination } from './analytics';
 import { domReady } from './utils';
 
 ( $ => {
@@ -51,6 +51,8 @@ import { domReady } from './utils';
 		}
 
 		if ( newspackBlocksModalCheckout.is_checkout_complete ) {
+			manageCheckoutSuccess();
+
 			/**
 			 * Set the checkout as complete so the modal can resolve post checkout flows.
 			 */

package/src/modal-checkout/modal.js

@@ -10,6 +10,7 @@ import * as a11y from './accessibility.js';
  * Internal dependencies
  */
 import { manageDismissed, manageOpened } from './analytics';
+import { getProductDetails } from './analytics/ga4/utils';
 import { createHiddenInput, domReady } from './utils';
 
 const CLASS_PREFIX = newspackBlocksModal.newspack_class_prefix;
@@ -127,10 +128,18 @@ domReady( () => {
 		}
 		if ( container ) {
 			if ( container.checkoutComplete ) {
+				// Dispatch a checkout_completed event to RAS.
+				const params = getProductDetails( MODAL_CHECKOUT_ID );
+				window.newspackRAS = window.newspackRAS || [];
+				window.newspackRAS.push( function( ras ) {
+					ras.dispatchActivity( 'checkout_completed', params );
+				} );
+
 				// Update the newsletters signup modal if it exists.
 				if ( window?.newspackReaderActivation?.refreshNewslettersSignupModal && window?.newspackReaderActivation?.getReader()?.email ) {
 					window.newspackReaderActivation.refreshNewslettersSignupModal( window.newspackReaderActivation.getReader().email );
 				}
+
 				// Update the modal title and width to reflect successful transaction.
 				setModalSize( 'small' );
 				setModalTitle( newspackBlocksModal.labels.thankyou_modal_title );
@@ -372,6 +381,16 @@ domReady( () => {
 			};
 		}
 
+		// If the checkout started from a content gate, add the gate ID to the payload.
+		const gateId = formData.get( 'memberships_content_gate' );
+		if ( gateId ) {
+			analyticsData.gate_post_id = gateId;
+		}
+		const popupId = formData.get( 'newspack_popup_id' );
+		if ( popupId ) {
+			analyticsData.newspack_popup_id = popupId;
+		}
+
 		// Analytics.
 		if ( ! inCheckoutIntent ) {
 			manageOpened( analyticsData );

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

@@ -11,6 +11,8 @@
 
 namespace Newspack_Blocks;
 
+use Newspack_Blocks\Tracking\Data_Events;
+
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
@@ -41,6 +43,10 @@ function newspack_blocks_replace_login_with_order_summary() {
 	$after_success_behavior = isset( $_GET['after_success_behavior'] ) ? \sanitize_text_field( \wp_unslash( $_GET['after_success_behavior'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 	$after_success_url      = isset( $_GET['after_success_url'] ) ? esc_url( \sanitize_url( \wp_unslash( $_GET['after_success_url'] ) ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 	$after_success_label    = isset( $_GET['after_success_button_label'] ) ? \sanitize_text_field( \wp_unslash( $_GET['after_success_button_label'] ) ) : \Newspack_Blocks\Modal_Checkout::get_modal_checkout_labels( 'after_success' ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+	$order_items            = $order->get_items();
+	$item                   = reset( $order_items );
+	$product_id             = $item ? $item->get_product_id() : null;
+	$data_order_details     = Data_Events::build_js_data_events( $product_id, null, $order );
 	?>
 	<div class="woocommerce-order">
 	<?php if ( $is_success ) : ?>
@@ -51,7 +57,7 @@ function newspack_blocks_replace_login_with_order_summary() {
 					<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path>
 				</svg>
 			</span>
-			<p>
+			<p id="modal-checkout-product-details" data-order-details='<?php echo wp_json_encode( $data_order_details ); ?>'>
 				<strong>
 					<?php
 						echo esc_html( Modal_Checkout::get_post_checkout_success_text() );

package/src/shared/js/utils.js

@@ -2,36 +2,15 @@
  * WordPress dependencies
  */
 import { _x, __ } from '@wordpress/i18n';
-import { RawHTML, Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
 
-export const formatAvatars = authorInfo =>
-	authorInfo.map( author => (
-		<span className="avatar author-avatar" key={ author.id }>
-			<a className="url fn n" href={ author.author_link }>
-				<RawHTML>{ author.avatar }</RawHTML>
-			</a>
-		</span>
-	) );
-
-export const formatByline = authorInfo => (
-	<span className="byline">
-		<span className="author-prefix">{ _x( 'by', 'post author', 'newspack-blocks' ) }</span>{ ' ' }
-		{ authorInfo.reduce( ( accumulator, author, index ) => {
-			return [
-				...accumulator,
-				<span className="author vcard" key={ author.id }>
-					<a className="url fn n" href={ author.author_link }>
-						{ author.display_name }
-					</a>
-				</span>,
-				index < authorInfo.length - 2 && ', ',
-				authorInfo.length > 1 &&
-					index === authorInfo.length - 2 &&
-					_x( ' and ', 'post author', 'newspack-blocks' ),
-			];
-		}, [] ) }
-	</span>
-);
+export const getBylineHTML = ( post, showAvatar = false ) => {
+	const byline = '<span class="byline">' + post.newspack_post_byline + '</span>';
+	if ( showAvatar && post.newspack_post_avatars ) {
+		return post.newspack_post_avatars + byline;
+	}
+	return byline;
+};
 
 export const formatSponsorLogos = sponsorInfo => (
 	<span className="sponsor-logos">

package/src/types/index.d.ts

@@ -71,11 +71,6 @@ declare global {
 			newspack_post_subtitle: string;
 		};
 		post_link: string;
-		newspack_author_info: {
-			id: number;
-			author_link: string;
-			avatar: string;
-		}[];
 		newspack_article_classes: string;
 		newspack_featured_image_caption: string;
 		newspack_featured_image_src: {
@@ -86,6 +81,8 @@ declare global {
 			uncropped: string;
 		};
 		newspack_category_info: string;
+		newspack_post_avatars: string;
+		newspack_post_byline: string;
 		newspack_sponsors_show_categories: boolean;
 		newspack_sponsors_show_author: boolean;
 		newspack_post_sponsors?:

package/vendor/autoload.php

@@ -22,4 +22,4 @@ if (PHP_VERSION_ID < 50600) {
 
 require_once __DIR__ . '/composer/autoload_real.php';
 
-return ComposerAutoloaderInitf2366ed8ad38ed7f55353e226beedbcf::getLoader();
+return ComposerAutoloaderInit7ab5ea472192e8edb0c273e1092ec41f::getLoader();

package/vendor/composer/autoload_real.php

@@ -2,7 +2,7 @@
 
 // autoload_real.php @generated by Composer
 
-class ComposerAutoloaderInitf2366ed8ad38ed7f55353e226beedbcf
+class ComposerAutoloaderInit7ab5ea472192e8edb0c273e1092ec41f
 {
     private static $loader;
 
@@ -22,12 +22,12 @@ class ComposerAutoloaderInitf2366ed8ad38ed7f55353e226beedbcf
             return self::$loader;
         }
 
-        spl_autoload_register(array('ComposerAutoloaderInitf2366ed8ad38ed7f55353e226beedbcf', 'loadClassLoader'), true, true);
+        spl_autoload_register(array('ComposerAutoloaderInit7ab5ea472192e8edb0c273e1092ec41f', 'loadClassLoader'), true, true);
         self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(__DIR__));
-        spl_autoload_unregister(array('ComposerAutoloaderInitf2366ed8ad38ed7f55353e226beedbcf', 'loadClassLoader'));
+        spl_autoload_unregister(array('ComposerAutoloaderInit7ab5ea472192e8edb0c273e1092ec41f', 'loadClassLoader'));
 
         require __DIR__ . '/autoload_static.php';
-        call_user_func(\Composer\Autoload\ComposerStaticInitf2366ed8ad38ed7f55353e226beedbcf::getInitializer($loader));
+        call_user_func(\Composer\Autoload\ComposerStaticInit7ab5ea472192e8edb0c273e1092ec41f::getInitializer($loader));
 
         $loader->register(true);
 

package/vendor/composer/autoload_static.php

@@ -4,7 +4,7 @@
 
 namespace Composer\Autoload;
 
-class ComposerStaticInitf2366ed8ad38ed7f55353e226beedbcf
+class ComposerStaticInit7ab5ea472192e8edb0c273e1092ec41f
 {
     public static $classMap = array (
         'Composer\\InstalledVersions' => __DIR__ . '/..' . '/composer/InstalledVersions.php',
@@ -13,7 +13,7 @@ class ComposerStaticInitf2366ed8ad38ed7f55353e226beedbcf
     public static function getInitializer(ClassLoader $loader)
     {
         return \Closure::bind(function () use ($loader) {
-            $loader->classMap = ComposerStaticInitf2366ed8ad38ed7f55353e226beedbcf::$classMap;
+            $loader->classMap = ComposerStaticInit7ab5ea472192e8edb0c273e1092ec41f::$classMap;
 
         }, null, ClassLoader::class);
     }

package/vendor/composer/installed.php

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