@wordpress/block-library 6.0.1 → 6.0.5

package/build-module/button/edit.native.js

@@ -10,13 +10,13 @@ import { View, AccessibilityInfo, Platform, Text } from 'react-native';
  * WordPress dependencies
  */
 
-import { withInstanceId, compose } from '@wordpress/compose';
+import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
-import { RichText, InspectorControls, BlockControls, withGradient, store as blockEditorStore, getColorObjectByAttributeValues, getGradientValueBySlug, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles } from '@wordpress/block-editor';
+import { RichText, InspectorControls, BlockControls, store as blockEditorStore, getColorObjectByAttributeValues, getGradientValueBySlug, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, useSetting } from '@wordpress/block-editor';
 import { PanelBody, ToolbarGroup, ToolbarButton, LinkSettingsNavigation, UnitControl, getValueAndUnit, BottomSheetSelectControl, CSS_UNITS, filterUnitsWithSettings } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-import { withSelect, withDispatch } from '@wordpress/data';
 import { link } from '@wordpress/icons';
+import { store as editPostStore } from '@wordpress/edit-post';
 /**
  * Internal dependencies
  */
@@ -85,119 +85,113 @@ function WidthPanel({
   }));
 }
 
-class ButtonEdit extends Component {
-  constructor(props) {
-    var _props$attributes, _props$attributes$sty, _props$attributes$sty2;
-
-    super(props);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.onChangeBorderRadius = this.onChangeBorderRadius.bind(this);
-    this.onChangeBorderRadiusUnit = this.onChangeBorderRadiusUnit.bind(this);
-    this.onClearSettings = this.onClearSettings.bind(this);
-    this.onLayout = this.onLayout.bind(this);
-    this.onSetMaxWidth = this.onSetMaxWidth.bind(this);
-    this.dismissSheet = this.dismissSheet.bind(this);
-    this.onShowLinkSettings = this.onShowLinkSettings.bind(this);
-    this.onHideLinkSettings = this.onHideLinkSettings.bind(this);
-    this.onToggleButtonFocus = this.onToggleButtonFocus.bind(this);
-    this.onPlaceholderTextWidth = this.onPlaceholderTextWidth.bind(this);
-    this.setRef = this.setRef.bind(this);
-    this.onRemove = this.onRemove.bind(this);
-    this.getPlaceholderWidth = this.getPlaceholderWidth.bind(this);
-    const borderRadius = props === null || props === void 0 ? void 0 : (_props$attributes = props.attributes) === null || _props$attributes === void 0 ? void 0 : (_props$attributes$sty = _props$attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : (_props$attributes$sty2 = _props$attributes$sty.border) === null || _props$attributes$sty2 === void 0 ? void 0 : _props$attributes$sty2.radius;
-    const {
-      valueUnit = 'px'
-    } = getValueAndUnit(borderRadius) || {};
-    this.state = {
-      maxWidth: INITIAL_MAX_WIDTH,
-      isLinkSheetVisible: false,
-      isButtonFocused: true,
-      placeholderTextWidth: 0,
-      borderRadiusUnit: valueUnit
-    };
-    this.linkSettingsActions = [{
-      label: __('Remove link'),
-      onPress: this.onClearSettings
-    }];
-    this.linkSettingsOptions = {
-      url: {
-        label: __('Button Link URL'),
-        placeholder: __('Add URL'),
-        autoFocus: true,
-        autoFill: true
-      },
-      openInNewTab: {
-        label: __('Open in new tab')
-      },
-      linkRel: {
-        label: __('Link Rel'),
-        placeholder: _x('None', 'Link rel attribute value placeholder')
-      }
-    };
-    this.noFocusLinkSettingOptions = { ...this.linkSettingsOptions,
-      url: { ...this.linkSettingsOptions.url,
-        autoFocus: false
-      }
-    };
-  }
+function ButtonEdit(props) {
+  var _props$attributes, _props$attributes$sty, _props$attributes$sty2, _buttonStyle$border;
 
-  componentDidMount() {
-    this.onSetMaxWidth();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
+  const {
+    isSelected,
+    parentWidth
+  } = props;
+  const initialBorderRadius = props === null || props === void 0 ? void 0 : (_props$attributes = props.attributes) === null || _props$attributes === void 0 ? void 0 : (_props$attributes$sty = _props$attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : (_props$attributes$sty2 = _props$attributes$sty.border) === null || _props$attributes$sty2 === void 0 ? void 0 : _props$attributes$sty2.radius;
+  const {
+    valueUnit = 'px'
+  } = getValueAndUnit(initialBorderRadius) || {};
+  const {
+    editorSidebarOpened,
+    numOfButtons
+  } = useSelect(select => {
     const {
-      isSelected,
-      editorSidebarOpened,
-      parentWidth
-    } = this.props;
+      isEditorSidebarOpened
+    } = select(editPostStore);
     const {
-      isLinkSheetVisible,
-      isButtonFocused
-    } = this.state;
-
-    if (isSelected && !prevProps.isSelected) {
-      this.onToggleButtonFocus(true);
+      getBlockCount,
+      getBlockRootClientId
+    } = select(blockEditorStore);
+    const parentId = getBlockRootClientId(clientId);
+    const blockCount = getBlockCount(parentId);
+    const currentIsEditorSidebarOpened = isEditorSidebarOpened();
+    return {
+      editorSidebarOpened: isSelected && currentIsEditorSidebarOpened,
+      numOfButtons: blockCount
+    };
+  }, [clientId, isSelected]);
+  const {
+    closeGeneralSidebar
+  } = useDispatch(editPostStore);
+  const [maxWidth, setMaxWidth] = useState(INITIAL_MAX_WIDTH);
+  const [isLinkSheetVisible, setIsLinkSheetVisible] = useState(false);
+  const [isButtonFocused, setIsButtonFocused] = useState(true);
+  const [placeholderTextWidth, setPlaceholderTextWidth] = useState(0);
+  const [borderRadiusUnit, setBorderRadiusUnit] = useState(valueUnit);
+  const richTextRef = useRef();
+  const colors = useSetting('color.palette') || [];
+  const gradients = useSetting('color.gradients') || [];
+  useEffect(() => {
+    if (isSelected) {
+      onToggleButtonFocus(true);
     }
-
-    if (prevProps.parentWidth !== parentWidth) {
-      this.onSetMaxWidth(null, true);
-    } // Blur `RichText` on Android when link settings sheet or button settings sheet is opened,
+  }, [isSelected]);
+  useEffect(() => {
+    onSetMaxWidth(null, true);
+  }, [parentWidth]);
+  useEffect(() => {
+    // Blur `RichText` on Android when link settings sheet or button settings sheet is opened,
     // to avoid flashing caret after closing one of them
-
-
-    if (!prevProps.editorSidebarOpened && editorSidebarOpened || !prevState.isLinkSheetVisible && isLinkSheetVisible) {
-      if (Platform.OS === 'android' && this.richTextRef) {
-        this.richTextRef.blur();
-        this.onToggleButtonFocus(false);
+    if (editorSidebarOpened || isLinkSheetVisible) {
+      if (Platform.OS === 'android' && richTextRef !== null && richTextRef !== void 0 && richTextRef.current) {
+        richTextRef.current.blur();
+        onToggleButtonFocus(false);
       }
     }
-
-    if (this.richTextRef) {
+  }, [editorSidebarOpened, isLinkSheetVisible]);
+  useEffect(() => {
+    if (richTextRef !== null && richTextRef !== void 0 && richTextRef.current) {
       if (!isSelected && isButtonFocused) {
-        this.onToggleButtonFocus(false);
+        onToggleButtonFocus(false);
       }
 
       if (isSelected && !isButtonFocused) {
         AccessibilityInfo.isScreenReaderEnabled().then(enabled => {
           if (enabled) {
-            this.onToggleButtonFocus(true);
-            this.richTextRef.focus();
+            onToggleButtonFocus(true);
+            richTextRef === null || richTextRef === void 0 ? void 0 : richTextRef.current.focus();
           }
         });
       }
     }
-  }
+  }, [isSelected, isButtonFocused]);
+  const linkSettingsActions = [{
+    label: __('Remove link'),
+    onPress: onClearSettings
+  }];
+  const linkSettingsOptions = {
+    url: {
+      label: __('Button Link URL'),
+      placeholder: __('Add URL'),
+      autoFocus: true,
+      autoFill: true
+    },
+    openInNewTab: {
+      label: __('Open in new tab')
+    },
+    linkRel: {
+      label: __('Link Rel'),
+      placeholder: _x('None', 'Link rel attribute value placeholder')
+    }
+  };
+  const noFocusLinkSettingOptions = { ...linkSettingsOptions,
+    url: { ...linkSettingsOptions.url,
+      autoFocus: false
+    }
+  };
 
-  getBackgroundColor() {
+  function getBackgroundColor() {
     var _colorProps$style, _colorProps$style2;
 
     const {
       attributes,
-      colors,
-      gradients,
       style
-    } = this.props;
+    } = props;
     const {
       backgroundColor,
       gradient
@@ -216,14 +210,13 @@ class ButtonEdit extends Component {
     return (colorObject === null || colorObject === void 0 ? void 0 : colorObject.color) || ((_colorProps$style = colorProps.style) === null || _colorProps$style === void 0 ? void 0 : _colorProps$style.backgroundColor) || ((_colorProps$style2 = colorProps.style) === null || _colorProps$style2 === void 0 ? void 0 : _colorProps$style2.background) || (style === null || style === void 0 ? void 0 : style.backgroundColor) || styles.defaultButton.backgroundColor;
   }
 
-  getTextColor() {
+  function getTextColor() {
     var _colorProps$style3;
 
     const {
       attributes,
-      colors,
       style
-    } = this.props;
+    } = props;
     const colorProps = getColorClassesAndStyles(attributes); // Retrieve named color object to force inline styles for themes that
     // do not load their color stylesheets in the editor.
 
@@ -231,53 +224,48 @@ class ButtonEdit extends Component {
     return (colorObject === null || colorObject === void 0 ? void 0 : colorObject.color) || ((_colorProps$style3 = colorProps.style) === null || _colorProps$style3 === void 0 ? void 0 : _colorProps$style3.color) || (style === null || style === void 0 ? void 0 : style.color) || styles.defaultButton.color;
   }
 
-  onChangeText(value) {
+  function onChangeText(value) {
     const {
       setAttributes
-    } = this.props;
+    } = props;
     setAttributes({
       text: value
     });
   }
 
-  onChangeBorderRadius(newRadius) {
+  function onChangeBorderRadius(newRadius) {
     const {
       setAttributes,
       attributes
-    } = this.props;
-    const {
-      borderRadiusUnit
-    } = this.state;
+    } = props;
     const {
       style
     } = attributes;
-    const newStyle = this.getNewStyle(style, newRadius, borderRadiusUnit);
+    const newStyle = getNewStyle(style, newRadius, borderRadiusUnit);
     setAttributes({
       style: newStyle
     });
   }
 
-  onChangeBorderRadiusUnit(newRadiusUnit) {
+  function onChangeBorderRadiusUnit(newRadiusUnit) {
     var _attributes$style, _attributes$style$bor;
 
     const {
       setAttributes,
       attributes
-    } = this.props;
+    } = props;
     const {
       style
     } = attributes;
-    const borderRadius = this.getBorderRadiusValue(attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : (_attributes$style$bor = _attributes$style.border) === null || _attributes$style$bor === void 0 ? void 0 : _attributes$style$bor.radius);
-    const newStyle = this.getNewStyle(style, borderRadius, newRadiusUnit);
+    const newBorderRadius = getBorderRadiusValue(attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : (_attributes$style$bor = _attributes$style.border) === null || _attributes$style$bor === void 0 ? void 0 : _attributes$style$bor.radius);
+    const newStyle = getNewStyle(style, newBorderRadius, newRadiusUnit);
     setAttributes({
       style: newStyle
     });
-    this.setState({
-      borderRadiusUnit: newRadiusUnit
-    });
+    setBorderRadiusUnit(newRadiusUnit);
   }
 
-  getNewStyle(style, radius, radiusUnit) {
+  function getNewStyle(style, radius, radiusUnit) {
     return { ...style,
       border: { ...(style === null || style === void 0 ? void 0 : style.border),
         radius: `${radius}${radiusUnit}` // Store the value with the unit so that it works as expected.
@@ -286,54 +274,42 @@ class ButtonEdit extends Component {
     };
   }
 
-  onShowLinkSettings() {
-    this.setState({
-      isLinkSheetVisible: true
-    });
+  function onShowLinkSettings() {
+    setIsLinkSheetVisible(true);
   }
 
-  onHideLinkSettings() {
-    this.setState({
-      isLinkSheetVisible: false
-    });
+  function onHideLinkSettings() {
+    setIsLinkSheetVisible(false);
   }
 
-  onToggleButtonFocus(value) {
-    if (value !== this.state.isButtonFocused) {
-      this.setState({
-        isButtonFocused: value
-      });
+  function onToggleButtonFocus(value) {
+    if (value !== isButtonFocused) {
+      setIsButtonFocused(value);
     }
   }
 
-  onClearSettings() {
+  function onClearSettings() {
     const {
       setAttributes
-    } = this.props;
+    } = props;
     setAttributes({
       url: '',
       rel: '',
       linkTarget: ''
     });
-    this.onHideLinkSettings();
+    onHideLinkSettings();
   }
 
-  onLayout({
+  function onLayout({
     nativeEvent
   }) {
     const {
       width
     } = nativeEvent.layout;
-    this.onSetMaxWidth(width);
+    onSetMaxWidth(width);
   }
 
-  onSetMaxWidth(width, isParentWidthDidChange = false) {
-    const {
-      maxWidth
-    } = this.state;
-    const {
-      parentWidth
-    } = this.props;
+  const onSetMaxWidth = useCallback((width, isParentWidthDidChange = false) => {
     const {
       marginRight: spacing
     } = styles.defaultButton;
@@ -341,22 +317,17 @@ class ButtonEdit extends Component {
     const isWidthChanged = maxWidth !== width;
 
     if (parentWidth && !width && isParentWidthChanged) {
-      this.setState({
-        maxWidth: parentWidth - spacing
-      });
+      setMaxWidth(parentWidth - spacing);
     } else if (!parentWidth && width && isWidthChanged) {
-      this.setState({
-        maxWidth: width - spacing
-      });
+      setMaxWidth(width - spacing);
     }
-  }
+  }, [maxWidth, parentWidth]);
 
-  onRemove() {
+  function onRemove() {
     const {
-      numOfButtons,
       onDeleteBlock,
       onReplace
-    } = this.props;
+    } = props;
 
     if (numOfButtons === 1) {
       onDeleteBlock();
@@ -365,65 +336,62 @@ class ButtonEdit extends Component {
     }
   }
 
-  dismissSheet() {
-    this.onHideLinkSettings();
-    this.props.closeSettingsBottomSheet();
+  function onPlaceholderTextWidth({
+    nativeEvent
+  }) {
+    const textWidth = nativeEvent.lines[0] && nativeEvent.lines[0].width;
+
+    if (textWidth && textWidth !== placeholderTextWidth) {
+      setPlaceholderTextWidth(Math.min(textWidth, maxWidth));
+    }
   }
 
-  getLinkSettings(isCompatibleWithSettings) {
-    const {
-      isLinkSheetVisible
-    } = this.state;
+  const onSetRef = useCallback(ref => {
+    richTextRef.current = ref;
+  }, [richTextRef]);
+  const onUnstableOnFocus = useCallback(() => {
+    onToggleButtonFocus(true);
+  }, []);
+  const onBlur = useCallback(() => {
+    onSetMaxWidth();
+  }, []);
+
+  function dismissSheet() {
+    onHideLinkSettings();
+    closeGeneralSidebar();
+  }
+
+  function getLinkSettings(isCompatibleWithSettings) {
     const {
       attributes,
       setAttributes
-    } = this.props;
+    } = props;
     return createElement(LinkSettingsNavigation, {
       isVisible: isLinkSheetVisible,
       url: attributes.url,
       rel: attributes.rel,
       linkTarget: attributes.linkTarget,
-      onClose: this.dismissSheet,
+      onClose: dismissSheet,
       setAttributes: setAttributes,
       withBottomSheet: !isCompatibleWithSettings,
       hasPicker: true,
-      actions: this.linkSettingsActions,
-      options: isCompatibleWithSettings ? this.linkSettingsOptions : this.noFocusLinkSettingOptions,
+      actions: linkSettingsActions,
+      options: isCompatibleWithSettings ? linkSettingsOptions : noFocusLinkSettingOptions,
       showIcon: !isCompatibleWithSettings
     });
-  }
-
-  setRef(richText) {
-    this.richTextRef = richText;
   } // Render `Text` with `placeholderText` styled as a placeholder
   // to calculate its width which then is set as a `minWidth`
 
 
-  getPlaceholderWidth(placeholderText) {
+  function getPlaceholderWidth(placeholderText) {
     return createElement(Text, {
       style: styles.placeholder,
-      onTextLayout: this.onPlaceholderTextWidth
+      onTextLayout: onPlaceholderTextWidth
     }, placeholderText);
   }
 
-  onPlaceholderTextWidth({
-    nativeEvent
-  }) {
-    const {
-      maxWidth,
-      placeholderTextWidth
-    } = this.state;
-    const textWidth = nativeEvent.lines[0] && nativeEvent.lines[0].width;
-
-    if (textWidth && textWidth !== placeholderTextWidth) {
-      this.setState({
-        placeholderTextWidth: Math.min(textWidth, maxWidth)
-      });
-    }
-  }
-
-  getBorderRadiusValue(borderRadius, defaultBorderRadius) {
-    const valueAndUnit = getValueAndUnit(borderRadius);
+  function getBorderRadiusValue(currentBorderRadius, defaultBorderRadius) {
+    const valueAndUnit = getValueAndUnit(currentBorderRadius);
 
     if (Number.isInteger(parseInt(valueAndUnit === null || valueAndUnit === void 0 ? void 0 : valueAndUnit.valueToConvert))) {
       return parseFloat(valueAndUnit.valueToConvert);
@@ -432,159 +400,119 @@ class ButtonEdit extends Component {
     return defaultBorderRadius;
   }
 
-  render() {
-    var _buttonStyle$border;
+  const {
+    attributes,
+    clientId,
+    onReplace,
+    mergeBlocks,
+    setAttributes,
+    style
+  } = props;
+  const {
+    placeholder,
+    text,
+    style: buttonStyle,
+    url,
+    align = 'center',
+    width
+  } = attributes;
+  const {
+    paddingTop: spacing,
+    borderWidth
+  } = styles.defaultButton;
 
-    const {
-      attributes,
-      isSelected,
-      clientId,
-      onReplace,
-      mergeBlocks,
-      parentWidth,
-      setAttributes,
-      style
-    } = this.props;
-    const {
-      placeholder,
-      text,
-      style: buttonStyle,
-      url,
-      align = 'center',
-      width
-    } = attributes;
-    const {
-      maxWidth,
-      isButtonFocused,
-      placeholderTextWidth,
-      borderRadiusUnit
-    } = this.state;
-    const {
-      paddingTop: spacing,
-      borderWidth
-    } = styles.defaultButton;
+  if (parentWidth === 0) {
+    return null;
+  }
 
-    if (parentWidth === 0) {
-      return null;
-    }
+  const currentBorderRadius = buttonStyle === null || buttonStyle === void 0 ? void 0 : (_buttonStyle$border = buttonStyle.border) === null || _buttonStyle$border === void 0 ? void 0 : _buttonStyle$border.radius;
+  const borderRadiusValue = getBorderRadiusValue(currentBorderRadius, styles.defaultButton.borderRadius);
+  const buttonBorderRadiusValue = borderRadiusUnit === 'px' || borderRadiusUnit === '%' ? borderRadiusValue : Math.floor(14 * borderRadiusValue); // lets assume that the font size is set to 14px; TO get a nicer preview.
 
-    const borderRadius = buttonStyle === null || buttonStyle === void 0 ? void 0 : (_buttonStyle$border = buttonStyle.border) === null || _buttonStyle$border === void 0 ? void 0 : _buttonStyle$border.radius;
-    const borderRadiusValue = this.getBorderRadiusValue(borderRadius, styles.defaultButton.borderRadius);
-    const buttonBorderRadiusValue = borderRadiusUnit === 'px' || borderRadiusUnit === '%' ? borderRadiusValue : Math.floor(14 * borderRadiusValue); // lets assume that the font size is set to 14px; TO get a nicer preview.
-
-    const outlineBorderRadius = buttonBorderRadiusValue > 0 ? buttonBorderRadiusValue + spacing + borderWidth : 0; // 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.
-
-    let minWidth = isButtonFocused || !isButtonFocused && text && text !== '' ? MIN_WIDTH : placeholderTextWidth;
-
-    if (width) {
-      // Set the width of the button.
-      minWidth = Math.floor(maxWidth * (width / 100) - MIN_WIDTH_MARGINS[width]);
-    } // 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.
-
-
-    const placeholderText = isButtonFocused || !isButtonFocused && text && text !== '' ? '' : placeholder || __('Add text…');
-    const backgroundColor = this.getBackgroundColor();
-    const textColor = this.getTextColor();
-    const isFixedWidth = !!width;
-    return createElement(View, {
-      onLayout: this.onLayout
-    }, this.getPlaceholderWidth(placeholderText), createElement(ColorBackground, {
-      borderRadiusValue: buttonBorderRadiusValue,
-      backgroundColor: backgroundColor,
-      isSelected: isSelected
-    }, isSelected && createElement(View, {
-      pointerEvents: "none",
-      style: [styles.outline, {
-        borderRadius: outlineBorderRadius,
-        borderColor: backgroundColor
-      }]
-    }), createElement(RichText, {
-      setRef: this.setRef,
-      placeholder: placeholderText,
-      value: text,
-      onChange: this.onChangeText,
-      style: { ...richTextStyle.richText,
-        paddingLeft: isFixedWidth ? 0 : richTextStyle.richText.paddingLeft,
-        paddingRight: isFixedWidth ? 0 : richTextStyle.richText.paddingRight,
-        color: textColor
-      },
-      textAlign: align,
-      placeholderTextColor: (style === null || style === void 0 ? void 0 : style.color) || styles.placeholderTextColor.color,
-      identifier: "text",
-      tagName: "p",
-      minWidth: minWidth // The minimum Button size.
-      ,
-      maxWidth: isFixedWidth ? minWidth : maxWidth // The width of the screen.
-      ,
-      id: clientId,
-      isSelected: isButtonFocused,
-      withoutInteractiveFormatting: true,
-      unstableOnFocus: () => this.onToggleButtonFocus(true),
-      __unstableMobileNoFocusOnMount: !isSelected,
-      selectionColor: textColor,
-      onBlur: () => {
-        this.onSetMaxWidth();
-      },
-      onReplace: onReplace,
-      onRemove: this.onRemove,
-      onMerge: mergeBlocks
-    })), isSelected && createElement(Fragment, null, createElement(BlockControls, null, createElement(ToolbarGroup, null, createElement(ToolbarButton, {
-      title: __('Edit link'),
-      icon: link,
-      onClick: this.onShowLinkSettings,
-      isActive: url
-    }))), this.getLinkSettings(false), createElement(InspectorControls, null, createElement(PanelBody, {
-      title: __('Border Settings')
-    }, createElement(UnitControl, {
-      label: __('Border Radius'),
-      min: MIN_BORDER_RADIUS_VALUE,
-      max: MAX_BORDER_RADIUS_VALUE,
-      value: borderRadiusValue,
-      onChange: this.onChangeBorderRadius,
-      onUnitChange: this.onChangeBorderRadiusUnit,
-      unit: this.state.borderRadiusUnit,
-      units: filterUnitsWithSettings(['px', 'em', 'rem'], CSS_UNITS)
-    })), createElement(WidthPanel, {
-      selectedWidth: width,
-      setAttributes: setAttributes
-    }), createElement(PanelBody, {
-      title: __('Link Settings')
-    }, this.getLinkSettings(true)))));
-  }
+  const outlineBorderRadius = buttonBorderRadiusValue > 0 ? buttonBorderRadiusValue + spacing + borderWidth : 0; // 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.
 
-}
+  let minWidth = isButtonFocused || !isButtonFocused && text && text !== '' ? MIN_WIDTH : placeholderTextWidth;
 
-export default compose([withInstanceId, withGradient, withSelect((select, {
-  clientId,
-  isSelected
-}) => {
-  const {
-    isEditorSidebarOpened
-  } = select('core/edit-post');
-  const {
-    getBlockCount,
-    getBlockRootClientId,
-    getSettings
-  } = select(blockEditorStore);
-  const parentId = getBlockRootClientId(clientId);
-  const numOfButtons = getBlockCount(parentId);
-  const settings = getSettings();
-  return {
-    colors: (settings === null || settings === void 0 ? void 0 : settings.colors) || [],
-    gradients: (settings === null || settings === void 0 ? void 0 : settings.gradients) || [],
-    editorSidebarOpened: isSelected && isEditorSidebarOpened(),
-    numOfButtons
-  };
-}), withDispatch(dispatch => {
-  return {
-    closeSettingsBottomSheet() {
-      dispatch('core/edit-post').closeGeneralSidebar();
-    }
+  if (width) {
+    // Set the width of the button.
+    minWidth = Math.floor(maxWidth * (width / 100) - MIN_WIDTH_MARGINS[width]);
+  } // 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.
 
+
+  const placeholderText = isButtonFocused || !isButtonFocused && text && text !== '' ? '' : placeholder || __('Add text…');
+  const backgroundColor = getBackgroundColor();
+  const textColor = getTextColor();
+  const isFixedWidth = !!width;
+  const outLineStyles = [styles.outline, {
+    borderRadius: outlineBorderRadius,
+    borderColor: backgroundColor
+  }];
+  const textStyles = { ...richTextStyle.richText,
+    paddingLeft: isFixedWidth ? 0 : richTextStyle.richText.paddingLeft,
+    paddingRight: isFixedWidth ? 0 : richTextStyle.richText.paddingRight,
+    color: textColor
   };
-})])(ButtonEdit);
+  return createElement(View, {
+    onLayout: onLayout
+  }, getPlaceholderWidth(placeholderText), createElement(ColorBackground, {
+    borderRadiusValue: buttonBorderRadiusValue,
+    backgroundColor: backgroundColor,
+    isSelected: isSelected
+  }, isSelected && createElement(View, {
+    pointerEvents: "none",
+    style: outLineStyles
+  }), createElement(RichText, {
+    setRef: onSetRef,
+    placeholder: placeholderText,
+    value: text,
+    onChange: onChangeText,
+    style: textStyles,
+    textAlign: align,
+    placeholderTextColor: (style === null || style === void 0 ? void 0 : style.color) || styles.placeholderTextColor.color,
+    identifier: "text",
+    tagName: "p",
+    minWidth: minWidth // The minimum Button size.
+    ,
+    maxWidth: isFixedWidth ? minWidth : maxWidth // The width of the screen.
+    ,
+    id: clientId,
+    isSelected: isButtonFocused,
+    withoutInteractiveFormatting: true,
+    unstableOnFocus: onUnstableOnFocus,
+    __unstableMobileNoFocusOnMount: !isSelected,
+    selectionColor: textColor,
+    onBlur: onBlur,
+    onReplace: onReplace,
+    onRemove: onRemove,
+    onMerge: mergeBlocks,
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize
+  })), isSelected && createElement(Fragment, null, createElement(BlockControls, null, createElement(ToolbarGroup, null, createElement(ToolbarButton, {
+    title: __('Edit link'),
+    icon: link,
+    onClick: onShowLinkSettings,
+    isActive: url
+  }))), getLinkSettings(false), createElement(InspectorControls, null, createElement(PanelBody, {
+    title: __('Border Settings')
+  }, createElement(UnitControl, {
+    label: __('Border Radius'),
+    min: MIN_BORDER_RADIUS_VALUE,
+    max: MAX_BORDER_RADIUS_VALUE,
+    value: borderRadiusValue,
+    onChange: onChangeBorderRadius,
+    onUnitChange: onChangeBorderRadiusUnit,
+    unit: borderRadiusUnit,
+    units: filterUnitsWithSettings(['px', 'em', 'rem'], CSS_UNITS)
+  })), createElement(WidthPanel, {
+    selectedWidth: width,
+    setAttributes: setAttributes
+  }), createElement(PanelBody, {
+    title: __('Link Settings')
+  }, getLinkSettings(true)))));
+}
+
+export default ButtonEdit;
 //# sourceMappingURL=edit.native.js.map