Automattic / Automattic/wp-calypso
Block Widget Editor: Incorrect styling for select and popover
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 2k
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 552
Description
#### Steps to reproduce
**For the selects:**
1. Start at `/wp-admin/widgets.php`.
2. Open a sidebar and add a block that includes a select element, such as Jetpack Search Widget or the Links widget.
**For the new block popover:**
1. Start at `/wp-admin/customize.php?autofocus%5Bpanel%5D=widgets&return=%2Fwp-admin%2Fwidgets.php`.
2. Add multiple blocks so that the Customizer sidebar becomes vertically scrollable.
3. Summon the new block popover via the plus button at the very bottom of the sidebar.
4. Scroll the sidebar while the new block popover is still open.
#### What I expected
- For all selects to render with correct padding.
- For the new block popover to be unobstructed.
#### What happened instead
- Select elements have incorrect padding. This issue occurs in both the Customizer and `widgets.php`.
>
> 
- The new blocks popover is obstructed by a scroll bar. This issue only occurs in the Customizer.
> 
#### Browser / OS version
Firefox 91 on macOS.
Contributor guide
Research direction
Start at /wp-admin/widgets.php and the Customizer URL in Firefox 91 on macOS, reproducing both the select padding issue and the obstructed new-block popover. Compare the two widget editor contexts and verify that selects have correct padding and the popover remains unobstructed while the sidebar scrolls.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript, wordpress
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100