From 8ce7a1da8f264c05fee6ed0d144816d5c4d76963 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Thu, 9 Jun 2022 14:44:26 +0530
Subject: [PATCH] Revert "Add spacing; Move font size as first"

---
 .../components/google-fonts-control/item.js   | 42 +++++++++----------
 .../components/google-fonts-control/style.css |  4 --
 .../__snapshots__/item.test.js.snap           | 30 ++++++-------
 3 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/plugin/assets/src/customizer/components/google-fonts-control/item.js b/plugin/assets/src/customizer/components/google-fonts-control/item.js
index 0efa74feb..cb25cd5c6 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/item.js
+++ b/plugin/assets/src/customizer/components/google-fonts-control/item.js
@@ -59,27 +59,28 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-size-control-${ id }` }
-							id={ `inspector-size-label-${ id }` }
+							htmlFor={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-line-height-label-${ id }` }
 						>
-							{ size.label }
+							{ lineHeight.label }
 						</label>
 						<input
-							id={ `inspector-size-control-${ id }` }
+							id={ `inspector-line-height-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ size.value || size.default }
-							min={ size.min }
-							max={ size.max }
+							value={ lineHeight.value || lineHeight.default }
+							min={ lineHeight.min }
+							max={ lineHeight.max }
+							step="0.01"
 							onChange={ event => {
-								const sizeValue = event.target.value;
+								const lineHeightValue = event.target.value;
 
 								onChange( {
 									id,
-									sizeValue,
+									lineHeightValue,
 									trackingValue: tracking.value,
+									sizeValue: size.value,
 									weightValue: weight.value,
-									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
@@ -89,28 +90,27 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-line-height-control-${ id }` }
-							id={ `inspector-line-height-label-${ id }` }
+							htmlFor={ `inspector-size-control-${ id }` }
+							id={ `inspector-size-label-${ id }` }
 						>
-							{ lineHeight.label }
+							{ size.label }
 						</label>
 						<input
-							id={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-size-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ lineHeight.value || lineHeight.default }
-							min={ lineHeight.min }
-							max={ lineHeight.max }
-							step="0.01"
+							value={ size.value || size.default }
+							min={ size.min }
+							max={ size.max }
 							onChange={ event => {
-								const lineHeightValue = event.target.value;
+								const sizeValue = event.target.value;
 
 								onChange( {
 									id,
-									lineHeightValue,
+									sizeValue,
 									trackingValue: tracking.value,
-									sizeValue: size.value,
 									weightValue: weight.value,
+									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
diff --git a/plugin/assets/src/customizer/components/google-fonts-control/style.css b/plugin/assets/src/customizer/components/google-fonts-control/style.css
index 2cb266261..a80e2b4f8 100644
--- a/plugin/assets/src/customizer/components/google-fonts-control/style.css
+++ b/plugin/assets/src/customizer/components/google-fonts-control/style.css
@@ -59,10 +59,6 @@
 		padding: 8px 0 8px 8px;
 	}
 
-	.google-fonts-control-child + .google-fonts-control-child {
-		margin-top: 20px;
-	}
-
 	.components-google-fonts-control__select {
 		flex-direction: row;
 		align-items: center;
diff --git a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
index 9cb9c2ad0..1ffeb8f49 100644
--- a/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
+++ b/plugin/tests/js/customizer/components/google-fonts-control/__snapshots__/item.test.js.snap
@@ -20,19 +20,20 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-size-control-headline-large"
-          id="inspector-size-label-headline-large"
+          htmlFor="inspector-line-height-control-headline-large"
+          id="inspector-line-height-label-headline-large"
         >
-          Size
+          Line height
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-size-control-headline-large"
-          max={96}
-          min={2}
+          id="inspector-line-height-control-headline-large"
+          max={64}
+          min={0}
           onChange={[Function]}
+          step="0.01"
           type="number"
-          value={96}
+          value={0}
         />
       </div>
     </div>
@@ -44,20 +45,19 @@ exports[`GoogleFontsControl/Item matches snapshot 1`] = `
       >
         <label
           className="components-base-control__label"
-          htmlFor="inspector-line-height-control-headline-large"
-          id="inspector-line-height-label-headline-large"
+          htmlFor="inspector-size-control-headline-large"
+          id="inspector-size-label-headline-large"
         >
-          Line height
+          Size
         </label>
         <input
           className="components-google-fonts-control__number"
-          id="inspector-line-height-control-headline-large"
-          max={64}
-          min={0}
+          id="inspector-size-control-headline-large"
+          max={96}
+          min={2}
           onChange={[Function]}
-          step="0.01"
           type="number"
-          value={0}
+          value={96}
         />
       </div>
     </div>