diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index 144c823cb17298..d901ff2644bb51 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -1,15 +1,20 @@ /** * External dependencies */ -import { ScrollView } from 'react-native'; +import { + ScrollView, + View, + Text, + TouchableWithoutFeedback, + Platform, +} from 'react-native'; import { map } from 'lodash'; /** * WordPress dependencies */ - import { withSelect, useDispatch } from '@wordpress/data'; -import { compose, withPreferredColorScheme } from '@wordpress/compose'; +import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; import { createBlock } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; import { @@ -17,6 +22,8 @@ import { BottomSheet, UnsupportedFooterControl, } from '@wordpress/components'; +import { Icon, close } from '@wordpress/icons'; + /** * Internal dependencies */ @@ -36,13 +43,43 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { ); }; const { replaceInnerBlocks } = useDispatch( 'core/block-editor' ); + const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; + const isIOS = Platform.OS === 'ios'; + + const cancelButtonStyle = usePreferredColorSchemeStyle( + styles.cancelButton, + styles.cancelButtonDark + ); return ( + + { isIOS ? ( + + { __( 'Cancel' ) } + + ) : ( + + ) } + + + } > { setAttributes( { verticalAlignment: alignment } ); @@ -69,7 +70,7 @@ function ColumnEdit( { min={ 1 } max={ 100 } step={ 0.1 } - value={ width || 50 } + value={ width || 100 / columnCount } onChange={ ( nextWidth ) => { setAttributes( { width: nextWidth, @@ -135,6 +136,8 @@ export default compose( [ const parentId = getBlockRootClientId( clientId ); const hasChildren = !! getBlockCount( clientId ); + const columnCount = getBlockCount( parentId ); + const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId; @@ -142,6 +145,7 @@ export default compose( [ hasChildren, isParentSelected, isSelected, + columnCount, }; } ), withPreferredColorScheme, diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 62b7be3ac42a5e..1738988a5e2896 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -76,10 +76,14 @@ class BottomSheetRangeCell extends Component { } handleChange( text ) { - const { hasFocus } = this.state; + text = + typeof text === 'number' + ? this.toFixed( text ) + : text.replace( ',', '.' ); + if ( ! isNaN( Number( text ) ) ) { this.setState( { - sliderValue: ! hasFocus ? this.toFixed( text ) : text, + sliderValue: text, } ); this.announceCurrentValue( text ); } @@ -105,10 +109,7 @@ class BottomSheetRangeCell extends Component { return Math.min( Math.max( text, minimumValue ), maximumValue ); } return Math.min( - Math.max( - text.replace( /[^0-9]\./g, '' ).replace( /^0+(?=\d)/, '' ), - minimumValue - ), + Math.max( text.replace( /[^0-9.]\,/g, '' ), minimumValue ), maximumValue ); }