Update background image control dropdown height to fit-content by yogeshbhutkar · Pull Request #68038 · WordPress/gutenberg

yogeshbhutkar · 2024-12-17T04:54:12Z

What?

This PR contains a patch for fixing spacing inconsistency in the background image selector button.

How?

As the issue description mentions, the default size of Toolbar Button was updated to compact, whose styles are applied using the is-compact classname.

The is-compact classname contains a height of 32px as mentioned here:

gutenberg/packages/components/src/button/style.scss

Line 298 in 581de9f

height: $button-size-compact;

gutenberg/packages/base-styles/_variables.scss

Line 99 in 581de9f

$button-size-compact: 32px;

Whereas, the heights described in .components-dropdown applied to its parent, is actually 36px leading to a mismatch in the parent container and child's heights.

gutenberg/packages/block-editor/src/components/background-image-control/style.scss

Line 26 in 581de9f

height: 36px;

gutenberg/packages/block-editor/src/components/background-image-control/style.scss

Line 47 in 581de9f

height: 36px;

To fix the issue, the heights are updated inside .components-dropdown to now use fit-content instead of using the previously hardcoded value 36px.

As an alternative, we can also hardcode the height to 32px.

File Changed:

> packages/block-editor/src/components/background-image-control/style.scss

Testing Instructions

Go to the site editor.
Click on "Styles"
Click on "Background"
Confirm that the spacing for the button is now correct.

Screenshots

Before	After

github-actions · 2024-12-17T05:14:57Z

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: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org>
Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: Vrishabhsk <vrishabhsk@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: mayurprajapatii <mayur8991@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: swissspidy <swissspidy@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: dd32 <dd32@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: sarthaknagoshe2002 <sarthaknagoshe2002@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: rohitmathur-7 <rohitmathur7@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: benazeer-ben <benazeer@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

juanfra · 2024-12-17T12:31:00Z

Thank you for the PR!

I believe this button isn’t meant to use the compact style. It seems like the transition to the new 40px size would make sense to keep things cohesive with other elements in the styles section. I’d love to hear what the components maintainers think about this!

mirka

I don't quite understand — why is this button a ToolbarButton? At first glance it looks like there's some hacky reuse of MediaReplaceFlow, which is not fully appropriate for this context since we're not inside a Toolbar. There's probably some refactoring to be done if we want to reuse it outside of a Toolbar.

I'll also note that the correct height for this Button is 40px.

…te BackgroundImageControls to specify button variant

yogeshbhutkar · 2024-12-18T06:57:32Z

Hi @mirka, thank you for reviewing the PR! You’re absolutely right, the MediaReplaceFlow component is used in several places. In almost all cases, it’s appropriately placed within a Toolbar. However, in BackgroundImageControls, it’s not used inside a Toolbar, making the current implementation unsuitable for this context.

To address this, I explored a few ways to refactor the MediaReplaceFlow component. I believe introducing a buttonVariant prop is the most effective solution. This allows us to conditionally render either a Button or a ToolbarButton based on the prop, which can be set as needed for each use case.

I’ve implemented these changes and would love to hear your thoughts or suggestions for further improvement!

Here's a recent screenshot demonstrating that the recent changes fix the issue:

Audio Toolbar is one of the many places that implement the MediaReplaceFlow component and expects ToolbarButton. Here's a screenshot of it working as expected after the latest commit.

CC: @mirka @juanfra

tyxla · 2024-12-18T08:27:03Z

+	default: ToolbarButton,
+	toolbar: ToolbarButton,


Leaving the final review to @mirka, but just a side note here.

I'd personally remove default and just make buttonVariant default to toolbar. No need to maintain two variants that do the same thing.

Hi @tyxla, I was running into a Webpack build error and had to rebase to trunk but ran into an issue while rebasing. I've incorporated the changes suggested here by you and have opened a new PR here. #68084

Apologies for the inconvenience caused.

Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>

…PanelBody (WordPress#67906) Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org>

…ordPress#67879) * Plugin: Fix eligibility check for post types' default rendering mode * Add backport changelog entry Unlinked contributors: CreativeDive. Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

…cks docs (WordPress#67889) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org>

* Create a catalog list of private APIs * Document some private components * Rewrite the introduction * Rewrite the introduction again

…of PanelBody (WordPress#67910) Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

…f PanelBody (WordPress#67913) Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

…ordPress#67817) Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>

Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: anomiex <bjorsch@git.wordpress.org>

…nuItem' (WordPress#67961) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

) * Improve logic to show entities saved panel description. * Apply CR suggestion --------- Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

…#67880) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

…ess#67371) * Storybook: Add stories for the text-alignment-control component * Storybook: Update TextAlignmentControl story to follow best practices and simplify the structure * Storybook: Simplify TextAlignmentControl story * Storybook: Simplify the documentation for TextAlignmentControl story Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

* TreeSelect: Deprecate 36px default size * Fix types * Auto-generate readme * Add changelog * Fixup readme Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>

…ad of PanelBody (WordPress#67898) Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

…ecific contexts (WordPress#67738) * Remove patterns from quick inserter * Remove commented code * Removed prioritizePatterns instances where possible ---- Co-authored-by: rohitmathur-7 <rohitmathur7@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org>

) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>

…MenuProps hook for placement (WordPress#68019) Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

…nformation) (WordPress#65641) * Use Badge for the block type * Wrap when custom name is long enough * Fix calc Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org>

…WordPress#68031) * Hide inserter * Comment case Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com> --------- Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org>

* Fix Choose menu label when a menu has been deleted. * Pass menu ID to useNavigationMenu. Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org>

* Correct spelling * Fix caps Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org> Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>

…r.md." This reverts commit 9cbbe1d.

…Press#65429) * Add deperecation notice for the ButtonGroup component * Address the feedbacks for deprecation for ButtonGroupControl * Add the changelog deprecation message. * Update the changelog comment Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>

* ActionItem.Slot: Render as MenuGroup by default * Add changelog * Remove redundant `as` rendering in app Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>

* Add command to navigate to site editor * No icon, improved label * Modified code to display command other than Site editor * Feedback and suggestion updates --------- Co-authored-by: benazeer-ben <benazeer@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

…ress#67811) * Give style book its own route so it can be linked to directly. * Fix paths to and from global styles. * Use query instead of path * Fix path * Effect for editor settings update

yogeshbhutkar · 2024-12-18T10:04:21Z

Hi @juanfra @mirka, I was facing a Webpack build error due to which I had to rebase to Trunk. While doing so, I ran into an issue. I've created a new PR with the patch here: #68084

Let’s continue the discussion there. Apologies for any inconvenience this may have caused.

juanfra · 2024-12-18T10:22:24Z

Thank you!

Update background image control dropdown height to fit-content

c6b317b

yogeshbhutkar marked this pull request as ready for review December 17, 2024 05:14

yogeshbhutkar requested a review from ellatrix as a code owner December 17, 2024 05:14

juanfra added the [Type] Bug An existing feature does not function as intended label Dec 17, 2024

juanfra requested review from mirka and tyxla December 17, 2024 12:23

Mamaduka added the [Package] Block editor /packages/block-editor label Dec 17, 2024

mirka reviewed Dec 17, 2024

View reviewed changes

yogeshbhutkar added 2 commits December 18, 2024 10:59

Replace ToolbarButton with Button in MediaReplaceFlow component

cf146e7

Refactor MediaReplaceFlow to support dynamic button variants and upda…

023c5ca

…te BackgroundImageControls to specify button variant

tyxla reviewed Dec 18, 2024

View reviewed changes

tyxla and others added 16 commits December 18, 2024 14:35

Storybook: Fix warnings in Layout document (WordPress#67865)

697745e

Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>

Refactor "Settings" panel of Date block to use ToolsPanel instead of …

32d5f5e

…PanelBody (WordPress#67906) Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

Fix: Fix link to minimal-block example plugin code. (WordPress#67888)

608222a

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org>

[Docs] Fix: Two broken links to the packages reference API and to blo…

265a271

…cks docs (WordPress#67889) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org>

Create a catalog list of private APIs (WordPress#66558)

db0f0f1

* Create a catalog list of private APIs * Document some private components * Rewrite the introduction * Rewrite the introduction again

Refactor "Settings" panel of Columns block to use ToolsPanel instead …

b7e4edb

…of PanelBody (WordPress#67910) Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

Refactor "Settings" panel of Column block to use ToolsPanel instead o…

4f6349c

…f PanelBody (WordPress#67913) Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

Make sure the sidebar navigation item focus style is fully visible. (W…

83faed7

…ordPress#67817) Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>

Fix dataviews commonjs export (WordPress#67962)

ff53055

Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: anomiex <bjorsch@git.wordpress.org>

Editor: Remove the 'content-only' check from 'TemplatePartConverterMe…

dfa50f6

…nuItem' (WordPress#67961) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

Customizer Widgets: Fix inserter button size and animation (WordPress…

0f03dac

…#67880) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

TreeSelect: Deprecate 36px default size (WordPress#67855)

c0fa9f1

* TreeSelect: Deprecate 36px default size * Fix types * Auto-generate readme * Add changelog * Fixup readme Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>

Refactor "Settings" panel of Site Title block to use ToolsPanel inste…

53d7a80

…ad of PanelBody (WordPress#67898) Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

rohitmathur-7 and others added 14 commits December 18, 2024 14:35

Fix indentation in upload-media package.json (WordPress#68037)

7137258

Block Editor: Fix Iframe error for links without 'href' (WordPress#68024

858091b

) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>

Ensure all instances of the ToolsPanel uses the useToolsPanelDropdown…

57a642b

…MenuProps hook for placement (WordPress#68019) Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

Correct spelling in Zoom Out Inserters comment (WordPress#68051)

6def0de

* Correct spelling * Fix caps Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org> Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>

Docs: Fix some typos on reference-guide data-core-block-editor.md.

d48bc7a

Revert "Docs: Fix some typos on reference-guide data-core-block-edito…

c9f87e2

…r.md." This reverts commit 9cbbe1d.

Give style book its own route so it can be linked to directly. (WordP…

85e92d0

…ress#67811) * Give style book its own route so it can be linked to directly. * Fix paths to and from global styles. * Use query instead of path * Fix path * Effect for editor settings update

yogeshbhutkar requested review from DAreRodz, ajitbohra, artemiomorales, desrosj, fabiankaegy, juanmaguitar, luisherranz, ndiego, nerrad, ntwb, spacedmonkey and tellthemachines as code owners December 18, 2024 09:05

yogeshbhutkar closed this Dec 18, 2024

yogeshbhutkar mentioned this pull request Dec 18, 2024

Media Replace Flow: Add custom toggle support and fix button height #68084

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update background image control dropdown height to fit-content#68038

Update background image control dropdown height to fit-content#68038
yogeshbhutkar wants to merge 71 commits into
WordPress:trunkfrom
yogeshbhutkar:68029-fix-button-spacing-issue

yogeshbhutkar commented Dec 17, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Dec 17, 2024 •

edited

Loading

Uh oh!

juanfra commented Dec 17, 2024

Uh oh!

mirka left a comment

Uh oh!

yogeshbhutkar commented Dec 18, 2024 •

edited

Loading

Uh oh!

tyxla Dec 18, 2024

Uh oh!

yogeshbhutkar Dec 18, 2024

Uh oh!

yogeshbhutkar commented Dec 18, 2024

Uh oh!

juanfra commented Dec 18, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

Uh oh!

Conversation

yogeshbhutkar commented Dec 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

How?

File Changed:

Testing Instructions

Screenshots

Uh oh!

github-actions Bot commented Dec 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

juanfra commented Dec 17, 2024

Uh oh!

mirka left a comment

Choose a reason for hiding this comment

Uh oh!

yogeshbhutkar commented Dec 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tyxla Dec 18, 2024

Choose a reason for hiding this comment

Uh oh!

yogeshbhutkar Dec 18, 2024

Choose a reason for hiding this comment

Uh oh!

yogeshbhutkar commented Dec 18, 2024

Uh oh!

juanfra commented Dec 18, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

yogeshbhutkar commented Dec 17, 2024 •

edited

Loading

github-actions Bot commented Dec 17, 2024 •

edited

Loading

yogeshbhutkar commented Dec 18, 2024 •

edited

Loading