@automattic/newspack-blocks 4.24.1 → 4.25.0

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

@@ -23,7 +23,7 @@ import { aspectLandscape, aspectPortrait, aspectSquare } from 'newspack-icons';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Component, Fragment, RawHTML } from '@wordpress/element';
-import { BlockControls, InspectorControls, PanelColorSettings, RichText, withColors, AlignmentControl } from '@wordpress/block-editor';
+import { BlockControls, InspectorControls, PanelColorSettings, RichText, withColors, AlignmentControl, useBlockProps } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	Placeholder,
@@ -549,7 +549,7 @@ class Edit extends Component< HomepageArticlesProps > {
 		 * Constants
 		 */
 
-		const { attributes, className, setAttributes, isSelected, latestPosts, textColor, error } = this.props;
+		const { attributes, setAttributes, isSelected, latestPosts, textColor, error, blockProps } = this.props;
 
 		const {
 			showImage,
@@ -570,7 +570,7 @@ class Edit extends Component< HomepageArticlesProps > {
 			textAlign,
 		} = attributes;
 
-		const classes = classNames( className, {
+		const classes = classNames( blockProps.className, {
 			'is-grid': postLayout === 'grid',
 			'show-image': showImage,
 			[ `columns-${ columns }` ]: postLayout === 'grid',
@@ -658,7 +658,23 @@ class Edit extends Component< HomepageArticlesProps > {
 
 		return (
 			<Fragment>
+				<BlockControls>
+					<Toolbar>
+						<AlignmentControl
+							value={ textAlign }
+							onChange={ ( nextAlign: string ) => {
+								setAttributes( { textAlign: nextAlign } );
+							} }
+						/>
+					</Toolbar>
+					<Toolbar controls={ blockControls } />
+					{ showImage && <Toolbar controls={ blockControlsImages } /> }
+					{ showImage && <Toolbar controls={ blockControlsImageShape } /> }
+				</BlockControls>
+				<InspectorControls>{ this.renderInspectorControls() }</InspectorControls>
+				<InspectorControls group="styles">{ this.renderStylesInspectorControls() }</InspectorControls>
 				<div
+					{ ...blockProps }
 					className={ classes }
 					style={ {
 						color: textColor.color,
@@ -684,46 +700,35 @@ class Edit extends Component< HomepageArticlesProps > {
 
 						{ latestPosts && latestPosts.map( post => this.renderPost( post ) ) }
 					</div>
-				</div>
 
-				{ ! specificMode && latestPosts && moreButton && ! isBlogPrivate() && (
-					/*
-					 * The "More" button option is hidden for private sites, so we should
-					 * also hide the button in case it was previously enabled.
-					 */
-					<div className="wpnbha__wp-block-button__wrapper">
-						<div className="wp-block-button">
-							<RichText
-								placeholder={ __( 'Load more posts', 'newspack-blocks' ) }
-								value={ moreButtonText }
-								onChange={ ( value: string ) => setAttributes( { moreButtonText: value } ) }
-								className="wp-block-button__link"
-								allowedFormats={ [] }
-							/>
+					{ ! specificMode && latestPosts && moreButton && ! isBlogPrivate() && (
+						/*
+						 * The "More" button option is hidden for private sites, so we should
+						 * also hide the button in case it was previously enabled.
+						 */
+						<div className="wpnbha__wp-block-button__wrapper">
+							<div className="wp-block-button">
+								<RichText
+									placeholder={ __( 'Load more posts', 'newspack-blocks' ) }
+									value={ moreButtonText }
+									onChange={ ( value: string ) => setAttributes( { moreButtonText: value } ) }
+									className="wp-block-button__link"
+									allowedFormats={ [] }
+								/>
+							</div>
 						</div>
-					</div>
-				) }
-
-				<BlockControls>
-					<Toolbar>
-						<AlignmentControl
-							value={ textAlign }
-							onChange={ ( nextAlign: string ) => {
-								setAttributes( { textAlign: nextAlign } );
-							} }
-						/>
-					</Toolbar>
-					<Toolbar controls={ blockControls } />
-					{ showImage && <Toolbar controls={ blockControlsImages } /> }
-					{ showImage && <Toolbar controls={ blockControlsImageShape } /> }
-				</BlockControls>
-				<InspectorControls>{ this.renderInspectorControls() }</InspectorControls>
-				<InspectorControls group="styles">{ this.renderStylesInspectorControls() }</InspectorControls>
+					) }
+				</div>
 			</Fragment>
 		);
 	}
 }
 
+const EditWithBlockProps = ( props: any ) => {
+	const blockProps = useBlockProps();
+	return <Edit { ...props } blockProps={ blockProps } />;
+};
+
 export default compose( [ withColors( { textColor: 'color' } ), withSelect( postsBlockSelector ), withDispatch( postsBlockDispatch ) ] as any )(
-	Edit
+	EditWithBlockProps
 );

package/src/blocks/homepage-articles/index.js

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

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

@@ -44,8 +44,19 @@ function newspack_blocks_hpb_maximum_image_width() {
  * @param array $sizes Sizes for the sizes attribute.
  */
 function newspack_blocks_filter_hpb_sizes( $sizes ) {
+	/**
+	 * Disables automatic image sizes optimization for Homepage Posts Block.
+	 * By default, Newspack optimizes the 'sizes' attribute based on the
+	 * computed maximum image width. Set to true to use default WordPress behavior.
+	 *
+	 * @constant NEWSPACK_DISABLE_HPB_IMAGE_OPTIMISATION
+	 * @type     bool
+	 * @default  Image optimization enabled
+	 * @status   draft
+	 *
+	 * @example define( 'NEWSPACK_DISABLE_HPB_IMAGE_OPTIMISATION', true );
+	 */
 	if ( defined( 'NEWSPACK_DISABLE_HPB_IMAGE_OPTIMISATION' ) && NEWSPACK_DISABLE_HPB_IMAGE_OPTIMISATION ) {
-		// Allow disabling the image optimisation per-site.
 		return $sizes;
 	}
 	global $newspack_blocks_hpb_current_theme;
@@ -429,6 +440,7 @@ function newspack_blocks_register_homepage_articles() {
 		apply_filters(
 			'newspack_blocks_block_args',
 			array(
+				'api_version'     => $block['apiVersion'],
 				'attributes'      => $block['attributes'],
 				'render_callback' => 'newspack_blocks_render_block_homepage_articles',
 				'supports'        => [],

package/src/blocks/iframe/block.json

@@ -1,7 +1,8 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "iframe",
 	"category": "newspack",
-	"apiVersion": 3,
 	"attributes": {
 		"className": {
 			"type": "string",
@@ -32,4 +33,4 @@
 			"default": "iframe"
 		}
 	}
-}
+}

package/src/blocks/iframe/edit.js

@@ -7,7 +7,7 @@ import { iframe as icon } from 'newspack-icons';
  * WordPress dependencies
  */
 import { Fragment, useState } from '@wordpress/element';
-import { InspectorControls, BlockControls } from '@wordpress/block-editor';
+import { InspectorControls, BlockControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	ToggleControl,
@@ -27,6 +27,7 @@ import apiFetch from '@wordpress/api-fetch';
 import IframePlaceholder from './iframe-placeholder';
 
 const IframeEdit = ( { attributes, setAttributes } ) => {
+	const blockProps = useBlockProps();
 	const label = __( 'Iframe', 'block title' );
 	const { mode, src, archiveFolder, isFullScreen, height, width } = attributes;
 	const [ showPreview, setShowPreview ] = useState( true );
@@ -156,39 +157,6 @@ const IframeEdit = ( { attributes, setAttributes } ) => {
 
 	return (
 		<Fragment>
-			{ isFullScreen && (
-				<Notice status="warning" className="wp-block-newspack-blocks-iframe-notice" isDismissible={ false }>
-					{ __( 'This block will take over the page content.', 'newspack-blocks' ) }
-				</Notice>
-			) }
-			{ src && showPreview ? (
-				<div className="iframe-container">
-					<FocusableIframe
-						title={ __( 'Newspack embedded iframe', 'newspack-blocks' ) }
-						src={ 'document' === mode ? `https://docs.google.com/gview?embedded=true&url=${ encodeURIComponent( src ) }` : src }
-						style={ {
-							width: isFullScreen ? '100vw' : width,
-							height: isFullScreen ? '100vh' : height,
-							maxWidth: '100%',
-							maxHeight: '100%',
-							pointerEvents: 'none',
-						} }
-					/>
-				</div>
-			) : (
-				<IframePlaceholder
-					icon={ icon }
-					label={ label }
-					src={ src }
-					onSelectURL={ embedURL }
-					onSelectMedia={ setIframeArchiveFromMedia }
-					isUploadingArchive={ isUploadingArchive }
-					archiveFolder={ archiveFolder }
-					uploadIframeArchive={ uploadIframeArchive }
-					error={ error }
-				/>
-			) }
-
 			<BlockControls>
 				<Toolbar controls={ src && iframeControls } />
 			</BlockControls>
@@ -223,6 +191,40 @@ const IframeEdit = ( { attributes, setAttributes } ) => {
 					</Fragment>
 				</PanelBody>
 			</InspectorControls>
+			<div { ...blockProps }>
+				{ isFullScreen && (
+					<Notice status="warning" className="wp-block-newspack-blocks-iframe-notice" isDismissible={ false }>
+						{ __( 'This block will take over the page content.', 'newspack-blocks' ) }
+					</Notice>
+				) }
+				{ src && showPreview ? (
+					<div className="iframe-container">
+						<FocusableIframe
+							title={ __( 'Newspack embedded iframe', 'newspack-blocks' ) }
+							src={ 'document' === mode ? `https://docs.google.com/gview?embedded=true&url=${ encodeURIComponent( src ) }` : src }
+							style={ {
+								width: isFullScreen ? '100vw' : width,
+								height: isFullScreen ? '100vh' : height,
+								maxWidth: '100%',
+								maxHeight: '100%',
+								pointerEvents: 'none',
+							} }
+						/>
+					</div>
+				) : (
+					<IframePlaceholder
+						icon={ icon }
+						label={ label }
+						src={ src }
+						onSelectURL={ embedURL }
+						onSelectMedia={ setIframeArchiveFromMedia }
+						isUploadingArchive={ isUploadingArchive }
+						archiveFolder={ archiveFolder }
+						uploadIframeArchive={ uploadIframeArchive }
+						error={ error }
+					/>
+				) }
+			</div>
 		</Fragment>
 	);
 };

package/src/blocks/iframe/index.js

@@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n';
  */
 import edit from './edit';
 import metadata from './block.json';
-const { name, attributes, category } = metadata;
+const { name, attributes, apiVersion, category } = metadata;
 
 /**
  * Style dependencies - will load in editor
@@ -28,6 +28,7 @@ export const title = __( 'Iframe', 'newspack-blocks' );
 export { name };
 
 export const settings = {
+	apiVersion,
 	title,
 	icon: {
 		src: icon,

package/src/blocks/iframe/view.php

@@ -30,6 +30,7 @@ function newspack_blocks_register_iframe() {
 	register_block_type(
 		'newspack-blocks/' . $block_json['name'],
 		[
+			'api_version'     => $block_json['apiVersion'],
 			'attributes'      => $block_json['attributes'],
 			'render_callback' => 'newspack_blocks_render_block_iframe',
 		]

package/src/blocks/video-playlist/edit.js

@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { Component, Fragment } from '@wordpress/element';
 import { Notice, Placeholder, Spinner, PanelBody } from '@wordpress/components';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -187,19 +187,6 @@ class Edit extends Component {
 
 		return (
 			<Fragment>
-				<div>
-					{ ( isLoading || '' === embed ) && this.renderPlaceholder() }
-					{ ! ( isLoading || '' === embed ) && (
-						<div className="wpbnbvp-preview">
-							<div dangerouslySetInnerHTML={ { __html: embed } } />
-						</div>
-					) }
-					{ ! isLoading && (
-						<div className="wpbnbvp__overlay">
-							<Warning />
-						</div>
-					) }
-				</div>
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings', 'newspack-blocks' ) } initialOpen={ true }>
 						<Notice status="warning" isDismissible={ false }>
@@ -207,9 +194,29 @@ class Edit extends Component {
 						</Notice>
 					</PanelBody>
 				</InspectorControls>
+				<div { ...this.props.blockProps }>
+					<div>
+						{ ( isLoading || '' === embed ) && this.renderPlaceholder() }
+						{ ! ( isLoading || '' === embed ) && (
+							<div className="wpbnbvp-preview">
+								<div dangerouslySetInnerHTML={ { __html: embed } } />
+							</div>
+						) }
+						{ ! isLoading && (
+							<div className="wpbnbvp__overlay">
+								<Warning />
+							</div>
+						) }
+					</div>
+				</div>
 			</Fragment>
 		);
 	}
 }
 
-export default Edit;
+const EditWithBlockProps = props => {
+	const blockProps = useBlockProps();
+	return <Edit { ...props } blockProps={ blockProps } />;
+};
+
+export default EditWithBlockProps;

package/src/blocks/video-playlist/index.js

@@ -23,6 +23,7 @@ export const name = 'youtube-video-playlist';
 export const title = __( 'YouTube Video Playlist (DEPRECATED)', 'newspack-blocks' );
 
 export const settings = {
+	apiVersion: 3,
 	title,
 	icon: {
 		src: icon,

package/src/blocks/video-playlist/view.php

@@ -26,6 +26,7 @@ function newspack_blocks_register_video_playlist() {
 	register_block_type(
 		'newspack-blocks/youtube-video-playlist',
 		array(
+			'api_version'     => 3,
 			'attributes'      => array(
 				'className'    => array(
 					'type' => 'string',

package/src/setup/placeholder-blocks.js

@@ -57,6 +57,7 @@ function registerPlaceholderBlock( blockName, { title, description, icon, messag
 		);
 	};
 	registerBlockType( blockName, {
+		apiVersion: 3,
 		title,
 		description,
 		icon,

package/vendor/composer/installed.php

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