@wordpress/block-library 6.0.1 → 6.0.5

package/build/button/edit.native.js

@@ -11,7 +11,7 @@ var _element = require("@wordpress/element");
 
 var _reactNative = require("react-native");
 
-var _compose = require("@wordpress/compose");
+var _data = require("@wordpress/data");
 
 var _i18n = require("@wordpress/i18n");
 
@@ -19,10 +19,10 @@ var _blockEditor = require("@wordpress/block-editor");
 
 var _components = require("@wordpress/components");
 
-var _data = require("@wordpress/data");
-
 var _icons = require("@wordpress/icons");
 
+var _editPost = require("@wordpress/edit-post");
+
 var _richText = _interopRequireDefault(require("./rich-text.scss"));
 
 var _editor = _interopRequireDefault(require("./editor.scss"));
@@ -92,119 +92,113 @@ function WidthPanel({
   }));
 }
 
-class ButtonEdit extends _element.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'
-    } = (0, _components.getValueAndUnit)(borderRadius) || {};
-    this.state = {
-      maxWidth: INITIAL_MAX_WIDTH,
-      isLinkSheetVisible: false,
-      isButtonFocused: true,
-      placeholderTextWidth: 0,
-      borderRadiusUnit: valueUnit
-    };
-    this.linkSettingsActions = [{
-      label: (0, _i18n.__)('Remove link'),
-      onPress: this.onClearSettings
-    }];
-    this.linkSettingsOptions = {
-      url: {
-        label: (0, _i18n.__)('Button Link URL'),
-        placeholder: (0, _i18n.__)('Add URL'),
-        autoFocus: true,
-        autoFill: true
-      },
-      openInNewTab: {
-        label: (0, _i18n.__)('Open in new tab')
-      },
-      linkRel: {
-        label: (0, _i18n.__)('Link Rel'),
-        placeholder: (0, _i18n._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'
+  } = (0, _components.getValueAndUnit)(initialBorderRadius) || {};
+  const {
+    editorSidebarOpened,
+    numOfButtons
+  } = (0, _data.useSelect)(select => {
     const {
-      isSelected,
-      editorSidebarOpened,
-      parentWidth
-    } = this.props;
+      isEditorSidebarOpened
+    } = select(_editPost.store);
     const {
-      isLinkSheetVisible,
-      isButtonFocused
-    } = this.state;
-
-    if (isSelected && !prevProps.isSelected) {
-      this.onToggleButtonFocus(true);
+      getBlockCount,
+      getBlockRootClientId
+    } = select(_blockEditor.store);
+    const parentId = getBlockRootClientId(clientId);
+    const blockCount = getBlockCount(parentId);
+    const currentIsEditorSidebarOpened = isEditorSidebarOpened();
+    return {
+      editorSidebarOpened: isSelected && currentIsEditorSidebarOpened,
+      numOfButtons: blockCount
+    };
+  }, [clientId, isSelected]);
+  const {
+    closeGeneralSidebar
+  } = (0, _data.useDispatch)(_editPost.store);
+  const [maxWidth, setMaxWidth] = (0, _element.useState)(INITIAL_MAX_WIDTH);
+  const [isLinkSheetVisible, setIsLinkSheetVisible] = (0, _element.useState)(false);
+  const [isButtonFocused, setIsButtonFocused] = (0, _element.useState)(true);
+  const [placeholderTextWidth, setPlaceholderTextWidth] = (0, _element.useState)(0);
+  const [borderRadiusUnit, setBorderRadiusUnit] = (0, _element.useState)(valueUnit);
+  const richTextRef = (0, _element.useRef)();
+  const colors = (0, _blockEditor.useSetting)('color.palette') || [];
+  const gradients = (0, _blockEditor.useSetting)('color.gradients') || [];
+  (0, _element.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]);
+  (0, _element.useEffect)(() => {
+    onSetMaxWidth(null, true);
+  }, [parentWidth]);
+  (0, _element.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 (_reactNative.Platform.OS === 'android' && this.richTextRef) {
-        this.richTextRef.blur();
-        this.onToggleButtonFocus(false);
+    if (editorSidebarOpened || isLinkSheetVisible) {
+      if (_reactNative.Platform.OS === 'android' && richTextRef !== null && richTextRef !== void 0 && richTextRef.current) {
+        richTextRef.current.blur();
+        onToggleButtonFocus(false);
       }
     }
-
-    if (this.richTextRef) {
+  }, [editorSidebarOpened, isLinkSheetVisible]);
+  (0, _element.useEffect)(() => {
+    if (richTextRef !== null && richTextRef !== void 0 && richTextRef.current) {
       if (!isSelected && isButtonFocused) {
-        this.onToggleButtonFocus(false);
+        onToggleButtonFocus(false);
       }
 
       if (isSelected && !isButtonFocused) {
         _reactNative.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: (0, _i18n.__)('Remove link'),
+    onPress: onClearSettings
+  }];
+  const linkSettingsOptions = {
+    url: {
+      label: (0, _i18n.__)('Button Link URL'),
+      placeholder: (0, _i18n.__)('Add URL'),
+      autoFocus: true,
+      autoFill: true
+    },
+    openInNewTab: {
+      label: (0, _i18n.__)('Open in new tab')
+    },
+    linkRel: {
+      label: (0, _i18n.__)('Link Rel'),
+      placeholder: (0, _i18n._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
@@ -223,14 +217,13 @@ class ButtonEdit extends _element.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) || _editor.default.defaultButton.backgroundColor;
   }
 
-  getTextColor() {
+  function getTextColor() {
     var _colorProps$style3;
 
     const {
       attributes,
-      colors,
       style
-    } = this.props;
+    } = props;
     const colorProps = (0, _blockEditor.__experimentalGetColorClassesAndStyles)(attributes); // Retrieve named color object to force inline styles for themes that
     // do not load their color stylesheets in the editor.
 
@@ -238,53 +231,48 @@ class ButtonEdit extends _element.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) || _editor.default.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.
@@ -293,54 +281,42 @@ class ButtonEdit extends _element.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 = (0, _element.useCallback)((width, isParentWidthDidChange = false) => {
     const {
       marginRight: spacing
     } = _editor.default.defaultButton;
@@ -348,22 +324,17 @@ class ButtonEdit extends _element.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();
@@ -372,65 +343,62 @@ class ButtonEdit extends _element.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));
+    }
+  }
+
+  const onSetRef = (0, _element.useCallback)(ref => {
+    richTextRef.current = ref;
+  }, [richTextRef]);
+  const onUnstableOnFocus = (0, _element.useCallback)(() => {
+    onToggleButtonFocus(true);
+  }, []);
+  const onBlur = (0, _element.useCallback)(() => {
+    onSetMaxWidth();
+  }, []);
+
+  function dismissSheet() {
+    onHideLinkSettings();
+    closeGeneralSidebar();
   }
 
-  getLinkSettings(isCompatibleWithSettings) {
-    const {
-      isLinkSheetVisible
-    } = this.state;
+  function getLinkSettings(isCompatibleWithSettings) {
     const {
       attributes,
       setAttributes
-    } = this.props;
+    } = props;
     return (0, _element.createElement)(_components.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 (0, _element.createElement)(_reactNative.Text, {
       style: _editor.default.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 = (0, _components.getValueAndUnit)(borderRadius);
+  function getBorderRadiusValue(currentBorderRadius, defaultBorderRadius) {
+    const valueAndUnit = (0, _components.getValueAndUnit)(currentBorderRadius);
 
     if (Number.isInteger(parseInt(valueAndUnit === null || valueAndUnit === void 0 ? void 0 : valueAndUnit.valueToConvert))) {
       return parseFloat(valueAndUnit.valueToConvert);
@@ -439,161 +407,120 @@ class ButtonEdit extends _element.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
+  } = _editor.default.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
-    } = _editor.default.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, _editor.default.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, _editor.default.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 || (0, _i18n.__)('Add text…');
-    const backgroundColor = this.getBackgroundColor();
-    const textColor = this.getTextColor();
-    const isFixedWidth = !!width;
-    return (0, _element.createElement)(_reactNative.View, {
-      onLayout: this.onLayout
-    }, this.getPlaceholderWidth(placeholderText), (0, _element.createElement)(_colorBackground.default, {
-      borderRadiusValue: buttonBorderRadiusValue,
-      backgroundColor: backgroundColor,
-      isSelected: isSelected
-    }, isSelected && (0, _element.createElement)(_reactNative.View, {
-      pointerEvents: "none",
-      style: [_editor.default.outline, {
-        borderRadius: outlineBorderRadius,
-        borderColor: backgroundColor
-      }]
-    }), (0, _element.createElement)(_blockEditor.RichText, {
-      setRef: this.setRef,
-      placeholder: placeholderText,
-      value: text,
-      onChange: this.onChangeText,
-      style: { ..._richText.default.richText,
-        paddingLeft: isFixedWidth ? 0 : _richText.default.richText.paddingLeft,
-        paddingRight: isFixedWidth ? 0 : _richText.default.richText.paddingRight,
-        color: textColor
-      },
-      textAlign: align,
-      placeholderTextColor: (style === null || style === void 0 ? void 0 : style.color) || _editor.default.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 && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarButton, {
-      title: (0, _i18n.__)('Edit link'),
-      icon: _icons.link,
-      onClick: this.onShowLinkSettings,
-      isActive: url
-    }))), this.getLinkSettings(false), (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
-      title: (0, _i18n.__)('Border Settings')
-    }, (0, _element.createElement)(_components.UnitControl, {
-      label: (0, _i18n.__)('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: (0, _components.filterUnitsWithSettings)(['px', 'em', 'rem'], _components.CSS_UNITS)
-    })), (0, _element.createElement)(WidthPanel, {
-      selectedWidth: width,
-      setAttributes: setAttributes
-    }), (0, _element.createElement)(_components.PanelBody, {
-      title: (0, _i18n.__)('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;
+
+  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.
 
-var _default = (0, _compose.compose)([_compose.withInstanceId, _blockEditor.withGradient, (0, _data.withSelect)((select, {
-  clientId,
-  isSelected
-}) => {
-  const {
-    isEditorSidebarOpened
-  } = select('core/edit-post');
-  const {
-    getBlockCount,
-    getBlockRootClientId,
-    getSettings
-  } = select(_blockEditor.store);
-  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
-  };
-}), (0, _data.withDispatch)(dispatch => {
-  return {
-    closeSettingsBottomSheet() {
-      dispatch('core/edit-post').closeGeneralSidebar();
-    }
 
+  const placeholderText = isButtonFocused || !isButtonFocused && text && text !== '' ? '' : placeholder || (0, _i18n.__)('Add text…');
+  const backgroundColor = getBackgroundColor();
+  const textColor = getTextColor();
+  const isFixedWidth = !!width;
+  const outLineStyles = [_editor.default.outline, {
+    borderRadius: outlineBorderRadius,
+    borderColor: backgroundColor
+  }];
+  const textStyles = { ..._richText.default.richText,
+    paddingLeft: isFixedWidth ? 0 : _richText.default.richText.paddingLeft,
+    paddingRight: isFixedWidth ? 0 : _richText.default.richText.paddingRight,
+    color: textColor
   };
-})])(ButtonEdit);
+  return (0, _element.createElement)(_reactNative.View, {
+    onLayout: onLayout
+  }, getPlaceholderWidth(placeholderText), (0, _element.createElement)(_colorBackground.default, {
+    borderRadiusValue: buttonBorderRadiusValue,
+    backgroundColor: backgroundColor,
+    isSelected: isSelected
+  }, isSelected && (0, _element.createElement)(_reactNative.View, {
+    pointerEvents: "none",
+    style: outLineStyles
+  }), (0, _element.createElement)(_blockEditor.RichText, {
+    setRef: onSetRef,
+    placeholder: placeholderText,
+    value: text,
+    onChange: onChangeText,
+    style: textStyles,
+    textAlign: align,
+    placeholderTextColor: (style === null || style === void 0 ? void 0 : style.color) || _editor.default.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 && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarButton, {
+    title: (0, _i18n.__)('Edit link'),
+    icon: _icons.link,
+    onClick: onShowLinkSettings,
+    isActive: url
+  }))), getLinkSettings(false), (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
+    title: (0, _i18n.__)('Border Settings')
+  }, (0, _element.createElement)(_components.UnitControl, {
+    label: (0, _i18n.__)('Border Radius'),
+    min: MIN_BORDER_RADIUS_VALUE,
+    max: MAX_BORDER_RADIUS_VALUE,
+    value: borderRadiusValue,
+    onChange: onChangeBorderRadius,
+    onUnitChange: onChangeBorderRadiusUnit,
+    unit: borderRadiusUnit,
+    units: (0, _components.filterUnitsWithSettings)(['px', 'em', 'rem'], _components.CSS_UNITS)
+  })), (0, _element.createElement)(WidthPanel, {
+    selectedWidth: width,
+    setAttributes: setAttributes
+  }), (0, _element.createElement)(_components.PanelBody, {
+    title: (0, _i18n.__)('Link Settings')
+  }, getLinkSettings(true)))));
+}
 
+var _default = ButtonEdit;
 exports.default = _default;
 //# sourceMappingURL=edit.native.js.map