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
*/
import { __, sprintf } from '@wordpress/i18n';
import { Fragment, RawHTML } from '@wordpress/element';
import { escapeHTML } from '@wordpress/escape-html';
import { __ } from '@wordpress/i18n';
import { __experimentalCreateInterpolateElement } from 'wordpress-element';
import {
Notice,
ToggleControl,
@ -36,7 +35,7 @@ export const getBlockControls = ( editMode, setAttributes ) => (
export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
return (
<Fragment>
<>
<ToggleControl
label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
checked={ attributes.showReviewRating }
@ -51,21 +50,24 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
className="wc-block-reviews__notice"
isDismissible={ false }
>
<RawHTML>
{ sprintf(
escapeHTML(
/* translators: A notice that links to WooCommerce settings. */
__(
'Product rating is disabled in your %sstore settings%s.',
'woo-gutenberg-products-block'
)
{ __experimentalCreateInterpolateElement(
__(
'Product rating is disabled in your <a>store settings</a>.',
'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>
) }
<ToggleControl
@ -105,7 +107,7 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
}
/>
{ attributes.showReviewImage && (
<Fragment>
<>
<ToggleButtonControl
label={ __(
'Review image',
@ -137,26 +139,29 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
className="wc-block-reviews__notice"
isDismissible={ false }
>
<RawHTML>
{ sprintf(
escapeHTML(
/* translators: A notice that links to WordPress settings. */
__(
'Reviewer photo is disabled in your %ssite settings%s.',
'woo-gutenberg-products-block'
)
{ __experimentalCreateInterpolateElement(
__(
'Reviewer photo is disabled in your <a>site settings</a>.',
'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>
) }
</Fragment>
</>
) }
</Fragment>
</>
);
};
@ -165,7 +170,7 @@ export const getSharedReviewListControls = ( attributes, setAttributes ) => {
const maxPerPage = 20;
return (
<Fragment>
<>
<ToggleControl
label={ __( 'Order by', 'woo-gutenberg-products-block' ) }
checked={ attributes.showOrderby }
@ -219,6 +224,6 @@ export const getSharedReviewListControls = ( attributes, setAttributes ) => {
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": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",

View File

@ -146,7 +146,8 @@
"react-number-format": "4.3.1",
"trim-html": "0.1.9",
"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": {
"hooks": {