From 24bfbc9954312d2f362f4e9a09c4c6eb10b5146d Mon Sep 17 00:00:00 2001
From: Jeff Ong <jeff.ong@automattic.com>
Date: Thu, 1 Aug 2019 12:15:09 -0400
Subject: [PATCH 1/7] Fix checkbox alignment issues in options and block
 manager modals

---
 packages/components/src/checkbox-control/style.scss      | 2 +-
 .../src/components/manage-blocks-modal/style.scss        | 9 +++++++++
 .../edit-post/src/components/options-modal/style.scss    | 6 ++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 240b1ad7623b8..8a760d487db73 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -57,7 +57,7 @@ svg.dashicon.components-checkbox-control__checked {
 	pointer-events: none;
 }
 
-@media screen and ( max-width: 728px ) {
+@media screen and ( max-width: 600px ) {
 	.components-checkbox-control__input[type="checkbox"] {
 		width: 25px;
 		height: 25px;
diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss
index 45569b28c6083..59fa1b2c01482 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss
@@ -54,6 +54,7 @@
 	top: 0;
 	padding: $panel-padding 0;
 	background-color: $white;
+	z-index: 1;
 
 	.components-base-control__field {
 		margin-bottom: 0;
@@ -86,6 +87,14 @@
 		align-items: center;
 		display: flex;
 		margin: 0;
+		svg.dashicon.components-checkbox-control__checked {
+			bottom: 5px;
+			left: -37px;
+			@include break-small() {
+				bottom: 10px;
+				left: -27px;
+			}
+		}
 	}
 
 	.components-modal__content & input[type="checkbox"] {
diff --git a/packages/edit-post/src/components/options-modal/style.scss b/packages/edit-post/src/components/options-modal/style.scss
index 01b5f816c0ca0..6d0da40078707 100644
--- a/packages/edit-post/src/components/options-modal/style.scss
+++ b/packages/edit-post/src/components/options-modal/style.scss
@@ -19,6 +19,12 @@
 			align-items: center;
 			display: flex;
 			margin: 0;
+			svg.dashicon.components-checkbox-control__checked {
+				bottom: 0;
+				@include break-small() {
+					bottom: 5px;
+				}
+			}
 		}
 
 		&.components-base-control + &.components-base-control {

From de682a048c81846467ba32cb7b9cb914e0011987 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jeff.ong@automattic.com>
Date: Fri, 2 Aug 2019 10:39:32 -0400
Subject: [PATCH 2/7] replace media query with mixin

---
 .../src/checkbox-control/style.scss           | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 8a760d487db73..7cf4732ba08ee 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -6,14 +6,17 @@
 	cursor: pointer;
 	display: inline-block;
 	line-height: 0;
-	height: 16px;
 	margin: 0 4px 0 0;
 	outline: 0;
 	padding: 0 !important;
 	text-align: center;
 	vertical-align: middle;
-	width: 16px;
-	min-width: 16px;
+	width: 25px;
+	height: 25px;
+	@include break-small() {
+		height: 16px;
+		width: 16px;
+	}
 	-webkit-appearance: none;
 	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 	transition: 0.05s border-color ease-in-out;
@@ -46,27 +49,20 @@
 }
 
 svg.dashicon.components-checkbox-control__checked {
-	width: 21px;
-	height: 21px;
 	fill: #fff;
 	cursor: pointer;
 	position: absolute;
-	left: -31px;
-	bottom: -3px;
+	left: -41px;
+	bottom: -9px;
+	width: 31px;
+	height: 31px;
+	@include break-small() {
+		width: 21px;
+		height: 21px;
+		left: -31px;
+		bottom: -3px;
+	}
 	user-select: none;
 	pointer-events: none;
 }
 
-@media screen and ( max-width: 600px ) {
-	.components-checkbox-control__input[type="checkbox"] {
-		width: 25px;
-		height: 25px;
-	}
-
-	svg.dashicon.components-checkbox-control__checked {
-		width: 31px;
-		height: 31px;
-		left: -41px;
-		bottom: -9px;
-	}
-}

From f3312ca20f35cef6d1f19839fccc57247f325690 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jeff.ong@automattic.com>
Date: Fri, 2 Aug 2019 16:10:18 -0400
Subject: [PATCH 3/7] Set height of label Use z-index mixin

---
 assets/stylesheets/_z-index.scss                             | 5 ++++-
 packages/components/src/checkbox-control/style.scss          | 3 +--
 .../edit-post/src/components/manage-blocks-modal/style.scss  | 2 +-
 packages/edit-post/src/components/options-modal/style.scss   | 5 +++--
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
index 949a0101b1f52..b1c3341695204 100644
--- a/assets/stylesheets/_z-index.scss
+++ b/assets/stylesheets/_z-index.scss
@@ -112,7 +112,10 @@ $z-layers: (
 
 	// Make sure corner handles are above side handles for ResizableBox component
 	".components-resizable-box__side-handle": 1,
-	".components-resizable-box__corner-handle": 2
+	".components-resizable-box__corner-handle": 2,
+
+	// Make sure block manager sticky category titles appear above the options
+	".edit-post-manage-blocks-modal__category-title": 1
 );
 
 @function z-index( $key ) {
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 7cf4732ba08ee..c1a039e54fb3c 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -44,8 +44,7 @@
 
 .components-checkbox-control__label {
 	position: relative;
-	vertical-align: middle;
-	line-height: 1;
+	max-height: 42px;
 }
 
 svg.dashicon.components-checkbox-control__checked {
diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss
index 59fa1b2c01482..483a895248cb7 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss
@@ -54,7 +54,7 @@
 	top: 0;
 	padding: $panel-padding 0;
 	background-color: $white;
-	z-index: 1;
+	z-index: z-index(".edit-post-manage-blocks-modal__category-title");
 
 	.components-base-control__field {
 		margin-bottom: 0;
diff --git a/packages/edit-post/src/components/options-modal/style.scss b/packages/edit-post/src/components/options-modal/style.scss
index 6d0da40078707..df1e9676eb30a 100644
--- a/packages/edit-post/src/components/options-modal/style.scss
+++ b/packages/edit-post/src/components/options-modal/style.scss
@@ -20,9 +20,9 @@
 			display: flex;
 			margin: 0;
 			svg.dashicon.components-checkbox-control__checked {
-				bottom: 0;
+				bottom: 3px;
 				@include break-small() {
-					bottom: 5px;
+					bottom: 8px;
 				}
 			}
 		}
@@ -34,6 +34,7 @@
 		.components-checkbox-control__label {
 			flex-grow: 1;
 			padding: 0.6rem 0 0.6rem 10px;
+			height: 38px;
 		}
 	}
 }

From f7de8241d35d8cc58fdacc008402617432e33100 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jeff.ong@automattic.com>
Date: Sun, 4 Aug 2019 22:30:04 -0400
Subject: [PATCH 4/7] Refactor checkmark and input in single container

---
 .../components/src/checkbox-control/index.js  | 24 +++++++-------
 .../src/checkbox-control/style.scss           | 32 ++++++++++++-------
 .../components/manage-blocks-modal/style.scss | 10 +-----
 .../src/components/options-modal/style.scss   |  7 ----
 4 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/packages/components/src/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js
index 0cf12f0b9dcd9..77f75a3306498 100644
--- a/packages/components/src/checkbox-control/index.js
+++ b/packages/components/src/checkbox-control/index.js
@@ -15,18 +15,20 @@ function CheckboxControl( { label, className, heading, checked, help, instanceId
 
 	return (
 		<BaseControl label={ heading } id={ id } help={ help } className={ className }>
-			<input
-				id={ id }
-				className="components-checkbox-control__input"
-				type="checkbox"
-				value="1"
-				onChange={ onChangeValue }
-				checked={ checked }
-				aria-describedby={ !! help ? id + '__help' : undefined }
-				{ ...props }
-			/>
-			<label className="components-checkbox-control__label" htmlFor={ id }>
+			<span className="components-checkbox-control__input-container">
+				<input
+					id={ id }
+					className="components-checkbox-control__input"
+					type="checkbox"
+					value="1"
+					onChange={ onChangeValue }
+					checked={ checked }
+					aria-describedby={ !! help ? id + '__help' : undefined }
+					{ ...props }
+				/>
 				{ checked ? <Dashicon icon="yes" className="components-checkbox-control__checked" role="presentation" /> : null }
+			</span>
+			<label className="components-checkbox-control__label" htmlFor={ id }>
 				{ label }
 			</label>
 		</BaseControl>
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index c1a039e54fb3c..03ad5c54c776a 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -1,3 +1,6 @@
+$input-size: 16px;
+$input-size-sm: 25px;
+
 .components-checkbox-control__input[type="checkbox"] {
 	border: 1px solid #b4b9be;
 	background: #fff;
@@ -10,12 +13,12 @@
 	outline: 0;
 	padding: 0 !important;
 	text-align: center;
-	vertical-align: middle;
-	width: 25px;
-	height: 25px;
+	vertical-align: top;
+	width: $input-size-sm;
+	height: $input-size-sm;
 	@include break-small() {
-		height: 16px;
-		width: 16px;
+		height: $input-size;
+		width: $input-size;
 	}
 	-webkit-appearance: none;
 	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -42,24 +45,31 @@
 	}
 }
 
-.components-checkbox-control__label {
+.components-checkbox-control__input-container {
 	position: relative;
-	max-height: 42px;
+	display: inline-block;
+	margin-right: 12px;
+	vertical-align: middle;
+	width: $input-size-sm;
+	height: $input-size-sm;
+	@include break-small() {
+		width: $input-size;
+		height: $input-size;
+	}
 }
 
 svg.dashicon.components-checkbox-control__checked {
 	fill: #fff;
 	cursor: pointer;
 	position: absolute;
-	left: -41px;
-	bottom: -9px;
+	left: -4px;
+	top: -2px;
 	width: 31px;
 	height: 31px;
 	@include break-small() {
 		width: 21px;
 		height: 21px;
-		left: -31px;
-		bottom: -3px;
+		left: -3px;
 	}
 	user-select: none;
 	pointer-events: none;
diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss
index 483a895248cb7..ca5381c5a3b6e 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss
@@ -87,17 +87,9 @@
 		align-items: center;
 		display: flex;
 		margin: 0;
-		svg.dashicon.components-checkbox-control__checked {
-			bottom: 5px;
-			left: -37px;
-			@include break-small() {
-				bottom: 10px;
-				left: -27px;
-			}
-		}
 	}
 
-	.components-modal__content & input[type="checkbox"] {
+	.components-modal__content &.components-checkbox-control__input-container {
 		margin: 0 $grid-size;
 	}
 
diff --git a/packages/edit-post/src/components/options-modal/style.scss b/packages/edit-post/src/components/options-modal/style.scss
index df1e9676eb30a..01b5f816c0ca0 100644
--- a/packages/edit-post/src/components/options-modal/style.scss
+++ b/packages/edit-post/src/components/options-modal/style.scss
@@ -19,12 +19,6 @@
 			align-items: center;
 			display: flex;
 			margin: 0;
-			svg.dashicon.components-checkbox-control__checked {
-				bottom: 3px;
-				@include break-small() {
-					bottom: 8px;
-				}
-			}
 		}
 
 		&.components-base-control + &.components-base-control {
@@ -34,7 +28,6 @@
 		.components-checkbox-control__label {
 			flex-grow: 1;
 			padding: 0.6rem 0 0.6rem 10px;
-			height: 38px;
 		}
 	}
 }

From 6b0a212000e90d677943a8e28049f5c4dc99600e Mon Sep 17 00:00:00 2001
From: Jeff Ong <jeff.ong@automattic.com>
Date: Mon, 5 Aug 2019 15:22:45 -0400
Subject: [PATCH 5/7] Move variables to global stylesheets

---
 assets/stylesheets/_variables.scss                  | 2 ++
 packages/components/src/checkbox-control/style.scss | 3 ---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 3532dac28d63d..2547d5defc21d 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -65,3 +65,5 @@ $block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // paddin
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;
 $radius-round: 50%;
+$input-size: 16px;
+$input-size-sm: 25px; // width + height for small viewports
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 03ad5c54c776a..bc996e4c26783 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -1,6 +1,3 @@
-$input-size: 16px;
-$input-size-sm: 25px;
-
 .components-checkbox-control__input[type="checkbox"] {
 	border: 1px solid #b4b9be;
 	background: #fff;

From addf8f36d0097d7966fd8b08cb999e6a92476148 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jeff.ong@automattic.com>
Date: Tue, 6 Aug 2019 14:53:33 -0400
Subject: [PATCH 6/7] make checkbox input size variables local to component
 styles

---
 assets/stylesheets/_variables.scss            |  2 --
 .../src/checkbox-control/style.scss           | 20 ++++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss
index 2547d5defc21d..3532dac28d63d 100644
--- a/assets/stylesheets/_variables.scss
+++ b/assets/stylesheets/_variables.scss
@@ -65,5 +65,3 @@ $block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // paddin
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;
 $radius-round: 50%;
-$input-size: 16px;
-$input-size-sm: 25px; // width + height for small viewports
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index bc996e4c26783..49c768c73c9aa 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -1,3 +1,6 @@
+$checkbox-input-size: 16px;
+$checkbox-input-size-sm: 25px; // width + height for small viewports
+
 .components-checkbox-control__input[type="checkbox"] {
 	border: 1px solid #b4b9be;
 	background: #fff;
@@ -11,11 +14,11 @@
 	padding: 0 !important;
 	text-align: center;
 	vertical-align: top;
-	width: $input-size-sm;
-	height: $input-size-sm;
+	width: $checkbox-input-size-sm;
+	height: $checkbox-input-size-sm;
 	@include break-small() {
-		height: $input-size;
-		width: $input-size;
+		height: $checkbox-input-size;
+		width: $checkbox-input-size;
 	}
 	-webkit-appearance: none;
 	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -47,11 +50,11 @@
 	display: inline-block;
 	margin-right: 12px;
 	vertical-align: middle;
-	width: $input-size-sm;
-	height: $input-size-sm;
+	width: $checkbox-input-size-sm;
+	height: $checkbox-input-size-sm;
 	@include break-small() {
-		width: $input-size;
-		height: $input-size;
+		width: $checkbox-input-size;
+		height: $checkbox-input-size;
 	}
 }
 
@@ -71,4 +74,3 @@ svg.dashicon.components-checkbox-control__checked {
 	user-select: none;
 	pointer-events: none;
 }
-

From 09d524241bc8ea5501dffed6a3bce9ec1b7ed419 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jeff.ong@automattic.com>
Date: Thu, 8 Aug 2019 13:26:18 -0400
Subject: [PATCH 7/7] rebase master and update snapshots

---
 .../enable-custom-fields.js.snap              | 94 +++++++++++--------
 1 file changed, 54 insertions(+), 40 deletions(-)

diff --git a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
index 71c2036684552..68859d3890024 100644
--- a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
+++ b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
@@ -10,18 +10,17 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
     <div
       className="components-base-control__field"
     >
-      <input
-        checked={true}
-        className="components-checkbox-control__input"
-        id="inspector-checkbox-control-3"
-        onChange={[Function]}
-        type="checkbox"
-        value="1"
-      />
-      <label
-        className="components-checkbox-control__label"
-        htmlFor="inspector-checkbox-control-3"
+      <span
+        className="components-checkbox-control__input-container"
       >
+        <input
+          checked={true}
+          className="components-checkbox-control__input"
+          id="inspector-checkbox-control-3"
+          onChange={[Function]}
+          type="checkbox"
+          value="1"
+        />
         <svg
           aria-hidden="true"
           className="dashicon dashicons-yes components-checkbox-control__checked"
@@ -36,7 +35,11 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
             d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
           />
         </svg>
-      </label>
+      </span>
+      <label
+        className="components-checkbox-control__label"
+        htmlFor="inspector-checkbox-control-3"
+      />
     </div>
   </div>
   <p
@@ -65,18 +68,17 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
     <div
       className="components-base-control__field"
     >
-      <input
-        checked={true}
-        className="components-checkbox-control__input"
-        id="inspector-checkbox-control-0"
-        onChange={[Function]}
-        type="checkbox"
-        value="1"
-      />
-      <label
-        className="components-checkbox-control__label"
-        htmlFor="inspector-checkbox-control-0"
+      <span
+        className="components-checkbox-control__input-container"
       >
+        <input
+          checked={true}
+          className="components-checkbox-control__input"
+          id="inspector-checkbox-control-0"
+          onChange={[Function]}
+          type="checkbox"
+          value="1"
+        />
         <svg
           aria-hidden="true"
           className="dashicon dashicons-yes components-checkbox-control__checked"
@@ -91,7 +93,11 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
             d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
           />
         </svg>
-      </label>
+      </span>
+      <label
+        className="components-checkbox-control__label"
+        htmlFor="inspector-checkbox-control-0"
+      />
     </div>
   </div>
 </div>
@@ -107,14 +113,18 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
     <div
       className="components-base-control__field"
     >
-      <input
-        checked={false}
-        className="components-checkbox-control__input"
-        id="inspector-checkbox-control-2"
-        onChange={[Function]}
-        type="checkbox"
-        value="1"
-      />
+      <span
+        className="components-checkbox-control__input-container"
+      >
+        <input
+          checked={false}
+          className="components-checkbox-control__input"
+          id="inspector-checkbox-control-2"
+          onChange={[Function]}
+          type="checkbox"
+          value="1"
+        />
+      </span>
       <label
         className="components-checkbox-control__label"
         htmlFor="inspector-checkbox-control-2"
@@ -147,14 +157,18 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
     <div
       className="components-base-control__field"
     >
-      <input
-        checked={false}
-        className="components-checkbox-control__input"
-        id="inspector-checkbox-control-1"
-        onChange={[Function]}
-        type="checkbox"
-        value="1"
-      />
+      <span
+        className="components-checkbox-control__input-container"
+      >
+        <input
+          checked={false}
+          className="components-checkbox-control__input"
+          id="inspector-checkbox-control-1"
+          onChange={[Function]}
+          type="checkbox"
+          value="1"
+        />
+      </span>
       <label
         className="components-checkbox-control__label"
         htmlFor="inspector-checkbox-control-1"