Automattic / Automattic/wp-calypso

Block Widget Editor: Incorrect styling for select and popover

Open
#55,879 2 comments 0 reactions 0 assignees View on GitHub
[Feature] Customizer [Goal] Block widget editor Bug
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`.
> Screen Shot 2021-08-31 at 6 39 37 PM
> Screen Shot 2021-08-31 at 7 00 29 PM

- The new blocks popover is obstructed by a scroll bar. This issue only occurs in the Customizer.
> Screen Shot 2021-08-31 at 6 41 40 PM

#### Browser / OS version
Firefox 91 on macOS.

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.