Blocks: update remaining child blocks to API version v3

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.

projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/deprecated/index.js

@@ -0,0 +1,3 @@
+import * as deprecatedV1 from './v1';
+
+export default [ deprecatedV1 ];

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',
+	},
+};

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 />;

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,
+};

projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/index.js

@@ -1,14 +1,16 @@
-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';
+import { default as deprecated } from './deprecated';
 import edit from './edit';
 import icon from './icon';
 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: {
@@ -65,10 +67,19 @@ 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.
 		},
 	},
+	deprecated,
 };

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: [

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;

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: '',

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.',

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;

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 = {

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.',

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;

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 = {

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.',

projects/plugins/jetpack/extensions/blocks/premium-content/logged-out-view/save.js

@@ -1,13 +1,17 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Block Save function
  *
  * @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>
 	);

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).',

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,

projects/plugins/jetpack/extensions/blocks/premium-content/subscriber-view/save.js

@@ -1,13 +1,17 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Block Save function
  *
  * @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>
 	);

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

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>

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() }` }>

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 }

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>

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;