[RNMobile] Add mobile Spacer component

packages/block-library/src/index.native.js

@@ -144,6 +144,7 @@ export const registerCoreBlocks = () => {
 		mediaText,
 		// eslint-disable-next-line no-undef
 		!! __DEV__ ? group : null,
+		spacer,
 	].forEach( registerBlock );
 
 	setDefaultBlockName( paragraph.name );

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

@@ -0,0 +1,71 @@
+
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	BottomSheet,
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import {
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './editor.scss';
+
+const minSpacerHeight = 20;
+const maxSpacerHeight = 500;
+
+const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => {
+	const { height } = attributes;
+	const [ sliderSpacerHeight, setSpacerHeight ] = useState( height );
+	const [ sliderSpacerMaxHeight, setSpacerMaxHeight ] = useState( height );
+
+	// Height defined on the web can be higher than
+	// `maxSpacerHeight`, so there is a need to `setSpacerMaxHeight`
+	// after the initial render.
+	useEffect( () => {
+		setSpacerMaxHeight( height > maxSpacerHeight ? height * 2 : maxSpacerHeight );
+	}, [] );
+
+	const changeSpacerHeight = ( value ) => {
+		let spacerHeight = value;
+		setSpacerHeight( spacerHeight );
+		if ( spacerHeight < minSpacerHeight ) {
+			spacerHeight = minSpacerHeight;
+		} else if ( spacerHeight > sliderSpacerMaxHeight ) {
+			spacerHeight = sliderSpacerMaxHeight;
+		}
+		setAttributes( {
+			height: spacerHeight,
+		} );
+	};
+
+	return (
+		<View style={ [ styles.staticSpacer, isSelected && styles.selectedSpacer, { height } ] }>
+			<InspectorControls>
+				<PanelBody title={ __( 'Spacer Settings' ) } >
+					<BottomSheet.RangeCell
+						icon={ 'admin-settings' }
+						label={ __( 'Height in pixels' ) }
+						value={ sliderSpacerHeight }
+						minimumValue={ minSpacerHeight }
+						maximumValue={ sliderSpacerMaxHeight }
+						separatorType={ 'fullWidth' }
+						onChangeValue={ ( value ) => changeSpacerHeight( value ) }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		</View>
+	);
+};
+
+export default SpacerEdit;

packages/block-library/src/spacer/editor.native.scss

@@ -0,0 +1,10 @@
+.staticSpacer {
+	height: 20px;
+	background-color: transparent;
+	border: $border-width dashed $light-gray-500;
+	border-radius: 1px;
+}
+
+.selectedSpacer {
+	border: $border-width solid $blue-wordpress;
+}

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

@@ -34,6 +34,7 @@ class BottomSheetCell extends Component {
 
 	render() {
 		const {
+			accessible,
 			accessibilityLabel,
 			accessibilityHint,
 			accessibilityRole,
@@ -160,7 +161,7 @@ class BottomSheetCell extends Component {
 
 		return (
 			<TouchableOpacity
-				accessible={ ! this.state.isEditingValue }
+				accessible={ accessible !== undefined ? accessible : ! this.state.isEditingValue }
 				accessibilityLabel={ getAccessibilityLabel() }
 				accessibilityRole={ accessibilityRole || 'button' }
 				accessibilityHint={ isValueEditable ?

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

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { Platform } from 'react-native';
+import { Platform, AccessibilityInfo, findNodeHandle } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { _x, __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,14 +25,38 @@ export default function BottomSheetRangeCell( props ) {
 		step = 1,
 		minimumTrackTintColor = '#00669b',
 		maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090',
-		thumbTintColor = Platform.OS === 'ios' ? '#fff' : '#00669b',
+		thumbTintColor = Platform.OS === 'android' && '#00669b',
 		...cellProps
 	} = props;
+	const [ accessible, onChangeAccessible ] = useState( true );
+
+	const onCellPress = () => {
+		onChangeAccessible( false );
+		if ( this.sliderRef ) {
+			const reactTag = findNodeHandle( this.sliderRef );
+			AccessibilityInfo.setAccessibilityFocus( reactTag );
+		}
+	};
+
+	const accessibilityLabel =
+	sprintf(
+		/* translators: accessibility text. Inform about current spacer height value. %2$s: Spacer height current value. */
+		_x( '%1$s. Current value is %2$s px', 'range cell' ),
+		cellProps.label, value
+	);
 
 	return (
 		<Cell
-			editable={ false }
 			{ ...cellProps }
+			accessibilityRole={ 'none' }
+			editable={ true }
+			accessible={ accessible }
+			onPress={ onCellPress }
+			accessibilityLabel={ accessibilityLabel }
+			accessibilityHint={
+				/* translators: accessibility text (hint for focusing a slider) */
+				__( 'Double tap to change the value using slider' )
+			}
 		>
 			<Slider
 				value={ value }
@@ -40,6 +69,11 @@ export default function BottomSheetRangeCell( props ) {
 				maximumTrackTintColor={ maximumTrackTintColor }
 				thumbTintColor={ thumbTintColor }
 				onChangeValue={ onChangeValue }
+				ref={ ( slider ) => {
+					this.sliderRef = slider;
+				} }
+				accessibilityRole={ 'adjustable' }
+				accessible={ true }
 			/>
 		</Cell>
 	);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Slider as RNSlider, TextInput, View } from 'react-native';
+import { Slider as RNSlider, TextInput, View, Platform } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -33,6 +33,10 @@ class Slider extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		this.handleToggleFocus();
+	}
+
 	handleToggleFocus( validateInput = true ) {
 		const newState = { hasFocus: ! this.state.hasFocus };
 
@@ -83,12 +87,13 @@ class Slider extends Component {
 			minimumTrackTintColor,
 			maximumTrackTintColor,
 			thumbTintColor,
+			...sliderProps
 		} = this.props;
 
 		const { hasFocus, sliderValue } = this.state;
 
 		return (
-			<View style={ styles.sliderContainer }>
+			<View style={ styles.sliderContainer } accessible={ Platform.OS === 'android' }>
 				<RNSlider
 					value={ this.validateInput( sliderValue ) }
 					disabled={ disabled }
@@ -101,6 +106,7 @@ class Slider extends Component {
 					thumbTintColor={ thumbTintColor }
 					onValueChange={ this.handleChange }
 					onSlidingComplete={ this.handleValueSave }
+					{ ...sliderProps }
 				/>
 				<TextInput
 					style={ [ styles.sliderTextInput, hasFocus ? styles.isSelected : {} ] }