[RNMobile] Button Block (#18823)

* Initial work on Button block

* Some button styling

* Do some tweaks on android

* Some styling and connect link settings

* Support borderRadius

* Adjust to dark mode

* Add a RichText wrapper with LinearGradient

* Extract RichText wrapper

* Update test setup.js

* Refactor border width

* Set max and min width for ios RichText

* Add comments and set max width when screen has horizontal orientation

* Extract NotificationSheet to separate file

* Move NotifcationSheet to components

* Set isFocused on true by default

* fix jumping height android

* Improve a11y and small refactor

* Move variables to styles

* Update setting background color

* Changes in NotificationSheet and Settings

* Rewrite mobile button block to class component

* Rewrite functions

* Use isFocused() method

* Rename files

* Create separate settings for mobile Button

* Remove notification bottom sheet

* Rename component and comment logic

* Replace MissingControl in favor of UnsupportedFooterControl

* Adjust link modal for Button block purposes

* Small cleanup

* Fix test

* Try to fix mobile test

* Adjust button styling after uploading the latest changes

* Replace Dashicon in favor of Icon in native cell component

* Fix overriding existing URL in bottom sheet

* Making handlers more consistent

* Revert changes in link settings and build custom adjusted for Button component

* Fix test

* Correct condition

* Correct focusing RichText within Button

* Unify isButtonFocused for both platforms

* Fix lint issues after merge

* Reuse controls

* Adjust reused components and add caret color

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

@@ -6,6 +6,7 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export * from './colors';
+export * from './gradients';
 export * from './font-sizes';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as InnerBlocks } from './inner-blocks';

packages/block-library/src/button/color-background.native.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseGradient } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import styles from './editor.scss';
+
+function ColorBackground( { children, borderRadiusValue, backgroundColor } ) {
+	const wrapperStyles = [
+		styles.richTextWrapper,
+		{
+			borderRadius: 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,
+		};
+	}
+
+	if ( gradientValue ) {
+		const { colors, locations, angle } = transformGradient();
+		return (
+			<LinearGradient
+				colors={ colors }
+				useAngle={ true }
+				angle={ angle }
+				locations={ locations }
+				angleCenter={ { x: 0.5, y: 0.5 } }
+				style={ wrapperStyles }
+			>
+				{ children }
+			</LinearGradient>
+		);
+	}
+	return <View style={ wrapperStyles }>{ children }</View>;
+}
+
+export default ColorBackground;