Skip to content

Fix: Button Replace remaining 40px default size violations [Block Editor 3] #65225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mirka merged 11 commits into from
Sep 24, 2024
Merged

Fix: Button Replace remaining 40px default size violations [Block Editor 3] #65225

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
70ec0f7
Fix: Global Styles component to use 40px default size.
vipul0425 Sep 11, 2024
631a42c
Fix: Block variation picket to use 40px default size.
vipul0425 Sep 11, 2024
36d6a70
Fix: Block variation transform to use 40px default size.
vipul0425 Sep 11, 2024
670cca8
Fix: color gradient dropdown and block appender button to use 40px de…
vipul0425 Sep 11, 2024
913f90c
fix: shadowpanel clear button
vipul0425 Sep 11, 2024
e7b1615
Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/issu…
vipul0425 Sep 16, 2024
bb9545f
fix: Button Block appender issues.
vipul0425 Sep 16, 2024
c452baa
fix: Coverts shadow panel Buttons to normal html buttons.
vipul0425 Sep 16, 2024
c8c0e5d
Update packages/block-library/src/group/editor.scss
vipul0425 Sep 18, 2024
00da47a
Update packages/block-library/src/group/editor.scss
vipul0425 Sep 18, 2024
9d3d8ac
feat: Add tootlip tu shadow button.
vipul0425 Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix: Block variation transform to use 40px default size.
  • Loading branch information
@vipul0425
vipul0425 committed Sep 11, 2024
commit 36d6a702fa707ecca4a6d68d57b6bbc9ea543a67
3 changes: 1 addition & 2 deletions packages/block-editor/src/components/block-variation-transforms/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ function VariationsButtons( {
</VisuallyHidden>
{ variations.map( ( variation ) => (
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
__next40pxDefaultSize
Copy link
Contributor Author

@vipul0425 vipul0425 Sep 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
block-variation-transform-before block-variation-transform-after

Copy link
Contributor

@jameskoster jameskoster Sep 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about this one. I think it should be more like ToggleGroupControl. IE the outer container is 40px, while the inner buttons are 32px (compact size).

Copy link
Member

@DaniGuardiola DaniGuardiola Sep 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jameskoster what about just using a ToggleGroupControl?

Copy link
Contributor

@jameskoster jameskoster Sep 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The visible stroke in the resting state would create additional weight that is probably unwanted in this UI.

We have an issue to explore the ToggleGroupControl design here, which might make it appropriate for use in its vanilla state if implemented.

But until then the simpler approach is probably to just make these buttons compact (32px).

Copy link
Contributor Author

@vipul0425 vipul0425 Sep 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

I have updated it to use compact size.

key={ variation.name }
icon={ <BlockIcon icon={ variation.icon } showColors /> }
isPressed={ selectedValue === variation.name }
Expand Down