From 846b93e8ed2f54a35ce72ef7392363f577495c2b Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 28 Mar 2022 13:05:57 +1100
Subject: [PATCH 1/2] Add margin support and tests

---
 packages/style-engine/src/styles/index.ts  |  3 +-
 packages/style-engine/src/styles/margin.ts | 19 +++++++
 packages/style-engine/src/test/index.js    | 60 +++++++++++++++++++---
 3 files changed, 74 insertions(+), 8 deletions(-)
 create mode 100644 packages/style-engine/src/styles/margin.ts

diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts
index 2f09e428176937..f7c87a8c7a29b3 100644
--- a/packages/style-engine/src/styles/index.ts
+++ b/packages/style-engine/src/styles/index.ts
@@ -2,5 +2,6 @@
  * Internal dependencies
  */
 import padding from './padding';
+import margin from './margin';
 
-export const styleDefinitions = [ padding ];
+export const styleDefinitions = [ margin, padding ];
diff --git a/packages/style-engine/src/styles/margin.ts b/packages/style-engine/src/styles/margin.ts
new file mode 100644
index 00000000000000..2ead5da23f1e7b
--- /dev/null
+++ b/packages/style-engine/src/styles/margin.ts
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../types';
+import { generateBoxRules } from './utils';
+
+const margin = {
+	name: 'margin',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateBoxRules(
+			style,
+			options,
+			[ 'spacing', 'margin' ],
+			'margin'
+		);
+	},
+};
+
+export default margin;
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index 14c0deb49b8066..9b36995c778f00 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -8,29 +8,37 @@ describe( 'generate', () => {
 		expect( generate( {}, '.some-selector' ) ).toEqual( '' );
 	} );
 
-	it( 'should generate padding styles', () => {
+	it( 'should generate spacing styles', () => {
 		expect(
 			generate(
 				{
-					spacing: { padding: '10px' },
+					spacing: { padding: '10px', margin: '12px' },
 				},
 				{
 					selector: '.some-selector',
 				}
 			)
-		).toEqual( '.some-selector { padding: 10px; }' );
+		).toEqual( '.some-selector { margin: 12px; padding: 10px; }' );
 
 		expect(
 			generate(
 				{
-					spacing: { padding: { top: '10px', bottom: '5px' } },
+					spacing: {
+						padding: { top: '10px', bottom: '5px' },
+						margin: {
+							top: '11px',
+							right: '12px',
+							bottom: '13px',
+							left: '14px',
+						},
+					},
 				},
 				{
 					selector: '.some-selector',
 				}
 			)
 		).toEqual(
-			'.some-selector { padding-top: 10px; padding-bottom: 5px; }'
+			'.some-selector { margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; }'
 		);
 	} );
 } );
@@ -40,17 +48,42 @@ describe( 'getCSSRules', () => {
 		expect( getCSSRules( {}, '.some-selector' ) ).toEqual( [] );
 	} );
 
-	it( 'should return a rules array with CSS keys formatted in camelCase', () => {
+	it( 'should ignore unsupported styles', () => {
 		expect(
 			getCSSRules(
 				{
+					typography: {
+						fontVariantLigatures: 'no-common-ligatures',
+					},
 					spacing: { padding: '10px' },
 				},
+				'.some-selector'
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'padding',
+				value: '10px',
+			},
+		] );
+	} );
+
+	it( 'should return a rules array with CSS keys formatted in camelCase', () => {
+		expect(
+			getCSSRules(
+				{
+					spacing: { padding: '10px', margin: '12px' },
+				},
 				{
 					selector: '.some-selector',
 				}
 			)
 		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'margin',
+				value: '12px',
+			},
 			{
 				selector: '.some-selector',
 				key: 'padding',
@@ -61,13 +94,26 @@ describe( 'getCSSRules', () => {
 		expect(
 			getCSSRules(
 				{
-					spacing: { padding: { top: '10px', bottom: '5px' } },
+					spacing: {
+						padding: { top: '10px', bottom: '5px' },
+						margin: { right: '2em', left: '1vw' },
+					},
 				},
 				{
 					selector: '.some-selector',
 				}
 			)
 		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'marginRight',
+				value: '2em',
+			},
+			{
+				selector: '.some-selector',
+				key: 'marginLeft',
+				value: '1vw',
+			},
 			{
 				selector: '.some-selector',
 				key: 'paddingTop',

From f35a06b129132124e90ca7e967458f4eda4deedb Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 28 Mar 2022 13:38:46 +1100
Subject: [PATCH 2/2] Telling margin to use the style engine in global styles
 Fixing unit tests

---
 packages/blocks/src/api/constants.js    | 1 +
 packages/style-engine/src/test/index.js | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 5cdea4175b7bfd..c9b8d3e0e8f1d3 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -89,6 +89,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 			marginBottom: 'bottom',
 			marginLeft: 'left',
 		},
+		useEngine: true,
 	},
 	padding: {
 		value: [ 'spacing', 'padding' ],
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index 9b36995c778f00..bf1ab73566f52d 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -57,7 +57,9 @@ describe( 'getCSSRules', () => {
 					},
 					spacing: { padding: '10px' },
 				},
-				'.some-selector'
+				{
+					selector: '.some-selector',
+				}
 			)
 		).toEqual( [
 			{