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; - } }