Use filter for withFeedbackPrompt

woocommerce · Dec 10, 2019 · 96bba02 · 96bba02
1 parent b88391a
commit 96bba02
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 34 deletions.
diff --git a/assets/js/blocks/cart-checkout/cart/block.js b/assets/js/blocks/cart-checkout/cart/block.js
@@ -6,7 +6,6 @@ import { BlockControls } from '@wordpress/block-editor';
 import { Toolbar } from '@wordpress/components';
 import { Fragment, useState } from '@wordpress/element';
 import TextToolbarButton from '@woocommerce/block-components/text-toolbar-button';
-import { withFeedbackPrompt } from '@woocommerce/block-hocs';
 
 /**
  * Internal dependencies
@@ -57,4 +56,4 @@ const Cart = () => {
 
 Cart.propTypes = {};
 
-export default withFeedbackPrompt( Cart );
+export default Cart;
diff --git a/assets/js/blocks/cart-checkout/cart/index.js b/assets/js/blocks/cart-checkout/cart/index.js
@@ -8,7 +8,7 @@ import { registerBlockType } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import Edit from './block';
+import Block from './block';
 import { example } from './example';
 
 /**
@@ -30,16 +30,12 @@ registerBlockType( 'woocommerce/cart', {
 	example,
 	attributes: {},
 
-	edit: ( props ) => (
-		<Edit
-			{ ...props }
-			feedbackPromptText={ __(
-				'We are currently working on improving our checkout and providing merchants with tools and options to customize their checkout to their stores needs.',
-				'woo-gutenberg-products-block'
-			) }
-			showFeedbackPrompt={ true }
-		/>
-	),
+	/**
+	 * Renders and manages the block.
+	 */
+	edit( props ) {
+		return <Block { ...props } />;
+	},
 
 	/**
 	 * Block content is rendered in PHP, not via save function.

diff --git a/assets/js/blocks/cart-checkout/checkout/edit.js b/assets/js/blocks/cart-checkout/checkout/edit.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { Disabled } from '@wordpress/components';
-import { withFeedbackPrompt } from '@woocommerce/block-hocs';
 
 /**
  * Internal dependencies
@@ -22,4 +21,4 @@ const Edit = ( { attributes } ) => {
 	);
 };
 
-export default withFeedbackPrompt( Edit );
+export default Edit;
diff --git a/assets/js/blocks/cart-checkout/checkout/index.js b/assets/js/blocks/cart-checkout/checkout/index.js
@@ -7,7 +7,7 @@ import { registerBlockType } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import Edit from './edit';
+import edit from './edit';
 import { example } from './example';
 import './editor.scss';
 
@@ -36,16 +36,7 @@ registerBlockType( 'woocommerce/checkout', {
 			default: false,
 		},
 	},
-	edit: ( props ) => (
-		<Edit
-			{ ...props }
-			feedbackPromptText={ __(
-				'We are currently working on improving our checkout and providing merchants with tools and options to customize their checkout to their stores needs.',
-				'woo-gutenberg-products-block'
-			) }
-			showFeedbackPrompt={ true }
-		/>
-	),
+	edit,
 	/**
 	 * Save the props to post content.
 	 */

diff --git a/assets/js/hocs/index.js b/assets/js/hocs/index.js
@@ -1,4 +1,3 @@
-export { default as withFeedbackPrompt } from './with-feedback-prompt';
 export { default as withAttributes } from './with-attributes';
 export { default as withCategories } from './with-categories';
 export { default as withCategory } from './with-category';

diff --git a/assets/js/hocs/with-feedback-prompt/index.js b/assets/js/hocs/with-feedback-prompt/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { InspectorControls } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -10,6 +11,17 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  */
 import FeedbackPrompt from './feedback-prompt.js';
 
+const blocksFeedback = {
+	'woocommerce/cart': __(
+		'We are currently working on improving our checkout and providing merchants with tools and options to customize their checkout to their stores needs.',
+		'woo-gutenberg-products-block'
+	),
+	'woocommerce/checkout': __(
+		'We are currently working on improving our checkout and providing merchants with tools and options to customize their checkout to their stores needs.',
+		'woo-gutenberg-products-block'
+	),
+};
+
 /**
  * Adds a feedback prompt to the editor sidebar.
  *
@@ -19,16 +31,12 @@ import FeedbackPrompt from './feedback-prompt.js';
  */
 const withFeedbackPrompt = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
-		const {
-			feedbackPromptText,
-			showFeedbackPrompt,
-			...blockEditProps
-		} = props;
+		const feedbackPromptText = blocksFeedback[ props.name ];
 
-		if ( showFeedbackPrompt ) {
+		if ( feedbackPromptText && props.isSelected ) {
 			return (
 				<Fragment>
-					<BlockEdit { ...blockEditProps } />
+					<BlockEdit { ...props } />
 					<InspectorControls>
 						<FeedbackPrompt text={ feedbackPromptText } />
 					</InspectorControls>

diff --git a/assets/js/index.js b/assets/js/index.js
@@ -3,6 +3,8 @@
  */
 import { getCategories, setCategories } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { addFilter } from '@wordpress/hooks';
+import { withFeedbackPrompt } from '@woocommerce/block-hocs';
 
 /**
  * Internal dependencies
@@ -20,3 +22,9 @@ setCategories( [
 		icon: <IconWoo />,
 	},
 ] );
+
+addFilter(
+	'editor.BlockEdit',
+	'woocommerce/blocks/with-feedback-prompt',
+	withFeedbackPrompt
+);