Iterate on Global Styles for site-edit

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

@@ -10,20 +10,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 -->
@@ -35,8 +35,7 @@
 	<!-- 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 -->
@@ -49,19 +48,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 -->

lib/global-styles.php

@@ -90,11 +90,11 @@ function gutenberg_experimental_global_styles_get_user() {
  *
  * @param array $post_status_filter Filter CPT by post status.
  *                                  By default, only fetches published posts.
- * @param bool  $should_create_draft Whether a new draft should be created
- *                                   if no CPT was found. False by default.
+ * @param bool  $should_create_cpt Whether a new draft should be created
+ *                                 if no CPT was found. False by default.
  * @return array Custom Post Type for the user's Global Styles.
  */
-function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_draft = false ) {
+function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_cpt = false ) {
 	$user_cpt         = array();
 	$post_type_filter = 'wp_global_styles';
 	$post_name_filter = 'wp-global-styles-' . strtolower( wp_get_theme()->get( 'TextDomain' ) );
@@ -111,11 +111,11 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter
 
 	if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) {
 		$user_cpt = $recent_posts[0];
-	} elseif ( $should_create_draft ) {
+	} elseif ( $should_create_cpt ) {
 		$cpt_post_id = wp_insert_post(
 			array(
 				'post_content' => '{}',
-				'post_status'  => 'draft',
+				'post_status'  => 'publish',
 				'post_type'    => $post_type_filter,
 				'post_name'    => $post_name_filter,
 			),
@@ -148,7 +148,7 @@ function gutenberg_experimental_global_styles_get_user_cpt_id() {
  */
 function gutenberg_experimental_global_styles_get_core() {
 	return gutenberg_experimental_global_styles_get_from_file(
-		dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json'
+		dirname( __FILE__ ) . '/global-styles/experimental-default-global-styles.json'
 	);
 }
 
@@ -164,15 +164,21 @@ function gutenberg_experimental_global_styles_get_theme() {
 }
 
 /**
- * Takes a Global Styles tree and returns a CSS rule
+ * Takes core, theme, and user preferences,
+ * builds a single global styles tree and returns a CSS rule
  * that contains the corresponding CSS custom properties.
  *
- * @param array $global_styles Global Styles tree.
  * @return string CSS rule.
  */
-function gutenberg_experimental_global_styles_resolver( $global_styles ) {
+function gutenberg_experimental_global_styles_resolver() {
 	$css_rule = '';
 
+	$global_styles = array_replace_recursive(
+		gutenberg_experimental_global_styles_get_core(),
+		gutenberg_experimental_global_styles_get_theme(),
+		gutenberg_experimental_global_styles_get_user()
+	);
+
 	$token    = '--';
 	$prefix   = '--wp' . $token;
 	$css_vars = gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix, $token );
@@ -208,13 +214,7 @@ function gutenberg_experimental_global_styles_enqueue_assets() {
 		return;
 	}
 
-	$global_styles = array_merge(
-		gutenberg_experimental_global_styles_get_core(),
-		gutenberg_experimental_global_styles_get_theme(),
-		gutenberg_experimental_global_styles_get_user()
-	);
-
-	$inline_style = gutenberg_experimental_global_styles_resolver( $global_styles );
+	$inline_style = gutenberg_experimental_global_styles_resolver();
 	if ( empty( $inline_style ) ) {
 		return;
 	}
@@ -224,37 +224,6 @@ function gutenberg_experimental_global_styles_enqueue_assets() {
 	wp_enqueue_style( 'global-styles' );
 }
 
-/**
- * Adds class wp-gs to the frontend body class.
- *
- * @param array $classes Existing body classes.
- * @return array The filtered array of body classes.
- */
-function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) {
-	if ( ! gutenberg_experimental_global_styles_has_theme_support() ) {
-		return $classes;
-	}
-
-	return array_merge( $classes, array( 'wp-gs' ) );
-}
-
-/**
- * Adds class wp-gs to the block-editor body class.
- *
- * @param string $classes Existing body classes separated by space.
- * @return string The filtered string of body classes.
- */
-function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) {
-	if (
-		! gutenberg_experimental_global_styles_has_theme_support() ||
-		! gutenberg_experimental_global_styles_is_site_editor()
-	) {
-		return $classes;
-	}
-
-	return $classes . ' wp-gs';
-}
-
 /**
  * Whether the loaded page is the site editor.
  *
@@ -332,8 +301,6 @@ function gutenberg_experimental_global_styles_register_cpt() {
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) ) {
 	add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' );
-	add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' );
-	add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' );
 	add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' );
 	// enqueue_block_assets is not fired in edit-site, so we use separate back/front hooks instead.
 	add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );

lib/global-styles/experimental-default-global-styles.json

@@ -0,0 +1,14 @@
+{
+	"color": {
+		"background": "white",
+		"text": "black"
+	},
+	"typography": {
+		"font-base": 16,
+		"font-scale": 1.2,
+		"font-weight-base": 400,
+		"font-weight-heading": 400,
+		"line-height-base": 1.5,
+		"line-height-heading": 1.5
+	}
+}

package.json

@@ -46,9 +46,9 @@
 		"@wordpress/element": "file:packages/element",
 		"@wordpress/escape-html": "file:packages/escape-html",
 		"@wordpress/format-library": "file:packages/format-library",
+		"@wordpress/global-styles": "file:packages/global-styles",
 		"@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/interface": "file:packages/interface",

packages/block-editor/README.md

@@ -304,10 +304,6 @@ _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,11 +12,7 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import Edit from './edit';
-import {
-	BlockEditContextProvider,
-	useBlockEditContext,
-	ifBlockEditSelected,
-} from './context';
+import { BlockEditContextProvider, useBlockEditContext } from './context';
 
 class BlockEdit extends Component {
 	constructor() {
@@ -71,4 +67,4 @@ class BlockEdit extends Component {
 }
 
 export default BlockEdit;
-export { useBlockEditContext, ifBlockEditSelected };
+export { useBlockEditContext };

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

@@ -10,11 +10,7 @@ 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,
-	ifBlockEditSelected,
-} from './block-edit';
+export { default as BlockEdit, useBlockEditContext } 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,7 +41,6 @@
 		"@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/button/style.scss

@@ -36,10 +36,6 @@ $blocks-button__height: 56px;
 	}
 }
 
-.wp-gs .wp-block-button__link:not(.has-background) {
-	background-color: var(--wp--color--primary);
-}
-
 .is-style-squared .wp-block-button__link {
 	border-radius: 0;
 }

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

@@ -12,11 +12,7 @@ import HeadingToolbar from './heading-toolbar';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	PanelBody,
-	__experimentalText,
-	RangeControl as Text,
-} from '@wordpress/components';
+import { PanelBody, __experimentalText as Text } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
 import {
 	AlignmentToolbar,
@@ -26,14 +22,8 @@ import {
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 import { Platform } from '@wordpress/element';
-import {
-	GlobalStylesControls,
-	GlobalStylesPanelBody,
-	useGlobalStylesState,
-} from '@wordpress/global-styles';
 
 function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
-	const { headingFontWeight, setStyles } = useGlobalStylesState();
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
 
@@ -56,38 +46,20 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
 				/>
 			</BlockControls>
 			{ Platform.OS === 'web' && (
-				<>
-					<GlobalStylesControls>
-						<GlobalStylesPanelBody title={ __( 'Heading' ) }>
-							<Text
-								label={ __( 'Font Weight' ) }
-								value={ headingFontWeight }
-								onChange={ ( nextValue ) =>
-									setStyles( {
-										headingFontWeight: nextValue,
-									} )
-								}
-								min={ 100 }
-								max={ 900 }
-								step={ 100 }
-							/>
-						</GlobalStylesPanelBody>
-					</GlobalStylesControls>
-					<InspectorControls>
-						<PanelBody title={ __( 'Heading settings' ) }>
-							<Text variant="label">{ __( 'Level' ) }</Text>
-							<HeadingToolbar
-								isCollapsed={ false }
-								minLevel={ 1 }
-								maxLevel={ 7 }
-								selectedLevel={ level }
-								onChange={ ( newLevel ) =>
-									setAttributes( { level: newLevel } )
-								}
-							/>
-						</PanelBody>
-					</InspectorControls>
-				</>
+				<InspectorControls>
+					<PanelBody title={ __( 'Heading settings' ) }>
+						<Text variant="label">{ __( 'Level' ) }</Text>
+						<HeadingToolbar
+							isCollapsed={ false }
+							minLevel={ 1 }
+							maxLevel={ 7 }
+							selectedLevel={ level }
+							onChange={ ( newLevel ) =>
+								setAttributes( { level: newLevel } )
+							}
+						/>
+					</PanelBody>
+				</InspectorControls>
 			) }
 			<RichText
 				identifier="content"