New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Product Editor Onboarding: Show spotlight for first time visitors #38590
Merged
Merged
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
f96a0df
Add placeholder TourKit in product-page
nathanss 736fa02
Create component and configure it to show to the right of wp menu
nathanss 666e040
Finish TourKit and start creating features guide
nathanss 5cb582e
Implement CSS changes and background color
nathanss e846b7e
Create Wrapper to facilitate showing the tour and guide without relyi…
nathanss dd2a62c
Refactor
nathanss 2c92b6a
Add changelog
nathanss 82d1bda
Fix lint problems
nathanss b0cfe61
Fix CSS
nathanss b4ea114
Refactor styles
nathanss 72f94e9
General refactor and extract BlockEditorGuide component
nathanss 7b7c846
Add changelog
nathanss ff032b3
Fix lint issues
nathanss File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
Significance: patch | ||
Type: tweak | ||
Comment: Allow passing react elements to heading in TourKit | ||
|
||
|
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
113 changes: 113 additions & 0 deletions
113
plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-guide.tsx
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,113 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
|
||
import { Guide } from '@wordpress/components'; | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import './style.scss'; | ||
|
||
interface Props { | ||
onCloseGuide: () => void; | ||
} | ||
|
||
const BlockEditorGuide = ( { onCloseGuide }: Props ) => { | ||
return ( | ||
<Guide | ||
className="woocommerce-block-editor-guide" | ||
finishButtonText={ __( 'Close', 'woocommerce' ) } | ||
onFinish={ onCloseGuide } | ||
pages={ [ | ||
{ | ||
content: ( | ||
<> | ||
<h1 className="woocommerce-block-editor-guide__heading"> | ||
{ __( | ||
'Refreshed, streamlined interface', | ||
'woocommerce' | ||
) } | ||
</h1> | ||
<p className="woocommerce-block-editor-guide__text"> | ||
{ __( | ||
'Experience a simpler, more focused interface with a modern design that enhances usability.', | ||
'woocommerce' | ||
) } | ||
</p> | ||
</> | ||
), | ||
image: ( | ||
<div className="woocommerce-block-editor-guide__background1"></div> | ||
), | ||
}, | ||
{ | ||
content: ( | ||
<> | ||
<h1 className="woocommerce-block-editor-guide__heading"> | ||
{ __( | ||
'Content-rich product descriptions', | ||
'woocommerce' | ||
) } | ||
</h1> | ||
<p className="woocommerce-block-editor-guide__text"> | ||
{ __( | ||
'Create compelling product pages with blocks, media, images, videos, and any content you desire to engage customers.', | ||
'woocommerce' | ||
) } | ||
</p> | ||
</> | ||
), | ||
image: ( | ||
<div className="woocommerce-block-editor-guide__background2"></div> | ||
), | ||
}, | ||
{ | ||
content: ( | ||
<> | ||
<h1 className="woocommerce-block-editor-guide__heading"> | ||
{ __( | ||
'Improved speed & performance', | ||
'woocommerce' | ||
) } | ||
</h1> | ||
<p className="woocommerce-block-editor-guide__text"> | ||
{ __( | ||
'Enjoy a seamless experience without page reloads. Our modern technology ensures reliability and lightning-fast performance.', | ||
'woocommerce' | ||
) } | ||
</p> | ||
</> | ||
), | ||
image: ( | ||
<div className="woocommerce-block-editor-guide__background3"></div> | ||
), | ||
}, | ||
{ | ||
content: ( | ||
<> | ||
<h1 className="woocommerce-block-editor-guide__heading"> | ||
{ __( | ||
'More features are on the way', | ||
'woocommerce' | ||
) } | ||
</h1> | ||
<p className="woocommerce-block-editor-guide__text"> | ||
{ __( | ||
'While we currently support physical products, exciting updates are coming to accommodate more types, like digital products, variations, and more. Stay tuned!', | ||
'woocommerce' | ||
) } | ||
</p> | ||
</> | ||
), | ||
image: ( | ||
<div className="woocommerce-block-editor-guide__background4"></div> | ||
), | ||
}, | ||
] } | ||
/> | ||
); | ||
}; | ||
|
||
export default BlockEditorGuide; |
12 changes: 12 additions & 0 deletions
12
plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour-wrapper.tsx
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,12 @@ | ||
/** | ||
* Internal dependencies | ||
*/ | ||
import BlockEditorTour from './block-editor-tour'; | ||
import { useBlockEditorTourOptions } from './use-block-editor-tour-options'; | ||
|
||
const BlockEditorTourWrapper = () => { | ||
const blockEditorTourProps = useBlockEditorTourOptions(); | ||
return <BlockEditorTour { ...blockEditorTourProps } />; | ||
}; | ||
|
||
export default BlockEditorTourWrapper; |
127 changes: 127 additions & 0 deletions
127
plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx
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,127 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { Pill, TourKit } from '@woocommerce/components'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { recordEvent } from '@woocommerce/tracks'; | ||
import { useEffect, useState } from '@wordpress/element'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
|
||
import './style.scss'; | ||
import BlockEditorGuide from './block-editor-guide'; | ||
|
||
interface Props { | ||
shouldTourBeShown: boolean; | ||
dismissModal: () => void; | ||
} | ||
|
||
const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => { | ||
useEffect( () => { | ||
if ( shouldTourBeShown ) { | ||
recordEvent( 'block_product_editor_spotlight_view' ); | ||
} | ||
}, [ shouldTourBeShown ] ); | ||
|
||
const [ isGuideOpen, setIsGuideOpen ] = useState( false ); | ||
|
||
const openGuide = () => { | ||
setIsGuideOpen( true ); | ||
}; | ||
|
||
const closeGuide = () => { | ||
recordEvent( 'block_product_editor_spotlight_completed' ); | ||
setIsGuideOpen( false ); | ||
}; | ||
|
||
if ( isGuideOpen ) { | ||
return <BlockEditorGuide onCloseGuide={ closeGuide } />; | ||
} else if ( shouldTourBeShown ) { | ||
return ( | ||
<TourKit | ||
config={ { | ||
steps: [ | ||
{ | ||
meta: { | ||
name: 'woocommerce-block-editor-tour', | ||
primaryButton: { | ||
text: __( | ||
'View highlights', | ||
'woocommerce' | ||
), | ||
}, | ||
descriptions: { | ||
desktop: __( | ||
"We designed a brand new product editing experience to let you focus on what's important.", | ||
'woocommerce' | ||
), | ||
}, | ||
heading: ( | ||
<> | ||
<span> | ||
{ __( | ||
'Meet a streamlined product form', | ||
'woocommerce' | ||
) } | ||
</span>{ ' ' } | ||
<Pill className="woocommerce-block-editor-guide__pill"> | ||
{ __( 'Beta', 'woocommerce' ) } | ||
</Pill> | ||
</> | ||
), | ||
}, | ||
referenceElements: { | ||
desktop: '#adminmenuback', | ||
}, | ||
}, | ||
], | ||
closeHandler: ( _steps, _currentStepIndex, source ) => { | ||
dismissModal(); | ||
if ( source === 'done-btn' ) { | ||
recordEvent( | ||
'block_product_editor_spotlight_view_highlights' | ||
); | ||
openGuide(); | ||
} else { | ||
recordEvent( | ||
'block_product_editor_spotlight_dismissed' | ||
); | ||
} | ||
}, | ||
options: { | ||
effects: { | ||
arrowIndicator: false, | ||
overlay: false, | ||
liveResize: { | ||
rootElementSelector: '#adminmenuback', | ||
resize: true, | ||
}, | ||
}, | ||
portalParentElement: | ||
document.getElementById( 'wpbody' ), | ||
popperModifiers: [ | ||
{ | ||
name: 'bottom-left', | ||
enabled: true, | ||
phase: 'beforeWrite', | ||
requires: [ 'computeStyles' ], | ||
fn: ( { state } ) => { | ||
state.styles.popper.top = 'auto'; | ||
state.styles.popper.left = 'auto'; | ||
state.styles.popper.bottom = '10px'; | ||
state.styles.popper.transform = | ||
'translate3d(10px, 0px, 0px)'; | ||
}, | ||
}, | ||
], | ||
}, | ||
} } | ||
/> | ||
); | ||
} | ||
return null; | ||
}; | ||
|
||
export default BlockEditorTour; |
58 changes: 58 additions & 0 deletions
58
plugins/woocommerce-admin/client/products/tour/block-editor/style.scss
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,58 @@ | ||
$background-height: 220px; | ||
$yellow: #f5e6ab; | ||
|
||
.woocommerce-block-editor-guide { | ||
&__background1 { | ||
height: $background-height; | ||
background-color: #f2edff; | ||
} | ||
&__background2 { | ||
height: $background-height; | ||
background-color: #dfd1fb; | ||
} | ||
&__background3 { | ||
height: $background-height; | ||
background-color: #cfb9f6; | ||
} | ||
&__background4 { | ||
height: $background-height; | ||
background-color: #bea0f2; | ||
} | ||
&__pill { | ||
border: 1px solid $yellow; | ||
background-color: $yellow; | ||
} | ||
&.components-modal__frame { | ||
max-width: 320px; | ||
} | ||
&__heading, | ||
&__text { | ||
margin: $gap-small $gap-large; | ||
} | ||
|
||
&__heading { | ||
font-size: 24px; | ||
line-height: 30px; | ||
} | ||
|
||
.components-guide { | ||
&__page-control { | ||
margin-top: $gap-small; | ||
} | ||
&__footer { | ||
width: unset; | ||
margin: $gap-large $gap-large; | ||
.components-guide__back-button { | ||
left: 0; | ||
padding: $gap-smaller $gap-small; | ||
} | ||
.components-guide__forward-button { | ||
right: 0; | ||
padding: $gap-smaller $gap-small; | ||
} | ||
.components-guide__finish-button { | ||
right: 0; | ||
} | ||
} | ||
} | ||
} |
37 changes: 37 additions & 0 deletions
37
plugins/woocommerce-admin/client/products/tour/block-editor/use-block-editor-tour-options.ts
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,37 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { OPTIONS_STORE_NAME } from '@woocommerce/data'; | ||
import { useSelect, useDispatch } from '@wordpress/data'; | ||
|
||
export const BLOCK_EDITOR_TOUR_SHOWN_OPTION = | ||
'woocommerce_block_product_tour_shown'; | ||
|
||
export const useBlockEditorTourOptions = () => { | ||
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME ); | ||
const { shouldTourBeShown } = useSelect( ( select ) => { | ||
const { getOption, hasFinishedResolution } = | ||
select( OPTIONS_STORE_NAME ); | ||
|
||
const wasTourShown = | ||
getOption( BLOCK_EDITOR_TOUR_SHOWN_OPTION ) === 'yes' || | ||
! hasFinishedResolution( 'getOption', [ | ||
BLOCK_EDITOR_TOUR_SHOWN_OPTION, | ||
] ); | ||
|
||
return { | ||
shouldTourBeShown: ! wasTourShown, | ||
}; | ||
} ); | ||
|
||
const dismissModal = () => { | ||
updateOptions( { | ||
[ BLOCK_EDITOR_TOUR_SHOWN_OPTION ]: 'yes', | ||
} ); | ||
}; | ||
|
||
return { | ||
dismissModal, | ||
shouldTourBeShown, | ||
}; | ||
}; |
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,4 @@ | ||
Significance: minor | ||
Type: add | ||
|
||
Show spotlight for first time visitors of block product editor |
Oops, something went wrong.
Oops, something went wrong.
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.
In the design the tourkit also includes a purple box at the top, is it possible to add this?
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.
For the background color in the TourKit, we would have to change the component to allow customizing the CardHeader, which is the part where the X button is, and where we would change the background color and increase its size.
Do you think I should implement this?
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.
Yeah, but you can do this as part of a follow up.