Migrating DownloadableBlocksList to use updated Composite impleme…

…ntation (#55272) Migrating `DownloadableBlocksList` - Removes `__unstableComposite` imports from `@wordpress/components` - Adds private `Composite*` exports from `@wordpress/components` - Refactors `DownloadableBlocksList` and `DownloadableBlockListItem` to use updated `Composite` components
WordPress · Oct 12, 2023 · 235a9da · 235a9da · github-actions · Oct 12, 2023
1 parent 6afcd18
commit 235a9da
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
@@ -43,6 +43,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/plugins": "file:../plugins",
+		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/url": "file:../url",
 		"change-case": "^4.1.2"
 	},

diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js
@@ -6,7 +6,7 @@ import {
 	Button,
 	Spinner,
 	VisuallyHidden,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -20,6 +20,9 @@ import BlockRatings from '../block-ratings';
 import DownloadableBlockIcon from '../downloadable-block-icon';
 import DownloadableBlockNotice from '../downloadable-block-notice';
 import { store as blockDirectoryStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 
 // Return the appropriate block item label, given the block data and status.
 function getDownloadableBlockLabel(
@@ -91,24 +94,28 @@ function DownloadableBlockListItem( { composite, item, onClick } ) {
 
 	return (
 		<CompositeItem
-			__experimentalIsFocusable
-			role="option"
-			as={ Button }
-			{ ...composite }
-			className="block-directory-downloadable-block-list-item"
-			onClick={ ( event ) => {
-				event.preventDefault();
-				onClick();
-			} }
-			isBusy={ isInstalling }
+			render={
+				<Button
+					__experimentalIsFocusable
+					type="button"
+					role="option"
+					className="block-directory-downloadable-block-list-item"
+					isBusy={ isInstalling }
+					onClick={ ( event ) => {
+						event.preventDefault();
+						onClick();
+					} }
+					label={ getDownloadableBlockLabel( item, {
+						hasNotice,
+						isInstalled,
+						isInstalling,
+					} ) }
+					showTooltip
+					tooltipPosition="top center"
+				/>
+			}
+			store={ composite }
 			disabled={ isInstalling || ! isInstallable }
-			label={ getDownloadableBlockLabel( item, {
-				hasNotice,
-				isInstalled,
-				isInstalling,
-			} ) }
-			showTooltip={ true }
-			tooltipPosition="top center"
 		>
 			<div className="block-directory-downloadable-block-list-item__icon">
 				<DownloadableBlockIcon icon={ icon } title={ title } />

diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-} from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -14,11 +11,14 @@ import { useDispatch } from '@wordpress/data';
  */
 import DownloadableBlockListItem from '../downloadable-block-list-item';
 import { store as blockDirectoryStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
+const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+	unlock( componentsPrivateApis );
 const noop = () => {};
 
 function DownloadableBlocksList( { items, onHover = noop, onSelect } ) {
-	const composite = useCompositeState();
+	const composite = useCompositeStore();
 	const { installBlockType } = useDispatch( blockDirectoryStore );
 
 	if ( ! items.length ) {
@@ -27,7 +27,7 @@ function DownloadableBlocksList( { items, onHover = noop, onSelect } ) {
 
 	return (
 		<Composite
-			{ ...composite }
+			store={ composite }
 			role="listbox"
 			className="block-directory-downloadable-blocks-list"
 			aria-label={ __( 'Blocks available for install' ) }

diff --git a/packages/block-directory/src/lock-unlock.js b/packages/block-directory/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'@wordpress/block-directory'
+	);
diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js
@@ -10,6 +10,7 @@
  * The list of core modules allowed to opt-in to the private APIs.
  */
 const CORE_MODULES_USING_PRIVATE_APIS = [
+	'@wordpress/block-directory',
 	'@wordpress/block-editor',
 	'@wordpress/block-library',
 	'@wordpress/blocks',