diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 69356c8f97d71..889f48a151d65 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -19,6 +19,7 @@
### Enhancements
- `CustomGradientPicker`, `GradientPicker`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43387](https://github.com/WordPress/gutenberg/pull/43387)).
+- `ToolsPanel`: Tighten grid gaps ([#43424](https://github.com/WordPress/gutenberg/pull/43424)).
- `ToggleGroupControl`: Improve TypeScript documentation ([#43265](https://github.com/WordPress/gutenberg/pull/43265)).
- `ComboboxControl`: Normalize hyphen-like characters to an ASCII hyphen ([#42942](https://github.com/WordPress/gutenberg/pull/42942)).
- `FormTokenField`: Refactor away from `_.difference()` ([#43224](https://github.com/WordPress/gutenberg/pull/43224/)).
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 696cebe739368..7fe2fc0a0a1a2 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -20,8 +20,8 @@ const toolsPanelGrid = {
grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
`,
spacing: css`
- column-gap: ${ space( 4 ) };
- row-gap: ${ space( 6 ) };
+ column-gap: ${ space( 2 ) };
+ row-gap: ${ space( 4 ) };
`,
item: {
fullWidth: css`
diff --git a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap b/packages/components/src/tools-panel/test/__snapshots__/index.js.snap
deleted file mode 100644
index c5a037a0f6419..0000000000000
--- a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,210 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolsPanel first and last panel items should apply first/last classes to appropriate items 1`] = `
-.emotion-0 {
- display: grid;
- gap: calc( 4px * 3 );
- grid-template-columns: repeat( 2, 1fr );
- grid-template-columns: repeat( 2, minmax(0, 1fr) );
- -webkit-column-gap: calc(4px * 4);
- column-gap: calc(4px * 4);
- row-gap: calc(4px * 6);
- border-top: 1px solid #ddd;
- margin-top: -1px;
- padding: calc(4px * 4);
-}
-
-.emotion-0>div:not( :first-of-type ) {
- display: grid;
- grid-template-columns: repeat( 2, minmax(0, 1fr) );
- -webkit-column-gap: calc(4px * 4);
- column-gap: calc(4px * 4);
- row-gap: calc(4px * 6);
- grid-column: 1/-1;
-}
-
-.emotion-2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- justify-content: space-between;
- width: 100%;
- grid-column: 1/-1;
- gap: calc(4px * 2);
-}
-
-.emotion-2>*+*:not( marquee ) {
- margin-left: calc(4px * 2);
-}
-
-.emotion-2>* {
- min-width: 0;
-}
-
-.emotion-2 .components-dropdown-menu {
- margin: calc(4px * -1) 0;
- line-height: 0;
-}
-
-.emotion-2.emotion-2.emotion-2.emotion-2 .components-dropdown-menu__toggle {
- padding: 0;
- min-width: calc(4px * 6);
-}
-
-.emotion-4 {
- color: #1e1e1e;
- line-height: 1.2;
- margin: 0;
- color: #1e1e1e;
- font-size: calc(1.95 * 13px);
- font-weight: 600;
- display: block;
- font-size: inherit;
- font-weight: 500;
- line-height: normal;
-}
-
-.emotion-4.emotion-4 {
- margin: 0;
-}
-
-.emotion-6 {
- grid-column: 1/-1;
- display: none;
-}
-
-.emotion-6>div,
-.emotion-6>fieldset {
- padding-bottom: 0;
- margin-bottom: 0;
- max-width: 100%;
-}
-
-.emotion-6.emotion-6 .ej5x27r4 {
- margin-bottom: 0;
-}
-
-.emotion-6.emotion-6 .ej5x27r4 .ej5x27r3:last-child {
- margin-bottom: 0;
-}
-
-.emotion-6 .ej5x27r1 {
- margin-bottom: 0;
-}
-
-.emotion-6.emotion-6 .em5sgkm3 label {
- line-height: 1.4em;
-}
-
-.emotion-8 {
- grid-column: 1/-1;
-}
-
-.emotion-8>div,
-.emotion-8>fieldset {
- padding-bottom: 0;
- margin-bottom: 0;
- max-width: 100%;
-}
-
-.emotion-8.emotion-8 .ej5x27r4 {
- margin-bottom: 0;
-}
-
-.emotion-8.emotion-8 .ej5x27r4 .ej5x27r3:last-child {
- margin-bottom: 0;
-}
-
-.emotion-8 .ej5x27r1 {
- margin-bottom: 0;
-}
-
-.emotion-8.emotion-8 .em5sgkm3 label {
- line-height: 1.4em;
-}
-
-
-`;
diff --git a/packages/components/src/tools-panel/test/index.js b/packages/components/src/tools-panel/test/index.js
index ffe696e388aa5..bd788abd2604c 100644
--- a/packages/components/src/tools-panel/test/index.js
+++ b/packages/components/src/tools-panel/test/index.js
@@ -1069,7 +1069,7 @@ describe( 'ToolsPanel', () => {
describe( 'first and last panel items', () => {
it( 'should apply first/last classes to appropriate items', () => {
- const { container } = render(
+ render(
@@ -1113,7 +1113,8 @@ describe( 'ToolsPanel', () => {
expect( item3 ).toBeInTheDocument();
expect( screen.queryByText( 'Item 4' ) ).not.toBeInTheDocument();
- expect( container ).toMatchSnapshot();
+ expect( item2.parentElement ).toHaveClass( 'first' );
+ expect( item3.parentElement ).toHaveClass( 'last' );
} );
} );
} );
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 1ad4f99b106cf..c6fe46b3160d3 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -144,7 +144,7 @@ export default function TypographyPanel( { name, element } ) {
>
Aa
-
+
{ element === 'heading' && (