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:
parent
0652c2eb4f
commit
a203823d62
|
@ -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>
|
||||
}
|
||||
/>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue