Blocks: upgrade to API version 3 - Part 1 (#36701)

* Bump Blog Stats block API version * Bump Premium Content Button API version * Bump Recurring Payments block API version * Bump Send A Message block API version * Bump Word Ads block API version * changelog * Fix tests * Fix tests * Update snapshot
Automattic · Apr 4, 2024 · 73f4817 · 73f4817
1 parent a7c6d7d
commit 73f4817
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 46 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-bump-block-api-version b/projects/plugins/jetpack/changelog/update-bump-block-api-version
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Update blocks to use API version 3
diff --git a/projects/plugins/jetpack/extensions/blocks/blog-stats/block.json b/projects/plugins/jetpack/extensions/blocks/blog-stats/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 1,
+	"apiVersion": 3,
 	"name": "jetpack/blog-stats",
 	"title": "Blog Stats",
 	"description": "Show a stats counter for your blog.",

diff --git a/projects/plugins/jetpack/extensions/blocks/blog-stats/edit.js b/projects/plugins/jetpack/extensions/blocks/blog-stats/edit.js
@@ -1,7 +1,7 @@
 import { numberFormat } from '@automattic/jetpack-components';
 import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
 import apiFetch from '@wordpress/api-fetch';
-import { InspectorControls, RichText } from '@wordpress/block-editor';
+import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { __, _n } from '@wordpress/i18n';
@@ -15,6 +15,7 @@ function BlogStatsEdit( { attributes, className, setAttributes } ) {
 	const [ blogViews, setBlogViews ] = useState( null );
 	const [ blogVisitors, setBlogVisitors ] = useState();
 	const [ postViews, setPostViews ] = useState();
+	const blockProps = useBlockProps();
 
 	const blogStats = statsData === 'views' ? blogViews : blogVisitors;
 	const stats = statsOption === 'post' ? postViews : blogStats;
@@ -64,7 +65,7 @@ function BlogStatsEdit( { attributes, className, setAttributes } ) {
 		_n( 'hit', 'hits', parseInt( stats ), 'jetpack', 0 );
 
 	return (
-		<>
+		<div { ...blockProps }>
 			<InspectorControls>
 				<BlogStatsInspectorControls attributes={ attributes } setAttributes={ setAttributes } />
 			</InspectorControls>
@@ -85,7 +86,7 @@ function BlogStatsEdit( { attributes, className, setAttributes } ) {
 					</p>
 				) }
 			</div>
-		</>
+		</div>
 	);
 }
 

diff --git a/projects/plugins/jetpack/extensions/blocks/blog-stats/test/edit.js b/projects/plugins/jetpack/extensions/blocks/blog-stats/test/edit.js
@@ -15,6 +15,11 @@ useSelect.mockImplementation( () => {
 	};
 } );
 
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	useBlockProps: jest.fn(),
+} ) );
+
 const defaultAttributes = {
 	label: '',
 	statsOption: 'site',

diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/buttons/index.js b/projects/plugins/jetpack/extensions/blocks/premium-content/buttons/index.js
@@ -6,7 +6,7 @@ import save from './save';
 
 const name = 'premium-content/buttons';
 const settings = {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: __( 'Premium Content buttons', 'jetpack' ),
 	description: __(
 		'Prompt Premium Content visitors to take action with a group of button-style links.',

diff --git a/projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json b/projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "jetpack/recurring-payments",
 	"title": "Payment Button",
 	"description": "Button allowing you to sell products and subscriptions.",

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/block.json b/projects/plugins/jetpack/extensions/blocks/send-a-message/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 1,
+	"apiVersion": 3,
 	"name": "jetpack/send-a-message",
 	"title": "Send A Message",
 	"description": "Let your visitors send you messages with the tap of a button.",

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/edit.js
@@ -1,13 +1,14 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function SendAMessageEdit( { className } ) {
+export default function SendAMessageEdit() {
+	const blockProps = useBlockProps();
 	// Default template is single WhatsApp block until we offer
 	// more services
 	const DEFAULT_TEMPLATE = [ [ 'jetpack/whatsapp-button', {} ] ];
 	const ALLOWED_BLOCKS = [ 'jetpack/whatsapp-button' ];
 
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<InnerBlocks template={ DEFAULT_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
 		</div>
 	);

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/save.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/save.js
@@ -1,8 +1,10 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default () => {
+	const blockProps = useBlockProps.save();
 
-export default props => {
 	return (
-		<div className={ props.className }>
+		<div { ...blockProps }>
 			<InnerBlocks.Content />
 		</div>
 	);

diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/block.json b/projects/plugins/jetpack/extensions/blocks/wordads/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 1,
+	"apiVersion": 3,
 	"name": "jetpack/wordads",
 	"title": "Ad",
 	"description": "Earn income by adding high quality ads to your post.",

diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/edit.js b/projects/plugins/jetpack/extensions/blocks/wordads/edit.js
@@ -1,5 +1,6 @@
 import { ThemeProvider } from '@automattic/jetpack-components';
 import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
+import { useBlockProps } from '@wordpress/block-editor';
 import { WordAdsPlaceholder } from './components/jetpack-wordads-placeholder';
 import { WordAdsSkeletonLoader } from './components/jetpack-wordads-skeleton-loader';
 import { AD_FORMATS } from './constants';
@@ -12,6 +13,7 @@ import leaderboardExample from './example_728x90.png';
 import './editor.scss';
 
 const WordAdsEdit = ( { attributes, setAttributes } ) => {
+	const blockProps = useBlockProps();
 	const { format } = attributes;
 	const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
 		useModuleStatus( 'wordads' );
@@ -30,40 +32,44 @@ const WordAdsEdit = ( { attributes, setAttributes } ) => {
 		}
 	};
 
+	let content;
+
 	if ( ! isModuleActive ) {
 		if ( isLoadingModules ) {
-			return (
+			content = (
 				<ThemeProvider>
 					<WordAdsSkeletonLoader />
 				</ThemeProvider>
 			);
+		} else {
+			content = (
+				<WordAdsPlaceholder
+					changeStatus={ changeStatus }
+					isModuleActive={ isModuleActive }
+					isLoading={ isChangingStatus }
+				/>
+			);
 		}
-
-		return (
-			<WordAdsPlaceholder
-				changeStatus={ changeStatus }
-				isModuleActive={ isModuleActive }
-				isLoading={ isChangingStatus }
-			/>
+	} else {
+		content = (
+			<>
+				<AdControls { ...{ attributes, setAttributes } } />
+				<div className={ `wp-block-jetpack-wordads jetpack-wordads-${ format }` }>
+					<div
+						className="jetpack-wordads__ad"
+						style={ {
+							width: selectedFormatObject.width,
+							height: selectedFormatObject.height,
+							backgroundImage: `url( ${ getExampleAd( format ) } )`,
+							backgroundSize: 'cover',
+						} }
+					></div>
+				</div>
+			</>
 		);
 	}
 
-	return (
-		<>
-			<AdControls { ...{ attributes, setAttributes } } />
-			<div className={ `wp-block-jetpack-wordads jetpack-wordads-${ format }` }>
-				<div
-					className="jetpack-wordads__ad"
-					style={ {
-						width: selectedFormatObject.width,
-						height: selectedFormatObject.height,
-						backgroundImage: `url( ${ getExampleAd( format ) } )`,
-						backgroundSize: 'cover',
-					} }
-				></div>
-			</div>
-		</>
-	);
+	return <div { ...blockProps }>{ content }</div>;
 };
 
 export default WordAdsEdit;
diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/test/__snapshots__/edit.js.snap b/projects/plugins/jetpack/extensions/blocks/wordads/test/__snapshots__/edit.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WordAdsEdit matches snapshot: WordAdsEdit 1`] = `
+<div>
+  <div
+    aria-label="Block: undefined"
+    class="block-editor-block-list__block wp-block"
+    id="block-undefined"
+    role="document"
+    tabindex="0"
+  >
+    <div
+      class="wp-block-jetpack-wordads jetpack-wordads-mrec"
+    >
+      <div
+        class="jetpack-wordads__ad"
+        style="width: 300px; height: 250px; background-size: cover;"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/test/edit.js b/projects/plugins/jetpack/extensions/blocks/wordads/test/edit.js
@@ -30,8 +30,8 @@ describe( 'WordAdsEdit', () => {
 	const renderWordAdsEdit = props => {
 		const { container } = render( <WordAdsEdit { ...props } /> );
 
-		// eslint-disable-next-line testing-library/no-node-access
-		return container.firstChild.firstChild;
+		// eslint-disable-next-line testing-library/no-node-access,testing-library/no-container
+		return container.querySelector( '.jetpack-wordads__ad' );
 	};
 
 	// Renders the component, extracting the inner placeholder element and finding
@@ -47,21 +47,17 @@ describe( 'WordAdsEdit', () => {
 		return { placeholder, selectedFormat };
 	};
 
-	test( 'renders wrapper with correct css class', () => {
+	test( 'matches snapshot', () => {
 		const { container } = render( <WordAdsEdit { ...defaultProps } /> );
 
-		// eslint-disable-next-line testing-library/no-node-access
-		expect( container.firstChild ).toHaveClass( 'wp-block-jetpack-wordads' );
-		// eslint-disable-next-line testing-library/no-node-access
-		expect( container.firstChild ).toHaveClass( `jetpack-wordads-${ defaultAttributes.format }` );
+		expect( container ).toMatchSnapshot( 'WordAdsEdit' );
 	} );
 
 	test( 'renders ad placeholder with correct css class and styles', () => {
 		// eslint-disable-next-line testing-library/render-result-naming-convention -- False positive.
 		const placeholder = renderWordAdsEdit( defaultProps );
 		const selectedFormat = getFormat( defaultAttributes.format );
 
-		expect( placeholder ).toHaveClass( 'jetpack-wordads__ad' );
 		expect( placeholder ).toHaveStyle( `width: ${ selectedFormat.width }px` );
 		expect( placeholder ).toHaveStyle( `height: ${ selectedFormat.height }px` );
 		expect( placeholder ).toHaveStyle( `backgroundImage: url( ${ rectangleExample } )` );