CheckboxControl: move icons out of labels (#45535)

* Move icons out of BlockLockModal labels * Move icon out of BlockTypesChecklist label * Add CHANGELOG entries * fix checklist centering and add class for lock icon * Add flex-shrink to ensure lock icons maintain size with longer labels
WordPress · Nov 9, 2022 · bdd3fd7 · bdd3fd7
1 parent a607db3
commit bdd3fd7
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 71 deletions.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   `BlockLockModal`: Move Icon component out of CheckboxControl label ([#45535](https://github.com/WordPress/gutenberg/pull/45535))
+
 ## 10.4.0 (2022-11-02)
 
 ### Bug Fix

diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
@@ -136,18 +136,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							<li className="block-editor-block-lock-modal__checklist-item">
 								<CheckboxControl
 									__nextHasNoMarginBottom
-									label={
-										<>
-											{ __( 'Restrict editing' ) }
-											<Icon
-												icon={
-													lock.edit
-														? lockIcon
-														: unlockIcon
-												}
-											/>
-										</>
-									}
+									label={ __( 'Restrict editing' ) }
 									checked={ !! lock.edit }
 									onChange={ ( edit ) =>
 										setLock( ( prevLock ) => ( {
@@ -156,23 +145,16 @@ export default function BlockLockModal( { clientId, onClose } ) {
 										} ) )
 									}
 								/>
+								<Icon
+									className="block-editor-block-lock-modal__lock-icon"
+									icon={ lock.edit ? lockIcon : unlockIcon }
+								/>
 							</li>
 						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								__nextHasNoMarginBottom
-								label={
-									<>
-										{ __( 'Disable movement' ) }
-										<Icon
-											icon={
-												lock.move
-													? lockIcon
-													: unlockIcon
-											}
-										/>
-									</>
-								}
+								label={ __( 'Disable movement' ) }
 								checked={ lock.move }
 								onChange={ ( move ) =>
 									setLock( ( prevLock ) => ( {
@@ -181,22 +163,15 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									} ) )
 								}
 							/>
+							<Icon
+								className="block-editor-block-lock-modal__lock-icon"
+								icon={ lock.move ? lockIcon : unlockIcon }
+							/>
 						</li>
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								__nextHasNoMarginBottom
-								label={
-									<>
-										{ __( 'Prevent removal' ) }
-										<Icon
-											icon={
-												lock.remove
-													? lockIcon
-													: unlockIcon
-											}
-										/>
-									</>
-								}
+								label={ __( 'Prevent removal' ) }
 								checked={ lock.remove }
 								onChange={ ( remove ) =>
 									setLock( ( prevLock ) => ( {
@@ -205,6 +180,10 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									} ) )
 								}
 							/>
+							<Icon
+								className="block-editor-block-lock-modal__lock-icon"
+								icon={ lock.remove ? lockIcon : unlockIcon }
+							/>
 						</li>
 					</ul>
 					{ hasTemplateLock && (

diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss
@@ -25,24 +25,17 @@
 	}
 }
 .block-editor-block-lock-modal__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: $grid-unit-15;
 	margin-bottom: 0;
 	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-40;
 
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-	}
-
-	.components-checkbox-control__label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-grow: 1;
-
-		svg {
-			margin-right: $grid-unit-15;
-			fill: $gray-900;
-		}
+	.block-editor-block-lock-modal__lock-icon {
+		flex-shrink: 0;
+		margin-right: $grid-unit-15;
+		fill: $gray-900;
 	}
 
 	&:hover {

diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   ` BlockTypesChecklist`: Move BlockIcon component out of CheckboxControl label ([#45535](https://github.com/WordPress/gutenberg/pull/45535))
+
 ## 6.18.0 (2022-11-02)
 
 ## 6.17.0 (2022-10-19)

diff --git a/packages/edit-post/src/components/block-manager/checklist.js b/packages/edit-post/src/components/block-manager/checklist.js
@@ -14,17 +14,13 @@ function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
 				>
 					<CheckboxControl
 						__nextHasNoMarginBottom
-						label={
-							<>
-								{ blockType.title }
-								<BlockIcon icon={ blockType.icon } />
-							</>
-						}
+						label={ blockType.title }
 						checked={ value.includes( blockType.name ) }
 						onChange={ ( ...args ) =>
 							onItemChange( blockType.name, ...args )
 						}
 					/>
+					<BlockIcon icon={ blockType.icon } />
 				</li>
 			) ) }
 		</ul>

diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss
@@ -51,29 +51,19 @@
 .edit-post-block-manager__category-title,
 .edit-post-block-manager__checklist-item {
 	border-bottom: 1px solid $gray-300;
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-	}
 }
 
 .edit-post-block-manager__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	margin-bottom: 0;
-	padding-left: $grid-unit-20;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
 
 	.components-modal__content &.components-checkbox-control__input-container {
 		margin: 0 $grid-unit-10;
 	}
 
-	.components-checkbox-control__label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-grow: 1;
-		padding: $grid-unit-10 0;
-	}
-
 	.block-editor-block-icon {
 		margin-right: 10px;
 		fill: $gray-900;