Make Composite components unstable

WordPress · Jan 12, 2021 · ed22350 · ed22350
1 parent aea467d
commit ed22350
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
-import { Composite, useCompositeState } from '@wordpress/components';
+import {
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -7,7 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useMemo, useRef, memo } from '@wordpress/element';
-import { Button, CompositeItem } from '@wordpress/components';
+import {
+	Button,
+	__unstableCompositeItem as CompositeItem,
+} from '@wordpress/components';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,

diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
@@ -13,10 +13,10 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import { BlockPreview } from '@wordpress/block-editor';
 import {
-	Composite,
-	CompositeItem,
+	__unstableComposite as Composite,
+	__unstableCompositeItem as CompositeItem,
 	Icon,
-	useCompositeState,
+	__unstableUseCompositeState as useCompositeState,
 } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
 import { store as noticesStore } from '@wordpress/notices';

diff --git a/packages/components/src/composite/index.js b/packages/components/src/composite/index.js
@@ -6,6 +6,9 @@
  * a roving tabindex or aria-activedescendant container.
  *
  * @see https://reakit.io/docs/composite/
+ *
+ * The plan is to build own API that accounts for future breaking changes
+ * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).
  */
 export {
 	Composite,

diff --git a/packages/components/src/disclosure/index.js b/packages/components/src/disclosure/index.js
@@ -3,5 +3,8 @@
  * content. It follows the WAI-ARIA Disclosure Pattern.
  *
  * @see https://reakit.io/docs/disclosure/
+ *
+ * The plan is to build own API that accounts for future breaking changes
+ * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).
  */
 export { DisclosureContent } from 'reakit';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -35,7 +35,12 @@ export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
 export { default as ColorPicker } from './color-picker';
 export { default as ComboboxControl } from './combobox-control';
-export * from './composite';
+export {
+	Composite as __unstableComposite,
+	CompositeGroup as __unstableCompositeGroup,
+	CompositeItem as __unstableCompositeItem,
+	useCompositeState as __unstableUseCompositeState,
+} from './composite';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';

diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/index.js b/packages/edit-widgets/src/blocks/widget-area/edit/index.js
@@ -5,7 +5,7 @@ import { useEffect, useState, useCallback, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { EntityProvider } from '@wordpress/core-data';
 import {
-	__unstableDisclosureContent,
+	__unstableDisclosureContent as DisclosureContent,
 	Panel,
 	PanelBody,
 } from '@wordpress/components';
@@ -66,15 +66,15 @@ export default function WidgetAreaEdit( {
 				{ ( { opened } ) => (
 					// This is required to ensure LegacyWidget blocks are not unmounted when the panel is collapsed.
 					// Unmounting legacy widgets may have unintended consequences (e.g. TinyMCE not being properly reinitialized)
-					<__unstableDisclosureContent visible={ opened }>
+					<DisclosureContent visible={ opened }>
 						<EntityProvider
 							kind="root"
 							type="postType"
 							id={ `widget-area-${ id }` }
 						>
 							<WidgetAreaInnerBlocks />
 						</EntityProvider>
-					</__unstableDisclosureContent>
+					</DisclosureContent>
 				) }
 			</PanelBody>
 		</Panel>