Site Title: Add support settings for colors, fonts, and line height

docs/designers-developers/developers/themes/theme-json.md

@@ -167,6 +167,7 @@ Each block will declare which style properties it exposes. This has been coined
 | Group | Yes | Yes | Yes | Yes |
 | Columns | Yes | Yes | Yes | Yes |
 | Media & text | Yes | Yes | Yes | Yes |
+| Site Title | Yes | Yes | - | Yes |
 
 [1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc).
 
@@ -180,6 +181,7 @@ Each block will declare which style properties it exposes. This has been coined
 | Group | - | - |
 | Columns | - | - |
 | Media & text | - | - |
+| Site Title | Yes | Yes |
 
 [1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc).
 
@@ -379,6 +381,19 @@ The list of features that are currently supported are:
           "text": <value>
         }
       }
+  },
+  "core/site-title": {
+    "styles": {
+      "color": {
+        "background": <value>,
+        "gradient": <value>,
+        "text": <value>
+      },
+      "typography": {
+        "fontSize": <value>,
+        "lineHeight": <value>
+      }
+    }
   }
 }
 ```

lib/blocks.php

@@ -296,3 +296,209 @@ function gutenberg_enqueue_editor_block_styles_assets() {
 	}
 	add_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_editor_block_styles_assets' );
 }
+
+/**
+ * Renders the classNames and styles for blocks
+ *
+ * @param string $block_content Output of the current block.
+ * @param array  $block Block Object.
+ * @return string New block output.
+ */
+function gutenberg_experimental_apply_classnames_and_styles( $block_content, $block ) {
+	if ( ! isset( $block['attrs'] ) ) {
+		return $block_content;
+	}
+
+	// Check what style features the block supports.
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	if ( ! $block_type ) {
+		return $block_content;
+	}
+
+	$supports = gutenberg_experimental_global_styles_get_supported_styles( $block_type->supports );
+
+	// Return early if nothing is supported.
+	if ( 0 === count( $supports ) ) {
+		return $block_content;
+	}
+
+	$colors     = gutenberg_experimental_build_css_colors( $block['attrs'], $supports );
+	$typography = gutenberg_experimental_build_css_typography( $block['attrs'], $supports );
+
+	$extra_classes = array_merge(
+		$colors['css_classes'],
+		$typography['css_classes'],
+		isset( $block['attrs']['className'] ) ? array( $block['attrs']['className'] ) : array(),
+		isset( $block['attrs']['align'] ) ? array( 'has-text-align-' . $block['attrs']['align'] ) : array()
+	);
+	$extra_styles  = (
+		$colors['inline_styles'] ||
+		$typography['inline_styles']
+	) ? esc_attr( $colors['inline_styles'] ) .
+		esc_attr( $typography['inline_styles'] )
+	: '';
+
+	$dom = new DOMDocument( '1.0', 'utf-8' );
+
+	// Suppress warnings from this method from polluting the front-end.
+	// @codingStandardsIgnoreStart
+	if ( ! @$dom->loadHTML( $block_content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD | LIBXML_COMPACT ) ) {
+	// @codingStandardsIgnoreEnd
+		return $block_content;
+	}
+
+	$xpath      = new DOMXPath( $dom );
+	$block_root = $xpath->query( '/*' )[0];
+
+	if ( empty( $block_root ) ) {
+		return $block_content;
+	}
+
+	// Some inline styles may be added without ending ';', add this if necessary.
+	$current_styles = trim( $block_root->getAttribute( 'style' ), ' ' );
+	if ( strlen( $current_styles ) > 0 && substr( $current_styles, -1 ) !== ';' ) {
+		$current_styles = $current_styles . ';';
+	};
+
+	// Merge and dedupe new and existing classes and styles.
+	$new_classes = implode( ' ', array_unique( explode( ' ', ltrim( $block_root->getAttribute( 'class' ) . ' ' ) . implode( ' ', $extra_classes ) ) ) );
+	$new_styles  = implode( ' ', array_unique( explode( ' ', $current_styles . ' ' . $extra_styles ) ) );
+
+	// Apply new styles and classes.
+	if ( ! empty( $new_classes ) ) {
+		$block_root->setAttribute( 'class', $new_classes );
+	}
+
+	if ( ! empty( $new_styles ) ) {
+		$block_root->setAttribute( 'style', $new_styles );
+	}
+
+	return $dom->saveHtml();
+}
+add_filter( 'render_block', 'gutenberg_experimental_apply_classnames_and_styles', 10, 2 );
+
+/**
+ * Build an array with CSS classes and inline styles defining the colors
+ * which will be applied to the block markup in the front-end.
+ *
+ * @param  array $attributes block attributes.
+ * @param  array $supports style features the block attributes.
+ * @return array Colors CSS classes and inline styles.
+ */
+function gutenberg_experimental_build_css_colors( $attributes, $supports ) {
+	$color_settings = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	// Text Colors.
+	// Check support for text colors.
+	if ( in_array( 'color', $supports, true ) ) {
+		$has_named_text_color  = array_key_exists( 'textColor', $attributes );
+		$has_custom_text_color = isset( $attributes['style']['color']['text'] );
+
+		// Apply required generic class.
+		if ( $has_custom_text_color || $has_named_text_color ) {
+			$color_settings['css_classes'][] = 'has-text-color';
+		}
+		// Apply color class or inline style.
+		if ( $has_named_text_color ) {
+			$color_settings['css_classes'][] = sprintf( 'has-%s-color', $attributes['textColor'] );
+		} elseif ( $has_custom_text_color ) {
+			$color_settings['inline_styles'] .= sprintf( 'color: %s;', $attributes['style']['color']['text'] );
+		}
+	}
+
+	// Link Colors.
+	if ( in_array( 'link-color', $supports, true ) ) {
+		$has_link_color = isset( $attributes['style']['color']['link'] );
+		// Apply required class and style.
+		if ( $has_link_color ) {
+			$color_settings['css_classes'][] = 'has-link-color';
+			// If link is a named color.
+			if ( strpos( $attributes['style']['color']['link'], 'var:preset|color|' ) !== false ) {
+				// Get the name from the string and add proper styles.
+				$index_to_splice                  = strrpos( $attributes['style']['color']['link'], '|' ) + 1;
+				$link_color_name                  = substr( $attributes['style']['color']['link'], $index_to_splice );
+				$color_settings['inline_styles'] .= sprintf( '--wp--style--color--link:var(--wp--preset--color--%s);', $link_color_name );
+			} else {
+				$color_settings['inline_styles'] .= sprintf( '--wp--style--color--link: %s;', $attributes['style']['color']['link'] );
+			}
+		}
+	}
+
+	// Background Colors.
+	if ( in_array( 'background-color', $supports, true ) ) {
+		$has_named_background_color  = array_key_exists( 'backgroundColor', $attributes );
+		$has_custom_background_color = isset( $attributes['style']['color']['background'] );
+
+		// Apply required background class.
+		if ( $has_custom_background_color || $has_named_background_color ) {
+			$color_settings['css_classes'][] = 'has-background';
+		}
+		// Apply background color classes or styles.
+		if ( $has_named_background_color ) {
+			$color_settings['css_classes'][] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
+		} elseif ( $has_custom_background_color ) {
+			$color_settings['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['style']['color']['background'] );
+		}
+	}
+
+	// Gradients.
+	if ( in_array( 'background', $supports, true ) ) {
+		$has_named_gradient  = array_key_exists( 'gradient', $attributes );
+		$has_custom_gradient = isset( $attributes['style']['color']['gradient'] );
+
+		if ( $has_named_gradient || $has_custom_gradient ) {
+			$color_settings['css_classes'][] = 'has-background';
+		}
+		// Apply required background class.
+		if ( $has_named_gradient ) {
+			$color_settings['css_classes'][] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] );
+		} elseif ( $has_custom_gradient ) {
+			$color_settings['inline_styles'] .= sprintf( 'background: %s;', $attributes['style']['color']['gradient'] );
+		}
+	}
+
+	return $color_settings;
+}
+
+/**
+ * Build an array with CSS classes and inline styles defining the font sizes
+ * which will be applied to the block markup in the front-end.
+ *
+ * @param  array $attributes block attributes.
+ * @param  array $supports style features the block attributes.
+ * @return array Font size CSS classes and inline styles.
+ */
+function gutenberg_experimental_build_css_typography( $attributes, $supports ) {
+	// CSS classes.
+	$typography = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	// Font Size.
+	if ( in_array( 'font-size', $supports, true ) ) {
+		$has_named_font_size  = array_key_exists( 'fontSize', $attributes );
+		$has_custom_font_size = isset( $attributes['style']['typography']['fontSize'] );
+
+		// Apply required class or style.
+		if ( $has_named_font_size ) {
+			$typography['css_classes'][] = sprintf( 'has-%s-font-size', $attributes['fontSize'] );
+		} elseif ( $has_custom_font_size ) {
+			$typography['inline_styles'] .= sprintf( 'font-size: %spx;', $attributes['style']['typography']['fontSize'] );
+		}
+	}
+
+	// Line Height.
+	if ( in_array( 'line-height', $supports, true ) ) {
+		$has_line_height = isset( $attributes['style']['typography']['lineHeight'] );
+		// Add the style (no classes for line-height).
+		if ( $has_line_height ) {
+			$typography['inline_styles'] .= sprintf( 'line-height: %s;', $attributes['style']['typography']['lineHeight'] );
+		}
+	}
+
+	return $typography;
+}

lib/global-styles.php

@@ -273,6 +273,7 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports )
 		'color'            => array( '__experimentalColor' ),
 		'background-color' => array( '__experimentalColor' ),
 		'background'       => array( '__experimentalColor', 'gradients' ),
+		'link-color'       => array( '__experimentalColor', 'linkColor' ),
 		'line-height'      => array( '__experimentalLineHeight' ),
 		'font-size'        => array( '__experimentalFontSize' ),
 	);

packages/block-library/src/site-title/block.json

@@ -12,6 +12,11 @@
 	},
 	"supports": {
 		"html": false,
-		"lightBlockWrapper": true
+		"lightBlockWrapper": true,
+		"__experimentalColor": {
+			"gradients": true
+		},
+		"__experimentalFontSize": true,
+		"__experimentalLineHeight": true
 	}
 }

phpunit/class-block-context-test.php

@@ -196,5 +196,4 @@ function test_default_context_is_filterable() {
 
 		$this->assertEquals( array( 'example' => 'ok' ), $provided_context[0] );
 	}
-
 }