Global Styles: Site Edit Integration (FSE)

docs/manifest.json

@@ -1319,6 +1319,12 @@
 		"markdown_source": "../packages/format-library/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/global-styles",
+		"slug": "packages-global-styles",
+		"markdown_source": "../packages/global-styles/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/hooks",
 		"slug": "packages-hooks",

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

@@ -1,3 +1,43 @@
+<!-- wp:heading {"level":1} -->
+<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":2} -->
+<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":3} -->
+<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":4} -->
+<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":5} -->
+<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"level":6} -->
+<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Mauris consequat augue quis risus sollicitudin commodo. In hac habitasse platea dictumst. Pellentesque massa sem,
+	ultrices non tempus ac, aliquet ac nunc. Sed porttitor ac mi a malesuada. Donec blandit vel arcu blandit
+	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 -->
@@ -9,20 +49,20 @@
 	<!-- wp:column {"verticalAlignment":"center"} -->
 	<div class="wp-block-column is-vertically-aligned-center">
 		<!-- wp:navigation {"customTextColor":"#353fff"} -->
-			<!-- wp:navigation-link {"label":"One"} /-->
-			<!-- wp:navigation-link {"label":"Two"} -->
-				<!-- wp:navigation-link {"label":"Sub 1"} /-->
-				<!-- wp:navigation-link {"label":"Sub 2"} /-->
-			<!-- /wp:navigation-link -->
-			<!-- wp:navigation-link {"label":"Three"} /-->
+		<!-- wp:navigation-link {"label":"One"} /-->
+		<!-- wp:navigation-link {"label":"Two"} -->
+		<!-- wp:navigation-link {"label":"Sub 1"} /-->
+		<!-- wp:navigation-link {"label":"Sub 2"} /-->
+		<!-- /wp:navigation-link -->
+		<!-- wp:navigation-link {"label":"Three"} /-->
 		<!-- /wp:navigation -->
 	</div>
 	<!-- /wp:column -->
 </div>
 <!-- /wp:columns -->
 
 <!-- wp:image {"sizeSlug":"large"} -->
-<figure class="wp-block-image size-large"><img src="https://cldup.com/0BNcqkoMdq.jpg" alt=""/></figure>
+<figure class="wp-block-image size-large"><img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /></figure>
 <!-- /wp:image -->
 
 <!-- wp:columns -->
@@ -34,7 +74,8 @@
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:paragraph {"customTextColor":"#66717e","fontSize":"large"} -->
-		<p style="color:#66717e" class="has-text-color has-large-font-size">With full-site editing you can modify all visual aspects of the site using the block editor.</p>
+		<p style="color:#66717e" class="has-text-color has-large-font-size">With full-site editing you can modify all
+			visual aspects of the site using the block editor.</p>
 		<!-- /wp:paragraph -->
 	</div>
 	<!-- /wp:column -->
@@ -47,19 +88,19 @@
 
 <!-- wp:group -->
 <div class="wp-block-group">
-  <div class="wp-block-group__inner-container">
-    <!-- wp:post-title /-->
-    <!-- wp:post-content /-->
-  </div>
+	<div class="wp-block-group__inner-container">
+		<!-- wp:post-title /-->
+		<!-- wp:post-content /-->
+	</div>
 </div>
 <!-- /wp:group -->
 
 <!-- wp:group -->
 <div class="wp-block-group">
-  <div class="wp-block-group__inner-container">
-    <!-- wp:heading -->
-    <h2>Footer</h2>
-    <!-- /wp:heading -->
-  </div>
+	<div class="wp-block-group__inner-container">
+		<!-- wp:heading -->
+		<h2>Footer</h2>
+		<!-- /wp:heading -->
+	</div>
 </div>
 <!-- /wp:group -->

package.json

@@ -47,6 +47,7 @@
 		"@wordpress/format-library": "file:packages/format-library",
 		"@wordpress/hooks": "file:packages/hooks",
 		"@wordpress/html-entities": "file:packages/html-entities",
+		"@wordpress/global-styles": "file:packages/global-styles",
 		"@wordpress/i18n": "file:packages/i18n",
 		"@wordpress/icons": "file:packages/icons",
 		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",

packages/block-editor/README.md

@@ -297,6 +297,10 @@ _Returns_
 
 -   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
 
+<a name="ifBlockEditSelected" href="#ifBlockEditSelected">#</a> **ifBlockEditSelected**
+
+Undocumented declaration.
+
 <a name="InnerBlocks" href="#InnerBlocks">#</a> **InnerBlocks**
 
 _Related_

packages/block-editor/src/components/block-edit/index.js

@@ -12,7 +12,11 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import Edit from './edit';
-import { BlockEditContextProvider, useBlockEditContext } from './context';
+import {
+	BlockEditContextProvider,
+	useBlockEditContext,
+	ifBlockEditSelected,
+} from './context';
 
 class BlockEdit extends Component {
 	constructor() {
@@ -67,4 +71,4 @@ class BlockEdit extends Component {
 }
 
 export default BlockEdit;
-export { useBlockEditContext };
+export { useBlockEditContext, ifBlockEditSelected };

packages/block-editor/src/components/index.js

@@ -10,7 +10,11 @@ export { default as Autocomplete } from './autocomplete';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { default as BlockControls } from './block-controls';
-export { default as BlockEdit, useBlockEditContext } from './block-edit';
+export {
+	default as BlockEdit,
+	useBlockEditContext,
+	ifBlockEditSelected,
+} from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';

packages/block-library/package.json

@@ -41,6 +41,7 @@
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/escape-html": "file:../escape-html",
+		"@wordpress/global-styles": "file:../global-styles",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",

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

@@ -12,7 +12,7 @@ import HeadingToolbar from './heading-toolbar';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
+import { PanelBody, RangeControl } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
 import {
 	AlignmentToolbar,
@@ -23,6 +23,12 @@ import {
 } from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
 
+import {
+	GlobalStylesControls,
+	GlobalStylesPanelBody,
+	useGlobalStylesState,
+} from '@wordpress/global-styles';
+
 function HeadingEdit( {
 	attributes,
 	setAttributes,
@@ -31,6 +37,7 @@ function HeadingEdit( {
 	className,
 } ) {
 	const ref = useRef();
+	const { headingFontWeight, setStyles } = useGlobalStylesState();
 	const { TextColor, InspectorControlsColorPanel } = __experimentalUseColors(
 		[ { name: 'textColor', property: 'color' } ],
 		{
@@ -61,6 +68,20 @@ function HeadingEdit( {
 					} }
 				/>
 			</BlockControls>
+			<GlobalStylesControls>
+				<GlobalStylesPanelBody title={ __( 'Heading' ) }>
+					<RangeControl
+						label={ __( 'Font Weight' ) }
+						value={ headingFontWeight }
+						onChange={ ( nextValue ) =>
+							setStyles( { headingFontWeight: nextValue } )
+						}
+						min={ 100 }
+						max={ 900 }
+						step={ 100 }
+					/>
+				</GlobalStylesPanelBody>
+			</GlobalStylesControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Heading settings' ) }>
 					<p>{ __( 'Level' ) }</p>

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

@@ -0,0 +1,31 @@
+.wp-gs {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		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);
+}
+.wp-gs h2 {
+	font-size: var(--wp-typography--fontSizeH2);
+}
+.wp-gs h3 {
+	font-size: var(--wp-typography--fontSizeH3);
+}
+.wp-gs h4 {
+	font-size: var(--wp-typography--fontSizeH4);
+}
+.wp-gs h5 {
+	font-size: var(--wp-typography--fontSizeH5);
+}
+.wp-gs h6 {
+	font-size: var(--wp-typography--fontSizeH6);
+}

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

@@ -7,7 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components';
+import {
+	ColorControl,
+	PanelBody,
+	RangeControl,
+	ToggleControl,
+	ToolbarGroup,
+} from '@wordpress/components';
 import {
 	AlignmentToolbar,
 	BlockControls,
@@ -22,6 +28,12 @@ import { compose } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState, useRef } from '@wordpress/element';
 
+import {
+	GlobalStylesControls,
+	GlobalStylesPanelBody,
+	useGlobalStylesState,
+} from '@wordpress/global-styles';
+
 /**
  * Browser dependencies
  */
@@ -81,6 +93,11 @@ function ParagraphBlock( {
 	setFontSize,
 } ) {
 	const { align, content, dropCap, placeholder, direction } = attributes;
+	const {
+		paragraphColor,
+		paragraphLineHeight,
+		setStyles,
+	} = useGlobalStylesState();
 
 	const ref = useRef();
 	const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [
@@ -124,6 +141,27 @@ function ParagraphBlock( {
 					}
 				/>
 			</BlockControls>
+			<GlobalStylesControls>
+				<GlobalStylesPanelBody title={ __( 'Paragraph' ) }>
+					<ColorControl
+						label={ __( 'Color' ) }
+						value={ paragraphColor }
+						onChange={ ( nextValue ) =>
+							setStyles( { paragraphColor: nextValue } )
+						}
+					/>
+					<RangeControl
+						label={ __( 'Line Height' ) }
+						value={ paragraphLineHeight }
+						min={ 1 }
+						max={ 2 }
+						step={ 0.1 }
+						onChange={ ( value ) =>
+							setStyles( { paragraphLineHeight: value } )
+						}
+					/>
+				</GlobalStylesPanelBody>
+			</GlobalStylesControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Text settings' ) }>
 					<FontSizePicker

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

@@ -35,3 +35,11 @@ p.has-background {
 p.has-text-color a {
 	color: inherit;
 }
+
+.wp-gs p {
+	color: var(--wp-paragraph--color, var(--wp-color--text));
+	font-size: var(--wp-typography--fontSize);
+	font-weight: var(--wp-typography--fontWeight);
+	line-height: var(--wp-paragraph--lineHeight, var(--wp-typography--lineHeight));
+
+}