diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index dc706d04367813..739406f210c4fd 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, color (link, text, ~~background~~)
+- **Supports:** align, color (background, 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 8af2d65d614b27..052178947baa95 100644
--- a/packages/block-library/src/calendar/block.json
+++ b/packages/block-library/src/calendar/block.json
@@ -19,8 +19,9 @@
"align": true,
"color": {
"link": true,
- "background": false,
+ "__experimentalSkipSerialization": [ "text", "background" ],
"__experimentalDefaultControls": {
+ "background": true,
"text": true
}
}
diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php
index 8f6226e943480c..099311640bf8c4 100644
--- a/packages/block-library/src/calendar/index.php
+++ b/packages/block-library/src/calendar/index.php
@@ -40,11 +40,17 @@ function render_block_core_calendar( $attributes ) {
}
}
+ $inline_styles = styles_for_block_core_calendar( $attributes );
+ $color_classes = get_color_classes_for_block_core_calendar( $attributes );
+
+ $calendar = str_replace( '
%2$s',
$wrapper_attributes,
- get_calendar( true, false )
+ $calendar
);
// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
@@ -69,6 +75,66 @@ function register_block_core_calendar() {
add_action( 'init', 'register_block_core_calendar' );
+/**
+ * Builds an array of inline styles for the calendar block.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Style HTML attribute.
+ */
+function styles_for_block_core_calendar( $attributes ) {
+ $table_styles = array();
+
+ // Add color styles.
+ $has_text_color = ! empty( $attributes['style']['color']['text'] );
+ if ( $has_text_color ) {
+ $table_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
+ }
+
+ $has_background_color = ! empty( $attributes['style']['color']['background'] );
+ if ( $has_background_color ) {
+ $table_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
+ }
+
+ return ! empty( $table_styles ) ? sprintf( 'style="%s"', safecss_filter_attr( implode( ' ', $table_styles ) ) ) : '';
+}
+
+/**
+ * Returns color classnames depending on whether there are named or custom text and background colors.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string The color classnames to be applied to the block elements.
+ */
+function get_color_classes_for_block_core_calendar( $attributes ) {
+ $classnames = array();
+
+ // Text color.
+ $has_named_text_color = ! empty( $attributes['textColor'] );
+ $has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
+ if ( $has_named_text_color ) {
+ $classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
+ } elseif ( $has_custom_text_color ) {
+ // If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class.
+ $classnames[] = 'has-text-color';
+ }
+
+ // Background color.
+ $has_named_background_color = ! empty( $attributes['backgroundColor'] );
+ $has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
+ if (
+ $has_named_background_color ||
+ $has_custom_background_color
+ ) {
+ $classnames[] = 'has-background';
+ }
+ if ( $has_named_background_color ) {
+ $classnames[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
+ }
+
+ return implode( ' ', $classnames );
+}
+
/**
* Returns whether or not there are any published posts.
*
diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
index e1f83413693202..2b4ba88112bb99 100644
--- a/packages/block-library/src/calendar/style.scss
+++ b/packages/block-library/src/calendar/style.scss
@@ -10,13 +10,14 @@
table {
width: 100%;
border-collapse: collapse;
+
+ // Keep the hard-coded header background color for backward compatibility.
+ &:not(.has-text-color):not(.has-background) th {
+ background: $gray-300;
+ }
}
thead {
border-bottom: 3px solid;
}
-
- a {
- text-decoration: underline;
- }
}