+const save = props => {
+ if ( ! hasAddress( props.attributes ) ) {
+ return null;
+ }
+
+ const blockProps = useBlockProps.save();
+
+ return (
+
);
+};
export default save;
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/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/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 &&
{ renderEmail( email ) }
;
+const save = ( { attributes: { email } } ) => {
+ if ( ! email ) {
+ return null;
+ }
+
+ const blockProps = useBlockProps.save();
+
+ return
{ renderEmail( email ) }
;
+};
export default save;
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/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/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 &&
{ renderPhone( phone ) }
;
+const save = ( { attributes: { phone } } ) => {
+ if ( ! phone ) {
+ return null;
+ }
+
+ const blockProps = useBlockProps.save();
+
+ return
{ renderPhone( phone ) }
;
+};
export default save;
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 = {
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/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 (
-
+
);
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/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 (
-
+
);
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 (
-
+
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 (
-
+
{ prepTimeLabel }
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 (
-
+
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 } ) => (
-
-
-
-);
+const RecipeHeroSave = () => {
+ const blockProps = useBlockProps.save();
+ return (
+
+
+
+ );
+};
export default RecipeHeroSave;
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 (
-
+
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 (
-
+
);
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 (
-
+
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 (
-
+
);
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 (
-
+
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 (
-
+
);
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 (
<>
@@ -40,7 +43,7 @@ function RecipeStepsEdit( { className, attributes, setAttributes } ) {
}
-
+
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 }
>
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 (
-