Mobile - Buttons block - Fix issues with full width and safe area

WordPress · Feb 24, 2021 · 66c2115 · 66c2115
1 parent 65ff7c5
commit 66c2115
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
@@ -40,6 +40,13 @@ const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUE = 50;
 const INITIAL_MAX_WIDTH = 108;
 const MIN_WIDTH = 40;
+// Map of the percentage width to pixel subtraction that make the buttons fit nicely into columns.
+const MIN_WIDTH_MARGINS = {
+	100: 0,
+	75: styles.button75.marginLeft,
+	50: styles.button50.marginLeft,
+	25: styles.button25.marginLeft,
+};
 
 function WidthPanel( { selectedWidth, setAttributes } ) {
 	function handleChange( newWidth ) {
@@ -376,17 +383,10 @@ class ButtonEdit extends Component {
 				? MIN_WIDTH
 				: placeholderTextWidth;
 		if ( width ) {
-			// Map of the percentage width to pixel subtraction that make the buttons fit nicely into columns.
-			const minWidthSubtractionMap = {
-				100: 0,
-				75: 11,
-				50: 22,
-				25: 33,
-			};
 			// Set the width of the button.
-			minWidth =
-				Math.floor( maxWidth * ( width / 100 ) ) -
-				minWidthSubtractionMap[ width ];
+			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,

diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss
@@ -56,3 +56,15 @@ $block-spacing: 4px;
 	padding-left: 0;
 	padding-right: 0;
 }
+
+.button75 {
+	margin: $solid-border-space - $block-selected-border-width;
+}
+
+.button50 {
+	margin: $solid-border-space * 2 - $block-selected-border-width * 2;
+}
+
+.button25 {
+	margin: $block-edge-to-content * 2 + $block-selected-border-width;
+}
diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { debounce } from 'lodash';
-import { View, Dimensions } from 'react-native';
+import { View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -75,9 +75,11 @@ export default function ButtonsEdit( {
 	useEffect( () => {
 		const { width } = sizes || {};
 		const { isFullWidth } = alignmentHelpers;
-		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-		const isFullWidthBlock = isFullWidth( align );
-		setMaxWidth( isFullWidthBlock ? screenWidth : width );
+
+		if ( width ) {
+			const isFullWidthBlock = isFullWidth( align );
+			setMaxWidth( isFullWidthBlock ? blockWidth : width );
+		}
 	}, [ sizes, align ] );
 
 	const onAddNextButton = useCallback(