Paragraph: Merge text settings into typography panel

packages/block-library/src/paragraph/edit.js

@@ -9,8 +9,8 @@ import classnames from 'classnames';
 import { __, _x, isRTL } from '@wordpress/i18n';
 import {
 	ToolbarDropdownMenu,
-	PanelBody,
 	ToggleControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	AlignmentControl,
@@ -81,8 +81,16 @@ function ParagraphBlock( {
 				/>
 			</BlockControls>
 			{ isDropCapFeatureEnabled && (
-				<InspectorControls>
-					<PanelBody title={ __( 'Text settings' ) }>
+				<InspectorControls __experimentalGroup="typography">
+					<ToolsPanelItem
+						hasValue={ () => !! dropCap }
+						label={ __( 'Drop cap' ) }
+						onDeselect={ () =>
+							setAttributes( { dropCap: undefined } )
+						}
+						resetAllFilter={ () => ( { dropCap: undefined } ) }
+						panelId={ clientId }
+					>
 						<ToggleControl
 							label={ __( 'Drop cap' ) }
 							checked={ !! dropCap }
@@ -97,7 +105,7 @@ function ParagraphBlock( {
 									  )
 							}
 						/>
-					</PanelBody>
+					</ToolsPanelItem>
 				</InspectorControls>
 			) }
 			<RichText

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

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';
@@ -103,10 +104,19 @@ export const ToolsPanelItem = css`
 	&& ${ BaseControlWrapper } {
 		margin-bottom: 0;
 
-		${ BaseControlField } {
+		/**
+		 * 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;
 		}
 	}
+
+	${ BaseControlHelp } {
+		margin-bottom: 0;
+	}
 `;
 
 export const ToolsPanelItemPlaceholder = css`

packages/e2e-test-utils/README.md

@@ -532,6 +532,10 @@ _Returns_
 
 Opens the publish panel.
 
+### openTypographyToolsPanelMenu
+
+Opens the Typography tools panel menu provided via block supports.
+
 ### pressKeyTimes
 
 Presses the given keyboard key a number of times in sequence.

packages/e2e-test-utils/src/index.js

@@ -62,6 +62,7 @@ export {
 } from './observe-focus-loss';
 export { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
 export { openPublishPanel } from './open-publish-panel';
+export { openTypographyToolsPanelMenu } from './open-typography-tools-panel-menu';
 export { trashAllPosts } from './posts';
 export { pressKeyTimes } from './press-key-times';
 export {

packages/e2e-test-utils/src/open-typography-tools-panel-menu.js

@@ -0,0 +1,9 @@
+/**
+ * Opens the Typography tools panel menu provided via block supports.
+ */
+export async function openTypographyToolsPanelMenu() {
+	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();
+}

packages/e2e-tests/specs/editor/various/change-detection.test.js

@@ -10,6 +10,7 @@ import {
 	saveDraft,
 	openDocumentSettingsSidebar,
 	isCurrentURL,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Change detection', () => {
@@ -381,6 +382,10 @@ describe( 'Change detection', () => {
 
 		// Change the paragraph's `drop cap`.
 		await page.click( '[data-type="core/paragraph"]' );
+
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const [ dropCapToggle ] = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);

packages/e2e-tests/specs/editor/various/editor-modes.test.js

@@ -10,6 +10,7 @@ import {
 	switchEditorModeTo,
 	pressKeyTimes,
 	pressKeyWithModifier,
+	openTypographyToolsPanelMenu,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Editing modes (visual/HTML)', () => {
@@ -54,6 +55,9 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// The `drop cap` toggle for the paragraph block should appear, even in
 		// HTML editing mode.
+		await openTypographyToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Drop cap"]' );
+
 		const dropCapToggle = await page.$x(
 			"//label[contains(text(), 'Drop cap')]"
 		);
@@ -74,6 +78,9 @@ describe( 'Editing modes (visual/HTML)', () => {
 		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
 
 		// 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')]"
 		);

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')]";
 

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')]"
 		);