Refactor. Add global styles for heading and quote

lib/demo-block-templates/front-page.html

@@ -28,6 +28,16 @@ <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
 	scelerisque. Etiam euismod blandit leo a maximus.</p>
 <!-- /wp:paragraph -->
 
+<!-- wp:quote -->
+<blockquote class="wp-block-quote">
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+</blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link">Hello</a></div>
+<!-- /wp:button -->
+
 <!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide">
 	<!-- wp:column -->

packages/block-library/src/heading/style.scss

@@ -5,26 +5,27 @@
 	h4,
 	h5,
 	h6 {
-		color: var(--wp-color-text);
-		line-height: var(--wp-typography-titleLineHeight);
+		color: var(--wp-color--text);
+		font-weight: var(--wp-heading--fontWeight);
+		line-height: var(--wp-typography--titleLineHeight);
 	}
 }
 
 .wp-gs h1 {
-	font-size: var(--wp-typography-fontSizeH1);
+	font-size: var(--wp-typography--fontSizeH1);
 }
 .wp-gs h2 {
-	font-size: var(--wp-typography-fontSizeH2);
+	font-size: var(--wp-typography--fontSizeH2);
 }
 .wp-gs h3 {
-	font-size: var(--wp-typography-fontSizeH3);
+	font-size: var(--wp-typography--fontSizeH3);
 }
 .wp-gs h4 {
-	font-size: var(--wp-typography-fontSizeH4);
+	font-size: var(--wp-typography--fontSizeH4);
 }
 .wp-gs h5 {
-	font-size: var(--wp-typography-fontSizeH5);
+	font-size: var(--wp-typography--fontSizeH5);
 }
 .wp-gs h6 {
-	font-size: var(--wp-typography-fontSizeH6);
+	font-size: var(--wp-typography--fontSizeH6);
 }

packages/block-library/src/paragraph/style.scss

@@ -37,7 +37,8 @@ p.has-text-color a {
 }
 
 .wp-gs p {
-	color: var(--wp-color-text);
-	font-size: var(--wp-typography-fontSize);
-	line-height: var(--wp-typography-lineHeight);
+	color: var(--wp-color--text);
+	font-size: var(--wp-typography--fontSize);
+	font-weight: var(--wp-typography--fontWeight);
+	line-height: var(--wp-typography--lineHeight);
 }

packages/block-library/src/quote/style.scss

@@ -17,3 +17,9 @@
 		}
 	}
 }
+
+.wp-gs .wp-block-quote {
+	p {
+		font-size: var(--wp-quote--fontSize);
+	}
+}

packages/edit-site/src/components/sidebar/global-styles-panel/index.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesStateProvider } from './store';
+
+import { Panel } from '@wordpress/components';
+
+import {
+	ColorPanel,
+	HeadingPanel,
+	QuotePanel,
+	TypographyPanel,
+} from './panels';
+
+export default function GlobalStylesPanel() {
+	return (
+		<GlobalStylesStateProvider>
+			<Panel header={ __( 'Global Styles' ) }>
+				<TypographyPanel />
+				<ColorPanel />
+				<HeadingPanel />
+				<QuotePanel />
+			</Panel>
+		</GlobalStylesStateProvider>
+	);
+}

packages/edit-site/src/components/sidebar/global-styles-panel/panels/color-panel.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, ColorControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesState } from '../store';
+
+export default function ColorsPanel() {
+	const {
+		textColor,
+		setTextColor,
+		backgroundColor,
+		setBackgroundColor,
+		primaryColor,
+		setPrimaryColor,
+	} = useGlobalStylesState();
+
+	return (
+		<PanelBody title={ __( 'Colors' ) } initialOpen={ false }>
+			<ColorControl
+				label={ __( 'Text' ) }
+				value={ textColor }
+				onChange={ setTextColor }
+			/>
+			<ColorControl
+				label={ __( 'Background' ) }
+				value={ backgroundColor }
+				onChange={ setBackgroundColor }
+			/>
+			<ColorControl
+				label={ __( 'Primary' ) }
+				value={ primaryColor }
+				onChange={ setPrimaryColor }
+			/>
+		</PanelBody>
+	);
+}