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

extensions/shared/components/block-styles-selector/index.js

@@ -13,21 +13,31 @@ 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 );
 
 	return (
 		<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>
 	);

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
 			];

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>
 		),