Mobile Release v1.42.1

packages/components/src/color-palette/index.native.js

@@ -46,9 +46,9 @@ function ColorPalette( {
 	customIndicatorWrapperStyles,
 } ) {
 	const customSwatchGradients = [
-		'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)',
-		'linear-gradient(240deg, rgba(0,255,0,.8), 0%, rgba(0,255,0,0) 70.71%)',
-		'linear-gradient(360deg, rgba(0,0,255,.8), 0%, rgba(0,0,255,0) 70.71%)',
+		'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',
+		'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',
+		'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',
 	];
 
 	const scrollViewRef = useRef();

packages/components/src/custom-gradient-picker/serializer.js

@@ -13,7 +13,11 @@ export function serializeGradientColor( { type, value } ) {
 	return `${ type }(${ value.join( ',' ) })`;
 }
 
-export function serializeGradientPosition( { type, value } ) {
+export function serializeGradientPosition( position ) {
+	if ( ! position ) {
+		return '';
+	}
+	const { value, type } = position;
 	return `${ value }${ type }`;
 }
 

packages/components/src/mobile/bottom-sheet/range-cell.native.js

@@ -34,7 +34,7 @@ class BottomSheetRangeCell extends Component {
 		this.onCellPress = this.onCellPress.bind( this );
 
 		const { value, defaultValue, minimumValue } = props;
-		const initialValue = value || defaultValue || minimumValue;
+		const initialValue = Number( value || defaultValue || minimumValue );
 
 		this.state = {
 			accessible: true,

packages/components/src/mobile/gradient/index.native.js

@@ -3,6 +3,7 @@
  */
 import { View, Platform } from 'react-native';
 import RNLinearGradient from 'react-native-linear-gradient';
+import gradientParser from 'gradient-parser';
 /**
  * WordPress dependencies
  */
@@ -16,17 +17,72 @@ import { useResizeObserver } from '@wordpress/compose';
 import styles from './style.scss';
 
 function getGradientAngle( gradientValue ) {
-	const matchDeg = /(\d+)deg/g;
+	const matchAngle = /\(((\d+deg)|(to\s[^,]+))/;
+	const angle = matchAngle.exec( gradientValue )[ 1 ];
+	const angleBase = 45;
 
-	return Number( matchDeg.exec( gradientValue )[ 1 ] );
+	const angleType = angle.includes( 'deg' ) ? 'angle' : 'sideOrCorner';
+
+	if ( angleType === 'sideOrCorner' ) {
+		switch ( angle ) {
+			case 'to top':
+				return 0;
+			case 'to top right':
+			case 'to right top':
+				return angleBase;
+			case 'to right':
+				return 2 * angleBase;
+			case 'to bottom right':
+			case 'to right bottom':
+				return 3 * angleBase;
+			case 'to bottom':
+				return 4 * angleBase;
+			case 'to bottom left':
+			case 'to left bottom':
+				return 5 * angleBase;
+			case 'to left':
+				return 6 * angleBase;
+			case 'to top left':
+			case 'to left top':
+				return 7 * angleBase;
+		}
+	} else if ( angleType === 'angle' ) {
+		return parseFloat( angle );
+	} else return 180;
 }
 
 function getGradientColorGroup( gradientValue ) {
-	const matchColorGroup = /(rgba|rgb|#)(.+?)[\%]/g;
+	const colorNeedParenthesis = [ 'rgb', 'rgba' ];
+
+	const excludeSideOrCorner = /linear-gradient\(to\s+([a-z\s]+,)/;
+
+	// Parser has some difficulties with angle defined as a side or corner (e.g. `to left`)
+	// so it's going to be excluded in order to matching color groups
+	const modifiedGradientValue = gradientValue.replace(
+		excludeSideOrCorner,
+		'linear-gradient('
+	);
+
+	return [].concat(
+		...gradientParser.parse( modifiedGradientValue )?.map( ( gradient ) =>
+			gradient.colorStops?.map( ( color, index ) => {
+				const { type, value, length } = color;
+				const fallbackLength = `${
+					100 * ( index / ( gradient.colorStops.length - 1 ) )
+				}%`;
+				const colorLength = length
+					? `${ length.value }${ length.type }`
+					: fallbackLength;
 
-	return gradientValue
-		.match( matchColorGroup )
-		.map( ( color ) => color.split( ' ' ) );
+				if ( colorNeedParenthesis.includes( type ) ) {
+					return [ `${ type }(${ value.join( ',' ) })`, colorLength ];
+				} else if ( type === 'literal' ) {
+					return [ value, colorLength ];
+				}
+				return [ `#${ value }`, colorLength ];
+			} )
+		)
+	);
 }
 
 function getGradientBaseColors( gradientValue ) {

packages/react-native-aztec/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-aztec",
-  "version": "1.41.1",
+  "version": "1.42.1",
   "description": "Aztec view for react-native.",
   "private": true,
   "author": "The WordPress Contributors",

packages/react-native-bridge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-bridge",
-  "version": "1.41.1",
+  "version": "1.42.1",
   "description": "Native bridge library used to integrate the block editor into a native App.",
   "private": true,
   "author": "The WordPress Contributors",

packages/react-native-editor/ios/Podfile.lock

@@ -21,7 +21,7 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - Gutenberg (1.41.1):
+  - Gutenberg (1.42.1):
     - React-Core (= 0.61.5)
     - React-CoreModules (= 0.61.5)
     - React-RCTImage (= 0.61.5)
@@ -253,7 +253,7 @@ PODS:
     - React-Core
   - RNSVG (9.13.6-gb):
     - React-Core
-  - RNTAztecView (1.41.1):
+  - RNTAztecView (1.42.1):
     - React-Core
     - WordPress-Aztec-iOS (~> 1.19.3)
   - WordPress-Aztec-iOS (1.19.3)
@@ -402,7 +402,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
-  Gutenberg: 103bee9a4d6c33edd2321dfc38b7fa51741d2afb
+  Gutenberg: d4257899f1def887029385c03eeadb20f8769506
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
@@ -435,7 +435,7 @@ SPEC CHECKSUMS:
   RNReanimated: f05baf4cd76b6eab2e4d7e2b244424960b968918
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 46c4b680fe18237fa01eb7d7b311d77618fde31f
-  RNTAztecView: ebd2ceeafca809bd1fde98a757ab6c7e4a634747
+  RNTAztecView: 38c4acd97d152a125eba9318125c3a75ea99e1db
   WordPress-Aztec-iOS: b7ac8b30f746992e85d9668453ac87c2cdcecf4f
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 

packages/react-native-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wordpress/react-native-editor",
-  "version": "1.41.1",
+  "version": "1.42.1",
   "description": "Mobile WordPress gutenberg editor.",
   "author": "The WordPress Contributors",
   "license": "GPL-2.0-or-later",