From 096a1000202b15699d08c7c6b2789f3fe9ea7052 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 17 Aug 2022 14:21:26 +1000
Subject: [PATCH] Add color block supports to the calendar block

---
 docs/reference-guides/core-blocks.md           |  2 +-
 packages/block-library/src/calendar/block.json | 14 +++++++++++++-
 packages/block-library/src/calendar/style.scss | 11 ++++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 9993087ba7d99..f3fcb26399b89 100644
--- 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
+-	**Supports:** align, color (background, gradients, link, text)
 -	**Attributes:** month, year
 
 ## Categories List
diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json
index 6f498ed585cd0..3f687da61310a 100644
--- a/packages/block-library/src/calendar/block.json
+++ b/packages/block-library/src/calendar/block.json
@@ -16,7 +16,19 @@
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"color": {
+			"text": true,
+			"background": true,
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"text": false,
+				"background": true,
+				"gradients": false,
+				"link": false
+			}
+		}
 	},
 	"style": "wp-block-calendar"
 }
diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
index 39df1e572d5b1..9cb93146d4c0c 100644
--- a/packages/block-library/src/calendar/style.scss
+++ b/packages/block-library/src/calendar/style.scss
@@ -18,6 +18,9 @@
 
 	table th {
 		font-weight: 400;
+	}
+
+	&:not(.has-background) th {
 		background: $gray-300;
 	}
 
@@ -25,8 +28,10 @@
 		text-decoration: underline;
 	}
 
-	table tbody,
-	table caption {
-		color: #40464d;
+	&:not(.has-text-color) {
+		tbody,
+		caption {
+			color: #40464d;
+		}
 	}
 }