BaseControl: change label's display: block (#63911)

* BaseControl: change label to `display: block` * Remove unnecessary font-weight override * Remove unnecessary display: block overrides * CHANGELOG * snapshots --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
WordPress · Sep 4, 2024 · 063f5d0 · 063f5d0
1 parent d6243ca
commit 063f5d0
Show file tree

Hide file tree

Showing 9 changed files with 9 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -45,7 +45,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -70,7 +70,6 @@
 
 .gallery-image-sizes {
 	.components-base-control__label {
-		display: block;
 		margin-bottom: 4px;
 	}
 

diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
@@ -10,10 +10,6 @@
 }
 
 .editor-latest-posts-image-alignment-control {
-	.components-base-control__label {
-		display: block;
-	}
-
 	.components-toolbar {
 		border-radius: $radius-block-ui;
 	}

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
@@ -57,10 +57,6 @@
 }
 
 .editor-video-poster-control {
-	.components-base-control__label {
-		display: block;
-	}
-
 	.components-button {
 		margin-right: $grid-unit-10;
 	}

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -19,6 +19,7 @@
 
 ### Bug Fixes
 
+-   `BaseControl`: change label's `display` to `block`. ([#63911](https://github.com/WordPress/gutenberg/pull/63911))
 -   `ComboboxControl`: Fix ComboboxControl reset button when using the keyboard. ([#63410](https://github.com/WordPress/gutenberg/pull/63410))
 -   `Button`: Never apply `aria-disabled` to anchor ([#63376](https://github.com/WordPress/gutenberg/pull/63376)).
 -   `SelectControl`: Fix hover/focus color in wp-admin ([#63855](https://github.com/WordPress/gutenberg/pull/63855)).

diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts
@@ -37,7 +37,7 @@ export const StyledField = styled.div`
 const labelStyles = css`
 	${ baseLabelTypography };
 
-	display: inline-block;
+	display: block;
 	margin-bottom: ${ space( 2 ) };
 	/**
 	 * Removes Chrome/Safari/Firefox user agent stylesheet padding from

diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
@@ -16,10 +16,6 @@ import {
 
 import type { Border } from './types';
 
-const labelStyles = css`
-	font-weight: 500;
-`;
-
 const focusBoxShadow = css`
 	box-shadow: inset ${ CONFIG.controlBoxShadowFocus };
 `;
@@ -140,7 +136,6 @@ export const borderControlPopoverControls = css`
 
 	> div:first-of-type > ${ StyledLabel } {
 		margin-bottom: 0;
-		${ labelStyles }
 	}
 
 	&& ${ StyledLabel } + button:not( .has-text ) {

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -33,7 +33,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -369,7 +369,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -593,7 +593,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -923,7 +923,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }

diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -22,7 +22,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -214,7 +214,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }