diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 1e0ffa81c26dd4..207cb26ab01f3b 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, 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 index fad97e0a9efc74..2accd7142c7cc9 100644 --- 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 index 8f6226e943480c..01d2b7eb8ad91b 100644 --- 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( '%2$s', $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 index 39df1e572d5b17..969d1aafec99ef 100644 --- 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; +}