Update product editor tour design (#38726)
This commit is contained in:
Matt Sherman
GitHub
parent
e50fb51b26
commit
9d7b68b82c
|
|
@ -10,11 +10,95 @@ import { __ } from '@wordpress/i18n';
|
||||||
import Guide from '../components/guide';
|
import Guide from '../components/guide';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
interface Props {
|
const PageContent = ( {
|
||||||
|
page,
|
||||||
|
}: {
|
||||||
|
page: {
|
||||||
|
heading: string;
|
||||||
|
text: string;
|
||||||
|
};
|
||||||
|
} ) => (
|
||||||
|
<>
|
||||||
|
<h1 className="woocommerce-block-editor-guide__heading">
|
||||||
|
{ page.heading }
|
||||||
|
</h1>
|
||||||
|
<p className="woocommerce-block-editor-guide__text">{ page.text }</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
const PageImage = ( {
|
||||||
|
page,
|
||||||
|
}: {
|
||||||
|
page: {
|
||||||
|
index: number;
|
||||||
|
};
|
||||||
|
} ) => (
|
||||||
|
<div
|
||||||
|
className={ `woocommerce-block-editor-guide__header woocommerce-block-editor-guide__header-${
|
||||||
|
page.index + 1
|
||||||
|
}` }
|
||||||
|
></div>
|
||||||
|
);
|
||||||
|
|
||||||
|
interface BlockEditorGuideProps {
|
||||||
|
isNewUser: boolean;
|
||||||
onCloseGuide: ( currentPage: number, origin: 'close' | 'finish' ) => void;
|
onCloseGuide: ( currentPage: number, origin: 'close' | 'finish' ) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const BlockEditorGuide = ( { onCloseGuide }: Props ) => {
|
const BlockEditorGuide = ( {
|
||||||
|
isNewUser,
|
||||||
|
onCloseGuide,
|
||||||
|
}: BlockEditorGuideProps ) => {
|
||||||
|
const pagesConfig = [
|
||||||
|
{
|
||||||
|
heading: isNewUser
|
||||||
|
? __( 'Fresh and modern interface', 'woocommerce' )
|
||||||
|
: __( 'Refreshed, streamlined interface', 'woocommerce' ),
|
||||||
|
text: isNewUser
|
||||||
|
? __(
|
||||||
|
'Using the product form means less clicking around. Product details are neatly grouped by tabs, so you always know where to go.',
|
||||||
|
'woocommerce'
|
||||||
|
)
|
||||||
|
: __(
|
||||||
|
'Experience a simpler, more focused interface with a modern design that enhances usability.',
|
||||||
|
'woocommerce'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: __( 'Content-rich product descriptions', 'woocommerce' ),
|
||||||
|
text: __(
|
||||||
|
'Create compelling product pages with blocks, media, images, videos, and any content you desire to engage customers.',
|
||||||
|
'woocommerce'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: isNewUser
|
||||||
|
? __( 'Speed & performance', 'woocommerce' )
|
||||||
|
: __( 'Improved speed & performance', 'woocommerce' ),
|
||||||
|
text: isNewUser
|
||||||
|
? __(
|
||||||
|
'Create a product from start to finish without page reloads. Our modern technology ensures reliability and lightning-fast performance.',
|
||||||
|
'woocommerce'
|
||||||
|
)
|
||||||
|
: __(
|
||||||
|
'Enjoy a seamless experience without page reloads. Our modern technology ensures reliability and lightning-fast performance.',
|
||||||
|
'woocommerce'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: __( 'More features are on the way', 'woocommerce' ),
|
||||||
|
text: __(
|
||||||
|
'While we currently support physical products, exciting updates are coming to accommodate more types, like digital products, variations, and more. Stay tuned!',
|
||||||
|
'woocommerce'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const pages = pagesConfig.map( ( page, index ) => ( {
|
||||||
|
content: <PageContent page={ page } />,
|
||||||
|
image: <PageImage page={ { ...page, index } } />,
|
||||||
|
} ) );
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Guide
|
<Guide
|
||||||
className="woocommerce-block-editor-guide"
|
className="woocommerce-block-editor-guide"
|
||||||
|
|
@ -22,92 +106,7 @@ const BlockEditorGuide = ( { onCloseGuide }: Props ) => {
|
||||||
finishButtonText={ __( 'Tell me more', 'woocommerce' ) }
|
finishButtonText={ __( 'Tell me more', 'woocommerce' ) }
|
||||||
finishButtonLink="https://woocommerce.com/product-form-beta"
|
finishButtonLink="https://woocommerce.com/product-form-beta"
|
||||||
onFinish={ onCloseGuide }
|
onFinish={ onCloseGuide }
|
||||||
pages={ [
|
pages={ 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>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
] }
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { Pill, TourKit } from '@woocommerce/components';
|
import { useSelect } from '@wordpress/data';
|
||||||
import { __ } from '@wordpress/i18n';
|
|
||||||
import { recordEvent } from '@woocommerce/tracks';
|
|
||||||
import { useEffect, useState } from '@wordpress/element';
|
import { useEffect, useState } from '@wordpress/element';
|
||||||
|
import { __ } from '@wordpress/i18n';
|
||||||
|
import { Pill, TourKit } from '@woocommerce/components';
|
||||||
|
import { PRODUCTS_STORE_NAME } from '@woocommerce/data';
|
||||||
import { __experimentalUseFeedbackBar as useFeedbackBar } from '@woocommerce/product-editor';
|
import { __experimentalUseFeedbackBar as useFeedbackBar } from '@woocommerce/product-editor';
|
||||||
|
import { recordEvent } from '@woocommerce/tracks';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
|
|
@ -19,7 +21,30 @@ interface Props {
|
||||||
dismissModal: () => void;
|
dismissModal: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const PUBLISHED_PRODUCTS_QUERY_PARAMS = {
|
||||||
|
status: 'publish',
|
||||||
|
_fields: [ 'id' ],
|
||||||
|
};
|
||||||
|
|
||||||
const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => {
|
const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => {
|
||||||
|
const { publishedProductsCount, loadingPublishedProductsCount } = useSelect(
|
||||||
|
( select ) => {
|
||||||
|
const { getProductsTotalCount, hasFinishedResolution } =
|
||||||
|
select( PRODUCTS_STORE_NAME );
|
||||||
|
|
||||||
|
return {
|
||||||
|
publishedProductsCount: getProductsTotalCount(
|
||||||
|
PUBLISHED_PRODUCTS_QUERY_PARAMS,
|
||||||
|
0
|
||||||
|
),
|
||||||
|
loadingPublishedProductsCount: ! hasFinishedResolution(
|
||||||
|
'getProductsTotalCount',
|
||||||
|
[ PUBLISHED_PRODUCTS_QUERY_PARAMS, 0 ]
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
useEffect( () => {
|
useEffect( () => {
|
||||||
if ( shouldTourBeShown ) {
|
if ( shouldTourBeShown ) {
|
||||||
recordEvent( 'block_product_editor_spotlight_view' );
|
recordEvent( 'block_product_editor_spotlight_view' );
|
||||||
|
|
@ -30,13 +55,38 @@ const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => {
|
||||||
|
|
||||||
const { maybeShowFeedbackBar } = useFeedbackBar();
|
const { maybeShowFeedbackBar } = useFeedbackBar();
|
||||||
|
|
||||||
|
// we consider a user new if they have no published products
|
||||||
|
const isNewUser = publishedProductsCount < 1;
|
||||||
|
|
||||||
const openGuide = () => {
|
const openGuide = () => {
|
||||||
setIsGuideOpen( true );
|
setIsGuideOpen( true );
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getTourText = () => {
|
||||||
|
return {
|
||||||
|
heading: isNewUser
|
||||||
|
? __( 'Meet the product editing form', 'woocommerce' )
|
||||||
|
: __( 'A new way to edit your products', 'woocommerce' ),
|
||||||
|
description: isNewUser
|
||||||
|
? __(
|
||||||
|
"Discover the form's unique features designed to help you make this product stand out.",
|
||||||
|
'woocommerce'
|
||||||
|
)
|
||||||
|
: __(
|
||||||
|
'Introducing the upgraded experience designed to help you create and edit products easier.',
|
||||||
|
'woocommerce'
|
||||||
|
),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( loadingPublishedProductsCount ) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
if ( isGuideOpen ) {
|
if ( isGuideOpen ) {
|
||||||
return (
|
return (
|
||||||
<BlockEditorGuide
|
<BlockEditorGuide
|
||||||
|
isNewUser={ isNewUser }
|
||||||
onCloseGuide={ ( currentPage, source ) => {
|
onCloseGuide={ ( currentPage, source ) => {
|
||||||
dismissModal();
|
dismissModal();
|
||||||
if ( source === 'finish' ) {
|
if ( source === 'finish' ) {
|
||||||
|
|
@ -58,6 +108,8 @@ const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => {
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else if ( shouldTourBeShown ) {
|
} else if ( shouldTourBeShown ) {
|
||||||
|
const { heading, description } = getTourText();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TourKit
|
<TourKit
|
||||||
config={ {
|
config={ {
|
||||||
|
|
@ -72,20 +124,12 @@ const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => {
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
descriptions: {
|
descriptions: {
|
||||||
desktop: __(
|
desktop: description,
|
||||||
"We designed a brand new product editing experience to let you focus on what's important.",
|
|
||||||
'woocommerce'
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
heading: (
|
heading: (
|
||||||
<>
|
<>
|
||||||
<span>
|
<span>{ heading }</span>
|
||||||
{ __(
|
<Pill>
|
||||||
'Meet a streamlined product form',
|
|
||||||
'woocommerce'
|
|
||||||
) }
|
|
||||||
</span>{ ' ' }
|
|
||||||
<Pill className="woocommerce-block-editor-guide__pill">
|
|
||||||
{ __( 'Beta', 'woocommerce' ) }
|
{ __( 'Beta', 'woocommerce' ) }
|
||||||
</Pill>
|
</Pill>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<svg width="312" height="222" viewBox="0 0 312 222" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="312" height="222" fill="#F6F7F7"/>
|
||||||
|
<path d="M87.6168 96L92 96L92 135L92 174L87.6168 174C87.6168 156.805 82.1737 139.763 77.5075 139.763C66.1856 139.763 60.3578 146.362 52.0988 146.362C47.2305 146.362 40 144.478 40 135C40 125.527 47.2305 123.638 52.0988 123.638C60.3578 123.638 66.1856 130.237 77.5075 130.237C82.1737 130.237 87.6168 113.195 87.6168 96ZM45.7754 135C45.7754 137.175 47.5763 138.94 49.7949 138.94C52.0135 138.94 53.8144 137.175 53.8144 135C53.8144 132.825 52.0135 131.06 49.7949 131.06C47.5763 131.06 45.7754 132.825 45.7754 135Z" fill="#FF6BBB"/>
|
||||||
|
<path d="M91.8418 96L174.842 96L174.842 135L174.842 174L91.8418 174L91.8418 96Z" fill="#966CCF"/>
|
||||||
|
<g style="mix-blend-mode:soft-light">
|
||||||
|
<path d="M175 174L153.339 174C128.943 171.352 104 165.176 104 157.441C104 145.4 131.103 147.776 131.103 139.435C131.103 131.093 117.909 135.078 117.909 125.438C117.909 115.797 152.495 113 174.984 113L174.984 174L175 174Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<rect x="193" y="49" width="51" height="51" rx="25.5" fill="#FFC350"/>
|
||||||
|
<rect x="193" y="49" width="51" height="51" rx="25.5" fill="url(#paint0_linear_1997_17544)"/>
|
||||||
|
<path d="M219.619 84.0169L217.458 78.7849H206.589L204.428 84.0169H203.348L211.471 64.5217H212.58L220.703 84.0169H219.622H219.619ZM212.024 65.6027L206.938 77.9082H217.106L212.02 65.6027H212.024Z" fill="white"/>
|
||||||
|
<path d="M232.944 84.0169V82.2918C231.627 83.7247 230.051 84.3657 228.065 84.3657C225.581 84.3657 223.127 82.6688 223.127 79.6585C223.127 76.6481 225.552 74.9512 228.065 74.9512C230.054 74.9512 231.631 75.5954 232.944 77.0252V73.8388C232.944 71.5575 231.131 70.3319 228.97 70.3319C227.129 70.3319 225.757 70.9761 224.44 72.5536L223.768 71.9691C225.141 70.3602 226.602 69.5432 228.97 69.5432C231.747 69.5432 233.82 70.9478 233.82 73.8105V84.0106H232.944V84.0169ZM232.944 81.415V77.9082C231.863 76.4753 230.139 75.7462 228.298 75.7462C225.725 75.7462 224.092 77.4714 224.092 79.6616C224.092 81.8518 225.728 83.577 228.298 83.577C230.139 83.577 231.863 82.848 232.944 81.415Z" fill="white"/>
|
||||||
|
<g style="mix-blend-mode:multiply">
|
||||||
|
<rect x="92" y="49" width="83" height="28" rx="14" fill="#007CBA"/>
|
||||||
|
<rect x="92" y="49" width="83" height="28" rx="14" fill="url(#paint1_linear_1997_17544)" fill-opacity="0.4"/>
|
||||||
|
<path d="M160.655 70.3093C164.882 70.3093 168.309 66.8822 168.309 62.6547C168.309 58.4271 164.882 55 160.655 55C156.427 55 153 58.4271 153 62.6547C153 66.8822 156.427 70.3093 160.655 70.3093Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="218" cy="167" r="6.44257" transform="rotate(-90 218 167)" stroke="#BBBBBB" stroke-width="1.11486"/>
|
||||||
|
<circle cx="218" cy="121" r="6.44257" transform="rotate(-90 218 121)" stroke="#BBBBBB" stroke-width="1.11486"/>
|
||||||
|
<ellipse cx="218" cy="144" rx="7" ry="7" transform="rotate(-90 218 144)" fill="#007CBA"/>
|
||||||
|
<circle cx="218" cy="144" r="10.4426" transform="rotate(-90 218 144)" stroke="#BBBBBB" stroke-width="1.11486"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1997_17544" x1="207.845" y1="52.0186" x2="224.58" y2="97.7763" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#FBA500"/>
|
||||||
|
<stop offset="1" stop-color="#FBA500" stop-opacity="0"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_1997_17544" x1="94" y1="55" x2="116.529" y2="74.1452" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#2508D3"/>
|
||||||
|
<stop offset="1" stop-color="#2508D3" stop-opacity="0"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,69 @@
|
||||||
|
<svg width="381" height="194" viewBox="0 0 381 194" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1865_198367)">
|
||||||
|
<rect width="381" height="194.31" fill="#D4AAF6"/>
|
||||||
|
<g clip-path="url(#clip1_1865_198367)">
|
||||||
|
<rect width="272.832" height="167.123" transform="translate(54.576 27.3745)" fill="white"/>
|
||||||
|
<g clip-path="url(#clip2_1865_198367)">
|
||||||
|
<rect x="128.162" y="113.562" width="51.2842" height="5.92333" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect x="128.417" y="89.7881" width="74.9435" height="3.59011" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect x="142.521" y="123.863" width="35.2835" height="3.38476" rx="1.69238" fill="#E0E0E0"/>
|
||||||
|
<rect x="128.417" y="96.0708" width="94.2403" height="3.59011" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect x="142.521" y="131.459" width="44.3096" height="3.38476" rx="1.69238" fill="#E0E0E0"/>
|
||||||
|
<rect x="128.417" y="102.354" width="33.2085" height="3.59011" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect x="142.521" y="139.055" width="35.2835" height="3.38476" rx="1.69238" fill="#E0E0E0"/>
|
||||||
|
<ellipse cx="136.506" cy="125.662" rx="1.35834" ry="1.39935" fill="#007CBA"/>
|
||||||
|
<rect x="128.412" y="122.913" width="10.7545" height="5.49692" rx="2.74846" stroke="#BBBBBB" stroke-width="0.500309"/>
|
||||||
|
<ellipse cx="131.46" cy="133.258" rx="1.35834" ry="1.39935" fill="#CCCCCC"/>
|
||||||
|
<rect x="128.412" y="130.51" width="10.7545" height="5.49692" rx="2.74846" stroke="#BBBBBB" stroke-width="0.500309"/>
|
||||||
|
<ellipse cx="136.506" cy="140.855" rx="1.35834" ry="1.39935" fill="#007CBA"/>
|
||||||
|
<rect x="128.412" y="138.106" width="10.7545" height="5.49691" rx="2.74846" stroke="#BBBBBB" stroke-width="0.500309"/>
|
||||||
|
</g>
|
||||||
|
<rect x="128.048" y="74.2329" width="51.2842" height="5.92333" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<g clip-path="url(#clip3_1865_198367)">
|
||||||
|
<rect x="128.347" y="155.979" width="37.2573" height="14.7931" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect opacity="0.6" x="169.097" y="155.979" width="37.2573" height="14.7931" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect opacity="0.6" x="209.847" y="155.979" width="37.2573" height="14.7931" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect x="128.414" y="177.969" width="51.2842" height="5.92333" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect x="128.414" y="188.124" width="35.2835" height="3.38476" rx="1.69238" fill="#E0E0E0"/>
|
||||||
|
</g>
|
||||||
|
<g clip-path="url(#clip4_1865_198367)">
|
||||||
|
<mask id="path-20-inside-1_1865_198367" fill="white">
|
||||||
|
<path d="M54.3712 27.113H327.668V57.1802H54.3712V27.113Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M54.3712 27.113H327.668V57.1802H54.3712V27.113Z" fill="white"/>
|
||||||
|
<rect x="160.123" y="34.312" width="60.9476" height="4.65829" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect x="288.488" y="31.7712" width="33.3761" height="9.74006" rx="1.79505" fill="#007CBA"/>
|
||||||
|
<rect x="258.981" y="34.312" width="24.6693" height="4.65829" rx="1.79505" fill="#E0E0E0"/>
|
||||||
|
<rect x="125.732" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
|
||||||
|
<rect x="125.732" y="55.6106" width="21.2833" height="1.69392" fill="#007CBA"/>
|
||||||
|
<rect x="179.908" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
|
||||||
|
<rect x="152.82" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
|
||||||
|
<rect x="206.996" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
|
||||||
|
<rect x="234.083" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
|
||||||
|
<rect width="17.9505" height="17.9505" transform="translate(54.127 26.9258)" fill="#23282D"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M67.6536 35.7083C67.6536 33.0946 65.5234 30.9648 62.9093 30.9648C60.2904 30.9648 58.1649 33.0946 58.1649 35.7083C58.1649 38.3266 60.2904 40.4517 62.9093 40.4517C65.5234 40.4517 67.6536 38.3266 67.6536 35.7083ZM61.8561 38.2555L60.2382 33.9153C60.4992 33.9058 60.7933 33.8773 60.7933 33.8773C61.0305 33.8489 61.0021 33.3413 60.7649 33.3508C60.7649 33.3508 60.0769 33.403 59.6404 33.403C59.555 33.403 59.4649 33.403 59.3653 33.3983C60.1196 32.2409 61.4243 31.4914 62.9093 31.4914C64.0147 31.4914 65.0205 31.9041 65.7796 32.6014C65.457 32.5492 64.9968 32.7864 64.9968 33.3508C64.9968 33.6582 65.1605 33.9219 65.3446 34.2184L65.3446 34.2184L65.3446 34.2184C65.3707 34.2605 65.3973 34.3033 65.4238 34.3469C65.5899 34.6363 65.6847 34.992 65.6847 35.5138C65.6847 36.2206 65.0205 37.8855 65.0205 37.8855L63.583 33.9153C63.8392 33.9058 63.972 33.8346 63.972 33.8346C64.2092 33.8109 64.1808 33.2417 63.9436 33.256C63.9436 33.256 63.2604 33.3129 62.8144 33.3129C62.4017 33.3129 61.709 33.256 61.709 33.256C61.4718 33.2417 61.4433 33.8252 61.6805 33.8346L62.117 33.8726L62.7148 35.4901L61.8561 38.2555ZM66.4354 35.6807L66.425 35.7082C66.0812 36.6132 65.74 37.5259 65.3995 38.4368C65.2795 38.7578 65.1596 39.0785 65.0397 39.3986C66.3064 38.6681 67.1272 37.2688 67.1272 35.7082C67.1272 34.9777 66.9611 34.3042 66.629 33.6923C66.7718 34.7879 66.5525 35.3698 66.4354 35.6807ZM61.0591 39.5457C59.6453 38.8627 58.6917 37.3827 58.6917 35.7083C58.6917 35.0916 58.8008 34.5319 59.0333 34.0054L59.4596 35.1735C59.9914 36.6307 60.5238 38.0897 61.0591 39.5457ZM64.1951 39.7118L62.9711 36.4008C62.7456 37.066 62.5184 37.7312 62.2905 38.3983C62.1349 38.8539 61.9789 39.3105 61.823 39.7687C62.1645 39.873 62.5346 39.9252 62.9094 39.9252C63.3601 39.9252 63.7871 39.8493 64.1951 39.7118Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<path d="M327.668 56.507H54.3712V57.8533H327.668V56.507Z" fill="#F0F0F0" mask="url(#path-20-inside-1_1865_198367)"/>
|
||||||
|
</g>
|
||||||
|
<path d="M335.943 125.677C340.391 121.466 339.702 105.926 339.702 104.113H340.487C340.487 105.926 339.801 121.466 344.246 125.677C347.527 128.784 349.836 129.969 363.309 129.969V130.678C349.836 130.678 347.527 131.863 344.246 134.97C339.797 139.182 340.487 154.721 340.487 156.534H339.702C339.702 154.721 340.388 139.182 335.943 134.97C332.661 131.863 330.352 130.678 316.879 130.678V129.969C330.352 129.969 332.661 128.784 335.943 125.677Z" fill="#F4C759"/>
|
||||||
|
<path opacity="0.5" d="M296.273 118.445C298.179 116.642 297.884 109.99 297.884 109.213H298.22C298.22 109.99 297.926 116.642 299.831 118.445C301.236 119.775 302.226 120.283 307.998 120.283V120.586C302.226 120.586 301.236 121.093 299.831 122.424C297.925 124.226 298.22 130.879 298.22 131.655H297.884C297.884 130.879 298.178 124.226 296.273 122.424C294.867 121.093 293.878 120.586 288.106 120.586V120.283C293.878 120.283 294.867 119.775 296.273 118.445Z" fill="#F4C759"/>
|
||||||
|
<path opacity="0.7" d="M304.496 158.655C306.927 156.353 306.55 147.862 306.55 146.871H306.979C306.979 147.862 306.604 156.353 309.033 158.655C310.826 160.353 312.088 161 319.45 161V161.387C312.088 161.387 310.826 162.035 309.033 163.733C306.602 166.034 306.979 174.526 306.979 175.516H306.55C306.55 174.526 306.925 166.034 304.496 163.733C302.703 162.035 301.441 161.387 294.079 161.387V161C301.441 161 302.703 160.353 304.496 158.655Z" fill="#F4C759"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1865_198367">
|
||||||
|
<rect width="381" height="194.31" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip1_1865_198367">
|
||||||
|
<rect width="272.832" height="167.123" fill="white" transform="translate(54.576 27.3745)"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip2_1865_198367">
|
||||||
|
<rect width="126.102" height="61.4806" fill="white" transform="translate(127.968 89.7881)"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip3_1865_198367">
|
||||||
|
<rect width="119.371" height="48.9152" fill="white" transform="translate(128.173 155.721)"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip4_1865_198367">
|
||||||
|
<path d="M54.3712 27.113H327.668V57.1802H54.3712V27.113Z" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -1,30 +1,29 @@
|
||||||
$background-height: 220px;
|
|
||||||
$yellow: #f5e6ab;
|
|
||||||
$light-purple: #f2edff;
|
|
||||||
|
|
||||||
.woocommerce-block-editor-guide {
|
.woocommerce-block-editor-guide {
|
||||||
&__background1 {
|
&__header {
|
||||||
height: $background-height;
|
width: 312px;
|
||||||
background-color: $light-purple;
|
height: 222px;
|
||||||
|
background-color: #f6f7f7; /* WP Gray 0; no var available */
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
&-1 {
|
||||||
|
background-image: url(./images/guide-1.svg);
|
||||||
}
|
}
|
||||||
&__background2 {
|
|
||||||
height: $background-height;
|
&-2 {
|
||||||
background-color: #dfd1fb;
|
background-image: url(./images/guide-2.png);
|
||||||
}
|
}
|
||||||
&__background3 {
|
|
||||||
height: $background-height;
|
&-3 {
|
||||||
background-color: #cfb9f6;
|
background-image: url(./images/guide-3.png);
|
||||||
}
|
}
|
||||||
&__background4 {
|
|
||||||
height: $background-height;
|
&-4 {
|
||||||
background-color: #bea0f2;
|
background-image: url(./images/guide-4.png);
|
||||||
}
|
}
|
||||||
&__pill {
|
|
||||||
border: 1px solid $yellow;
|
|
||||||
background-color: $yellow;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.components-modal__frame {
|
&.components-modal__frame {
|
||||||
max-width: 320px;
|
max-width: 312px;
|
||||||
}
|
}
|
||||||
&__heading,
|
&__heading,
|
||||||
&__text {
|
&__text {
|
||||||
|
|
@ -59,10 +58,26 @@ $light-purple: #f2edff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-block-editor-tourkit {
|
.woocommerce-block-editor-tourkit {
|
||||||
|
.woocommerce-tour-kit-step {
|
||||||
|
width: 381px;
|
||||||
|
|
||||||
.components-card__header {
|
.components-card__header {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
height: 200px;
|
height: 194px;
|
||||||
background-color: $light-purple;
|
background-color: #d4aaf6; /* no var available */
|
||||||
|
background-image: url(./images/tour-header.svg);
|
||||||
|
border-bottom: 1px solid $gray-200;
|
||||||
margin-bottom: $gap;
|
margin-bottom: $gap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__heading {
|
||||||
|
.woocommerce-pill {
|
||||||
|
margin-left: $gap-small;
|
||||||
|
background-color: $studio-yellow-5;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: enhancement
|
||||||
|
|
||||||
|
Update product editor tour/guide copy and style.
|
||||||
Loading…
Reference in New Issue