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

…23007)

Adds block level support for colors, fonts, and line height to the Site Title block.

Adds server side block style support via a function on the `render_block` filter to apply styles set for all blocks supporting `__experimentalColor`, `__experimentalFontSize`, and `__experimentalLineHeight`.

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

@@ -218,3 +218,189 @@ function gutenberg_register_legacy_social_link_blocks() {
 	}
 }
 add_action( 'init', 'gutenberg_register_legacy_social_link_blocks' );
+
+/**
+ * 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;
+	}
+
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	// If no render_callback, assume styles have been previously handled.
+	if ( ! $block_type || ! $block_type->render_callback ) {
+		return $block_content;
+	}
+	// Check what style features the block supports.
+	$supports = gutenberg_experimental_global_styles_get_supported_styles( $block_type->supports );
+
+	$attributes = array();
+	$attributes = gutenberg_experimental_build_css_colors( $attributes, $block['attrs'], $supports );
+	$attributes = gutenberg_experimental_build_css_typography( $attributes, $block['attrs'], $supports );
+
+	if ( ! count( $attributes ) ) {
+		return $block_content;
+	}
+
+	$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.
+	$classes_to_add = esc_attr( implode( ' ', array_key_exists( 'css_classes', $attributes ) ? $attributes['css_classes'] : array() ) );
+	$styles_to_add  = esc_attr( implode( ' ', array_key_exists( 'inline_styles', $attributes ) ? $attributes['inline_styles'] : array() ) );
+	$new_classes    = implode( ' ', array_unique( explode( ' ', ltrim( $block_root->getAttribute( 'class' ) . ' ' ) . $classes_to_add ) ) );
+	$new_styles     = implode( ' ', array_unique( explode( ' ', $current_styles . ' ' . $styles_to_add ) ) );
+
+	// 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 comprehensive list of attributes to be applied.
+ * @param  array $block_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, $block_attributes, $supports ) {
+	// Text Colors.
+	// Check support for text colors.
+	if ( in_array( 'color', $supports, true ) ) {
+		$has_named_text_color  = array_key_exists( 'textColor', $block_attributes );
+		$has_custom_text_color = isset( $block_attributes['style']['color']['text'] );
+
+		// Apply required generic class.
+		if ( $has_custom_text_color || $has_named_text_color ) {
+			$attributes['css_classes'][] = 'has-text-color';
+		}
+		// Apply color class or inline style.
+		if ( $has_named_text_color ) {
+			$attributes['css_classes'][] = sprintf( 'has-%s-color', $block_attributes['textColor'] );
+		} elseif ( $has_custom_text_color ) {
+			$attributes['inline_styles'][] = sprintf( 'color: %s;', $block_attributes['style']['color']['text'] );
+		}
+	}
+
+	// Link Colors.
+	if ( in_array( 'link-color', $supports, true ) ) {
+		$has_link_color = isset( $block_attributes['style']['color']['link'] );
+		// Apply required class and style.
+		if ( $has_link_color ) {
+			$attributes['css_classes'][] = 'has-link-color';
+			// If link is a named color.
+			if ( strpos( $block_attributes['style']['color']['link'], 'var:preset|color|' ) !== false ) {
+				// Get the name from the string and add proper styles.
+				$index_to_splice               = strrpos( $block_attributes['style']['color']['link'], '|' ) + 1;
+				$link_color_name               = substr( $block_attributes['style']['color']['link'], $index_to_splice );
+				$attributes['inline_styles'][] = sprintf( '--wp--style--color--link:var(--wp--preset--color--%s);', $link_color_name );
+			} else {
+				$attributes['inline_styles'][] = sprintf( '--wp--style--color--link: %s;', $block_attributes['style']['color']['link'] );
+			}
+		}
+	}
+
+	// Background Colors.
+	if ( in_array( 'background-color', $supports, true ) ) {
+		$has_named_background_color  = array_key_exists( 'backgroundColor', $block_attributes );
+		$has_custom_background_color = isset( $block_attributes['style']['color']['background'] );
+
+		// Apply required background class.
+		if ( $has_custom_background_color || $has_named_background_color ) {
+			$attributes['css_classes'][] = 'has-background';
+		}
+		// Apply background color classes or styles.
+		if ( $has_named_background_color ) {
+			$attributes['css_classes'][] = sprintf( 'has-%s-background-color', $block_attributes['backgroundColor'] );
+		} elseif ( $has_custom_background_color ) {
+			$attributes['inline_styles'][] = sprintf( 'background-color: %s;', $block_attributes['style']['color']['background'] );
+		}
+	}
+
+	// Gradients.
+	if ( in_array( 'background', $supports, true ) ) {
+		$has_named_gradient  = array_key_exists( 'gradient', $block_attributes );
+		$has_custom_gradient = isset( $block_attributes['style']['color']['gradient'] );
+
+		if ( $has_named_gradient || $has_custom_gradient ) {
+			$attributes['css_classes'][] = 'has-background';
+		}
+		// Apply required background class.
+		if ( $has_named_gradient ) {
+			$attributes['css_classes'][] = sprintf( 'has-%s-gradient-background', $block_attributes['gradient'] );
+		} elseif ( $has_custom_gradient ) {
+			$attributes['inline_styles'][] = sprintf( 'background: %s;', $block_attributes['style']['color']['gradient'] );
+		}
+	}
+
+	return $attributes;
+}
+
+/**
+ * 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 comprehensive list of attributes to be applied.
+ * @param  array $block_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, $block_attributes, $supports ) {
+	// Font Size.
+	if ( in_array( 'font-size', $supports, true ) ) {
+		$has_named_font_size  = array_key_exists( 'fontSize', $block_attributes );
+		$has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
+
+		// Apply required class or style.
+		if ( $has_named_font_size ) {
+			$attributes['css_classes'][] = sprintf( 'has-%s-font-size', $block_attributes['fontSize'] );
+		} elseif ( $has_custom_font_size ) {
+			$attributes['inline_styles'][] = sprintf( 'font-size: %spx;', $block_attributes['style']['typography']['fontSize'] );
+		}
+	}
+
+	// Line Height.
+	if ( in_array( 'line-height', $supports, true ) ) {
+		$has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] );
+		// Add the style (no classes for line-height).
+		if ( $has_line_height ) {
+			$attributes['inline_styles'][] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
+		}
+	}
+
+	return $attributes;
+}

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] );
 	}
-
 }