Support markup in translated strings

[swissspidy]

Feature Description

In #1473 we are removing usage of createInterpolateElement from the @wordpress/element package for good, as we can't rely on it being available / provided to us by WordPress (see #1374). We can also not include the package in our final bundle due to licensing.

That means, if we want to use markup in translated / internationalized strings, we need to come up with our own solution.

Right now, due to this limitation, we cannot do things like this:

__('All data are treated in accordance with <a href="...">Google Privacy Policy</a>.', 'web-stories')

or this:

__('Jump into the <Link href="...">editor</Link>.', 'web-stories')

Instead, we currently have to do workarounds like this:

{
  /* translators: First half of "Jump into the Editor" */
  _x('Jump into the', 'plugin activation', 'web-stories')
}
{' '}
<Link href={newStoryURL} onClick={onClick}>
  {__('Editor', 'web-stories')}
</Link>

But concatenating strings like this is bad for translators.

For reference, with createInterpolateElement it would look like this:

createInterpolateElement(
  __('Jump into the <a>editor</a>.', 'web-stories'),
  {
    a: <Link href={newStoryURL} onClick={onClick}>
  }
)

Additional Context

• createInterpolateElement implementation in Gutenberg - uses a simple regex-based tokenizer
• Original discussion about this in Gutenberg (recommended reading to better understand the problem)
• react-interpolate-component - similar API than createInterpolateElement but less readable for translators
• html-react-parser - like createInterpolateElement, but a bit larger in size (15.7 kB minified, 6.3 kB minified+gzipped)

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

QA Instructions

[barklund]

Now that we have some actual translators working on the translation, this issue crops up a lot.

@o-fernandez, we should really prioritize this one, even though we don't actually know how to solve it yet.

[swissspidy]

Now that we have some actual translators working on the translation, this issue crops up a lot.

There are now also a lot more places in the code base where we'd need something like this.

---

Added some more details to the ticket description.

I feel like with html-react-parser it might be possible to fix this for 1.1.0

[o-fernandez]

Ok, would be good to see if a pod can take it up in this sprint, let's see how it goes in our sprint kickoff today.

[swissspidy]

I have a small proof-of-concept ready for this.

[swissspidy]

Reopening because of these warnings: