Style Engine: add margin support (#39790)

* Add margin support and tests * Telling margin to use the style engine in global styles Fixing unit tests
WordPress · Mar 28, 2022 · 7490f12 · 7490f12
1 parent 4c109f6
commit 7490f12
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 8 deletions.
diff --git 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/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
@@ -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
@@ -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,10 +48,13 @@ 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' },
 				},
 				{
@@ -57,17 +68,54 @@ describe( 'getCSSRules', () => {
 				value: '10px',
 			},
 		] );
+	} );
 
+	it( 'should return a rules array with CSS keys formatted in camelCase', () => {
 		expect(
 			getCSSRules(
 				{
-					spacing: { padding: { top: '10px', bottom: '5px' } },
+					spacing: { padding: '10px', margin: '12px' },
 				},
 				{
 					selector: '.some-selector',
 				}
 			)
 		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'margin',
+				value: '12px',
+			},
+			{
+				selector: '.some-selector',
+				key: 'padding',
+				value: '10px',
+			},
+		] );
+
+		expect(
+			getCSSRules(
+				{
+					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',