Merge branch 'rnmobile/releases' into rnmobile/release-v1.17.0

packages/block-editor/src/components/block-navigation/list.js

@@ -40,6 +40,28 @@ function getBlockDisplayName( blockType, attributes ) {
 	return formatlessDisplayName;
 }
 
+/**
+ * Get the block display name, if it has one, or the block title if it doesn't.
+ *
+ * @param {Object} blockType  The block type.
+ * @param {Object} attributes The values of the block's attributes
+ *
+ * @return {string} The display name value.
+ */
+function getBlockDisplayName( blockType, attributes ) {
+	const displayNameAttribute = blockType.__experimentalDisplayName;
+
+	if ( ! displayNameAttribute || ! attributes[ displayNameAttribute ] ) {
+		return blockType.title;
+	}
+
+	// Strip any formatting.
+	const richTextValue = create( { html: attributes[ displayNameAttribute ] } );
+	const formatlessDisplayName = getTextContent( richTextValue );
+
+	return formatlessDisplayName;
+}
+
 export default function BlockNavigationList( {
 	blocks,
 	selectedBlockClientId,

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

@@ -149,6 +149,11 @@ export default compose( [
 			allowedBlockType = allowedBlocks[ 0 ];
 		}
 
+		const hasSingleBlockType = allowedBlocks && ( get( allowedBlocks, [ 'length' ], 0 ) === 1 );
+		let allowedBlockType = false;
+		if ( hasSingleBlockType ) {
+			allowedBlockType = getBlockType( allowedBlocks );
+		}
 		return {
 			hasItems: hasInserterItems( rootClientId ),
 			hasSingleBlockType,

packages/block-library/src/media-text/edit.native.js

@@ -10,7 +10,7 @@ import { View } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
-	BlockVerticalAlignmentToolbar,
+	//	BlockVerticalAlignmentToolbar,
 	InnerBlocks,
 	withColors,
 } from '@wordpress/block-editor';
@@ -166,21 +166,22 @@ class MediaTextEdit extends Component {
 			onClick: () => setAttributes( { mediaPosition: 'right' } ),
 		} ];
 
-		const onVerticalAlignmentChange = ( alignment ) => {
+		/* const onVerticalAlignmentChange = ( alignment ) => {
 			setAttributes( { verticalAlignment: alignment } );
-		};
+		}; */
 
 		return (
 			<>
 				<BlockControls>
 					<Toolbar
 						controls={ toolbarControls }
 					/>
+					{ /* // Temporarily commenting out until alignment functionality is fixed
 					<BlockVerticalAlignmentToolbar
 						onChange={ onVerticalAlignmentChange }
 						value={ verticalAlignment }
 						isCollapsed={ false }
-					/>
+					/> */ }
 				</BlockControls>
 				<View style={ containerStyles }>
 					<View style={ { width: widthString } }>

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

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import { Slider as RNSlider, TextInput, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+class Slider extends Component {
+	constructor( props ) {
+		super( props );
+		this.handleToggleFocus = this.handleToggleFocus.bind( this );
+		this.handleChange = this.handleChange.bind( this );
+		this.handleValueSave = this.handleValueSave.bind( this );
+		this.handleReset = this.handleReset.bind( this );
+
+		const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue );
+
+		this.state = { hasFocus: false, initialValue, sliderValue: initialValue };
+	}
+
+	componentDidUpdate( ) {
+		const reset = this.props.value === null;
+		if ( reset ) {
+			this.handleReset();
+		}
+	}
+
+	handleToggleFocus( validateInput = true ) {
+		const newState = { hasFocus: ! this.state.hasFocus };
+
+		if ( validateInput ) {
+			const sliderValue = this.validateInput( this.state.sliderValue );
+			this.handleValueSave( sliderValue );
+		}
+
+		this.setState( newState );
+	}
+
+	validateInput( text ) {
+		const { minimumValue, maximumValue } = this.props;
+		if ( ! text ) {
+			return minimumValue;
+		}
+		if ( typeof text === 'number' ) {
+			return Math.min( Math.max( text, minimumValue ), maximumValue );
+		}
+		return Math.min( Math.max( text.replace( /[^0-9]/g, '' ).replace( /^0+(?=\d)/, '' ), minimumValue ), maximumValue );
+	}
+
+	handleChange( text ) {
+		if ( ! isNaN( Number( text ) ) ) {
+			this.setState( { sliderValue: text } );
+		}
+	}
+
+	handleValueSave( text ) {
+		if ( ! isNaN( Number( text ) ) ) {
+			if ( this.props.onChangeValue ) {
+				this.props.onChangeValue( text );
+			}
+			this.setState( { sliderValue: text } );
+		}
+	}
+
+	handleReset() {
+		this.handleValueSave( this.props.defaultValue || this.state.initialValue );
+	}
+
+	render() {
+		const {
+			minimumValue,
+			maximumValue,
+			disabled,
+			step,
+			minimumTrackTintColor,
+			maximumTrackTintColor,
+			thumbTintColor,
+		} = this.props;
+
+		const { hasFocus, sliderValue } = this.state;
+
+		return (
+			<View style={ styles.sliderContainer }>
+				<RNSlider
+					value={ this.validateInput( sliderValue ) }
+					disabled={ disabled }
+					style={ styles.slider }
+					step={ step }
+					minimumValue={ minimumValue }
+					maximumValue={ maximumValue }
+					minimumTrackTintColor={ minimumTrackTintColor }
+					maximumTrackTintColor={ maximumTrackTintColor }
+					thumbTintColor={ thumbTintColor }
+					onValueChange={ this.handleChange }
+					onSlidingComplete={ this.handleValueSave }
+				/>
+				<TextInput
+					style={ [ styles.sliderTextInput, hasFocus ? styles.isSelected : {} ] }
+					onChangeText={ this.handleChange }
+					onFocus={ this.handleToggleFocus }
+					onBlur={ this.handleToggleFocus }
+					keyboardType="numeric"
+					value={ `${ sliderValue }` }
+				/>
+			</View>
+		);
+	}
+}
+
+export default Slider;

packages/components/src/mobile/slider/styles.scss

@@ -0,0 +1,27 @@
+.sliderContainer {
+	flex: 1;
+	flex-direction: row;
+	align-content: center;
+	justify-content: space-evenly;
+}
+
+.slider {
+	flex-grow: 1;
+}
+
+.sliderTextInput {
+	width: 40px;
+	height: 25px;
+	align-self: center;
+	margin-left: 10px;
+	border-width: 1px;
+	border-radius: 4px;
+	border-color: $dark-gray-150;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.isSelected {
+	border-width: 2px;
+	border-color: $blue-wordpress;
+}

packages/env/lib/env.js

@@ -11,6 +11,7 @@ const wait = require( 'util' ).promisify( setTimeout );
 /**
  * Internal dependencies
  */
+const detectContext = require( './detect-context' );
 const createDockerComposeConfig = require( './create-docker-compose-config' );
 const detectContext = require( './detect-context' );
 const resolveDependencies = require( './resolve-dependencies' );