Fix: Button Replace remaining 40px default size violations [Block Editor 5] #65361

PARTHVATALIYA · 2024-09-16T06:58:29Z

Part of - #65018

What?

Issue - #65018, To use default to 40px for the button.

Why?

To make the consistent button across Gutenberg.

How?

Change from __next40pxDefaultSize={ false } to __next40pxDefaultSize on component.

Testing Instructions

Testing steps and screenshots are added below.

github-actions · 2024-09-16T06:58:44Z

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @parthVataliya16.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: parthVataliya16.

Co-authored-by: PARTHVATALIYA <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[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.

github-actions · 2024-09-16T06:58:49Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @PARTHVATALIYA! In case you missed it, we'd love to have you join us in our Slack community.

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

packages/block-editor/src/components/inspector-controls-tabs/index.js

packages/block-editor/src/components/inspector-popover-header/index.js

packages/block-editor/src/components/link-control/index.js

packages/block-editor/src/components/link-control/settings-drawer.js

packages/block-editor/src/components/list-view/block-select-button.js

PARTHVATALIYA · 2024-09-16T07:33:55Z

packages/block-editor/src/components/media-placeholder/index.js

@@ -51,8 +51,7 @@ const InsertFromURLPopover = ( {
 				value={ src }
 			/>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize


Before:

After:

@mirka will this be also affected by #65158 ?

I think so. After #65158 lands, this media placeholder will also need to be updated to be a small button in the suffix slot, like in #65158 (comment).

#65158 has landed, so after merging latest trunk into this branch, we can move the button to the suffix slot.

@mirka I noticed that #65158 deals with URLInput, while this file is dealing with URLPopover, which doesn't seem to have a suffix. Should we just add the __next40pxDefaultSize prop to Button and use CSS to update the input height to 40px too?

I took another look and can confirm that URLPopover doesn't have a suffix — we can simply set __next40pxDefaultSize to true (like originally done by @PARTHVATALIYA ). The input will automatically match the new height, as per the screenshot above.

Actually we want to consolidate the UI pattern to have buttons in the suffix (see #64709 (comment)). And I noticed that this is a big enough change to warrant a separate code review, so I submitted a separate PR to deal with it (#65656).

In any case, not a blocker for this PR.

Thank you @mirka , I didn't initially understand that you were suggesting to use an InputControl. The work is going to be carried out in #65656, which means that there's nothing left to be done in this PR 🎉

packages/block-editor/src/components/media-placeholder/index.js

getdave

Thanks for the ping. Link Control looks like it might need some tweaks.

packages/block-editor/src/components/link-control/index.js

packages/block-editor/src/components/link-control/settings-drawer.js

packages/block-editor/src/components/link-control/index.js

packages/block-editor/src/components/media-placeholder/index.js

* External Media / AI Image Generator: update button style See #39934 Let's change the overall styles of the 2 buttons ("Select Image" and "Generate with AI"): - the buttons should be 40px high, like in Core. See WordPress/gutenberg#46741 - the buttons should use the secondary style variant by default, to match the "Insert from URL" button. - the buttons should take the full width of the placeholder on mobile devices. * Ensure the buttons look good in narrow parent blocks See Automattic/jetpack#39985 (comment) * Simplify styling of the main wrapper The wrapper itself is still necessary unfortunately. Co-authored-by: Filipe Varela <[email protected]> Co-authored-by: jasmussen <[email protected]> * Add logic to change button size based on wp & Gutenberg versions The other buttons in the Image block were changed in this PR: WordPress/gutenberg#65361 This was released with Gutenberg 19.4, and will be included in WP version 6.7. Let's consequently set our own buttons to match. --------- Co-authored-by: Filipe Varela <[email protected]> Co-authored-by: jasmussen <[email protected]> Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/11660975525 Upstream-Ref: Automattic/jetpack@746d1fc

Fix: inspector control tabs to use 40px default button size

246fe1b

PARTHVATALIYA requested a review from ellatrix as a code owner September 16, 2024 06:58

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 16, 2024

PARTHVATALIYA mentioned this pull request Sep 16, 2024

Button: Replace remaining 40px default size violations #65018

Closed

21 tasks