This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 219
Add Feedback Prompt in Cart & Checkout blocks sidebar #1356
Merged
Merged
Changes from 11 commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
883fdfc
Add Feedback Prompt in Cart & Checkout blocks sidebar
Aljullu 496290f
Add border
Aljullu c49d423
Move getInspectorControls out of the component function
Aljullu 718d3f2
Move feedback prompt to a HOC
Aljullu b88391a
Add @todo comment to feedback link
Aljullu 96bba02
Use filter for withFeedbackPrompt
Aljullu 2fbc088
Merge branch 'master' into add/1300-feedback-prompt
Aljullu 3bd62dd
Export withFeedbackPrompt from hocs index.js
Aljullu 880ccb4
Typo
Aljullu 21f889b
Try moving the feedback texts to context
Aljullu 77f73c7
Revert "Try moving the feedback texts to context"
Aljullu 2d9a36d
Revert "Use filter for withFeedbackPrompt"
Aljullu 80f0c88
Set feedback text in the HOC function
Aljullu 60107d1
Merge branch 'master' into add/1300-feedback-prompt
Aljullu 65cd192
Use arrow-function to simplify code
Aljullu d016e8f
Refactor
Aljullu File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import PropTypes from 'prop-types'; | ||
import Gridicon from 'gridicons'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import './style.scss'; | ||
|
||
/** | ||
* Component to render a Feedback prompt in the sidebar. | ||
*/ | ||
const FeedbackPrompt = ( { text } ) => { | ||
return ( | ||
<div className="wc-block-feedback-prompt"> | ||
<Gridicon icon="comment" /> | ||
<h2 className="wc-block-feedback-prompt__title"> | ||
{ __( 'Feedback?', 'woo-gutenberg-products-block' ) } | ||
</h2> | ||
<p className="wc-block-feedback-prompt__text">{ text }</p> | ||
<a | ||
// @todo Update the link to a page to gather feedback. | ||
href="https://wordpress.org/support/plugin/woo-gutenberg-products-block/reviews/" | ||
className="wc-block-feedback-prompt__link" | ||
rel="noreferrer noopener" | ||
target="_blank" | ||
> | ||
{ __( | ||
'Give us your feedback.', | ||
'woo-gutenberg-products-block' | ||
) } | ||
<Gridicon icon="external" size={ 16 } /> | ||
</a> | ||
</div> | ||
); | ||
}; | ||
|
||
FeedbackPrompt.propTypes = { | ||
text: PropTypes.string, | ||
}; | ||
|
||
export default FeedbackPrompt; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { Fragment } from '@wordpress/element'; | ||
import { InspectorControls } from '@wordpress/block-editor'; | ||
import { createHigherOrderComponent } from '@wordpress/compose'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
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. | ||
* | ||
* @param {WPComponent} BlockEdit Original component. | ||
* | ||
* @return {WPComponent} Wrapped component. | ||
*/ | ||
const withFeedbackPrompt = createHigherOrderComponent( ( BlockEdit ) => { | ||
return ( props ) => { | ||
const feedbackPromptText = blocksFeedback[ props.name ]; | ||
|
||
if ( feedbackPromptText && props.isSelected ) { | ||
return ( | ||
<Fragment> | ||
<BlockEdit { ...props } /> | ||
<InspectorControls> | ||
<FeedbackPrompt text={ feedbackPromptText } /> | ||
</InspectorControls> | ||
</Fragment> | ||
); | ||
} | ||
|
||
return <BlockEdit { ...props } />; | ||
}; | ||
}, 'withFeedbackPrompt' ); | ||
|
||
export default withFeedbackPrompt; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
.wc-block-feedback-prompt { | ||
background-color: #f7f7f7; | ||
border-top: 1px solid #e2e4e7; | ||
margin: $gap -16px -16px; | ||
padding: $gap-large; | ||
text-align: center; | ||
|
||
.wc-block-feedback-prompt__title { | ||
margin: 0 0 $gap-small; | ||
} | ||
|
||
.wc-block-feedback-prompt__link { | ||
color: inherit; | ||
|
||
> .gridicon { | ||
vertical-align: text-bottom; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a neat approach and I ❤️ what you've done here with the HOC and how it's implemented using the filter. The only thing I'm wary about is having all the customization for feedback prompt in this one file (which is right now just content). It'd be more discoverable and easier to work with if individual blocks defined their specific elements. What about one of these options?
Option 1: specific named props for feedback prompt content and link.
In this option, edit components for blocks would be fed specific props that get picked up automatically by this HOC. They'd need to be namespaced appropriately.
wcFeedbackContent
: For the custom content.wcFeedbackUrl
: For the url where people submit their feedback.Option 2: use React.Context
This would be similar to option 2 but would utilize react context instead and the
withFeedbackPrompt
hoc would just read the values from the context. Edit blocks would then just explicitly wrap anything receiving feedback with the feedback prompt provider:edit
withFeedbackPrompt:
On the surface it seems like the context would be a bit more work, but the advantage is that the
EditComponent
or anything else in its composition doesn't have to care or worry about passing through any of the props and I like the explicitness in using the provider which makes it clear that this is a component with a feedback element. I wonder if the Provider itself could take care of adding theeditor.BlockEdit
filter so everything is contained?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was playing with this idea but I'm not sure it's possible. The
editor.BlockEdit
is applied on an upper level than the blockedit
function is called, so wrapping the<Edit>
block with a context provider, doesn't make that context available when calling theeditor.BlockEdit
filter.I pushed a WIP for the checkout block here: 21f889b. Something similar would happen with props (option 1): props passed in the block
edit
function are not available in theeditor.BlockEdit
.Please, let me know if I'm missing something!
To solve the issue you raised:
If the options above don't work, I thought about some alternative solutions:
edit
function.blockFeedbackRegistry
similar to theblocksRegistry
we currently have in place. That would allow us to call aregisterBlockFeedback()
function right afterregisterBlockType()
and have access to theblockFeedbackRegistry
inside theeditor.BlockEdit
filter.Thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ya you're right the suggestions I have won't work because of how the filter implements the component outside the tree (illustrating one of the flaws of filters!).
I like the
blockFeedbackRegistry
idea, but I wonder how discoverable that api is, plus it'd be nice to avoid the filter because it feels fragile. Also the filter callback (the HOC) will get invoked for every block.So I like the direction you are going with the hoc, but we could still use the context and have the hoc read from the context. That way we're not polluting the props unnecessarily for the block and can control where the feedback prompt appears in the inspector controls via the hoc:
withFeedbackPrompt
:Then wrap the
Edit
component for the block inwithFeedbackPrompt
.Then in the block registration you could have something like this:
Alternatively, you could just curry the
withFeedbackPrompt
hoc so it receives the content and url in the curried function returning the HOC itself. So your implementation inedit
would be something like:I'd be happy with either alternative but I think the currying is probably the most straightforward (and less code). Context feels like it may be overkill?