Add color/font support

packages/block-library/src/home-link/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -14,8 +19,12 @@ import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
 
 const preventDefault = ( event ) => event.preventDefault();
 
-export default function HomeEdit( { attributes, setAttributes, clientId } ) {
-	const blockProps = useBlockProps();
+export default function HomeEdit( {
+	attributes,
+	setAttributes,
+	context,
+	clientId,
+} ) {
 	const { homeUrl } = useSelect(
 		( select ) => {
 			const {
@@ -28,6 +37,20 @@ export default function HomeEdit( { attributes, setAttributes, clientId } ) {
 		[ clientId ]
 	);
 
+	const { textColor, backgroundColor, style } = context;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			'has-text-color': !! textColor || !! style?.color?.text,
+			[ `has-${ textColor }-color` ]: !! textColor,
+			'has-background': !! backgroundColor || !! style?.color?.background,
+			[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
+		} ),
+		style: {
+			color: style?.color?.text,
+			backgroundColor: style?.color?.background,
+		},
+	} );
+
 	const { label, opensInNewTab, rel, title } = attributes;
 
 	useEffect( () => {

packages/block-library/src/home-link/index.php

@@ -1,25 +1,137 @@
 <?php
+/**
+ * Server-side rendering of the `core/home-link` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Build an array with CSS classes and inline styles defining the colors
+ * which will be applied to the home link markup in the front-end.
+ *
+ * @param  array $context home link block context.
+ * @return array Colors CSS classes and inline styles.
+ */
+function block_core_home_link_build_css_colors( $context ) {
+	$colors = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	// Text color.
+	$has_named_text_color  = array_key_exists( 'textColor', $context );
+	$has_custom_text_color = isset( $context['style']['color']['text'] );
+
+	// If has text color.
+	if ( $has_custom_text_color || $has_named_text_color ) {
+		// Add has-text-color class.
+		$colors['css_classes'][] = 'has-text-color';
+	}
+
+	if ( $has_named_text_color ) {
+		// Add the color class.
+		$colors['css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] );
+	} elseif ( $has_custom_text_color ) {
+		// Add the custom color inline style.
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] );
+	}
+
+	// Background color.
+	$has_named_background_color  = array_key_exists( 'backgroundColor', $context );
+	$has_custom_background_color = isset( $context['style']['color']['background'] );
+
+	// If has background color.
+	if ( $has_custom_background_color || $has_named_background_color ) {
+		// Add has-background class.
+		$colors['css_classes'][] = 'has-background';
+	}
+
+	if ( $has_named_background_color ) {
+		// Add the background-color class.
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] );
+	} elseif ( $has_custom_background_color ) {
+		// Add the custom background-color inline style.
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] );
+	}
+
+	return $colors;
+}
+
+/**
+ * Build an array with CSS classes and inline styles defining the font sizes
+ * which will be applied to the home link markup in the front-end.
+ *
+ * @param  array $context Home link block context.
+ * @return array Font size CSS classes and inline styles.
+ */
+function block_core_home_link_build_css_font_sizes( $context ) {
+	// CSS classes.
+	$font_sizes = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	$has_named_font_size  = array_key_exists( 'fontSize', $context );
+	$has_custom_font_size = isset( $context['style']['typography']['fontSize'] );
+
+	if ( $has_named_font_size ) {
+		// Add the font size class.
+		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
+	} elseif ( $has_custom_font_size ) {
+		// Add the custom font size inline style.
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+	}
+
+	return $font_sizes;
+}
+
+/**
+ * Builds an array with classes and style for the li wrapper
+ *
+ * @param  array $context    Home link block context.
+ * @param  array $attributes Home link block attributes.
+ * @return array The li wrapper attributes.
+ */
+function block_core_home_link_build_li_wrapper_attributes( $context, $attributes ) {
+	$colors          = block_core_home_link_build_css_colors( $context );
+	$font_sizes      = block_core_home_link_build_css_font_sizes( $context );
+	$classes         = array_merge(
+		$colors['css_classes'],
+		$font_sizes['css_classes']
+	);
+	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$css_classes     = trim( implode( ' ', $classes ) );
+	$class_name      = ! empty( $attributes['className'] ) ? implode( ' ', (array) $attributes['className'] ) : false;
+	if ( false !== $class_name ) {
+		$css_classes .= ' ' . $class_name;
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'class' => $css_classes,
+			'style' => $style_attribute,
+		)
+	);
+	return $wrapper_attributes;
+}
 
 /**
  * Renders the `core/home-link` block.
  *
  * @param array $attributes The block attributes.
+ * @param array $content    The saved content.
+ * @param array $block      The parsed block.
  *
  * @return string Returns the post content with the home url added.
  */
-function render_block_core_home( $attributes ) {
+function render_block_core_home( $attributes, $content, $block ) {
 	if ( empty( $attributes['label'] ) ) {
 		return '';
 	}
 
-	$classnames = array();
-	if ( ! empty( $attributes['className'] ) ) {
-		$classnames[] = $attributes['className'];
-	}
-
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classnames ) ) );
+	$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context, $attributes );
 
-	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home__content"';
+	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content"';
 
 	// Start appending HTML attributes to anchor tag.
 	$html .= ' href="' . esc_url( home_url() ) . '"';

packages/block-library/src/home-link/style.scss

@@ -1,4 +1,12 @@
 .wp-block-navigation {
+
+	.wp-block-home-link__content {
+		// Inherit colors set by the block color definition.
+		color: inherit;
+		display: block;
+		padding: 0.5em 1em;
+	}
+
 	// Force links to inherit text decoration applied to navigation block.
 	// The extra selector adds specificity to ensure it works when user-set.
 	&[style*="text-decoration"] {
@@ -17,7 +25,6 @@
 	}
 
 	&:not([style*="text-decoration"]) {
-		.wp-block-home-link,
 		.wp-block-home-link__content {
 			text-decoration: none;
 
@@ -28,3 +35,18 @@
 		}
 	}
 }
+
+// Default background and font color.
+.wp-block-navigation:not(.has-background) {
+	.wp-block-navigation__container .wp-block-home-link__container {
+		// Set a background color for submenus so that they're not transparent.
+		background-color: #fff;
+		color: #000;
+		border: 1px solid rgba(0, 0, 0, 0.15);
+
+		.wp-block-home-link__container {
+			top: -1px;
+		}
+	}
+}
+

packages/e2e-tests/fixtures/blocks/core__home-link.html

@@ -0,0 +1 @@
+<!-- wp:home-link {"label":"Home","opensInNewTab":true,"rel":"nofollow","title":"title"} /-->

packages/e2e-tests/fixtures/blocks/core__home-link.json

@@ -0,0 +1,15 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/home-link",
+		"isValid": true,
+		"attributes": {
+			"label": "Home",
+			"opensInNewTab": true,
+			"rel": "nofollow",
+			"title": "title"
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]

packages/e2e-tests/fixtures/blocks/core__home-link.parsed.json

@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/home-link",
+		"attrs": {
+			"label": "Home",
+			"opensInNewTab": true,
+			"rel": "nofollow",
+			"title": "title"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

packages/e2e-tests/fixtures/blocks/core__home-link.serialized.html

@@ -0,0 +1 @@
+<!-- wp:home-link {"label":"Home","opensInNewTab":true,"rel":"nofollow","title":"title"} /-->