Implement __experimentalCreateInterpolateElement for translations. (https://github.com/woocommerce/woocommerce-blocks/pull/1736)

* Improved placeholders of translatable string

* Improved one more string

* Include wordpress element package

* Implement __experimentalCreateInterpolateElement for translations

* Dump fragments

Co-authored-by: Claudio Sanches <contato@claudiosanches.com>
This commit is contained in:
Mike Jolley 2020-02-17 16:31:55 +00:00 committed by GitHub
parent 45119716ed
commit d76c3e0714
3 changed files with 66 additions and 38 deletions

View File

@ -1,9 +1,8 @@
/** /**
* External dependencies * External dependencies
*/ */
import { __, sprintf } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Fragment, RawHTML } from '@wordpress/element'; import { __experimentalCreateInterpolateElement } from 'wordpress-element';
import { escapeHTML } from '@wordpress/escape-html';
import { import {
Notice, Notice,
ToggleControl, ToggleControl,
@ -36,7 +35,7 @@ export const getBlockControls = ( editMode, setAttributes ) => (
export const getSharedReviewContentControls = ( attributes, setAttributes ) => { export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
return ( return (
<Fragment> <>
<ToggleControl <ToggleControl
label={ __( 'Product rating', 'woo-gutenberg-products-block' ) } label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
checked={ attributes.showReviewRating } checked={ attributes.showReviewRating }
@ -51,21 +50,24 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
className="wc-block-reviews__notice" className="wc-block-reviews__notice"
isDismissible={ false } isDismissible={ false }
> >
<RawHTML> { __experimentalCreateInterpolateElement(
{ sprintf( __(
escapeHTML( 'Product rating is disabled in your <a>store settings</a>.',
/* translators: A notice that links to WooCommerce settings. */ 'woo-gutenberg-products-block'
__( ),
'Product rating is disabled in your %sstore settings%s.', {
'woo-gutenberg-products-block' a: (
) // eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={ getAdminLink(
'admin.php?page=wc-settings&tab=products'
) }
target="_blank"
rel="noopener noreferrer"
/>
), ),
`<a href="${ getAdminLink( }
'admin.php?page=wc-settings&tab=products' ) }
) }" target="_blank">`,
'</a>'
) }
</RawHTML>
</Notice> </Notice>
) } ) }
<ToggleControl <ToggleControl
@ -105,7 +107,7 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
} }
/> />
{ attributes.showReviewImage && ( { attributes.showReviewImage && (
<Fragment> <>
<ToggleButtonControl <ToggleButtonControl
label={ __( label={ __(
'Review image', 'Review image',
@ -137,26 +139,29 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
className="wc-block-reviews__notice" className="wc-block-reviews__notice"
isDismissible={ false } isDismissible={ false }
> >
<RawHTML> { __experimentalCreateInterpolateElement(
{ sprintf( __(
escapeHTML( 'Reviewer photo is disabled in your <a>site settings</a>.',
/* translators: A notice that links to WordPress settings. */ 'woo-gutenberg-products-block'
__( ),
'Reviewer photo is disabled in your %ssite settings%s.', {
'woo-gutenberg-products-block' a: (
) // eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={ getAdminLink(
'options-discussion.php'
) }
target="_blank"
rel="noopener noreferrer"
/>
), ),
`<a href="${ getAdminLink( }
'options-discussion.php' ) }
) }" target="_blank">`,
'</a>'
) }
</RawHTML>
</Notice> </Notice>
) } ) }
</Fragment> </>
) } ) }
</Fragment> </>
); );
}; };
@ -165,7 +170,7 @@ export const getSharedReviewListControls = ( attributes, setAttributes ) => {
const maxPerPage = 20; const maxPerPage = 20;
return ( return (
<Fragment> <>
<ToggleControl <ToggleControl
label={ __( 'Order by', 'woo-gutenberg-products-block' ) } label={ __( 'Order by', 'woo-gutenberg-products-block' ) }
checked={ attributes.showOrderby } checked={ attributes.showOrderby }
@ -219,6 +224,6 @@ export const getSharedReviewListControls = ( attributes, setAttributes ) => {
min={ minPerPage } min={ minPerPage }
/> />
) } ) }
</Fragment> </>
); );
}; };

View File

@ -29642,6 +29642,28 @@
} }
} }
}, },
"wordpress-element": {
"version": "npm:@wordpress/element@2.11.0",
"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.11.0.tgz",
"integrity": "sha512-56ZO8a+E7QEsYwiqS+3BQPSHrCPsOAIEz5smXzntb2f6BjvOKeA64pup40mdn1pNGexe06LBA8cjoZVdLBHB1w==",
"requires": {
"@babel/runtime": "^7.8.3",
"@wordpress/escape-html": "^1.7.0",
"lodash": "^4.17.15",
"react": "^16.9.0",
"react-dom": "^16.9.0"
},
"dependencies": {
"@wordpress/escape-html": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-1.7.0.tgz",
"integrity": "sha512-xDOBo0P3Jnbdbb/UypsQaplsD2k4UXgd/EpKhMAKhDa2m20GxWWmEKW9IB3/5bS4Rh2YZjVM9WL4JyWPUo4hEA==",
"requires": {
"@babel/runtime": "^7.8.3"
}
}
}
},
"wordwrap": { "wordwrap": {
"version": "0.0.2", "version": "0.0.2",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",

View File

@ -146,7 +146,8 @@
"react-number-format": "4.3.1", "react-number-format": "4.3.1",
"trim-html": "0.1.9", "trim-html": "0.1.9",
"use-debounce": "3.3.0", "use-debounce": "3.3.0",
"wordpress-components": "npm:@wordpress/components@8.5.0" "wordpress-components": "npm:@wordpress/components@8.5.0",
"wordpress-element": "npm:@wordpress/element@2.11.0"
}, },
"husky": { "husky": {
"hooks": { "hooks": {