From 3f232832f08ce9bb8e2a40137a48552820f9a22e Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 19 Dec 2024 15:35:19 +0100
Subject: [PATCH 1/6] Blocks: update remaining child blocks to API version v3

Fixes #40678

Follow-up to #34120
---
 .../plugins/jetpack/changelog/fix-child-blocks-api-version-v3 | 4 ++++
 .../jetpack/extensions/blocks/blogroll/blogroll-item/index.js | 1 +
 .../jetpack/extensions/blocks/contact-info/address/index.js   | 1 +
 .../jetpack/extensions/blocks/contact-info/email/index.js     | 1 +
 .../jetpack/extensions/blocks/contact-info/phone/index.js     | 1 +
 .../blocks/premium-content/logged-out-view/index.js           | 1 +
 .../extensions/blocks/premium-content/login-button/index.js   | 1 +
 .../blocks/premium-content/subscriber-view/index.js           | 1 +
 .../plugins/jetpack/extensions/blocks/recipe/details/index.js | 1 +
 .../plugins/jetpack/extensions/blocks/recipe/hero/index.js    | 1 +
 .../jetpack/extensions/blocks/recipe/ingredient-item/index.js | 1 +
 .../extensions/blocks/recipe/ingredients-list/index.js        | 1 +
 .../plugins/jetpack/extensions/blocks/recipe/step/index.js    | 1 +
 .../plugins/jetpack/extensions/blocks/recipe/steps/index.js   | 1 +
 .../extensions/blocks/send-a-message/whatsapp-button/index.js | 1 +
 15 files changed, 18 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/fix-child-blocks-api-version-v3

diff --git a/projects/plugins/jetpack/changelog/fix-child-blocks-api-version-v3 b/projects/plugins/jetpack/changelog/fix-child-blocks-api-version-v3
new file mode 100644
index 0000000000000..28a5f2fc42319
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-child-blocks-api-version-v3
@@ -0,0 +1,4 @@
+Significance: patch
+Type: compat
+
+Blocks: ensure all child blocks use the latest version of the Blocks API.
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
index fcfd2997804f9..44a185809df68 100644
--- a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
@@ -9,6 +9,7 @@ import './editor.scss';
 export const name = 'blogroll-item';
 export const title = __( 'Blogroll Item', 'jetpack' );
 export const settings = {
+	apiVersion: 3,
 	title,
 	description: __( 'Blogroll Item', 'jetpack' ),
 	icon: {
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/address/index.js b/projects/plugins/jetpack/extensions/blocks/contact-info/address/index.js
index f771b596a8af9..4206d8850a55f 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/address/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/address/index.js
@@ -43,6 +43,7 @@ const attributes = {
 export const name = 'address';
 
 export const settings = {
+	apiVersion: 3,
 	title: __( 'Address', 'jetpack' ),
 	description: __( 'Lets you add a physical address with Schema markup.', 'jetpack' ),
 	keywords: [
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/email/index.js b/projects/plugins/jetpack/extensions/blocks/contact-info/email/index.js
index bdd6af0fd45e5..7d98e20ccade2 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/email/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/email/index.js
@@ -14,6 +14,7 @@ const attributes = {
 export const name = 'email';
 
 export const settings = {
+	apiVersion: 3,
 	title: __( 'Email Address', 'jetpack' ),
 	description: __(
 		'Lets you add an email address with an automatically generated click-to-email link.',
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/phone/index.js b/projects/plugins/jetpack/extensions/blocks/contact-info/phone/index.js
index 122106b5029ee..aab37b353b205 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/phone/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/phone/index.js
@@ -14,6 +14,7 @@ const attributes = {
 export const name = 'phone';
 
 export const settings = {
+	apiVersion: 3,
 	title: __( 'Phone Number', 'jetpack' ),
 	description: __(
 		'Lets you add a phone number with an automatically generated click-to-call link.',
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/index.js b/projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/index.js
index 4f9640390921d..6e0f2c6069361 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/index.js
@@ -9,6 +9,7 @@ import save from './save';
 
 const name = 'premium-content/logged-out-view';
 const settings = {
+	apiVersion: 3,
 	title: __( 'Guest View', 'jetpack' ),
 	description: __(
 		'The container for all content shown to site visitors who are not subscribers.',
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/index.js b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/index.js
index 9853295065c49..fdc0255abb713 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/login-button/index.js
@@ -19,6 +19,7 @@ const name = 'premium-content/login-button';
  * @type {BlockConfiguration}
  */
 const settings = {
+	apiVersion: 3,
 	title: __( 'Premium Content login button', 'jetpack' ),
 	description: __(
 		'Prompt subscriber visitors to log in with a button-style link (only visible for logged out users).',
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/index.js b/projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/index.js
index f078fe1470875..703d3c3d4950c 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/index.js
@@ -6,6 +6,7 @@ import save from './save';
 
 const name = 'premium-content/subscriber-view';
 const settings = {
+	apiVersion: 3,
 	title: __( 'Subscriber View', 'jetpack' ),
 	description: __( 'The container for all content shown to subscribers.', 'jetpack' ),
 	icon,
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/details/index.js b/projects/plugins/jetpack/extensions/blocks/recipe/details/index.js
index 8b1e742b93c86..6168dab7e553c 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/details/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/details/index.js
@@ -11,6 +11,7 @@ import './editor.scss';
 export const name = 'recipe-details';
 
 export const settings = {
+	apiVersion: 3,
 	title: __( 'Recipe Details', 'jetpack' ),
 	description: (
 		<Fragment>
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/hero/index.js b/projects/plugins/jetpack/extensions/blocks/recipe/hero/index.js
index 802766e28d875..0dcb09be50600 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/hero/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/hero/index.js
@@ -8,6 +8,7 @@ import save from './save';
 export const name = 'recipe-hero';
 export const title = __( 'Recipe Hero', 'jetpack' );
 export const settings = {
+	apiVersion: 3,
 	title,
 	description: (
 		<Fragment>
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/index.js b/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/index.js
index ba58e19cfb990..434e0d4b91856 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/index.js
@@ -9,6 +9,7 @@ import save from './save';
 export const name = 'recipe-ingredient-item';
 export const title = __( 'Recipe Ingredient Item', 'jetpack' );
 export const settings = {
+	apiVersion: 3,
 	title,
 	description: (
 		<Fragment>
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/index.js b/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/index.js
index 24cfaf0f3bcb9..c00528f4b75a8 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/index.js
@@ -11,6 +11,7 @@ import './editor.scss';
 export const name = 'recipe-ingredients-list';
 export const title = __( 'Recipe Ingredients List', 'jetpack' );
 export const settings = {
+	apiVersion: 3,
 	title,
 	description: (
 		<Fragment>
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/step/index.js b/projects/plugins/jetpack/extensions/blocks/recipe/step/index.js
index a8de038b57af2..dea805c481062 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/step/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/step/index.js
@@ -8,6 +8,7 @@ import save from './save';
 export const name = 'recipe-step';
 export const title = __( 'Recipe Step', 'jetpack' );
 export const settings = {
+	apiVersion: 3,
 	title,
 	description: (
 		<Fragment>
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/steps/index.js b/projects/plugins/jetpack/extensions/blocks/recipe/steps/index.js
index 352de13c361fc..baf05f04365e2 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/steps/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/steps/index.js
@@ -10,6 +10,7 @@ import './editor.scss';
 export const name = 'recipe-steps';
 export const title = __( 'Recipe Steps', 'jetpack' );
 export const settings = {
+	apiVersion: 3,
 	title,
 	description: (
 		<Fragment>
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/index.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/index.js
index f004c2566b81e..634155f78d529 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/index.js
@@ -17,6 +17,7 @@ export const defaultFirstMessage = __(
 );
 
 export const settings = {
+	apiVersion: 3,
 	title,
 	description: __(
 		'Let your visitors send you a message on WhatsApp with the tap of a button.',

From 351068647f60580283b09edd1393448f486eb794 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 19 Dec 2024 15:58:40 +0100
Subject: [PATCH 2/6] Rely on blockProps in all blocks

---
 .../blocks/blogroll/blogroll-item/index.js        | 12 ++++++++++--
 .../blocks/contact-info/address/save.js           | 14 +++++++++++---
 .../extensions/blocks/contact-info/email/save.js  | 12 ++++++++++--
 .../extensions/blocks/contact-info/phone/save.js  | 13 +++++++++++--
 .../premium-content/logged-out-view/save.js       |  8 ++++++--
 .../premium-content/subscriber-view/save.js       |  8 ++++++--
 .../extensions/blocks/recipe/details/save.js      |  7 ++++---
 .../jetpack/extensions/blocks/recipe/hero/save.js | 15 +++++++++------
 .../blocks/recipe/ingredient-item/save.js         |  7 ++++---
 .../blocks/recipe/ingredients-list/save.js        |  8 +++++---
 .../jetpack/extensions/blocks/recipe/step/save.js |  6 ++++--
 .../extensions/blocks/recipe/steps/save.js        |  4 +++-
 .../blocks/send-a-message/whatsapp-button/save.js |  9 +++++----
 13 files changed, 88 insertions(+), 35 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
index 44a185809df68..bc88e4bbab460 100644
--- a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
@@ -1,4 +1,4 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { getIconColor } from '../../../shared/block-icons';
 import PlaceholderSiteIcon from '../placeholder-site-icon.svg';
@@ -66,7 +66,15 @@ export const settings = {
 			type: 'string',
 		},
 	},
-	save: () => <InnerBlocks.Content />,
+	save: () => {
+		const blockProps = useBlockProps.save();
+
+		return (
+			<div { ...blockProps }>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
 	example: {
 		attributes: {
 			// @TODO: Add default values for block attributes, for generating the block preview.
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/address/save.js b/projects/plugins/jetpack/extensions/blocks/contact-info/address/save.js
index 0610df628ab11..cb023b59f7236 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/address/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/address/save.js
@@ -1,3 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -56,9 +57,15 @@ export const googleMapsUrl = ( {
 	);
 };
 
-const save = props =>
-	hasAddress( props.attributes ) && (
-		<div className={ props.className }>
+const save = props => {
+	if ( ! hasAddress( props.attributes ) ) {
+		return null;
+	}
+
+	const blockProps = useBlockProps.save();
+
+	return (
+		<div { ...blockProps }>
 			{ props.attributes.linkToGoogleMaps && (
 				<a
 					href={ googleMapsUrl( props ) }
@@ -72,5 +79,6 @@ const save = props =>
 			{ ! props.attributes.linkToGoogleMaps && <Address { ...props } /> }
 		</div>
 	);
+};
 
 export default save;
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/email/save.js b/projects/plugins/jetpack/extensions/blocks/contact-info/email/save.js
index bfecc53eaf966..d2f77838d3f5e 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/email/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/email/save.js
@@ -1,3 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
 import { Fragment } from '@wordpress/element';
 import emailValidator from 'email-validator';
 
@@ -27,7 +28,14 @@ const renderEmail = inputText => {
 	return explodedInput;
 };
 
-const save = ( { attributes: { email }, className } ) =>
-	email && <div className={ className }>{ renderEmail( email ) }</div>;
+const save = ( { attributes: { email } } ) => {
+	if ( ! email ) {
+		return null;
+	}
+
+	const blockProps = useBlockProps.save();
+
+	return <div { ...blockProps }>{ renderEmail( email ) }</div>;
+};
 
 export default save;
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/phone/save.js b/projects/plugins/jetpack/extensions/blocks/contact-info/phone/save.js
index 672019c16f96b..47e11eeb51f2d 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/phone/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/phone/save.js
@@ -1,3 +1,5 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
 export function renderPhone( inputText ) {
 	const arrayOfNumbers = inputText.match( /\d+\.\d+|\d+\b|\d+(?=\w)/g );
 	if ( ! arrayOfNumbers ) {
@@ -37,7 +39,14 @@ export function renderPhone( inputText ) {
 	];
 }
 
-const save = ( { attributes: { phone }, className } ) =>
-	phone && <div className={ className }>{ renderPhone( phone ) }</div>;
+const save = ( { attributes: { phone } } ) => {
+	if ( ! phone ) {
+		return null;
+	}
+
+	const blockProps = useBlockProps.save();
+
+	return <div { ...blockProps }>{ renderPhone( phone ) }</div>;
+};
 
 export default save;
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/save.js b/projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/save.js
index f927a3dc85c40..855835b64ed3b 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/save.js
@@ -1,4 +1,4 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Block Save function
@@ -6,8 +6,12 @@ import { InnerBlocks } from '@wordpress/block-editor';
  * @return {string} HTML markup.
  */
 export default function Save() {
+	const blockProps = useBlockProps.save( {
+		className: 'wp-block-premium-content-logged-out-view entry-content',
+	} );
+
 	return (
-		<div className="wp-block-premium-content-logged-out-view entry-content">
+		<div { ...blockProps }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/save.js b/projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/save.js
index 556d1ee948c1b..07f15f818e0ce 100644
--- a/projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/save.js
@@ -1,4 +1,4 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Block Save function
@@ -6,8 +6,12 @@ import { InnerBlocks } from '@wordpress/block-editor';
  * @return {string} HTML markup.
  */
 export default function Save() {
+	const blockProps = useBlockProps.save( {
+		className: 'wp-block-premium-content-subscriber-view entry-content',
+	} );
+
 	return (
-		<div className="wp-block-premium-content-subscriber-view entry-content">
+		<div { ...blockProps }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/details/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/details/save.js
index 7c0f13877e489..ac3f5b8b55e84 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/details/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/details/save.js
@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-const RecipeSave = ( { attributes, className } ) => {
+const RecipeSave = ( { attributes } ) => {
 	const { prepTime, prepTimeLabel, cookTime, cookTimeLabel, servings, servingsLabel } = attributes;
+	const blockProps = useBlockProps.save();
 
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<div className="wp-block-jetpack-recipe-details__detail">
 				<p>{ prepTimeLabel }</p>
 				<p itemProp="prepTime" content={ `PT${ prepTime.toUpperCase() }` }>
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/hero/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/hero/save.js
index 2b6b23c5bdf03..adc6a2aa4f059 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/hero/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/hero/save.js
@@ -1,12 +1,15 @@
 /**
  * External dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-const RecipeHeroSave = ( { className } ) => (
-	<div className={ className }>
-		<InnerBlocks.Content />
-	</div>
-);
+const RecipeHeroSave = () => {
+	const blockProps = useBlockProps.save();
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};
 
 export default RecipeHeroSave;
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/save.js
index c5c914867148a..7dde19e6368e3 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/save.js
@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
-const RecipeIngredientItemSave = ( { className, attributes } ) => {
+const RecipeIngredientItemSave = ( { attributes } ) => {
 	const { ingredient } = attributes;
+	const blockProps = useBlockProps.save();
 
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<RichText.Content tagName="p" itemprop="recipeIngredient" value={ ingredient } />
 		</div>
 	);
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/save.js
index dddfce31ee571..9badca607863a 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/save.js
@@ -1,11 +1,13 @@
 /**
  * External dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const RecipeIngredientsListSave = () => {
+	const blockProps = useBlockProps.save();
 
-const RecipeIngredientsListSave = ( { className } ) => {
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/step/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/step/save.js
index 5b5d5181cac1f..6fe36073570a5 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/step/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/step/save.js
@@ -1,11 +1,13 @@
 /**
  * External dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 const RecipeStepSave = () => {
+	const blockProps = useBlockProps.save();
+
 	return (
-		<li itemProp="step" itemScope itemType="https://schema.org/HowToStep">
+		<li itemProp="step" itemScope itemType="https://schema.org/HowToStep" { ...blockProps }>
 			<InnerBlocks.Content />
 		</li>
 	);
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/steps/save.js b/projects/plugins/jetpack/extensions/blocks/recipe/steps/save.js
index a99e9480cd05c..9cf5603541b28 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/steps/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/steps/save.js
@@ -1,10 +1,11 @@
 /**
  * External dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 const RecipeStepsSave = ( { attributes } ) => {
 	const { stepHighlightColor, stepTextColor } = attributes;
+	const blockProps = useBlockProps.save();
 
 	const styles = {
 		'--step-highlight-color': stepHighlightColor,
@@ -17,6 +18,7 @@ const RecipeStepsSave = ( { attributes } ) => {
 			itemScope=""
 			itemProp="recipeInstructions"
 			itemType="https://schema.org/HowTo"
+			{ ...blockProps }
 		>
 			<InnerBlocks.Content />
 		</ol>
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/save.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/save.js
index a9ad324a59436..5c561113cc472 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/save.js
@@ -1,8 +1,8 @@
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import clsx from 'clsx';
 import { whatsAppURL } from './index';
 
-export default function SendAMessageSave( { attributes, className } ) {
+export default function SendAMessageSave( { attributes } ) {
 	const {
 		countryCode,
 		phoneNumber,
@@ -12,6 +12,7 @@ export default function SendAMessageSave( { attributes, className } ) {
 		colorClass,
 		openInNewTab,
 	} = attributes;
+	const blockProps = useBlockProps.save();
 
 	const fullPhoneNumber =
 		countryCode && phoneNumber
@@ -29,7 +30,7 @@ export default function SendAMessageSave( { attributes, className } ) {
 	};
 
 	const cssClassNames = clsx(
-		className,
+		blockProps?.className,
 		colorClass ? 'is-color-' + colorClass : undefined,
 		! buttonText.length ? 'has-no-text' : undefined
 	);
@@ -37,7 +38,7 @@ export default function SendAMessageSave( { attributes, className } ) {
 	const target = openInNewTab ? '_blank' : '_self';
 
 	return (
-		<div className={ cssClassNames }>
+		<div { ...blockProps } className={ cssClassNames }>
 			<a
 				className="whatsapp-block__button"
 				href={ getWhatsAppUrl() }

From 4b543ae90018010673beb569831b1c1854c93607 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 19 Dec 2024 18:23:21 +0100
Subject: [PATCH 3/6] Update tests

---
 .../extensions/blocks/contact-info/address/test/edit.js    | 7 +++++++
 .../extensions/blocks/contact-info/email/test/edit.js      | 7 +++++++
 .../extensions/blocks/contact-info/phone/test/edit.js      | 7 +++++++
 3 files changed, 21 insertions(+)

diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/address/test/edit.js b/projects/plugins/jetpack/extensions/blocks/contact-info/address/test/edit.js
index 5f5d6cf6fd36b..ec258c7cc710f 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/address/test/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/address/test/edit.js
@@ -2,6 +2,13 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import AddressEdit from '../edit';
 
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	useBlockProps: {
+		save: () => ( {} ),
+	},
+} ) );
+
 const defaultAttributes = {
 	address: '',
 	addressLine2: '',
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/email/test/edit.js b/projects/plugins/jetpack/extensions/blocks/contact-info/email/test/edit.js
index 8a450c2758383..9b2b47c47dcf2 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/email/test/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/email/test/edit.js
@@ -2,6 +2,13 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import EmailEdit from '../edit';
 
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	useBlockProps: {
+		save: () => ( {} ),
+	},
+} ) );
+
 const setAttributes = jest.fn();
 
 const defaultAttributes = {
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-info/phone/test/edit.js b/projects/plugins/jetpack/extensions/blocks/contact-info/phone/test/edit.js
index 0bb506b7d0cff..ddfbc725e7749 100644
--- a/projects/plugins/jetpack/extensions/blocks/contact-info/phone/test/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/contact-info/phone/test/edit.js
@@ -2,6 +2,13 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PhoneEdit from '../edit';
 
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	useBlockProps: {
+		save: () => ( {} ),
+	},
+} ) );
+
 const setAttributes = jest.fn();
 
 const defaultAttributes = {

From a81ab0a68a94e59f88397cd8409bc359ae69aeb7 Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 19 Dec 2024 19:24:28 +0100
Subject: [PATCH 4/6] Update editor view as well

---
 .../jetpack/extensions/blocks/recipe/details/edit.js        | 6 ++++--
 .../plugins/jetpack/extensions/blocks/recipe/hero/edit.js   | 5 +++--
 .../extensions/blocks/recipe/ingredient-item/edit.js        | 5 +++--
 .../extensions/blocks/recipe/ingredients-list/edit.js       | 5 +++--
 .../plugins/jetpack/extensions/blocks/recipe/step/edit.js   | 5 +++--
 .../plugins/jetpack/extensions/blocks/recipe/steps/edit.js  | 5 ++++-
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/details/edit.js b/projects/plugins/jetpack/extensions/blocks/recipe/details/edit.js
index 48ec83ee9969b..04d3eb1cd49b1 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/details/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/details/edit.js
@@ -1,4 +1,4 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { TextControl, __experimentalUnitControl as UnitControl } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import './editor.scss';
 
@@ -9,8 +9,10 @@ const units = [
 
 function RecipeDetailsEdit( { className, attributes, setAttributes } ) {
 	const { prepTime, prepTimeLabel, cookTime, cookTimeLabel, servings, servingsLabel } = attributes;
+	const blockProps = useBlockProps( { className } );
+
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<div className="wp-container wp-recipe-block-details">
 				<div className="group">
 					<TextControl
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/hero/edit.js b/projects/plugins/jetpack/extensions/blocks/recipe/hero/edit.js
index a44cefd075e49..ce6f8e6afa582 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/hero/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/hero/edit.js
@@ -1,11 +1,12 @@
 /**
  * External dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 function RecipeHeroEdit( { className, hasInnerBlocks } ) {
+	const blockProps = useBlockProps( { className } );
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<InnerBlocks
 				allowedBlocks={ [ 'core/image', 'jetpack/slideshow', 'core/cover' ] }
 				renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/edit.js b/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/edit.js
index 0380d425ff101..e37b19893cca4 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/ingredient-item/edit.js
@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 function RecipeIngredientItemEdit( { className, attributes, setAttributes } ) {
 	const { ingredient } = attributes;
+	const blockProps = useBlockProps( { className } );
 
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<RichText
 				tagName="p"
 				className="ingredientText"
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/edit.js b/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/edit.js
index 88ede691b3b7a..77461a2206fb6 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/ingredients-list/edit.js
@@ -1,10 +1,11 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 import './editor.scss';
 
 function RecipeIngredientsListEdit( { className } ) {
+	const blockProps = useBlockProps( { className } );
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<InnerBlocks
 				allowedBlocks={ [ 'jetpack/recipe-ingredient-item' ] }
 				renderAppender={ InnerBlocks.ButtonBlockAppender }
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/step/edit.js b/projects/plugins/jetpack/extensions/blocks/recipe/step/edit.js
index 34b58fe0854d4..1f7db8e3bc73d 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/step/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/step/edit.js
@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 function RecipeStepEdit( { className } ) {
+	const blockProps = useBlockProps( { className } );
 	return (
 		<li>
-			<div className={ className }>
+			<div { ...blockProps }>
 				<InnerBlocks
 					allowedBlocks={ [
 						'core/image',
diff --git a/projects/plugins/jetpack/extensions/blocks/recipe/steps/edit.js b/projects/plugins/jetpack/extensions/blocks/recipe/steps/edit.js
index 1343f96d3f6cd..58e562a178595 100644
--- a/projects/plugins/jetpack/extensions/blocks/recipe/steps/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/recipe/steps/edit.js
@@ -1,6 +1,7 @@
 import {
 	ContrastChecker,
 	InnerBlocks,
+	useBlockProps,
 	InspectorControls,
 	PanelColorSettings,
 } from '@wordpress/block-editor';
@@ -10,6 +11,8 @@ import './editor.scss';
 
 function RecipeStepsEdit( { className, attributes, setAttributes } ) {
 	const { stepHighlightColor, stepTextColor } = attributes;
+	const blockProps = useBlockProps( { className } );
+
 	return (
 		<>
 			<InspectorControls>
@@ -40,7 +43,7 @@ function RecipeStepsEdit( { className, attributes, setAttributes } ) {
 					}
 				</PanelColorSettings>
 			</InspectorControls>
-			<ol className={ className }>
+			<ol { ...blockProps }>
 				<InnerBlocks
 					allowedBlocks={ [ 'jetpack/recipe-step' ] }
 					renderAppender={ InnerBlocks.ButtonBlockAppender }

From cbd7315d44d9ab9d034ed9182a5a680a2c4afe0a Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 19 Dec 2024 19:52:23 +0100
Subject: [PATCH 5/6] Deprecate old version of the blogroll item

---
 .../blogroll-item/deprecated/index.js         |  3 +++
 .../blogroll-item/deprecated/v1/attributes.js | 24 +++++++++++++++++++
 .../blogroll-item/deprecated/v1/index.js      |  5 ++++
 .../blogroll-item/deprecated/v1/supports.js   | 11 +++++++++
 .../blocks/blogroll/blogroll-item/index.js    |  2 ++
 5 files changed, 45 insertions(+)
 create mode 100644 projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/index.js
 create mode 100644 projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/attributes.js
 create mode 100644 projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/index.js
 create mode 100644 projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/supports.js

diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/index.js b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/index.js
new file mode 100644
index 0000000000000..7e5679d1bf15f
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/index.js
@@ -0,0 +1,3 @@
+import * as deprecatedV1 from './v1';
+
+export default [ deprecatedV1 ];
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/attributes.js b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/attributes.js
new file mode 100644
index 0000000000000..7273489ea0d62
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/attributes.js
@@ -0,0 +1,24 @@
+import PlaceholderSiteIcon from '../../../placeholder-site-icon.svg';
+
+export default {
+	id: {
+		type: 'string',
+	},
+	name: {
+		type: 'string',
+	},
+	icon: {
+		type: 'string',
+		default: PlaceholderSiteIcon,
+	},
+	is_non_wpcom_site: {
+		type: 'boolean',
+		default: false,
+	},
+	url: {
+		type: 'string',
+	},
+	description: {
+		type: 'string',
+	},
+};
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/index.js b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/index.js
new file mode 100644
index 0000000000000..d1477667d735a
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/index.js
@@ -0,0 +1,5 @@
+import { InnerBlocks } from '@wordpress/block-editor';
+export { default as attributes } from './attributes';
+export { default as supports } from './supports';
+
+export const save = () => <InnerBlocks.Content />;
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/supports.js b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/supports.js
new file mode 100644
index 0000000000000..c2bb81e3cd364
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/v1/supports.js
@@ -0,0 +1,11 @@
+export default {
+	align: false,
+	alignWide: true,
+	anchor: false,
+	customClassName: true,
+	className: true,
+	html: false,
+	multiple: true,
+	reusable: true,
+	inserter: false,
+};
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
index bc88e4bbab460..c553dfb34e840 100644
--- a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js
@@ -2,6 +2,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { getIconColor } from '../../../shared/block-icons';
 import PlaceholderSiteIcon from '../placeholder-site-icon.svg';
+import { default as deprecated } from './deprecated';
 import edit from './edit';
 import icon from './icon';
 import './editor.scss';
@@ -80,4 +81,5 @@ export const settings = {
 			// @TODO: Add default values for block attributes, for generating the block preview.
 		},
 	},
+	deprecated,
 };

From 899c7eecb544479c26d23a76e81883ed26bdcebd Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Thu, 9 Jan 2025 17:30:54 +0100
Subject: [PATCH 6/6] WhatsApp block: add missing classes in editor

See https://github.com/Automattic/jetpack/pull/40685#pullrequestreview-2525501373
---
 .../blocks/send-a-message/whatsapp-button/edit.js    | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 94441c8ad16ec..e77230cdb8ef2 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -1,4 +1,4 @@
-import { BlockControls, InspectorControls, RichText } from '@wordpress/block-editor';
+import { BlockControls, InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 import { useEffect, useCallback } from '@wordpress/element';
 import clsx from 'clsx';
@@ -8,7 +8,9 @@ import '../view.scss';
 
 export default function WhatsAppButtonEdit( { attributes, setAttributes, className, clientId } ) {
 	const { countryCode, buttonText, colorClass, backgroundColor } = attributes;
-
+	const blockProps = useBlockProps( {
+		className: clsx( className, colorClass && `is-color-${ colorClass }` ),
+	} );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 
 	const getCountryCode = useCallback( async () => {
@@ -44,12 +46,8 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		}
 	}, [ clientId, countryCode, getCountryCode, selectBlock ] );
 
-	const getBlockClassNames = () => {
-		return clsx( className, colorClass ? 'is-color-' + colorClass : undefined );
-	};
-
 	return (
-		<div className={ getBlockClassNames() }>
+		<div { ...blockProps }>
 			<BlockControls>
 				<WhatsAppButtonConfiguration
 					context="toolbar"