[FEAT] Support linear gradient in cover block (#20411)

* add gradient support * Small refactor and fix changing customGradient to Image * Don't render overlay when the gradient is set
WordPress · Feb 26, 2020 · fcbc6ca · fcbc6ca
1 parent 287498f
commit fcbc6ca
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 45 deletions.
diff --git a/packages/block-library/src/button/color-background.native.js b/packages/block-library/src/button/color-background.native.js
@@ -2,10 +2,10 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 /**
  * WordPress dependencies
  */
+import { LinearGradient } from '@wordpress/components';
 import { __experimentalUseGradient } from '@wordpress/block-editor';
 /**
  * Internal dependencies
@@ -23,39 +23,11 @@ function ColorBackground( { children, borderRadiusValue, backgroundColor } ) {
 
  const { gradientValue } = __experimentalUseGradient();
 
- function transformGradient() {
- const matchColorGroup = /(rgba|rgb|#)(.+?)[\%]/g;
- const matchDeg = /(\d.+)deg/g;
-
- const colorGroup = gradientValue
- .match( matchColorGroup )
- .map( ( color ) => color.split( ' ' ) );
-
- const colors = colorGroup.map( ( color ) => color[ 0 ] );
- const locations = colorGroup.map(
- ( location ) => Number( location[ 1 ].replace( '%', '' ) ) / 100
- );
- const angle = Number( matchDeg.exec( gradientValue )[ 1 ] );
-
- return {
- colors,
- locations,
- angle,
- };
- }
-
- const { colors, locations, angle } = gradientValue
- ? transformGradient()
- : {};
-
  return (
  <View style={ wrapperStyles }>
  { gradientValue && (
  <LinearGradient
- colors={ colors }
- useAngle={ true }
- angle={ angle }
- locations={ locations }
+ gradientValue={ gradientValue }
  angleCenter={ { x: 0.5, y: 0.5 } }
  style={ [
  styles.linearGradient,

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -14,6 +14,7 @@ import {
  RangeControl,
  ToolbarButton,
  ToolbarGroup,
+ LinearGradient,
 } from '@wordpress/components';
 import {
  BlockControls,
@@ -23,6 +24,7 @@ import {
  MediaPlaceholder,
  MediaUpload,
  withColors,
+ __experimentalUseGradient,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
@@ -66,16 +68,11 @@ const Cover = ( {
  overlayColor,
  setAttributes,
 } ) => {
- const {
- backgroundType,
- dimRatio,
- focalPoint,
- gradientValue,
- minHeight,
- url,
- } = attributes;
+ const { backgroundType, dimRatio, focalPoint, minHeight, url } = attributes;
  const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;
 
+ const { gradientValue } = __experimentalUseGradient();
+
  const hasBackground = !! (
  url ||
  attributes.overlayColor ||
@@ -97,6 +94,8 @@ const Cover = ( {
 
  const onSelectMedia = ( media ) => {
  const onSelect = attributesFromMedia( setAttributes );
+ // Remove gradient attribute
+ setAttributes( { gradient: undefined, customGradient: undefined } );
  onSelect( media );
  };
 
@@ -195,12 +194,19 @@ const Cover = ( {
  { getMediaOptions() }
  { isParentSelected && toolbarControls( openMediaOptions ) }
 
- { IMAGE_BACKGROUND_TYPE === backgroundType && (
- <ImageWithFocalPoint
- focalPoint={ focalPoint }
- url={ url }
- />
- ) }
+ { /* When the gradient is set as a background the backgroundType is equal to IMAGE_BACKGROUND_TYPE */ }
+ { IMAGE_BACKGROUND_TYPE === backgroundType &&
+ ( gradientValue ? (
+ <LinearGradient
+ gradientValue={ gradientValue }
+ style={ styles.background }
+ />
+ ) : (
+ <ImageWithFocalPoint
+ focalPoint={ focalPoint }
+ url={ url }
+ />
+ ) ) }
  </View>
  </TouchableWithoutFeedback>
  );
@@ -236,7 +242,10 @@ const Cover = ( {
  <InnerBlocks template={ INNER_BLOCKS_TEMPLATE } />
  </View>
 
- <View pointerEvents="none" style={ overlayStyles } />
+ { /* We don't render overlay on top of gradient */ }
+ { ! gradientValue && (
+ <View pointerEvents="none" style={ overlayStyles } />
+ ) }
 
  <MediaUpload
  __experimentalOnlyMediaLibrary

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -56,3 +56,4 @@ export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as StepperControl } from './mobile/stepper-control';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint';
+export { default as LinearGradient } from './mobile/linear-gradient';
diff --git a/packages/components/src/mobile/linear-gradient/index.native.js b/packages/components/src/mobile/linear-gradient/index.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import RNLinearGradient from 'react-native-linear-gradient';
+
+function LinearGradient( {
+ gradientValue,
+ style,
+ angleCenter = { x: 0.5, y: 0.5 },
+ ...otherProps
+} ) {
+ if ( ! gradientValue || ! gradientValue.includes( 'linear-gradient' ) ) {
+ return null;
+ }
+
+ const matchColorGroup = /(rgba|rgb|#)(.+?)[\%]/g;
+ const matchDeg = /(\d.+)deg/g;
+
+ const colorGroup = gradientValue
+ .match( matchColorGroup )
+ .map( ( color ) => color.split( ' ' ) );
+
+ const colors = colorGroup.map( ( color ) => color[ 0 ] );
+ const locations = colorGroup.map(
+ ( location ) => Number( location[ 1 ].replace( '%', '' ) ) / 100
+ );
+ const angle = Number( matchDeg.exec( gradientValue )[ 1 ] );
+
+ return (
+ <RNLinearGradient
+ colors={ colors }
+ useAngle={ true }
+ angle={ angle }
+ locations={ locations }
+ angleCenter={ angleCenter }
+ style={ style }
+ { ...otherProps }
+ />
+ );
+}
+
+export default LinearGradient;