Text for dropdown fields within legacy widgets in the Customizer is off centered #34076

anton-vlasenko · 2021-08-13T15:35:39Z

Description

When editing a legacy menu widget in the Customizer in Firefox, the text for dropdown menus is misaligned. However, it works correctly on the Widgets admin screen.
Fixes #33431.

How has this been tested?

Add a menu to the site.
Open the Widgets panel in the Customizer using the Firefox browser.
Insert a legacy navigation widget.

Actual result

Observe the dropdown text is pulled out of the field.

Expected result

The text inside the dropdown is properly aligned.

Screenshots

Types of changes

Bug fix

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

…ender text correctly inside the select element in the legacy menu widget.

github-actions · 2021-08-13T15:36:03Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @anton-vlasenko! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

…ttom margins.

kevin940726 · 2021-08-16T06:41:18Z

packages/widgets/src/blocks/legacy-widget/editor.scss

@@ -67,6 +67,8 @@
 			line-height: 1;
 			min-height: 30px;
 			padding-left: $grid-unit-10;
+			padding-top: $grid-unit * 1.25;
+			padding-bottom: $grid-unit * 1.25;


Why 10px? Maybe we can do 8px ($grid-unit) too?

Because that value (10px) is being used on the Widgets page.
In my opinion, we should use similar values for the same component.

Could you point me to the place it's used on the Widgets page? 🤔

It's on Appearance -> Widgets page. Sorry if it wasn't clear.
Just add a new (legacy) Navigation Menu widget.

Correct me if I'm wrong, but I think it's defined by the theme (twentytwentyone). You might see other values if switch to other themes.

Yep, it is. 8px vs 10px is not such a big difference.
I think we can use 8px as well.
Fixed in 5f52f34

@kevin940726

…ted by @kevin940726 in https://github.com/WordPress/gutenberg/pull/34076/files#r690137625)

kevin940726

LGTM 👍

noisysocks · 2021-08-20T01:54:14Z

Nice job, congrats on the first PR 👏

…ff centered (#34076)

* Fix API docs generation (#33384) * Docs: use markdown headings instead of links for API declarations (#33381) * Docs: Run Prettier after updating API in documentation (#33498) (cherry picked from commit 626f233) * Use tabs instead of spaces in block transform doc example (#33549) (cherry picked from commit 8afca1e) * Fix metabox reordering (#30617). * Block editor: don't render layout and duotone styles in between blocks (#32083) * Widgets: Allow HTML tags in description (#33814) * Widgets: Allow HTML tags in description * Use `dangerouslySetInnerHTML` Avoid `<div />` inside the `<p />` tag * Describe by dangerouslySetInnerHTML is used * Use safeHTML * Update comment * Editor: Set 'hide_empty' for the most used terms query (#33457) Don't include terms that aren't assigned to any posts as "most used" terms. * Update widget editor help links to point to the new support article (#33482) * If select-all fires in .editor-post-title__input, end the process.. (#33621) * Writing flow: select all: remove early return for post title (#33699) * Call onChangeSectionExpanded conditionally (#33618) * FontSizePicker: Use number values when the initial value is a number (#33679) * FontSizePicker: Don't use units if the value is a number * Add unit tests * Disable units when we have number values * Fix justification for button block when selected (#33739) * Remove margin setting, auto right conflict with justify buttons * Per review, add little margin back * Add error boundaries to widget screens (#33771) * Add error boundary to edit widgets screen * Add error boundary to customize widgets * Refactor sidebar controls provider to application level so that its state is not lost when re-initializing * Revert "Refactor sidebar controls provider to application level so that its state is not lost when re-initializing" This reverts commit 7d607ff. * Remove rebootability from customize widgets * Remove debug code * Fix insertion point in Widgets editors (#33802) * Default batch processor: Respect the batch endpoint's maxItems (#34280) This updates the default batch processor to make multiple batch requests if the number of requests to process exceeds the number of requests that the batch endpoint can handle. We determine the number of requests that the batch endpoint can handle by making a preflight OPTIONS request to /batch/v1. By default it is 25 requests. See https://make.wordpress.org/core/2020/11/20/rest-api-batch-framework-in-wordpress-5-6/. * Fix button block focus trap after a URL has been added (#34314) * Rework button block link UI to match RichText format implementation * Refine some more, determine visibility by selection and url state * Add e2e test * Also focus rich text when unlinking using a keyboard shortcut * Text for dropdown fields within legacy widgets in the Customizer is off centered (#34076) * Fix ESLint errors reported * Regenerate autogenerated docs * Update the `INSERTER_SEARCH_SELECTOR` path. This is a partial cherry pick of 2356b2d in order to fix the performance tests. Co-authored-by: André <nosolosw@users.noreply.github.com> Co-authored-by: JuanMa <juanma.garrido@gmail.com> Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl> Co-authored-by: Jeff Bowen <jblz@users.noreply.github.com> Co-authored-by: Bruno Ribarić <43731400+ribaricplusplus@users.noreply.github.com> Co-authored-by: Ella van Durpe <4710635+ellatrix@users.noreply.github.com> Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Daniel Richards <daniel.richards@automattic.com> Co-authored-by: Hiroshi Urabe <mail@torounit.com> Co-authored-by: Kai Hao <kevin830726@gmail.com> Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com> Co-authored-by: Robert Anderson <robert@noisysocks.com> Co-authored-by: Anton Vlasenko <43744263+anton-vlasenko@users.noreply.github.com>

We need to specify the padding-top property because Firefox doesn't r…

7d5a9b1

…ender text correctly inside the select element in the legacy menu widget.

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Aug 13, 2021

anton-vlasenko added this to the WordPress 5.8.1 milestone Aug 13, 2021

anton-vlasenko added the [Type] Bug An existing feature does not function as intended label Aug 13, 2021

anton-vlasenko changed the title ~~[WIP] We need to specify the padding-top property because Firefox doesn't r…~~ Text for dropdown fields within legacy widgets in the Customizer is off centered Aug 13, 2021

Don't use Mozilla specific css hacks and just apply proper top and bo…

64f3809

…ttom margins.

anton-vlasenko requested a review from kevin940726 August 13, 2021 16:29

kevin940726 reviewed Aug 16, 2021

View reviewed changes

anton-vlasenko requested a review from kevin940726 August 16, 2021 10:53

Let's use 8px (equal to the size of the grid unit) vs 10px (as sugges…

5f52f34

…ted by @kevin940726 in https://github.com/WordPress/gutenberg/pull/34076/files#r690137625)

kevin940726 approved these changes Aug 18, 2021

View reviewed changes

kevin940726 merged commit e1eb020 into WordPress:trunk Aug 19, 2021

desrosj pushed a commit that referenced this pull request Aug 30, 2021

Text for dropdown fields within legacy widgets in the Customizer is o…

c388f23

…ff centered (#34076)

desrosj mentioned this pull request Aug 30, 2021

WordPress 5.8.1 backports #34393

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Text for dropdown fields within legacy widgets in the Customizer is off centered #34076

Text for dropdown fields within legacy widgets in the Customizer is off centered #34076

anton-vlasenko commented Aug 13, 2021 •

edited

Loading

github-actions bot commented Aug 13, 2021

kevin940726 Aug 16, 2021

anton-vlasenko Aug 16, 2021 •

edited

Loading

kevin940726 Aug 17, 2021

anton-vlasenko Aug 17, 2021

kevin940726 Aug 17, 2021

anton-vlasenko Aug 17, 2021 •

edited

Loading

kevin940726 left a comment

noisysocks commented Aug 20, 2021

Text for dropdown fields within legacy widgets in the Customizer is off centered #34076

Text for dropdown fields within legacy widgets in the Customizer is off centered #34076

Conversation

anton-vlasenko commented Aug 13, 2021 • edited Loading

Description

How has this been tested?

Actual result

Expected result

Screenshots

Types of changes

Checklist:

github-actions bot commented Aug 13, 2021

kevin940726 Aug 16, 2021

Choose a reason for hiding this comment

anton-vlasenko Aug 16, 2021 • edited Loading

Choose a reason for hiding this comment

kevin940726 Aug 17, 2021

Choose a reason for hiding this comment

anton-vlasenko Aug 17, 2021

Choose a reason for hiding this comment

kevin940726 Aug 17, 2021

Choose a reason for hiding this comment

anton-vlasenko Aug 17, 2021 • edited Loading

Choose a reason for hiding this comment

kevin940726 left a comment

Choose a reason for hiding this comment

noisysocks commented Aug 20, 2021

anton-vlasenko commented Aug 13, 2021 •

edited

Loading

anton-vlasenko Aug 16, 2021 •

edited

Loading

anton-vlasenko Aug 17, 2021 •

edited

Loading