Hello world!
' ); // Change the `drop cap` using the sidebar. + await openTypographyToolsPanelMenu(); + await page.click( 'button[aria-label="Show Drop cap"]' ); + const [ dropCapToggle ] = await page.$x( "//label[contains(text(), 'Drop cap')]" ); diff --git a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js index 7e405330fb717..8f90b9c40c51e 100644 --- a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js +++ b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js @@ -8,6 +8,7 @@ import { pressKeyWithModifier, pressKeyTimes, activateTheme, + openTypographyToolsPanelMenu, } from '@wordpress/e2e-test-utils'; const openFontSizeSelectControl = async () => { @@ -17,13 +18,6 @@ const openFontSizeSelectControl = async () => { return selectControl.click(); }; -const openTypographyToolsPanelMenu = async () => { - const toggleSelector = - "//div[contains(@class, 'typography-block-support-panel')]//button[contains(@class, 'components-dropdown-menu__toggle')]"; - const toggle = await page.waitForXPath( toggleSelector ); - return toggle.click(); -}; - const FONT_SIZE_TOGGLE_GROUP_SELECTOR = "//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]"; diff --git a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js index 58a917508c11e..dec762a39da59 100644 --- a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js @@ -10,6 +10,7 @@ import { clickBlockToolbarButton, deleteAllWidgets, createURL, + openTypographyToolsPanelMenu, } from '@wordpress/e2e-test-utils'; /** @@ -831,6 +832,9 @@ describe( 'Widgets Customizer', () => { await showMoreSettingsButton.click(); // Change `drop cap` (Any change made in this section is sufficient; not required to be `drop cap`). + await openTypographyToolsPanelMenu(); + await page.click( 'button[aria-label="Show Drop cap"]' ); + const [ dropCapToggle ] = await page.$x( "//label[contains(text(), 'Drop cap')]" ); From 3f567528ed2ef56094c6e8f27c5dcd12e20b7011 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 12 Nov 2021 12:24:42 +1000 Subject: [PATCH 3/5] Change approach to maintaining spacing of control and help text --- packages/components/src/tools-panel/styles.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 769dc8cf0ffca..dd43f89ef100a 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -8,6 +8,7 @@ import { css } from '@emotion/react'; */ import { StyledField as BaseControlField, + StyledHelp as BaseControlHelp, Wrapper as BaseControlWrapper, } from '../base-control/styles/base-control-styles'; import { COLORS, CONFIG } from '../utils'; @@ -102,16 +103,15 @@ export const ToolsPanelItem = css` /* Remove BaseControl components margins and leave spacing to grid layout */ && ${ BaseControlWrapper } { margin-bottom: 0; - /* The following allows controls with help text to maintain spacing. */ - /* e.g. ToggleControls. */ - display: flex; - flex-direction: column; - row-gap: ${ space( 3 ) }; - ${ BaseControlField } { + ${ BaseControlField }:last-child { margin-bottom: 0; } } + + ${ BaseControlHelp } { + margin-bottom: 0; + } `; export const ToolsPanelItemPlaceholder = css` From f808cd4bab63f1030b0882fb8329be88eed158d7 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 15 Nov 2021 11:40:38 +1000 Subject: [PATCH 4/5] Add explanatory comment as to the usage of last-child --- packages/components/src/tools-panel/styles.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index dd43f89ef100a..373847efa5fc4 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -104,6 +104,11 @@ export const ToolsPanelItem = css` && ${ BaseControlWrapper } { margin-bottom: 0; + /** + * To maintain proper spacing within a base control, the field's bottom + * margin should only be removed when there is no help text included and + * it is therefore the last-child. + */ ${ BaseControlField }:last-child { margin-bottom: 0; } From 34fba4c350cf00db049ee24c8088620446836951 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 15 Nov 2021 11:41:05 +1000 Subject: [PATCH 5/5] Add changelog --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b297935774dbd..0da57fcfbce19 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - Reinstated the ability to pass additional props to the `ToolsPanel` ([36428](https://github.com/WordPress/gutenberg/pull/36428)). +### Bug Fix + +- Fixed spacing between `BaseControl` fields and help text within the `ToolsPanel` ([36334](https://github.com/WordPress/gutenberg/pull/36334)) + ## 19.0.1 (2021-11-07) ### Experimental