Add CYS Fiverr Logo Maker CTA (#48486)

* Add markup for Fiverr logo maker.

Add text CTA with link to WooCommerce landing page for Fiverr logo
maker in sidebar navigation on the logo view.

* Adjust styles for Fiverr logo maker CTA.

* Update string output to use interpolateComponents

The text in this addition is mixed with string and markup.

This segmentation can lead to translation issues because
different languages have different syntactic structures.

Here, we utilize interpolateComponents to remedy these potential issues.

See
https://github.com/woocommerce/woocommerce/pull/48486#discussion_r1639637477
for context.

* Add changefile(s) from automation for the following project(s): woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Daniel W. Robert 2024-06-17 09:12:56 -04:00 committed by GitHub
parent 0652c2eb4f
commit a203823d62
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 39 additions and 0 deletions

View File

@ -31,6 +31,8 @@ import {
} from '@wordpress/block-editor';
// @ts-ignore No types for this exist yet.
import { store as noticesStore } from '@wordpress/notices';
import interpolateComponents from '@automattic/interpolate-components';
import { Link } from '@woocommerce/components';
/**
* Internal dependencies
@ -526,6 +528,28 @@ export const SidebarNavigationScreenLogo = ( {
mediaItemData={ mediaItemData }
isLoading={ isLoading }
/>
<div className="woocommerce-customize-store__fiverr-cta-group">
<strong>
{ __( "DON'T HAVE A LOGO YET?", 'woocommerce' ) }
</strong>
<p>
{ interpolateComponents( {
mixedString: __(
'Get a custom logo designed by a professional on {{link}}Fiverr{{/link}}.',
'woocommerce'
),
components: {
link: (
<Link
href="https://www.fiverr.com/logo-maker/woo?afp=&cxd_token=917527_33214203&show_join=true"
target="_blank"
type="external"
/>
),
},
} ) }
</p>
</div>
</div>
}
/>

View File

@ -345,6 +345,17 @@ body.woocommerce-assembler {
}
}
.woocommerce-customize-store__fiverr-cta-group {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--gutenberg-gray-700, #dcdcde);
color: var(--gutenberg-gray-900, #1e1e1e);
p {
margin-top: 6px;
}
}
.block-editor-block-patterns-list__item-title {
display: none;
}

View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
CYS: add CTA to our Fiverr Logo Maker landing page. </details> <details> <summary>Changelog Entry Comment</summary>