Fix use of gradient hooks (#23058)

* Fix way prop insertBlockAfter is send.

* Use HOC to wrap around gradient hook.

* Improve gradient HOC to be more generic.

* Revert "Fix way prop insertBlockAfter is send."

This reverts commit e0d921d.

* Make withGradient available to RN libs.

* Move export of withGradient to the gradient folder.

packages/block-editor/src/components/gradients/index.js

@@ -1,108 +1 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit';
-
-export function __experimentalGetGradientClass( gradientSlug ) {
-	if ( ! gradientSlug ) {
-		return undefined;
-	}
-	return `has-${ gradientSlug }-gradient-background`;
-}
-
-/**
- * Retrieves the gradient value per slug.
- *
- * @param {Array} gradients Gradient Palette
- * @param {string} slug Gradient slug
- *
- * @return {string} Gradient value.
- */
-export function getGradientValueBySlug( gradients, slug ) {
-	const gradient = find( gradients, [ 'slug', slug ] );
-	return gradient && gradient.gradient;
-}
-
-export function __experimentalGetGradientObjectByGradientValue(
-	gradients,
-	value
-) {
-	const gradient = find( gradients, [ 'gradient', value ] );
-	return gradient;
-}
-
-/**
- * Retrieves the gradient slug per slug.
- *
- * @param {Array} gradients Gradient Palette
- * @param {string} value Gradient value
- * @return {string} Gradient slug.
- */
-export function getGradientSlugByValue( gradients, value ) {
-	const gradient = __experimentalGetGradientObjectByGradientValue(
-		gradients,
-		value
-	);
-	return gradient && gradient.slug;
-}
-
-export function __experimentalUseGradient( {
-	gradientAttribute = 'gradient',
-	customGradientAttribute = 'customGradient',
-} = {} ) {
-	const { clientId } = useBlockEditContext();
-
-	const { gradients, gradient, customGradient } = useSelect(
-		( select ) => {
-			const { getBlockAttributes, getSettings } = select(
-				'core/block-editor'
-			);
-			const attributes = getBlockAttributes( clientId );
-			return {
-				gradient: attributes[ gradientAttribute ],
-				customGradient: attributes[ customGradientAttribute ],
-				gradients: getSettings().gradients,
-			};
-		},
-		[ clientId, gradientAttribute, customGradientAttribute ]
-	);
-
-	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
-	const setGradient = useCallback(
-		( newGradientValue ) => {
-			const slug = getGradientSlugByValue( gradients, newGradientValue );
-			if ( slug ) {
-				updateBlockAttributes( clientId, {
-					[ gradientAttribute ]: slug,
-					[ customGradientAttribute ]: undefined,
-				} );
-				return;
-			}
-			updateBlockAttributes( clientId, {
-				[ gradientAttribute ]: undefined,
-				[ customGradientAttribute ]: newGradientValue,
-			} );
-		},
-		[ gradients, clientId, updateBlockAttributes ]
-	);
-
-	const gradientClass = __experimentalGetGradientClass( gradient );
-	let gradientValue;
-	if ( gradient ) {
-		gradientValue = getGradientValueBySlug( gradients, gradient );
-	} else {
-		gradientValue = customGradient;
-	}
-	return { gradientClass, gradientValue, setGradient };
-}
+export * from './use-gradient';

packages/block-editor/src/components/gradients/index.native.js

@@ -0,0 +1,2 @@
+export * from './use-gradient';
+export * from './with-gradient';

packages/block-editor/src/components/gradients/use-gradient.js

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit';
+
+export function __experimentalGetGradientClass( gradientSlug ) {
+	if ( ! gradientSlug ) {
+		return undefined;
+	}
+	return `has-${ gradientSlug }-gradient-background`;
+}
+
+/**
+ * Retrieves the gradient value per slug.
+ *
+ * @param {Array} gradients Gradient Palette
+ * @param {string} slug Gradient slug
+ *
+ * @return {string} Gradient value.
+ */
+export function getGradientValueBySlug( gradients, slug ) {
+	const gradient = find( gradients, [ 'slug', slug ] );
+	return gradient && gradient.gradient;
+}
+
+export function __experimentalGetGradientObjectByGradientValue(
+	gradients,
+	value
+) {
+	const gradient = find( gradients, [ 'gradient', value ] );
+	return gradient;
+}
+
+/**
+ * Retrieves the gradient slug per slug.
+ *
+ * @param {Array} gradients Gradient Palette
+ * @param {string} value Gradient value
+ * @return {string} Gradient slug.
+ */
+export function getGradientSlugByValue( gradients, value ) {
+	const gradient = __experimentalGetGradientObjectByGradientValue(
+		gradients,
+		value
+	);
+	return gradient && gradient.slug;
+}
+
+export function __experimentalUseGradient( {
+	gradientAttribute = 'gradient',
+	customGradientAttribute = 'customGradient',
+} = {} ) {
+	const { clientId } = useBlockEditContext();
+
+	const { gradients, gradient, customGradient } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getSettings } = select(
+				'core/block-editor'
+			);
+			const attributes = getBlockAttributes( clientId );
+			return {
+				gradient: attributes[ gradientAttribute ],
+				customGradient: attributes[ customGradientAttribute ],
+				gradients: getSettings().gradients,
+			};
+		},
+		[ clientId, gradientAttribute, customGradientAttribute ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+	const setGradient = useCallback(
+		( newGradientValue ) => {
+			const slug = getGradientSlugByValue( gradients, newGradientValue );
+			if ( slug ) {
+				updateBlockAttributes( clientId, {
+					[ gradientAttribute ]: slug,
+					[ customGradientAttribute ]: undefined,
+				} );
+				return;
+			}
+			updateBlockAttributes( clientId, {
+				[ gradientAttribute ]: undefined,
+				[ customGradientAttribute ]: newGradientValue,
+			} );
+		},
+		[ gradients, clientId, updateBlockAttributes ]
+	);
+
+	const gradientClass = __experimentalGetGradientClass( gradient );
+	let gradientValue;
+	if ( gradient ) {
+		gradientValue = getGradientValueBySlug( gradients, gradient );
+	} else {
+		gradientValue = customGradient;
+	}
+	return { gradientClass, gradientValue, setGradient };
+}

packages/block-editor/src/components/gradients/with-gradient.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { __experimentalUseGradient } from './use-gradient';
+
+export const withGradient = ( WrappedComponent ) => ( props ) => {
+	const { gradientValue } = __experimentalUseGradient();
+	return <WrappedComponent { ...props } gradientValue={ gradientValue } />;
+};

packages/block-library/src/button/edit.native.js

@@ -18,7 +18,7 @@ import {
 	withColors,
 	InspectorControls,
 	BlockControls,
-	__experimentalUseGradient,
+	withGradient,
 } from '@wordpress/block-editor';
 import {
 	TextControl,
@@ -539,9 +539,9 @@ class ButtonEdit extends Component {
 
 export default compose( [
 	withInstanceId,
+	withGradient,
 	withColors( 'backgroundColor', { textColor: 'color' } ),
 	withSelect( ( select, { clientId } ) => {
-		const { gradientValue } = __experimentalUseGradient();
 		const { isEditorSidebarOpened } = select( 'core/edit-post' );
 		const {
 			getSelectedBlockClientId,
@@ -554,7 +554,6 @@ export default compose( [
 		const numOfButtons = getBlockCount( parentId );
 
 		return {
-			gradientValue,
 			selectedId,
 			editorSidebarOpened: isEditorSidebarOpened(),
 			numOfButtons,