diff --git a/packages/block-editor/src/components/inserter/tips.js b/packages/block-editor/src/components/inserter/tips.js index 255275c296ce24..0e7a1b5bdcef52 100644 --- a/packages/block-editor/src/components/inserter/tips.js +++ b/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 / to quickly insert new blocks.' ), { kbd: } ), - __experimentalCreateInterpolateElement( + createInterpolateElement( __( 'Indent a list by pressing space at the beginning of a line.' ), { kbd: } ), - __experimentalCreateInterpolateElement( + createInterpolateElement( __( 'Outdent a list by pressing backspace at the beginning of a line' ), diff --git a/packages/block-editor/src/components/link-control/search-create-button.js b/packages/block-editor/src/components/link-control/search-create-button.js index 0b9f48394107ce..b9014a7c9c87e8 100644 --- a/packages/block-editor/src/components/link-control/search-create-button.js +++ b/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 = ( { - { __experimentalCreateInterpolateElement( + { createInterpolateElement( sprintf( __( 'New page: %s' ), searchTerm diff --git a/packages/components/src/text-highlight/index.js b/packages/components/src/text-highlight/index.js index f9cbc95ac90424..0d0f8a8faff0da 100644 --- a/packages/components/src/text-highlight/index.js +++ b/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 = '' } ) => { if ( ! highlight.trim() ) { @@ -15,12 +15,9 @@ const TextHighlight = ( { text = '', highlight = '' } ) => { const regex = new RegExp( `(${ escapeRegExp( highlight ) })`, 'gi' ); - return __experimentalCreateInterpolateElement( - text.replace( regex, '$&' ), - { - mark: , - } - ); + return createInterpolateElement( text.replace( regex, '$&' ), { + mark: , + } ); }; export default TextHighlight; diff --git a/packages/edit-post/src/components/welcome-guide/index.js b/packages/edit-post/src/components/welcome-guide/index.js index 7f350e44e3e5d9..ad58758315cb30 100644 --- a/packages/edit-post/src/components/welcome-guide/index.js +++ b/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() {

- { __experimentalCreateInterpolateElement( + { createInterpolateElement( __( 'All of the blocks available to you live in the block library. You’ll find it wherever you see the icon.' ), diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md index e97ae3815fe04c..6fa9e71bbb9593 100644 --- a/packages/element/CHANGELOG.md +++ b/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. diff --git a/packages/element/README.md b/packages/element/README.md index fb0c8089fae2b1..1a51dea4046de9 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -138,6 +138,38 @@ _Returns_ - `WPElement`: Element. +# **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 string with a link and a self-closing + tag" + +You would have something like this as the conversionMap value: + +```js +{ + span: , + a: , + CustomComponentB: , +} +``` + +_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. + # **createPortal** Creates a portal into which a component can be rendered. diff --git a/packages/element/src/index.js b/packages/element/src/index.js index 899a308c3b1c77..de3c66eff86cd3 100644 --- a/packages/element/src/index.js +++ b/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';