From 95af5142a94d1c9d17d3dc69b246096c1e604b60 Mon Sep 17 00:00:00 2001
From: Paul Bunkham <paul@dobit.co.uk>
Date: Wed, 19 Feb 2020 16:20:18 +0000
Subject: [PATCH 1/2] Fix block style previews with an upgrade nudge

When an upgrade nudge is to be displayed, the block `example` setting is
removed and threw up a bug where we were calling `createBlock` with the
incorrect arguments.

With that fixed it still meant that the block previews had the nudge
rendered. This change gets around that by defining an additional
attribute an the created block, and not displaying the nudge if that
attribute is found to be `true`.
---
 .../components/block-styles-selector/index.js    | 16 +++++++++++++---
 extensions/shared/get-validated-attributes.js    |  3 +++
 extensions/shared/wrap-paid-block.jsx            |  5 ++++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/extensions/shared/components/block-styles-selector/index.js b/extensions/shared/components/block-styles-selector/index.js
index b798f76a2d7d6..1d44e3c9ffa2e 100644
--- a/extensions/shared/components/block-styles-selector/index.js
+++ b/extensions/shared/components/block-styles-selector/index.js
@@ -13,6 +13,16 @@ import { BlockPreview } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
+const addPreviewAttribute = block => {
+	return {
+		...block,
+		attributes: {
+			...block.attributes,
+			isBlockPreview: true,
+		},
+	};
+};
+
 const StylePreview = ( { attributes, styleOption, viewportWidth, blockName } ) => {
 	const type = getBlockType( blockName );
 
@@ -20,14 +30,14 @@ const StylePreview = ( { attributes, styleOption, viewportWidth, blockName } ) =
 		<div className="block-editor-block-styles__item-preview">
 			<BlockPreview
 				viewportWidth={ viewportWidth }
-				blocks={
+				blocks={ addPreviewAttribute(
 					type.example
 						? getBlockFromExample( blockName, {
 								attributes: { ...type.example.attributes, style: styleOption.value },
 								innerBlocks: type.example.innerBlocks,
 						  } )
-						: createBlock( type, attributes )
-				}
+						: createBlock( blockName, attributes )
+				) }
 			/>
 		</div>
 	);
diff --git a/extensions/shared/get-validated-attributes.js b/extensions/shared/get-validated-attributes.js
index 6b668998ebaf0..01635b9fc7192 100644
--- a/extensions/shared/get-validated-attributes.js
+++ b/extensions/shared/get-validated-attributes.js
@@ -14,6 +14,9 @@ export const getValidatedAttributes = ( attributeDetails, attributesToValidate )
 	reduce(
 		attributesToValidate,
 		( ret, attribute, attributeKey ) => {
+			if ( undefined === attributeDetails[ attributeKey ] ) {
+				return ret;
+			}
 			const { type, validator, validValues, default: defaultVal } = attributeDetails[
 				attributeKey
 			];
diff --git a/extensions/shared/wrap-paid-block.jsx b/extensions/shared/wrap-paid-block.jsx
index febfc9f0f99cb..d055e8694b605 100644
--- a/extensions/shared/wrap-paid-block.jsx
+++ b/extensions/shared/wrap-paid-block.jsx
@@ -3,6 +3,7 @@
  */
 import { Fragment } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -14,7 +15,9 @@ export default ( { requiredPlan } ) =>
 		WrappedComponent => props => (
 			// Wraps the input component in a container, without mutating it. Good!
 			<Fragment>
-				<UpgradeNudge plan={ requiredPlan } blockName={ props.name } />
+				{ ! get( props, 'attributes.isBlockPreview', false ) && (
+					<UpgradeNudge plan={ requiredPlan } blockName={ props.name } />
+				) }
 				<WrappedComponent { ...props } />
 			</Fragment>
 		),

From 72dd904eac566f8b301b2d631121285dcb34193c Mon Sep 17 00:00:00 2001
From: Paul Bunkham <paul@dobit.co.uk>
Date: Thu, 20 Feb 2020 06:27:42 +0000
Subject: [PATCH 2/2] Updated attribute name and swapped to using coalesce
 operator

---
 extensions/shared/components/block-styles-selector/index.js | 2 +-
 extensions/shared/wrap-paid-block.jsx                       | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/extensions/shared/components/block-styles-selector/index.js b/extensions/shared/components/block-styles-selector/index.js
index 1d44e3c9ffa2e..c1be47a0df001 100644
--- a/extensions/shared/components/block-styles-selector/index.js
+++ b/extensions/shared/components/block-styles-selector/index.js
@@ -18,7 +18,7 @@ const addPreviewAttribute = block => {
 		...block,
 		attributes: {
 			...block.attributes,
-			isBlockPreview: true,
+			__isBlockPreview: true,
 		},
 	};
 };
diff --git a/extensions/shared/wrap-paid-block.jsx b/extensions/shared/wrap-paid-block.jsx
index d055e8694b605..1a861821b42fd 100644
--- a/extensions/shared/wrap-paid-block.jsx
+++ b/extensions/shared/wrap-paid-block.jsx
@@ -3,7 +3,6 @@
  */
 import { Fragment } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -15,7 +14,7 @@ export default ( { requiredPlan } ) =>
 		WrappedComponent => props => (
 			// Wraps the input component in a container, without mutating it. Good!
 			<Fragment>
-				{ ! get( props, 'attributes.isBlockPreview', false ) && (
+				{ ( ! props?.attributes?.__isBlockPreview ?? false ) && (
 					<UpgradeNudge plan={ requiredPlan } blockName={ props.name } />
 				) }
 				<WrappedComponent { ...props } />