diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js index 5ee630b7f5afb..abdb96bb1caf9 100644 --- a/packages/block-editor/src/components/block-navigation/list.js +++ b/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, diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 4964cf54f821e..a6e91b8849dbe 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/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, diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js index f4a1cc8924a98..63b41474968bd 100644 --- a/packages/block-library/src/media-text/edit.native.js +++ b/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,9 +166,9 @@ class MediaTextEdit extends Component { onClick: () => setAttributes( { mediaPosition: 'right' } ), } ]; - const onVerticalAlignmentChange = ( alignment ) => { + /* const onVerticalAlignmentChange = ( alignment ) => { setAttributes( { verticalAlignment: alignment } ); - }; + }; */ return ( <> @@ -176,11 +176,12 @@ class MediaTextEdit extends Component { + { /* // Temporarily commenting out until alignment functionality is fixed + /> */ } diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js new file mode 100644 index 0000000000000..111d9987e973d --- /dev/null +++ b/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 ( + + + + + ); + } +} + +export default Slider; diff --git a/packages/components/src/mobile/slider/styles.scss b/packages/components/src/mobile/slider/styles.scss new file mode 100644 index 0000000000000..326880b621807 --- /dev/null +++ b/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; +} diff --git a/packages/env/lib/env.js b/packages/env/lib/env.js index 232fba9910cdf..b06fd8d3c3252 100644 --- a/packages/env/lib/env.js +++ b/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' );