RN: Add width settings to button block

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

@@ -20,6 +20,7 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 	LinkSettingsNavigation,
+	SelectControl,
 } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -39,6 +40,41 @@ const MAX_BORDER_RADIUS_VALUE = 50;
 const INITIAL_MAX_WIDTH = 108;
 const MIN_WIDTH = 40;
 
+function WidthPanel( { selectedWidth, setAttributes } ) {
+	function handleChange( newWidth ) {
+		// Check if we are toggling the width off
+		let width = selectedWidth === newWidth ? undefined : newWidth;
+		if ( newWidth === 'auto' ) {
+			width = undefined;
+		}
+		// Update attributes
+		setAttributes( { width } );
+	}
+
+	const options = [
+		{ value: 'auto', label: __( 'Auto' ) },
+		{ value: '25', label: '25%' },
+		{ value: '50', label: '50%' },
+		{ value: '75', label: '75%' },
+		{ value: '100', label: '100%' },
+	];
+
+	if ( ! selectedWidth ) {
+		selectedWidth = 'auto';
+	}
+
+	return (
+		<PanelBody title={ __( 'Width Settings' ) }>
+			<SelectControl
+				label={ __( 'Width' ) }
+				value={ selectedWidth }
+				onChange={ handleChange }
+				options={ options }
+			/>
+		</PanelBody>
+	);
+}
+
 class ButtonEdit extends Component {
 	constructor( props ) {
 		super( props );
@@ -293,8 +329,9 @@ class ButtonEdit extends Component {
 			onReplace,
 			mergeBlocks,
 			parentWidth,
+			setAttributes,
 		} = this.props;
-		const { placeholder, text, borderRadius, url } = attributes;
+		const { placeholder, text, borderRadius, url, width } = attributes;
 		const { maxWidth, isButtonFocused, placeholderTextWidth } = this.state;
 		const { paddingTop: spacing, borderWidth } = styles.defaultButton;
 
@@ -313,13 +350,19 @@ class ButtonEdit extends Component {
 		// To achieve proper expanding and shrinking `RichText` on iOS, there is a need to set a `minWidth`
 		// value at least on 1 when `RichText` is focused or when is not focused, but `RichText` value is
 		// different than empty string.
-		const minWidth =
+		let minWidth =
 			isButtonFocused || ( ! isButtonFocused && text && text !== '' )
 				? MIN_WIDTH
 				: placeholderTextWidth;
 		// To achieve proper expanding and shrinking `RichText` on Android, there is a need to set
 		// a `placeholder` as an empty string when `RichText` is focused,
 		// because `AztecView` is calculating a `minWidth` based on placeholder text.
+		// console.log( minWidth, maxWidth, width )
+
+		if ( width ) {
+			minWidth = Math.floor( maxWidth * ( width / 100 ) );
+		}
+
 		const placeholderText =
 			isButtonFocused || ( ! isButtonFocused && text && text !== '' )
 				? ''
@@ -408,6 +451,10 @@ class ButtonEdit extends Component {
 							onChange={ this.onChangeBorderRadius }
 						/>
 					</PanelBody>
+					<WidthPanel
+						selectedWidth={ width }
+						setAttributes={ setAttributes }
+					/>
 					<PanelBody title={ __( 'Link Settings' ) }>
 						{ this.getLinkSettings( true ) }
 					</PanelBody>

packages/components/src/unit-control/index.native.js

@@ -38,6 +38,7 @@ function UnitControl( {
 	unit,
 	getStylesFromColorScheme,
 	decimalNum,
+	disabledUnits,
 	...props
 } ) {
 	const pickerRef = useRef();
@@ -90,6 +91,13 @@ function UnitControl( {
 			: undefined;
 
 	const renderUnitPicker = () => {
+		if ( disabledUnits ) {
+			return (
+				<View style={ styles.unitText }>
+					<Text>{ unit }</Text>
+				</View>
+			);
+		}
 		return (
 			<View style={ styles.unitMenu } ref={ anchorNodeRef }>
 				{ renderUnitButton() }

packages/components/src/unit-control/style.native.scss

@@ -17,3 +17,9 @@
 	justify-content: center;
 	align-items: center;
 }
+
+.unitText {
+	justify-content: center;
+	align-items: center;
+	padding: 0 2px;
+}