From 8f825609c4d4be6c4356fefef4fd7530b5068e65 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 26 Aug 2021 16:08:46 +0200
Subject: [PATCH] `FlexBlock`: refactor away from the `createComponent`
 function

---
 .../src/flex/flex-block/component.js          | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/flex/flex-block/component.js b/packages/components/src/flex/flex-block/component.js
index 7a1e35ec443725..aa3352ba7b95c3 100644
--- a/packages/components/src/flex/flex-block/component.js
+++ b/packages/components/src/flex/flex-block/component.js
@@ -1,9 +1,20 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../../ui/utils';
+import { contextConnect } from '../../ui/context';
+import { View } from '../../view';
 import { useFlexBlock } from './hook';
 
+/**
+ * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                     forwardedRef
+ */
+function FlexBlock( props, forwardedRef ) {
+	const flexBlockProps = useFlexBlock( props );
+
+	return <View { ...flexBlockProps } ref={ forwardedRef } />;
+}
+
 /**
  * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.
  *
@@ -14,10 +25,6 @@ import { useFlexBlock } from './hook';
  * </Flex>
  * ```
  */
-const FlexBlock = createComponent( {
-	as: 'div',
-	useHook: useFlexBlock,
-	name: 'FlexBlock',
-} );
+const ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );
 
-export default FlexBlock;
+export default ConnectedFlexBlock;