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

This reverts commit c1371cc.

See p1737057925999759-slack-C02FMH4G8

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

@@ -3,6 +3,7 @@ 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/js-packages/shared-extension-utils/src/with-has-warning-is-interactive-class-names/index.jsx

@@ -0,0 +1,18 @@
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+import './style.scss';
+
+// Injecting the `has-warning` class into the block wrapper component gives us
+// the right kind of borders around the block, both visually and conceptually.
+// However, it also adds styling to prevent user interaction with that block.
+// We thus add a new `is-interactive` class to be able to override that behavior.
+export default name =>
+	createHigherOrderComponent(
+		BlockListBlock => props => (
+			<BlockListBlock
+				{ ...props }
+				className={ props.name === name ? 'has-warning is-interactive' : props.className }
+			/>
+		),
+		'withHasWarningIsInteractiveClassNames'
+	);

projects/js-packages/shared-extension-utils/src/with-has-warning-is-interactive-class-names/style.scss

@@ -0,0 +1,13 @@
+.block-editor-block-list__layout
+	// Override core styles inherited from `.has-warning`:
+	// we do want blocks with upgrade nudge warning to be interactive
+	.block-editor-block-list__block.has-warning.is-interactive {
+	> * {
+		pointer-events: auto;
+		user-select: auto;
+	}
+
+	&:after {
+		content: none;
+	}
+}

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

@@ -1,8 +1,10 @@
 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.
@@ -32,6 +34,14 @@ 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/extensions/blocks/videopress/editor.js

@@ -6,6 +6,7 @@ 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';
@@ -185,6 +186,11 @@ 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,7 +8,6 @@ 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';
@@ -81,14 +80,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 = { maxwidth: 'unset' };
+		const cssFixForCoverBlock = { 'max-width': 'unset' };
 
 		return (
 			<PaidBlockProvider
 				onBannerVisibilityChange={ setIsVisible }
 				hasParentBanner={ isBannerVisible }
 			>
-				<div { ...blockProps } style={ { ...cssFixForCoverBlock, ...blockProps.style } }>
+				<div ref={ blockProps.ref } style={ cssFixForCoverBlock }>
 					<UpgradePlanBanner
 						className={ `is-${ name.replace( /\//, '-' ) }-paid-block` }
 						title={ null }
@@ -99,7 +98,7 @@ const withUpgradeBanner = createHigherOrderComponent(
 						context={ bannerContext }
 						onRedirect={ () => trackUpgradeClickEvent( trackEventData ) }
 					/>
-					<BlockEdit { ...props } className={ clsx( blockProps.className, 'has-warning' ) } />
+					<BlockEdit { ...props } />
 				</div>
 			</PaidBlockProvider>
 		);

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

@@ -1,9 +1,11 @@
 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/';
 
@@ -50,6 +52,14 @@ 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 =>