WordPress
CustomSelectControl V2: allow wrapping item hint to new line
What?
Part of #55023
Improve how inidivual item hints are rendered for the CustomSelectControl V2 legacy adapter, by allowing the hint to wrap below the item's content, instead of being forced on the same line.
Why?
Even if the previous layout is how the V1 component behaves, it does not produce good-looking UI when the select popover is narrow. And it often overridden in the editor via custom style overrides anyway, which is bad.
These changes basically bring to the component the overrides that were applied in the editor.
How?
Using flexbox to allow the hint to break the line and render below the item's content.
Testing Instructions
Storybook
- Apply the following patch
Click to show diff
diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx
index 8ff9a023c5..4636fd34d3 100644
--- a/packages/components/src/custom-select-control/stories/index.story.tsx
+++ b/packages/components/src/custom-select-control/stories/index.story.tsx
@@ -111,7 +111,8 @@ WithHints.args = {
{
key: 'medium',
name: 'Medium',
- __experimentalHint: '250x250',
+ __experimentalHint:
+ 'A long hint, which ultimately could have been just "250x250"',
},
{
key: 'large',
- Load the "With Hints" storybook example for the V2 legacy adapter
- Resize the window and check the new hint wrapping behaviour
- Compare it with the same storybook example for the V1 component
| V1 | V2 legacy adapter - before (trunk) | V2 legacy adapter - after (this PR) |
|---|---|---|
Editor
First, apply the following patch
Click to show diff
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index 19ec0bf8c2..f71cdd5e48 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -8,11 +8,18 @@ import {
TextControl,
ExternalLink,
VisuallyHidden,
- CustomSelectControl,
ToggleControl,
__experimentalVStack as VStack,
+ privateApis as componentsPrivateApis,
} from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { CustomSelectControlV2Legacy } = unlock( componentsPrivateApis );
+
// So that we illustrate the different formats in the dropdown properly, show a date that is
// somwhat recent, has a day greater than 12, and a month with more than three letters.
const exampleDate = new Date();
@@ -128,7 +135,7 @@ function NonDefaultControls( { format, onChange } ) {
return (
<VStack>
- <CustomSelectControl
+ <CustomSelectControlV2Legacy
label={ __( 'Choose a format' ) }
options={ [ ...suggestedOptions, customOption ] }
value={
diff --git a/packages/block-editor/src/components/date-format-picker/style.scss b/packages/block-editor/src/components/date-format-picker/style.scss
index d1ad52408d..748e43bb8d 100644
--- a/packages/block-editor/src/components/date-format-picker/style.scss
+++ b/packages/block-editor/src/components/date-format-picker/style.scss
@@ -4,13 +4,4 @@
.block-editor-date-format-picker__custom-format-select-control__custom-option {
border-top: 1px solid $gray-300;
-
- &.has-hint {
- grid-template-columns: auto 30px;
- }
-
- .components-custom-select-control__item-hint {
- grid-row: 2;
- text-align: left;
- }
}
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index a5d4a0cb43..b184afca46 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -26,7 +26,9 @@ import { cleanEmptyObject, useStyleOverride } from './utils';
import { unlock } from '../lock-unlock';
import { store as blockEditorStore } from '../store';
-const { CustomSelectControl } = unlock( componentsPrivateApis );
+const { CustomSelectControl, CustomSelectControlV2Legacy } = unlock(
+ componentsPrivateApis
+);
const POSITION_SUPPORT_KEY = 'position';
@@ -287,7 +289,7 @@ export function PositionPanelPure( {
__nextHasNoMarginBottom
help={ stickyHelpText }
>
- <CustomSelectControl
+ <CustomSelectControlV2Legacy
__next40pxDefaultSize
className="block-editor-hooks__position-selection__select-control"
label={ __( 'Position' ) }
diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss
index b3bd6b1b9e..552ee8cf7c 100644
--- a/packages/block-editor/src/hooks/position.scss
+++ b/packages/block-editor/src/hooks/position.scss
@@ -3,16 +3,3 @@
display: none;
}
}
-
-.block-editor-hooks__position-selection__select-control__option {
- &.has-hint {
- grid-template-columns: auto 30px;
- line-height: $default-line-height;
- margin-bottom: 0;
- }
-
- .components-custom-select-control__item-hint {
- grid-row: 2;
- text-align: left;
- }
-}
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index f55373664e..9a26b7c7e3 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -14,6 +14,7 @@ import {
useCompositeStore as useCompositeStoreV2,
} from './composite/v2';
import { default as CustomSelectControl } from './custom-select-control';
+import { default as CustomSelectControlV2Legacy } from './custom-select-control-v2/legacy-component';
import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
import { createPrivateSlotFill } from './slot-fill';
import {
@@ -40,6 +41,7 @@ lock( privateApis, {
CompositeRowV2,
useCompositeStoreV2,
CustomSelectControl,
+ CustomSelectControlV2Legacy,
__experimentalPopoverLegacyPositionToPlacement,
createPrivateSlotFill,
ComponentsContext,
DateFormat picker
- In the post editor, add a "Posts List" block
- Pick a template which features the post data (most do)
- Select the post date block, and in the sidebar interact with the date format (you may have to toggle off the "Default format" toggle)
- Scroll the list of date format options all the way to the bottom, where the "Custom" option is
- Make sure that the layout matches what's currently on
trunk
| V1 | V2 legacy adapter - before (trunk) | V2 legacy adapter - after (this PR) |
|---|---|---|
Position picker
- In the post editor, add a "Group" block
- Select the group block, and in the sidebar expand the "Position" panel
- Open the position select, and notice the Sticky option
- Make sure that the layout matches what's currently on
trunk
| V1 | V2 legacy adapter - before (trunk) | V2 legacy adapter - after (this PR) |
|---|---|---|
Known bugs
There are several known layout bugs related to CustomSelectControlV2 — most of them are addressed in separate PRs (see #55023). When reviewing this PR, please focus only on the layout of option item hints.
Flaky tests detected in dfcedd934d88c77a1618c62df2dbbff3ba8c59cb. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9674369680 📝 Reported issues:
- #61884 in
/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Co-authored-by: ciampo <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.