Fix: Inconsistency on Import from JSON button look

[jorgefilipecosta]

Description

Fixes: #20302

This PR fixes the size and padding of the import from JSON button to make the button consistent with the Add New button.

How has this been tested?

I verified the button still works (the UI can be accessed on .../wp-admin/edit.php?post_type=wp_block).

[github-actions]

Size Change: +21 B (0%)

Total Size: 865 kB

Filename	Size	Change
build/list-reusable-blocks/style-rtl.css	226 B	+11 B (4%)
build/list-reusable-blocks/style.css	226 B	+10 B (4%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.01 kB	0 B
build/annotations/index.js	3.43 kB	0 B
build/api-fetch/index.js	3.39 kB	0 B
build/autop/index.js	2.58 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.02 kB	0 B
build/block-directory/style-rtl.css	760 B	0 B
build/block-directory/style.css	760 B	0 B
build/block-editor/index.js	104 kB	0 B
build/block-editor/style-rtl.css	9.78 kB	0 B
build/block-editor/style.css	9.77 kB	0 B
build/block-library/editor-rtl.css	7.67 kB	0 B
build/block-library/editor.css	7.67 kB	0 B
build/block-library/index.js	116 kB	0 B
build/block-library/style-rtl.css	7.49 kB	0 B
build/block-library/style.css	7.49 kB	0 B
build/block-library/theme-rtl.css	669 B	0 B
build/block-library/theme.css	671 B	0 B
build/block-serialization-default-parser/index.js	1.65 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	57.6 kB	0 B
build/components/index.js	190 kB	0 B
build/components/style-rtl.css	16.1 kB	0 B
build/components/style.css	16 kB	0 B
build/compose/index.js	5.76 kB	0 B
build/core-data/index.js	10.5 kB	0 B
build/data-controls/index.js	1.04 kB	0 B
build/data/index.js	8.22 kB	0 B
build/date/index.js	5.36 kB	0 B
build/deprecated/index.js	771 B	0 B
build/dom-ready/index.js	569 B	0 B
build/dom/index.js	3.06 kB	0 B
build/edit-post/index.js	90.8 kB	0 B
build/edit-post/style-rtl.css	8.7 kB	0 B
build/edit-post/style.css	8.69 kB	0 B
build/edit-site/index.js	4.59 kB	0 B
build/edit-site/style-rtl.css	2.77 kB	0 B
build/edit-site/style.css	2.76 kB	0 B
build/edit-widgets/index.js	4.36 kB	0 B
build/edit-widgets/style-rtl.css	2.8 kB	0 B
build/edit-widgets/style.css	2.79 kB	0 B
build/editor/editor-styles-rtl.css	327 B	0 B
build/editor/editor-styles.css	328 B	0 B
build/editor/index.js	45.1 kB	0 B
build/editor/style-rtl.css	4.13 kB	0 B
build/editor/style.css	4.11 kB	0 B
build/element/index.js	4.45 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.6 kB	0 B
build/format-library/style-rtl.css	500 B	0 B
build/format-library/style.css	501 B	0 B
build/hooks/index.js	1.92 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.45 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.3 kB	0 B
build/keycodes/index.js	1.68 kB	0 B
build/list-reusable-blocks/index.js	2.99 kB	0 B
build/media-utils/index.js	4.85 kB	0 B
build/notices/index.js	1.57 kB	0 B
build/nux/index.js	3.02 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/plugins/index.js	2.54 kB	0 B
build/primitives/index.js	1.49 kB	0 B
build/priority-queue/index.js	878 B	0 B
build/redux-routine/index.js	2.84 kB	0 B
build/rich-text/index.js	14.3 kB	0 B
build/server-side-render/index.js	2.54 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	4 kB	0 B
build/viewport/index.js	1.61 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.18 kB	0 B

_{compressed-size-action}

[mapk]

I just tested in Chrome and FF and now it looks too small.

Chrome

Firefox

The is-small class drops the font-size down to 11px which is part of the problem I think. I'm still looking into this.

[mapk]

It appears there's a whole series of button heights going on here:

[youknowriad]

Right now Gutenberg Buttons are 36 for regular buttons and 24 for small ones.

In Core it's more 30 for regular buttons and probably 24 too for small ones.

The "Add New" button though is an ad-hoc button in Core while "Import from JSON" is a regular Gutenberg button.

For the issue to be solved entirely, we need:

• Make sure Core buttons match Gutenberg buttons
• Make sure the "Add new" is not an ad-hoc button.
• Use the "same" variations between "Add New" and "Import from JSON"

This won't happen today though as the buttons refactoring in Core takes time.

Maybe we can just adapt the style of the "Import from JSON" in adhoc way now.

[jorgefilipecosta]

Thank you for updates @mapk, things are looking good in my tests.