Upsell nudge: fix click Safari, disable block (#40902)

Co-authored-by: Jeremy Herve <[email protected]>

projects/js-packages/shared-extension-utils/changelog/fix-upsell-nudge-safari

@@ -0,0 +1,4 @@
+Significance: major
+Type: fixed
+
+Upsell nudge: fix click in Safari

projects/js-packages/shared-extension-utils/index.js

@@ -3,7 +3,6 @@ export { default as getSiteFragment } from './src/get-site-fragment';
 export * from './src/site-type-utils';
 export { default as getJetpackExtensionAvailability } from './src/get-jetpack-extension-availability';
 export { default as registerJetpackPlugin } from './src/register-jetpack-plugin';
-export { default as withHasWarningIsInteractiveClassNames } from './src/with-has-warning-is-interactive-class-names';
 export {
 	getUpgradeUrl,
 	isUpgradable,

projects/packages/forms/changelog/fix-upsell-nudge-safari

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Upsell nudge: fix click in Safari

projects/packages/forms/src/blocks/contact-form/util/register-jetpack-block.js

@@ -1,10 +1,8 @@
 import {
 	getJetpackExtensionAvailability,
-	withHasWarningIsInteractiveClassNames,
 	requiresPaidPlan,
 } from '@automattic/jetpack-shared-extension-utils';
 import { registerBlockType } from '@wordpress/blocks';
-import { addFilter } from '@wordpress/hooks';
 
 /**
  * Registers a gutenberg block if the availability requirements are met.
@@ -34,14 +32,6 @@ export default function registerJetpackBlock( name, settings, childBlocks = [],
 
 	const result = registerBlockType( jpPrefix + name, settings );
 
-	if ( requiredPlan ) {
-		addFilter(
-			'editor.BlockListBlock',
-			`${ jpPrefix + name }-with-has-warning-is-interactive-class-names`,
-			withHasWarningIsInteractiveClassNames( jpPrefix + name )
-		);
-	}
-
 	// Register child blocks. Using `registerBlockType()` directly avoids availability checks -- if
 	// their parent is available, we register them all, without checking for their individual availability.
 	childBlocks.forEach( childBlock =>

projects/plugins/jetpack/changelog/fix-upsell-nudge-safari

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Block nudges: ensure clicking on a banner button leads to Plans page in Safari.

projects/plugins/jetpack/extensions/blocks/videopress/editor.js

@@ -6,7 +6,6 @@ import {
 	isAtomicSite,
 	isSimpleSite,
 	getJetpackExtensionAvailability,
-	withHasWarningIsInteractiveClassNames,
 } from '@automattic/jetpack-shared-extension-utils';
 import { createBlobURL } from '@wordpress/blob';
 import { useBlockEditContext, store as blockEditorStore } from '@wordpress/block-editor';
@@ -186,11 +185,6 @@ const addVideoPressSupport = ( settings, name ) => {
 	// Check if VideoPress is unavailable and filter the mediaplaceholder to limit options
 	if ( isNotAvailable ) {
 		addFilter( 'editor.MediaPlaceholder', 'jetpack/videopress', videoPressNoPlanMediaPlaceholder );
-		addFilter(
-			'editor.BlockListBlock',
-			`jetpack/videopress-with-has-warning-is-interactive-class-names`,
-			withHasWarningIsInteractiveClassNames( `core/video` )
-		);
 	} else if ( available ) {
 		if ( resumableUploadEnabled ) {
 			addFilter( 'editor.MediaPlaceholder', 'jetpack/videopress', videoPressMediaPlaceholder );

projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/with-upgrade-banner.jsx

@@ -8,6 +8,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState, useEffect, useMemo, useContext } from '@wordpress/element';
+import clsx from 'clsx';
 import { PaidBlockContext, PaidBlockProvider } from './components';
 import UpgradePlanBanner from './upgrade-plan-banner';
 import { trackUpgradeBannerImpression, trackUpgradeClickEvent } from './utils';
@@ -80,14 +81,14 @@ const withUpgradeBanner = createHigherOrderComponent(
 
 		const blockProps = useBlockProps();
 		// Fix for width of cover block because otherwise the div defaults to content-size as max width
-		const cssFixForCoverBlock = { 'max-width': 'unset' };
+		const cssFixForCoverBlock = { maxwidth: 'unset' };
 
 		return (
 			<PaidBlockProvider
 				onBannerVisibilityChange={ setIsVisible }
 				hasParentBanner={ isBannerVisible }
 			>
-				<div ref={ blockProps.ref } style={ cssFixForCoverBlock }>
+				<div { ...blockProps } style={ { ...cssFixForCoverBlock, ...blockProps.style } }>
 					<UpgradePlanBanner
 						className={ `is-${ name.replace( /\//, '-' ) }-paid-block` }
 						title={ null }
@@ -98,7 +99,7 @@ const withUpgradeBanner = createHigherOrderComponent(
 						context={ bannerContext }
 						onRedirect={ () => trackUpgradeClickEvent( trackEventData ) }
 					/>
-					<BlockEdit { ...props } />
+					<BlockEdit { ...props } className={ clsx( blockProps.className, 'has-warning' ) } />
 				</div>
 			</PaidBlockProvider>
 		);

projects/plugins/jetpack/extensions/shared/register-jetpack-block.js

@@ -1,11 +1,9 @@
 import {
 	getJetpackExtensionAvailability,
-	withHasWarningIsInteractiveClassNames,
 	requiresPaidPlan,
 	getBlockIconProp,
 } from '@automattic/jetpack-shared-extension-utils';
 import { registerBlockType } from '@wordpress/blocks';
-import { addFilter } from '@wordpress/hooks';
 
 const JETPACK_PREFIX = 'jetpack/';
 
@@ -52,14 +50,6 @@ export default function registerJetpackBlock(
 		settings
 	);
 
-	if ( requiredPlan ) {
-		addFilter(
-			'editor.BlockListBlock',
-			`${ prefixedName }-with-has-warning-is-interactive-class-names`,
-			withHasWarningIsInteractiveClassNames( prefixedName )
-		);
-	}
-
 	// Register child blocks. Using `registerBlockType()` directly avoids availability checks -- if
 	// their parent is available, we register them all, without checking for their individual availability.
 	childBlocks.forEach( childBlock =>