Interface: Use plugin context hook instead of HoC (WordPress#66362)

Co-authored-by: Mamaduka <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: tyxla <[email protected]>
karthick-murugan · Nov 13, 2024 · 3e81dfb · 3e81dfb
1 parent 5d6c657
commit 3e81dfb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 26 deletions.
diff --git a/packages/interface/src/components/complementary-area-context/index.js b/packages/interface/src/components/complementary-area-context/index.js
diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js
@@ -3,12 +3,12 @@
  */
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
 import { store as interfaceStore } from '../../store';
-import complementaryAreaContext from '../complementary-area-context';
 
 /**
  * Whether the role supports checked state.
@@ -29,17 +29,20 @@ function roleSupportsCheckedState( role ) {
 	].includes( role );
 }
 
-function ComplementaryAreaToggle( {
+export default function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
-	identifier,
-	icon,
+	identifier: identifierProp,
+	icon: iconProp,
 	selectedIcon,
 	name,
 	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
 	const isSelected = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea( scope ) ===
@@ -70,5 +73,3 @@ function ComplementaryAreaToggle( {
 		/>
 	);
 }
-
-export default complementaryAreaContext( ComplementaryAreaToggle );
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
@@ -25,14 +25,14 @@ import {
 	useViewportMatch,
 	usePrevious,
 } from '@wordpress/compose';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
 import ComplementaryAreaHeader from '../complementary-area-header';
 import ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
-import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
 
@@ -171,10 +171,10 @@ function ComplementaryArea( {
 	children,
 	className,
 	closeLabel = __( 'Close plugin' ),
-	identifier,
+	identifier: identifierProp,
 	header,
 	headerClassName,
-	icon,
+	icon: iconProp,
 	isPinnable = true,
 	panelClassName,
 	scope,
@@ -183,6 +183,10 @@ function ComplementaryArea( {
 	toggleShortcut,
 	isActiveByDefault,
 } ) {
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
+
 	// This state is used to delay the rendering of the Fill
 	// until the initial effect runs.
 	// This prevents the animation from running on mount if
@@ -344,9 +348,6 @@ function ComplementaryArea( {
 	);
 }
 
-const ComplementaryAreaWrapped =
-	withComplementaryAreaContext( ComplementaryArea );
-
-ComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;
+ComplementaryArea.Slot = ComplementaryAreaSlot;
 
-export default ComplementaryAreaWrapped;
+export default ComplementaryArea;