Entrepreneur Signup: Show WordPress logo when entering Design With AI from Entrepreneur signup flow. (#47576)

* Show WordPress logo when entering Design With AI from Enterpreneur signup flow.

* Update logo on Assembler Hub.

* Really need to force it.

* Add changelog.

* Newline.

* Newline.

* Fix rebase error.

* Fix double import.

* Remove !important.
This commit is contained in:
Yan Sern 2024-05-20 21:43:24 +08:00 committed by GitHub
parent 660b2bcb6d
commit 645b052376
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 81 additions and 1 deletions

View File

@ -23,6 +23,8 @@ import { forwardRef } from '@wordpress/element';
import SiteIcon from '@wordpress/edit-site/build-module/components/site-icon';
import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
import { Link } from '@woocommerce/components';
import WordPressLogo from '~/lib/wordpress-logo';
/**
* Internal dependencies
*/
@ -95,7 +97,14 @@ export const SiteHub = forwardRef(
) }
type="wp-admin"
>
<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
{ isEntrepreneurFlow() ? (
<WordPressLogo
size={ 24 }
className="woocommerce-cys-wordpress-header-logo"
/>
) : (
<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
) }
</Link>
</div>

View File

@ -13,6 +13,7 @@ import { designWithAiStateMachineContext } from '../types';
import { CloseButton } from '../components/close-button/close-button';
import { aiWizardClosedBeforeCompletionEvent } from '../events';
import { isEntrepreneurFlow } from '../entrepreneur-flow';
import WordPressLogo from '~/lib/wordpress-logo';
export type businessInfoDescriptionCompleteEvent = {
type: 'BUSINESS_INFO_DESCRIPTION_COMPLETE';
@ -43,6 +44,12 @@ export const BusinessInfoDescription = ( {
bgcolor={ 'transparent' }
/>
) }
{ isEntrepreneurFlow() && (
<WordPressLogo
size={ 24 }
className="woocommerce-cys-wordpress-header-logo"
/>
) }
{ ! isEntrepreneurFlow() && (
<CloseButton
onClick={ () => {

View File

@ -15,6 +15,7 @@ import { CloseButton } from '../components/close-button/close-button';
import { aiWizardClosedBeforeCompletionEvent } from '../events';
import { isEntrepreneurFlow } from '../entrepreneur-flow';
import { trackEvent } from '~/customize-store/tracking';
import WordPressLogo from '~/lib/wordpress-logo';
export type lookAndFeelCompleteEvent = {
type: 'LOOK_AND_FEEL_COMPLETE';
@ -71,6 +72,12 @@ export const LookAndFeel = ( {
bgcolor={ 'transparent' }
/>
) }
{ isEntrepreneurFlow() && (
<WordPressLogo
size={ 24 }
className="woocommerce-cys-wordpress-header-logo"
/>
) }
{ ! isEntrepreneurFlow() && (
<CloseButton
onClick={ () => {

View File

@ -15,6 +15,7 @@ import { CloseButton } from '../components/close-button/close-button';
import { aiWizardClosedBeforeCompletionEvent } from '../events';
import { isEntrepreneurFlow } from '../entrepreneur-flow';
import { trackEvent } from '~/customize-store/tracking';
import WordPressLogo from '../../../lib/wordpress-logo';
export type toneOfVoiceCompleteEvent = {
type: 'TONE_OF_VOICE_COMPLETE';
@ -89,6 +90,12 @@ export const ToneOfVoice = ( {
bgcolor={ 'transparent' }
/>
) }
{ isEntrepreneurFlow() && (
<WordPressLogo
size={ 24 }
className="woocommerce-cys-wordpress-header-logo"
/>
) }
{ ! isEntrepreneurFlow() && (
<CloseButton
onClick={ () => {

View File

@ -312,3 +312,14 @@ body.woocommerce-customize-store.js.is-fullscreen-mode {
}
}
.woocommerce-cys-wordpress-header-logo {
position: absolute;
top: 28px;
left: 24px;
}
.edit-site-layout__hub svg.woocommerce-cys-wordpress-header-logo {
width: 24px;
height: 24px;
}

View File

@ -0,0 +1,29 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import './style.scss';
function WordPressLogo( { className = 'wordpress-logo', size = 72 } ) {
return (
<svg
className={ className }
height={ size }
width={ size }
viewBox="0 0 72 72"
>
<path d="M36,0C16.1,0,0,16.1,0,36c0,19.9,16.1,36,36,36c19.9,0,36-16.2,36-36C72,16.1,55.8,0,36,0z M3.6,36 c0-4.7,1-9.1,2.8-13.2l15.4,42.3C11.1,59.9,3.6,48.8,3.6,36z M36,68.4c-3.2,0-6.2-0.5-9.1-1.3l9.7-28.2l9.9,27.3 c0.1,0.2,0.1,0.3,0.2,0.4C43.4,67.7,39.8,68.4,36,68.4z M40.5,20.8c1.9-0.1,3.7-0.3,3.7-0.3c1.7-0.2,1.5-2.8-0.2-2.7 c0,0-5.2,0.4-8.6,0.4c-3.2,0-8.5-0.4-8.5-0.4c-1.7-0.1-2,2.6-0.2,2.7c0,0,1.7,0.2,3.4,0.3l5,13.8L28,55.9L16.2,20.8 c2-0.1,3.7-0.3,3.7-0.3c1.7-0.2,1.5-2.8-0.2-2.7c0,0-5.2,0.4-8.6,0.4c-0.6,0-1.3,0-2.1,0C14.7,9.4,24.7,3.6,36,3.6 c8.4,0,16.1,3.2,21.9,8.5c-0.1,0-0.3,0-0.4,0c-3.2,0-5.4,2.8-5.4,5.7c0,2.7,1.5,4.9,3.2,7.6c1.2,2.2,2.7,4.9,2.7,8.9 c0,2.8-0.8,6.3-2.5,10.5l-3.2,10.8L40.5,20.8z M52.3,64l9.9-28.6c1.8-4.6,2.5-8.3,2.5-11.6c0-1.2-0.1-2.3-0.2-3.3 c2.5,4.6,4,9.9,4,15.5C68.4,47.9,61.9,58.4,52.3,64z" />
</svg>
);
}
WordPressLogo.propTypes = {
className: PropTypes.string,
size: PropTypes.number,
};
export default WordPressLogo;

View File

@ -0,0 +1,5 @@
.wordpress-logo {
fill: #2c3338;
margin: 0 auto 20px;
}

View File

@ -0,0 +1,5 @@
Significance: patch
Type: update
Comment: Show WordPress logo when entering Design With AI from Enterpreneur signup flow.