From 5813ec98ed70fd5204d12944ef42d4aa2090ae26 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 9 Nov 2021 11:58:45 +1000
Subject: [PATCH] Merge paragraph text settings into typography panel

---
 packages/block-library/src/paragraph/edit.js  | 16 ++++++++++++----
 packages/components/src/tools-panel/styles.ts |  5 +++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index e88bfc3c721179..c6a2988a3d0645 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/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
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index a5edef786d9874..769dc8cf0ffcab 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -102,6 +102,11 @@ 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 } {
 			margin-bottom: 0;