Convert _experimentalCreateInterpolateElement to a stable api. (#20699)

* make createInterpolateElement stable

* implement new stable function everywhere it was implemented

* update changelog

packages/block-editor/src/components/inserter/tips.js

@@ -2,26 +2,23 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalCreateInterpolateElement,
-	useState,
-} from '@wordpress/element';
+import { createInterpolateElement, useState } from '@wordpress/element';
 import { Tip } from '@wordpress/components';
 
 const globalTips = [
-	__experimentalCreateInterpolateElement(
+	createInterpolateElement(
 		__(
 			'While writing, you can press <kbd>/</kbd> to quickly insert new blocks.'
 		),
 		{ kbd: <kbd /> }
 	),
-	__experimentalCreateInterpolateElement(
+	createInterpolateElement(
 		__(
 			'Indent a list by pressing <kbd>space</kbd> at the beginning of a line.'
 		),
 		{ kbd: <kbd /> }
 	),
-	__experimentalCreateInterpolateElement(
+	createInterpolateElement(
 		__(
 			'Outdent a list by pressing <kbd>backspace</kbd> at the beginning of a line'
 		),

packages/block-editor/src/components/link-control/search-create-button.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Button, Icon } from '@wordpress/components';
-import { __experimentalCreateInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement } from '@wordpress/element';
 
 export const LinkControlSearchCreate = ( {
 	searchTerm,
@@ -38,7 +38,7 @@ export const LinkControlSearchCreate = ( {
 
 			<span className="block-editor-link-control__search-item-header">
 				<span className="block-editor-link-control__search-item-title">
-					{ __experimentalCreateInterpolateElement(
+					{ createInterpolateElement(
 						sprintf(
 							__( 'New page: <mark>%s</mark>' ),
 							searchTerm

packages/components/src/text-highlight/index.js

@@ -6,7 +6,7 @@ import { escapeRegExp } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __experimentalCreateInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement } from '@wordpress/element';
 
 const TextHighlight = ( { text = '', highlight = '' } ) => {
 	const trimmedHighlightText = highlight.trim();
@@ -20,12 +20,9 @@ const TextHighlight = ( { text = '', highlight = '' } ) => {
 		'gi'
 	);
 
-	return __experimentalCreateInterpolateElement(
-		text.replace( regex, '<mark>$&</mark>' ),
-		{
-			mark: <mark />,
-		}
-	);
+	return createInterpolateElement( text.replace( regex, '<mark>$&</mark>' ), {
+		mark: <mark />,
+	} );
 };
 
 export default TextHighlight;

packages/edit-post/src/components/welcome-guide/index.js

@@ -4,7 +4,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ExternalLink, Guide, GuidePage } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { __experimentalCreateInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -67,7 +67,7 @@ export default function WelcomeGuide() {
 				</h1>
 				<BlockLibraryImage className="edit-post-welcome-guide__image" />
 				<p className="edit-post-welcome-guide__text">
-					{ __experimentalCreateInterpolateElement(
+					{ createInterpolateElement(
 						__(
 							'All of the blocks available to you live in the block library. You’ll find it wherever you see the <InserterIconImage /> icon.'
 						),

packages/element/CHANGELOG.md

@@ -1,37 +1,41 @@
+## Master
+
+-   Graduated `__experimentalCreateInterpolateElement` function to stable api: `createInterpolateElement` (see [20699](https://github.com/WordPress/gutenberg/pull/20699))
+
 ## 2.10.0 (2019-12-19)
 
 ### New Features
 
-- Added `__experimentalCreateInterpolateElement` function (see [17376](https://github.com/WordPress/gutenberg/pull/17376))
+-   Added `__experimentalCreateInterpolateElement` function (see [17376](https://github.com/WordPress/gutenberg/pull/17376))
 
 ## 2.8.0 (2019-09-16)
 
 ### New Features
 
-- The bundled `react` dependency has been updated from requiring `^16.8.4` to requiring `^16.9.0` ([#16982](https://github.com/WordPress/gutenberg/pull/16982)). It contains [new deprecations](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#new-deprecations) as well.
-- The bundled `react-dom` dependency has been updated from requiring `^16.8.4` to requiring `^16.9.0` ([#16982](https://github.com/WordPress/gutenberg/pull/16982)).
+-   The bundled `react` dependency has been updated from requiring `^16.8.4` to requiring `^16.9.0` ([#16982](https://github.com/WordPress/gutenberg/pull/16982)). It contains [new deprecations](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#new-deprecations) as well.
+-   The bundled `react-dom` dependency has been updated from requiring `^16.8.4` to requiring `^16.9.0` ([#16982](https://github.com/WordPress/gutenberg/pull/16982)).
 
 ## 2.4.0 (2019-05-21)
 
 ### New Features
 
-- Added `lazy` feautre (see: https://reactjs.org/docs/react-api.html#reactlazy).
-- Added `Suspense` component (see: https://reactjs.org/docs/react-api.html#reactsuspense).
+-   Added `lazy` feautre (see: https://reactjs.org/docs/react-api.html#reactlazy).
+-   Added `Suspense` component (see: https://reactjs.org/docs/react-api.html#reactsuspense).
 
 ## 2.3.0 (2019-03-06)
 
 ### New Features
 
-- Added `useCallback` hook (see: https://reactjs.org/docs/hooks-reference.html#usecallback).
-- Added `useContext` hook (see: https://reactjs.org/docs/hooks-reference.html#usecontext).
-- Added `useDebugValue` hook (see: https://reactjs.org/docs/hooks-reference.html#usedebugvalue).
-- Added `useEffect` hook (see: https://reactjs.org/docs/hooks-reference.html#useeffect).
-- Added `useImperativeHandle` hook (see: https://reactjs.org/docs/hooks-reference.html#useimperativehandle).
-- Added `useLayoutEffect` hook (see: https://reactjs.org/docs/hooks-reference.html#uselayouteffect).
-- Added `useMemo` hook (see: https://reactjs.org/docs/hooks-reference.html#usememo).
-- Added `useReducer` hook (see: https://reactjs.org/docs/hooks-reference.html#usereducer).
-- Added `useRef` hook (see: https://reactjs.org/docs/hooks-reference.html#useref).
-- Added `useState` hook (see: https://reactjs.org/docs/hooks-reference.html#usestate).
+-   Added `useCallback` hook (see: https://reactjs.org/docs/hooks-reference.html#usecallback).
+-   Added `useContext` hook (see: https://reactjs.org/docs/hooks-reference.html#usecontext).
+-   Added `useDebugValue` hook (see: https://reactjs.org/docs/hooks-reference.html#usedebugvalue).
+-   Added `useEffect` hook (see: https://reactjs.org/docs/hooks-reference.html#useeffect).
+-   Added `useImperativeHandle` hook (see: https://reactjs.org/docs/hooks-reference.html#useimperativehandle).
+-   Added `useLayoutEffect` hook (see: https://reactjs.org/docs/hooks-reference.html#uselayouteffect).
+-   Added `useMemo` hook (see: https://reactjs.org/docs/hooks-reference.html#usememo).
+-   Added `useReducer` hook (see: https://reactjs.org/docs/hooks-reference.html#usereducer).
+-   Added `useRef` hook (see: https://reactjs.org/docs/hooks-reference.html#useref).
+-   Added `useState` hook (see: https://reactjs.org/docs/hooks-reference.html#usestate).
 
 ## 2.1.8 (2018-11-15)
 
@@ -47,10 +51,10 @@
 
 ## 2.1.0 (2018-09-30)
 
-- New API method `isEmptyElement` was introduced ([9861](https://github.com/WordPress/gutenberg/pull/9681/)).
+-   New API method `isEmptyElement` was introduced ([9861](https://github.com/WordPress/gutenberg/pull/9681/)).
 
 ## 2.0.0 (2018-09-05)
 
 ### Breaking Change
 
-- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).  If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
+-   Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.

packages/element/README.md

@@ -138,6 +138,38 @@ _Returns_
 
 -   `WPElement`: Element.
 
+<a name="createInterpolateElement" href="#createInterpolateElement">#</a> **createInterpolateElement**
+
+This function creates an interpolated element from a passed in string with
+specific tags matching how the string should be converted to an element via
+the conversion map value.
+
+_Usage_
+
+For example, for the given string:
+
+"This is a <span>string</span> with <a>a link</a> and a self-closing
+<CustomComponentB/> tag"
+
+You would have something like this as the conversionMap value:
+
+```js
+{
+    span: <span />,
+    a: <a href={ 'https://github.com' } />,
+    CustomComponentB: <CustomComponent />,
+}
+```
+
+_Parameters_
+
+-   _interpolatedString_ `string`: The interpolation string to be parsed.
+-   _conversionMap_ `Object`: The map used to convert the string to a react element.
+
+_Returns_
+
+-   `WPElement`: A wp element.
+
 <a name="createPortal" href="#createPortal">#</a> **createPortal**
 
 Creates a portal into which a component can be rendered.

packages/element/src/index.js

@@ -1,4 +1,4 @@
-export { default as __experimentalCreateInterpolateElement } from './create-interpolate-element';
+export { default as createInterpolateElement } from './create-interpolate-element';
 export * from './react';
 export * from './react-platform';
 export * from './utils';