diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 429078253f236..8125725e7d15a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -12,15 +12,17 @@
- `ExternalLink`: Use unicode arrow instead of svg icon ([#60255](https://github.com/WordPress/gutenberg/pull/60255)).
- `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)).
- `Text`: Add `text-wrap: pretty;` to improve wrapping ([#60164](https://github.com/WordPress/gutenberg/pull/60164)).
-- `Navigator`: Navigation to the active path doesn't create a new location history ([#60561](https://github.com/WordPress/gutenberg/pull/60561))
+- `Navigator`: Navigation to the active path doesn't create a new location history ([#60561](https://github.com/WordPress/gutenberg/pull/60561)).
- `FormToggle`: Forwards ref to input ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
- `ToggleControl`: Forwards ref to FormToggle ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
+- `CheckboxControl`: Update help text alignment ([#60787](https://github.com/WordPress/gutenberg/pull/60787)).
### Bug Fix
- `Truncate`: Fix link control link preview when it displays long URLs ([#60890](https://github.com/WordPress/gutenberg/pull/60890)).
- `ProgressBar`: Fix CSS variable with invalid value ([#60576](https://github.com/WordPress/gutenberg/pull/60576)).
+- `CheckboxControl`: Fix label text wrap ([#60787](https://github.com/WordPress/gutenberg/pull/60787)).
### Experimental
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 54a9952d19949..a3119128c8980 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -16,6 +16,7 @@ import { Icon, check, reset } from '@wordpress/icons';
* Internal dependencies
*/
import BaseControl from '../base-control';
+import { HStack } from '../h-stack';
import type { CheckboxControlProps } from './types';
import type { WordPressComponentProps } from '../context';
@@ -95,44 +96,52 @@ export function CheckboxControl(
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
label={ heading }
id={ id }
- help={ help }
+ help={
+ help && (
+
+ { help }
+
+ )
+ }
className={ classnames( 'components-checkbox-control', className ) }
>
-
-
- { showIndeterminateIcon ? (
-
- ) : null }
- { showCheckedIcon ? (
-
+
+
- ) : null }
-
- { label && (
-
- ) }
+ { showIndeterminateIcon ? (
+
+ ) : null }
+ { showCheckedIcon ? (
+
+ ) : null }
+
+ { label && (
+
+ ) }
+
);
}
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 1821d49b4fcf4..8f214d461c7a8 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -7,6 +7,11 @@
}
}
+.components-checkbox-control__label {
+ // Ensure label is aligned with checkbox along X axis
+ line-height: var(--checkbox-input-size);
+}
+
.components-checkbox-control__input[type="checkbox"] {
@include checkbox-control;
background: $white;
@@ -50,10 +55,11 @@
.components-checkbox-control__input-container {
position: relative;
display: inline-block;
- margin-right: 12px;
+ margin-right: $grid-unit-15;
vertical-align: middle;
width: var(--checkbox-input-size);
aspect-ratio: 1;
+ flex-shrink: 0;
}
svg.components-checkbox-control__checked,
@@ -75,3 +81,8 @@ svg.components-checkbox-control__indeterminate {
--checkmark-size: calc(var(--checkbox-input-size) + 4px);
}
}
+
+.components-checkbox-control__help {
+ display: inline-block;
+ margin-inline-start: calc(var(--checkbox-input-size) + #{$grid-unit-15});
+}
diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
index f3bdccc1ccff6..6a4d345cc445b 100644
--- a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
@@ -5,32 +5,33 @@ Snapshot Diff:
- First value
+ Second value
-@@ -8,13 +8,27 @@
-
-
-+
-
+@@ -13,14 +13,28 @@
+
+
++
+
+
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 411d20e820d3c..899a9b100015b 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -86,6 +86,11 @@ describe( 'CheckboxControl', () => {
containerIndeterminate
);
} );
+
+ it( 'should associate the `help` text accessibly', () => {
+ render( );
+ expect( getInput() ).toHaveAccessibleDescription( 'Help text' );
+ } );
} );
describe( 'Value', () => {
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
index aef3f40f48c61..470fadec4be2b 100644
--- 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
@@ -27,6 +27,30 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
padding: 0;
}
+.emotion-10 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ gap: 0;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ -webkit-justify-content: start;
+ justify-content: start;
+ width: 100%;
+}
+
+.emotion-10>* {
+ min-width: 0;
+}
+
@@ -189,6 +219,30 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
padding: 0;
}
+.emotion-10 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ gap: 0;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ -webkit-justify-content: start;
+ justify-content: start;
+ width: 100%;
+}
+
+.emotion-10>* {
+ min-width: 0;
+}
+
@@ -341,6 +401,30 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
margin-bottom: inherit;
}
+.emotion-4 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ gap: 0;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ -webkit-justify-content: start;
+ justify-content: start;
+ width: 100%;
+}
+
+.emotion-4>* {
+ min-width: 0;
+}
+
@@ -464,6 +554,30 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
margin-bottom: inherit;
}
+.emotion-4 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ gap: 0;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ -webkit-justify-content: start;
+ justify-content: start;
+ width: 100%;
+}
+
+.emotion-4>* {
+ min-width: 0;
+}
+
@@ -631,6 +751,30 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
margin-bottom: inherit;
}
+.emotion-10 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ gap: 0;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ -webkit-justify-content: start;
+ justify-content: start;
+ width: 100%;
+}
+
+.emotion-10>* {
+ min-width: 0;
+}
+