fix: RichText applies direction-specific padding

Certain contexts apply different padding for different directions, e.g. horizontal vs vertical, left vs right.
WordPress · Aug 4, 2023 · 6205651 · 6205651
1 parent 37d3fa3
commit 6205651
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 15 deletions.
diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -129,6 +129,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         style={
           [
             undefined,
+            {},
             undefined,
           ]
         }
@@ -355,6 +356,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
         style={
           [
             undefined,
+            {},
             undefined,
           ]
         }

diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -60,6 +60,7 @@ exports[`File block renders file error state without crashing 1`] = `
         style={
           [
             undefined,
+            {},
             undefined,
           ]
         }
@@ -174,7 +175,10 @@ exports[`File block renders file error state without crashing 1`] = `
       <View
         style={
           [
-            undefined,
+            {
+              "backgroundColor": undefined,
+            },
+            {},
             undefined,
           ]
         }
@@ -311,6 +315,7 @@ exports[`File block renders file without crashing 1`] = `
         style={
           [
             undefined,
+            {},
             undefined,
           ]
         }
@@ -399,7 +404,10 @@ exports[`File block renders file without crashing 1`] = `
       <View
         style={
           [
-            undefined,
+            {
+              "backgroundColor": undefined,
+            },
+            {},
             undefined,
           ]
         }

diff --git a/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap
@@ -4,7 +4,10 @@ exports[`Paragraph block should render without crashing and match snapshot 1`] =
 <View
   style={
     [
-      undefined,
+      {
+        "backgroundColor": undefined,
+      },
+      {},
       undefined,
     ]
   }

diff --git a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap
@@ -13,7 +13,10 @@ exports[`Preformatted should match snapshot when content is empty 1`] = `
   <View
     style={
       [
-        undefined,
+        {
+          "backgroundColor": undefined,
+        },
+        {},
         undefined,
       ]
     }
@@ -60,7 +63,10 @@ exports[`Preformatted should match snapshot when content is not empty 1`] = `
   <View
     style={
       [
-        undefined,
+        {
+          "backgroundColor": undefined,
+        },
+        {},
         undefined,
       ]
     }

diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
@@ -15,6 +15,7 @@ exports[`Search Block renders block with button inside option 1`] = `
       style={
         [
           undefined,
+          {},
           undefined,
         ]
       }
@@ -139,7 +140,10 @@ exports[`Search Block renders block with button inside option 1`] = `
         <View
           style={
             [
-              undefined,
+              {
+                "backgroundColor": undefined,
+              },
+              {},
               undefined,
             ]
           }
@@ -229,6 +233,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
       style={
         [
           undefined,
+          {},
           undefined,
         ]
       }
@@ -423,7 +428,10 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         <View
           style={
             [
-              undefined,
+              {
+                "backgroundColor": undefined,
+              },
+              {},
               undefined,
             ]
           }
@@ -513,6 +521,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
       style={
         [
           undefined,
+          {},
           undefined,
         ]
       }
@@ -637,7 +646,10 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         <View
           style={
             [
-              undefined,
+              {
+                "backgroundColor": undefined,
+              },
+              {},
               undefined,
             ]
           }
@@ -727,6 +739,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
       style={
         [
           undefined,
+          {},
           undefined,
         ]
       }

diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
@@ -1172,12 +1172,17 @@ export class RichText extends Component {
 			maxWidth && this.state.width && maxWidth - this.state.width < 10
 				? maxWidth
 				: this.state.width;
+
+		const paddingStyles = {};
+		for ( const key in style ) {
+			if ( /padding/.test( key ) ) {
+				paddingStyles[ key ] = style[ key ];
+			}
+		}
+
 		const containerStyles = [
-			style?.padding &&
-				style?.backgroundColor && {
-					padding: style.padding,
-					backgroundColor: style.backgroundColor,
-				},
+			style && { backgroundColor: style.backgroundColor },
+			paddingStyles,
 			containerWidth && {
 				width: containerWidth,
 			},

diff --git a/packages/rich-text/src/test/__snapshots__/index.native.js.snap b/packages/rich-text/src/test/__snapshots__/index.native.js.snap
@@ -10,7 +10,10 @@ exports[`<RichText/> Font Size should update the font size when style prop with
 <View
   style={
     [
-      undefined,
+      {
+        "backgroundColor": undefined,
+      },
+      {},
       undefined,
     ]
   }
@@ -46,7 +49,10 @@ exports[`<RichText/> Font Size should update the font size with decimals when st
 <View
   style={
     [
-      undefined,
+      {
+        "backgroundColor": undefined,
+      },
+      {},
       undefined,
     ]
   }
-Original file line number
+Diff line change
@@ Expand Up @@
             style={
               [
                 undefined,
+                {},
                 undefined,
               ]
             }
@@ Expand Down Expand Up @@
             style={
               [
                 undefined,
+                {},
                 undefined,
               ]
             }
@@ Expand Down @@