Use ToolsPanel in Global Styles → Typography (#44180)

* Rough attempt at using ToolsPanel in Global Styles * Move heading selector and typography preview out of ToolsPanel * DRY up typography hooks * Use correct label for Appearance control * Remove Reset button from font size picker * Move heading level selector to below preview * Hide Font Family control when there are no font families
WordPress · Sep 29, 2022 · 5073ce2 · 5073ce2
1 parent 02c5684
commit 5073ce2
Show file tree

Hide file tree

Showing 5 changed files with 308 additions and 153 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -2,12 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
+import TypographyPreview from './typography-preview';
 
 const elements = {
 	text: {
@@ -29,13 +36,70 @@ const elements = {
 };
 
 function ScreenTypographyElement( { name, element } ) {
+	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
+
 	return (
 		<>
 			<ScreenHeader
 				title={ elements[ element ].title }
 				description={ elements[ element ].description }
 			/>
-			<TypographyPanel name={ name } element={ element } />
+			<Spacer marginX={ 4 }>
+				<TypographyPreview
+					name={ name }
+					element={ element }
+					headingLevel={ headingLevel }
+				/>
+			</Spacer>
+			{ element === 'heading' && (
+				<Spacer marginX={ 4 } marginBottom="1em">
+					<ToggleGroupControl
+						label={ __( 'Select heading level' ) }
+						hideLabelFromVision
+						value={ headingLevel }
+						onChange={ setHeadingLevel }
+						isBlock
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					>
+						<ToggleGroupControlOption
+							value="heading"
+							/* translators: 'All' refers to selecting all heading levels 
+							and applying the same style to h1-h6. */
+							label={ __( 'All' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h1"
+							label={ __( 'H1' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h2"
+							label={ __( 'H2' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h3"
+							label={ __( 'H3' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h4"
+							label={ __( 'H4' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h5"
+							label={ __( 'H5' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h6"
+							label={ __( 'H6' ) }
+						/>
+					</ToggleGroupControl>
+				</Spacer>
+			) }
+			<TypographyPanel
+				name={ name }
+				element={ element }
+				headingLevel={ headingLevel }
+			/>
 		</>
 	);
 }

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -11,7 +11,7 @@
 	display: block;
 }
 
-.edit-site-typography-panel__preview {
+.edit-site-typography-preview {
 	display: flex;
 	align-items: center;
 	justify-content: center;