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,