Calendar Block: Add color supports and polish styles (#42029)

* Calender Block: Add color supports and polish styles * Add background-color support, add color and style dynamic rendering, remove text-decoration * Fix php lint error * Remove unnecessary border styles * Lower specificity of background color for backward compatibility * Enable color support by global style * Use style-engine for inline CSS * USe style-engine for class names * Style engine covers more, improv backward compatibility * Add more backward compatibility * Fix php lint error * Fix: global style text color isn't applied to td * Fix: global style text color isn't applied to caption * Fix regressions
WordPress · Sep 20, 2022 · dc57581 · dc57581
1 parent c9b1d88
commit dc57581
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 17 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -68,7 +68,7 @@ A calendar of your site’s posts. ([Source](https://github.com/WordPress/gutenb
 
 -	**Name:** core/calendar
 -	**Category:** widgets
--	**Supports:** align, typography (fontSize, lineHeight)
+-	**Supports:** align, color (background, link, text), typography (fontSize, lineHeight)
 -	**Attributes:** month, year
 
 ## Categories List

diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json
@@ -17,6 +17,15 @@
 	},
 	"supports": {
 		"align": true,
+		"color": {
+			"link": true,
+			"__experimentalSkipSerialization": [ "text", "background" ],
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			},
+			"__experimentalSelector": "table, th"
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php
@@ -40,11 +40,32 @@ function render_block_core_calendar( $attributes ) {
 		}
 	}
 
+	$color_block_styles = array();
+
+	// Text color.
+	$preset_text_color          = array_key_exists( 'textColor', $attributes ) ? "var:preset|color|{$attributes['textColor']}" : null;
+	$custom_text_color          = _wp_array_get( $attributes, array( 'style', 'color', 'text' ), null );
+	$color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
+
+	// Background Color.
+	$preset_background_color          = array_key_exists( 'backgroundColor', $attributes ) ? "var:preset|color|{$attributes['backgroundColor']}" : null;
+	$custom_background_color          = _wp_array_get( $attributes, array( 'style', 'color', 'background' ), null );
+	$color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
+
+	// Generate color styles and classes.
+	$styles        = gutenberg_style_engine_get_styles( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );
+	$inline_styles = empty( $styles['css'] ) ? '' : sprintf( ' style="%s"', esc_attr( $styles['css'] ) );
+	$classnames    = empty( $styles['classnames'] ) ? '' : ' ' . esc_attr( $styles['classnames'] );
+
+	// Apply color classes and styles to the calendar.
+	$calendar = str_replace( '<table', '<table' . $inline_styles, get_calendar( true, false ) );
+	$calendar = str_replace( 'class="wp-calendar-table', 'class="wp-calendar-table' . $classnames, $calendar );
+
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$output             = sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
-		get_calendar( true, false )
+		$calendar
 	);
 
 	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited

diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
@@ -2,31 +2,44 @@
 	text-align: center;
 
 	th,
-	tbody td {
+	td {
 		padding: 0.25em;
-		border: 1px solid $gray-300;
+		border: 1px solid;
 	}
 
-	tfoot td {
-		border: none;
+	th {
+		font-weight: 400;
+	}
+
+	caption {
+		background-color: inherit;
 	}
 
 	table {
 		width: 100%;
 		border-collapse: collapse;
-	}
 
-	table th {
-		font-weight: 400;
-		background: $gray-300;
-	}
+		&:where(:not(.has-text-color)) {
+			color: #40464d;
 
-	a {
-		text-decoration: underline;
-	}
+			// Keep the hard-coded border color for backward compatibility.
+			th,
+			td {
+				border-color: $gray-300;
+			}
+		}
+
+		&.has-background th {
+			background-color: inherit;
+		}
 
-	table tbody,
-	table caption {
-		color: #40464d;
+		&.has-text-color th {
+			color: inherit;
+		}
 	}
 }
+
+// Keep the hard-coded header background color for backward compatibility.
+:where(.wp-block-calendar table:not(.has-background) th) {
+	background: $gray-300;
+}