@automattic/newspack-blocks 4.24.1 → 4.25.0

package/src/blocks/carousel/edit.js

@@ -10,10 +10,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { dateI18n, __experimentalGetSettings } from '@wordpress/date';
-import { Component, createRef, Fragment, RawHTML } from '@wordpress/element';
+import { Component, createRef, Fragment, RawHTML, useRef } from '@wordpress/element';
 import {
 	PanelBody,
 	Placeholder,
@@ -50,7 +50,6 @@ class Edit extends Component {
 		this.btnPauseRef = createRef();
 		this.btnNextRef = createRef();
 		this.btnPrevRef = createRef();
-		this.carouselRef = createRef();
 		this.paginationRef = createRef();
 
 		this.state = {
@@ -64,7 +63,7 @@ class Edit extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		const isVisible = 0 < this.carouselRef.current.offsetWidth && 0 < this.carouselRef.current.offsetHeight;
+		const isVisible = 0 < this.props.carouselRef.current.offsetWidth && 0 < this.props.carouselRef.current.offsetHeight;
 
 		// Bail early if the component is hidden.
 		if ( ! isVisible ) {
@@ -108,8 +107,8 @@ class Edit extends Component {
 			const { aspectRatio, autoplay, delay, slidesPerView } = this.props.attributes;
 			const swiperInstance = createSwiper(
 				{
-					block: this.carouselRef.current, // Editor uses the same wrapper for block and swiper container.
-					container: this.carouselRef.current,
+					block: this.props.carouselRef.current, // Editor uses the same wrapper for block and swiper container.
+					container: this.props.carouselRef.current,
 					next: this.btnNextRef.current,
 					prev: this.btnPrevRef.current,
 					play: this.btnPlayRef.current,
@@ -134,7 +133,7 @@ class Edit extends Component {
 	}
 
 	render() {
-		const { attributes, className, setAttributes, latestPosts, isUIDisabled } = this.props;
+		const { attributes, setAttributes, latestPosts, isUIDisabled, blockProps } = this.props;
 		const {
 			aspectRatio,
 			authors,
@@ -161,8 +160,7 @@ class Edit extends Component {
 			tags,
 		} = attributes;
 		const classes = classnames(
-			className,
-			'wp-block-newspack-blocks-carousel', // Default to make styles work for third-party consumers.
+			blockProps.className,
 			'wpnbpc', // Shortened version of the default classname.
 			'slides-per-view-' + slidesPerView,
 			'swiper',
@@ -206,113 +204,6 @@ class Edit extends Component {
 
 		return (
 			<Fragment>
-				<div className={ classes } ref={ this.carouselRef }>
-					{ hasNoPosts && (
-						<Placeholder className="component-placeholder__align-center">
-							<div style={ { margin: 'auto' } }>{ __( 'Sorry, no posts were found.' ) }</div>
-						</Placeholder>
-					) }
-					{ ( ! this.state.swiperInitialized || ! latestPosts ) && (
-						<Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />
-					) }
-					{ latestPosts && (
-						<Fragment>
-							{ autoplay && (
-								<Fragment>
-									<button className="swiper-button swiper-button-pause" ref={ this.btnPauseRef } />
-									<button className="swiper-button swiper-button-play" ref={ this.btnPlayRef } />
-								</Fragment>
-							) }
-							<div className="swiper-wrapper">
-								{ latestPosts.map( post => (
-									<article
-										className={ `post-has-image swiper-slide ${ post.post_type } ${ post.newspack_article_classes || '' }` }
-										key={ post.id }
-									>
-										{ getPostStatusLabel( post ) }
-										<figure className="post-thumbnail">
-											<a href="#" rel="bookmark">
-												{ post.newspack_featured_image_src ? (
-													<img
-														className={ `image-fit-${ imageFit }` }
-														src={ post.newspack_featured_image_src.large }
-														alt=""
-													/>
-												) : (
-													<div className="wp-block-newspack-blocks-carousel__placeholder" />
-												) }
-											</a>
-										</figure>
-										{ ( post.newspack_post_sponsors ||
-											showCategory ||
-											showTitle ||
-											showAuthor ||
-											showDate ||
-											showCaption ||
-											showCredit ) && (
-											<div className="entry-wrapper">
-												{ ( post.newspack_post_sponsors || ( showCategory && 0 < post.newspack_category_info.length ) ) && (
-													<div className={ 'cat-links' + ( post.newspack_post_sponsors ? ' sponsor-label' : '' ) }>
-														{ post.newspack_post_sponsors && (
-															<span className="flag">{ post.newspack_post_sponsors[ 0 ].flag }</span>
-														) }
-														{ showCategory &&
-															( ! post.newspack_post_sponsors || post.newspack_sponsors_show_categories ) && (
-																<RawHTML>{ decodeEntities( post.newspack_category_info ) }</RawHTML>
-															) }
-													</div>
-												) }
-												{ showTitle && (
-													<h3 className="entry-title">
-														<a href="#">{ decodeEntities( post.title.rendered.trim() ) }</a>
-													</h3>
-												) }
-												<div className="entry-meta">
-													{ post.newspack_post_sponsors && (
-														<span
-															className={ `entry-sponsors ${
-																post.newspack_sponsors_show_author ? 'plus-author' : ''
-															}` }
-														>
-															{ formatSponsorLogos( post.newspack_post_sponsors ) }
-															{ formatSponsorByline( post.newspack_post_sponsors ) }
-														</span>
-													) }
-													{ showAuthor &&
-														! 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 ) }
-														</time>
-													) }
-													{ ( showCaption || showCredit ) && post.newspack_featured_image_caption && (
-														<div
-															className="entry-caption"
-															dangerouslySetInnerHTML={ {
-																__html: post.newspack_featured_image_caption,
-															} }
-														/>
-													) }
-												</div>
-											</div>
-										) }
-									</article>
-								) ) }
-							</div>
-							{ ! hasNoPosts && ! hasOnePost && (
-								<>
-									<button className="swiper-button swiper-button-prev" ref={ this.btnPrevRef } />
-									<button className="swiper-button swiper-button-next" ref={ this.btnNextRef } />
-									<div className="swiper-pagination swiper-pagination-bullets" ref={ this.paginationRef } />
-								</>
-							) }
-						</Fragment>
-					) }
-				</div>
-
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings', 'newspack-blocks' ) } className="newspack-block__panel is-content">
 						{ postsToShow && (
@@ -456,9 +347,121 @@ class Edit extends Component {
 					<PostTypesPanel attributes={ attributes } setAttributes={ setAttributes } />
 					<PostStatusesPanel attributes={ attributes } setAttributes={ setAttributes } />
 				</InspectorControls>
+				<div { ...blockProps } className={ classes } ref={ this.props.carouselRef }>
+					{ hasNoPosts && (
+						<Placeholder className="component-placeholder__align-center">
+							<div style={ { margin: 'auto' } }>{ __( 'Sorry, no posts were found.' ) }</div>
+						</Placeholder>
+					) }
+					{ ( ! this.state.swiperInitialized || ! latestPosts ) && (
+						<Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />
+					) }
+					{ latestPosts && (
+						<Fragment>
+							{ autoplay && (
+								<Fragment>
+									<button className="swiper-button swiper-button-pause" ref={ this.btnPauseRef } />
+									<button className="swiper-button swiper-button-play" ref={ this.btnPlayRef } />
+								</Fragment>
+							) }
+							<div className="swiper-wrapper">
+								{ latestPosts.map( post => (
+									<article
+										className={ `post-has-image swiper-slide ${ post.post_type } ${ post.newspack_article_classes || '' }` }
+										key={ post.id }
+									>
+										{ getPostStatusLabel( post ) }
+										<figure className="post-thumbnail">
+											<a href="#" rel="bookmark">
+												{ post.newspack_featured_image_src ? (
+													<img
+														className={ `image-fit-${ imageFit }` }
+														src={ post.newspack_featured_image_src.large }
+														alt=""
+													/>
+												) : (
+													<div className="wp-block-newspack-blocks-carousel__placeholder" />
+												) }
+											</a>
+										</figure>
+										{ ( post.newspack_post_sponsors ||
+											showCategory ||
+											showTitle ||
+											showAuthor ||
+											showDate ||
+											showCaption ||
+											showCredit ) && (
+											<div className="entry-wrapper">
+												{ ( post.newspack_post_sponsors || ( showCategory && 0 < post.newspack_category_info.length ) ) && (
+													<div className={ 'cat-links' + ( post.newspack_post_sponsors ? ' sponsor-label' : '' ) }>
+														{ post.newspack_post_sponsors && (
+															<span className="flag">{ post.newspack_post_sponsors[ 0 ].flag }</span>
+														) }
+														{ showCategory &&
+															( ! post.newspack_post_sponsors || post.newspack_sponsors_show_categories ) && (
+																<RawHTML>{ decodeEntities( post.newspack_category_info ) }</RawHTML>
+															) }
+													</div>
+												) }
+												{ showTitle && (
+													<h3 className="entry-title">
+														<a href="#">{ decodeEntities( post.title.rendered.trim() ) }</a>
+													</h3>
+												) }
+												<div className="entry-meta">
+													{ post.newspack_post_sponsors && (
+														<span
+															className={ `entry-sponsors ${
+																post.newspack_sponsors_show_author ? 'plus-author' : ''
+															}` }
+														>
+															{ formatSponsorLogos( post.newspack_post_sponsors ) }
+															{ formatSponsorByline( post.newspack_post_sponsors ) }
+														</span>
+													) }
+													{ showAuthor &&
+														! 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 ) }
+														</time>
+													) }
+													{ ( showCaption || showCredit ) && post.newspack_featured_image_caption && (
+														<div
+															className="entry-caption"
+															dangerouslySetInnerHTML={ {
+																__html: post.newspack_featured_image_caption,
+															} }
+														/>
+													) }
+												</div>
+											</div>
+										) }
+									</article>
+								) ) }
+							</div>
+							{ ! hasNoPosts && ! hasOnePost && (
+								<>
+									<button className="swiper-button swiper-button-prev" ref={ this.btnPrevRef } />
+									<button className="swiper-button swiper-button-next" ref={ this.btnNextRef } />
+									<div className="swiper-pagination swiper-pagination-bullets" ref={ this.paginationRef } />
+								</>
+							) }
+						</Fragment>
+					) }
+				</div>
 			</Fragment>
 		);
 	}
 }
 
-export default compose( [ withSelect( postsBlockSelector ), withDispatch( postsBlockDispatch ) ] )( Edit );
+const EditWithBlockProps = props => {
+	const carouselRef = useRef();
+	const blockProps = useBlockProps();
+	return <Edit { ...props } blockProps={ blockProps } carouselRef={ carouselRef } />;
+};
+
+export default compose( [ withSelect( postsBlockSelector ), withDispatch( postsBlockDispatch ) ] )( EditWithBlockProps );

package/src/blocks/carousel/index.js

@@ -20,7 +20,7 @@ import edit from './edit';
 import './view.scss';
 import './editor.scss';
 import metadata from './block.json';
-const { name, attributes, category } = metadata;
+const { name, attributes, apiVersion, category } = metadata;
 
 // Name must be exported separately.
 export { name };
@@ -28,6 +28,7 @@ export { name };
 export const title = __( 'Content Carousel', 'newspack-blocks' );
 
 export const settings = {
+	apiVersion,
 	title,
 	icon: {
 		src: icon,

package/src/blocks/carousel/view.php

@@ -304,6 +304,7 @@ function newspack_blocks_register_carousel() {
 		apply_filters(
 			'newspack_blocks_block_args',
 			array(
+				'api_version'     => 3,
 				'attributes'      => array(
 					'className'        => array(
 						'type' => 'string',

package/src/blocks/donate/block.json

@@ -1,7 +1,8 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "donate",
 	"category": "newspack",
-	"apiVersion": 3,
 	"attributes": {
 		"className": {
 			"type": "string"
@@ -99,4 +100,4 @@
 		"html": false,
 		"align": false
 	}
-}
+}

package/src/blocks/donate/edit/FrequencyBasedLayout.tsx

@@ -19,11 +19,11 @@ import { FREQUENCIES } from '../consts';
 import type { ComponentProps, DonationFrequencySlug } from '../types';
 import { updateBlockClassName, getFormData } from '../view';
 
-const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) => {
+const FrequencyBasedLayout = ( props: { canUseNameYourPrice: boolean; isTiered: boolean } & ComponentProps ) => {
 	// Unique identifier to prevent collisions with other Donate blocks' labels.
 	const uid = useMemo( () => Math.random().toString( 16 ).slice( 2 ), [] );
 
-	const { attributes, settings, amounts, availableFrequencies, setAttributes } = props;
+	const { attributes, settings, amounts, availableFrequencies, setAttributes, canUseNameYourPrice } = props;
 
 	const formRef = useRef< HTMLFormElement >( null );
 
@@ -69,7 +69,6 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	}, [ attributes.defaultFrequency ] );
 
 	const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency );
-	const canUseNameYourPrice = window.newspack_blocks_data?.can_use_name_your_price;
 	const renderFrequencySelect = ( frequencySlug: DonationFrequencySlug ) => (
 		<>
 			<input

package/src/blocks/donate/edit/index.tsx

@@ -23,7 +23,7 @@ import {
 	Button,
 	Notice,
 } from '@wordpress/components';
-import { BlockControls, ColorPaletteControl, InspectorControls } from '@wordpress/block-editor';
+import { BlockControls, ColorPaletteControl, InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { isEmpty, pick } from 'lodash';
 import { Icon, formatListBullets, grid } from '@wordpress/icons';
 
@@ -40,7 +40,7 @@ import RedirectAfterSuccess from '../../../components/redirect-after-success';
 
 const TIER_LABELS = [ __( 'Low-tier', 'newspack-blocks' ), __( 'Mid-tier', 'newspack-blocks' ), __( 'High-tier', 'newspack-blocks' ) ];
 
-const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
+const Edit = ( { attributes, setAttributes }: EditProps ) => {
 	const [ isLoading, setIsLoading ] = useState( true );
 	const [ error, setError ] = useState( '' );
 
@@ -99,39 +99,51 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 			.finally( () => setIsLoading( false ) );
 	}, [] );
 
+	const blockProps = useBlockProps();
 	if ( error.length ) {
 		return (
-			<Placeholder icon="warning" label={ __( 'Error', 'newspack-blocks' ) } instructions={ error }>
-				<ExternalLink href="/wp-admin/admin.php?page=newspack-audience#/payment">
-					{ __( 'Go to checkout & payment settings to troubleshoot.', 'newspack-blocks' ) }
-				</ExternalLink>
-			</Placeholder>
+			<div { ...blockProps }>
+				<Placeholder icon="warning" label={ __( 'Error', 'newspack-blocks' ) } instructions={ error }>
+					<ExternalLink href="/wp-admin/admin.php?page=newspack-audience#/payment">
+						{ __( 'Go to checkout & payment settings to troubleshoot.', 'newspack-blocks' ) }
+					</ExternalLink>
+				</Placeholder>
+			</div>
 		);
 	}
 
 	if ( settings.platform === 'other' ) {
 		return (
-			<Placeholder
-				icon="warning"
-				label={ __( 'The Donate block will not be rendered.', 'newspack-blocks' ) }
-				instructions={ __( 'The Reader Revenue platform is set to "other".', 'newspack-blocks' ) }
-			>
-				<ExternalLink href="/wp-admin/admin.php?page=newspack-audience#/payment">
-					{ __( 'Go to checkout & payment settings to update the platform.', 'newspack-blocks' ) }
-				</ExternalLink>
-			</Placeholder>
+			<div { ...blockProps }>
+				<Placeholder
+					icon="warning"
+					label={ __( 'The Donate block will not be rendered.', 'newspack-blocks' ) }
+					instructions={ __( 'The Reader Revenue platform is set to "other".', 'newspack-blocks' ) }
+				>
+					<ExternalLink href="/wp-admin/admin.php?page=newspack-audience#/payment">
+						{ __( 'Go to checkout & payment settings to update the platform.', 'newspack-blocks' ) }
+					</ExternalLink>
+				</Placeholder>
+			</div>
 		);
 	}
 
 	if ( isLoading ) {
-		return <Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />;
+		return (
+			<div { ...blockProps }>
+				<Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />
+			</div>
+		);
 	}
 
-	const canUseNameYourPrice = window.newspack_blocks_data?.can_use_name_your_price;
+	const canUseNameYourPrice = window?.newspack_blocks_data?.can_use_name_your_price;
 	const isManual = attributes.manual && canUseNameYourPrice;
 	const isTiered = isManual ? attributes.tiered : settings.tiered;
 	const isTierBasedLayoutEnabled = isTiered && attributes.layoutOption === 'tiers';
 	const tierLayoutStyle = attributes.tierStyle;
+	const hasRecaptcha = window?.newspack_blocks_data?.has_recaptcha;
+	const supportsRecaptcha = window?.newspack_blocks_data?.supports_recaptcha;
+	const recaptchaURL = window?.newspack_blocks_data?.recaptcha_url || '';
 
 	const amounts = isManual ? attributes.amounts : settings.amounts;
 
@@ -139,6 +151,7 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 		isManual ? ! attributes.disabledFrequencies[ slug ] : ! settings.disabledFrequencies[ slug ]
 	);
 
+	let className = attributes?.className || '';
 	// Editor bug – initially, the default style is selected, but the class not applied.
 	if ( className.indexOf( 'is-style' ) === -1 ) {
 		className += ' is-style-default';
@@ -200,22 +213,7 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 	);
 
 	return (
-		<>
-			{ isTierBasedLayoutEnabled ? (
-				<>
-					<div className={ getWrapperClassNames() }>
-						<TierBasedLayout { ...componentProps } amounts={ displayedAmounts } />
-					</div>
-					<BlockControls>
-						<Toolbar controls={ tiersLayoutControls } />
-					</BlockControls>
-				</>
-			) : (
-				<div className={ getWrapperClassNames( [ isTiered ? 'tiered' : 'untiered' ] ) }>
-					<FrequencyBasedLayout isTiered={ isTiered } { ...componentProps } amounts={ displayedAmounts } />
-				</div>
-			) }
-
+		<Fragment>
 			<InspectorControls>
 				<PanelBody title={ __( 'Layout', 'newspack-blocks' ) }>
 					{ canUseNameYourPrice && (
@@ -395,16 +393,16 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 						/>
 					</PanelBody>
 				) }
-				{ window.newspack_blocks_data.supports_recaptcha && (
+				{ supportsRecaptcha && (
 					<PanelBody title={ __( 'Spam protection', 'newspack' ) }>
 						<p>
 							{ sprintf(
 								// translators: %s is either 'enabled' or 'disabled'.
 								__( 'reCAPTCHA is currently %s.', 'newspack' ),
-								window.newspack_blocks_data.has_recaptcha ? __( 'enabled', 'newspack' ) : __( 'disabled', 'newspack' )
+								hasRecaptcha ? __( 'enabled', 'newspack' ) : __( 'disabled', 'newspack' )
 							) }
 						</p>
-						{ ! window.newspack_blocks_data.has_recaptcha && (
+						{ ! hasRecaptcha && (
 							<p>
 								{ __(
 									"It's highly recommended that you enable reCAPTCHA protection to prevent spambots from using this form!",
@@ -413,7 +411,7 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 							</p>
 						) }
 						<p>
-							<a href={ window.newspack_blocks_data.recaptcha_url }>{ __( 'Configure your reCAPTCHA settings.', 'newspack' ) }</a>
+							<a href={ recaptchaURL }>{ __( 'Configure your reCAPTCHA settings.', 'newspack' ) }</a>
 						</p>
 					</PanelBody>
 				) }
@@ -421,7 +419,26 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 					<RedirectAfterSuccess setAttributes={ setAttributes } attributes={ attributes } />
 				</PanelBody>
 			</InspectorControls>
-		</>
+			{ isTierBasedLayoutEnabled && (
+				<BlockControls>
+					<Toolbar controls={ tiersLayoutControls } />
+				</BlockControls>
+			) }
+			{ isTierBasedLayoutEnabled ? (
+				<div { ...blockProps } className={ classNames( blockProps.className, getWrapperClassNames() ) }>
+					<TierBasedLayout { ...componentProps } amounts={ displayedAmounts } />
+				</div>
+			) : (
+				<div { ...blockProps } className={ classNames( blockProps.className, getWrapperClassNames( [ isTiered ? 'tiered' : 'untiered' ] ) ) }>
+					<FrequencyBasedLayout
+						isTiered={ isTiered }
+						canUseNameYourPrice={ canUseNameYourPrice }
+						amounts={ displayedAmounts }
+						{ ...componentProps }
+					/>
+				</div>
+			) }
+		</Fragment>
 	);
 };
 

package/src/blocks/donate/index.js

@@ -23,7 +23,7 @@ import metadata from './block.json';
 import './styles/editor.scss';
 import './styles/view.scss';
 
-const { name, attributes, category, supports } = metadata;
+const { name, attributes, apiVersion, category, supports } = metadata;
 
 // Name must be exported separately.
 export { name };
@@ -31,6 +31,7 @@ export { name };
 export const title = __( 'Donate', 'newspack-blocks' );
 
 export const settings = {
+	apiVersion,
 	title,
 	icon: {
 		src: icon,

package/src/blocks/donate/view.php

@@ -19,6 +19,7 @@ function newspack_blocks_register_donate() {
 	register_block_type(
 		'newspack-blocks/' . $block_json['name'],
 		[
+			'api_version'     => $block_json['apiVersion'],
 			'attributes'      => $block_json['attributes'],
 			'render_callback' => 'Newspack_Blocks_Donate_Renderer::render',
 			'supports'        => $block_json['supports'],

package/src/blocks/homepage-articles/block.json

@@ -1,7 +1,8 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "homepage-articles",
 	"category": "newspack",
-	"apiVersion": 3,
 	"attributes": {
 		"className": {
 			"type": "string",