From ef97833724912a78d17d9f5b0cf094c50a582259 Mon Sep 17 00:00:00 2001
From: Paul Bunkham <paul@dobit.co.uk>
Date: Thu, 20 Feb 2020 17:24:38 +0000
Subject: [PATCH] Block Style Previews: Fix block style previews with an
 upgrade nudge (#14730)

* 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`.

* Updated attribute name and swapped to using coalesce operator
---
 .../components/block-styles-selector/index.js    | 16 +++++++++++++---
 extensions/shared/get-validated-attributes.js    |  3 +++
 extensions/shared/wrap-paid-block.jsx            |  4 +++-
 3 files changed, 19 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..c1be47a0df001 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..1a861821b42fd 100644
--- a/extensions/shared/wrap-paid-block.jsx
+++ b/extensions/shared/wrap-paid-block.jsx
@@ -14,7 +14,9 @@ export default ( { requiredPlan } ) =>
 		WrappedComponent => props => (
 			// Wraps the input component in a container, without mutating it. Good!
 			<Fragment>
-				<UpgradeNudge plan={ requiredPlan } blockName={ props.name } />
+				{ ( ! props?.attributes?.__isBlockPreview ?? false ) && (
+					<UpgradeNudge plan={ requiredPlan } blockName={ props.name } />
+				) }
 				<WrappedComponent { ...props } />
 			</Fragment>
 		),