Paid Blocks Nudge: Fix Border by Injecting has-warning Style

extensions/shared/register-jetpack-block.js

@@ -1,13 +1,15 @@
 /**
  * External dependencies
  */
+import { addFilter } from '@wordpress/hooks';
 import { registerBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import extensionList from '../index.json';
 import getJetpackExtensionAvailability from './get-jetpack-extension-availability';
+import withHasWarningIsInteractiveClassNames from './with-has-warning-is-interactive-class-names';
 import wrapPaidBlock from './wrap-paid-block';
 
 const betaExtensions = extensionList.beta || [];
@@ -48,6 +50,14 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] )
 		edit: requiredPlan ? wrapPaidBlock( { requiredPlan } )( settings.edit ) : settings.edit,
 	} );
 
+	if ( requiredPlan ) {
+		addFilter(
+			'editor.BlockListBlock',
+			`jetpack/${ name }-with-has-warning-is-interactive-class-names`,
+			withHasWarningIsInteractiveClassNames( `jetpack/${ 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 =>

extensions/shared/with-has-warning-is-interactive-class-names/index.jsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+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' : '' }
+			/>
+		),
+		'withHasWarningIsInteractiveClassNames'
+	);

extensions/shared/with-has-warning-is-interactive-class-names/style.scss

@@ -0,0 +1,14 @@
+.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
+	.block-editor-block-list__block-edit {
+	> * {
+		pointer-events: auto;
+		user-select: auto;
+	}
+
+	&:after {
+		content: none;
+	}
+}

extensions/shared/wrap-paid-block/index.jsx → extensions/shared/wrap-paid-block.jsx

@@ -1,28 +1,22 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import { Fragment } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import UpgradeNudge from '../upgrade-nudge';
-
-import './style.scss';
+import UpgradeNudge from './upgrade-nudge';
 
 export default ( { requiredPlan } ) =>
 	createHigherOrderComponent(
 		WrappedComponent => props => (
 			// Wraps the input component in a container, without mutating it. Good!
-			<div
-				className={ classNames( 'jetpack-paid-block__wrapper', {
-					'is-selected': props.isSelected,
-				} ) }
-			>
+			<Fragment>
 				<UpgradeNudge plan={ requiredPlan } />
 				<WrappedComponent { ...props } />
-			</div>
+			</Fragment>
 		),
 		'wrapPaidBlock'
 	);