From 78b11c0a2e021426acbfab920e1b9d2d74e42bd5 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 27 Jun 2022 15:37:17 +0900 Subject: [PATCH 01/14] Calender Block: Add color supports and polish styles --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/calendar/block.json | 9 ++++++++- packages/block-library/src/calendar/style.scss | 18 ++++-------------- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 24839c7311000e..8645cff9a5d25c 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 (link, text, ~~background~~) - **Attributes:** month, year ## Categories List diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index 6f498ed585cd02..8af2d65d614b27 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -16,7 +16,14 @@ } }, "supports": { - "align": true + "align": true, + "color": { + "link": true, + "background": false, + "__experimentalDefaultControls": { + "text": true + } + } }, "style": "wp-block-calendar" } diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss index 39df1e572d5b17..e1f83413693202 100644 --- a/packages/block-library/src/calendar/style.scss +++ b/packages/block-library/src/calendar/style.scss @@ -2,13 +2,9 @@ text-align: center; th, - tbody td { + td { padding: 0.25em; - border: 1px solid $gray-300; - } - - tfoot td { - border: none; + border: 1px solid; } table { @@ -16,17 +12,11 @@ border-collapse: collapse; } - table th { - font-weight: 400; - background: $gray-300; + thead { + border-bottom: 3px solid; } a { text-decoration: underline; } - - table tbody, - table caption { - color: #40464d; - } } From 1e42f5f9eef9756c602da8942e607510a45f99b6 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 21 Aug 2022 23:17:36 +0900 Subject: [PATCH 02/14] Add background-color support, add color and style dynamic rendering, remove text-decoration --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/calendar/block.json | 3 +- packages/block-library/src/calendar/index.php | 68 ++++++++++++++++++- .../block-library/src/calendar/style.scss | 9 +-- 4 files changed, 75 insertions(+), 7 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 8645cff9a5d25c..433728c028c760 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; - } } From a5cfa4a5a5bdbfdd38b01349124246a5dee630e5 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 21 Aug 2022 23:33:53 +0900 Subject: [PATCH 03/14] Fix php lint error --- packages/block-library/src/calendar/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php index 099311640bf8c4..8e3a4711e134c0 100644 --- a/packages/block-library/src/calendar/index.php +++ b/packages/block-library/src/calendar/index.php @@ -83,7 +83,7 @@ function register_block_core_calendar() { * @return string Style HTML attribute. */ function styles_for_block_core_calendar( $attributes ) { - $table_styles = array(); + $table_styles = array(); // Add color styles. $has_text_color = ! empty( $attributes['style']['color']['text'] ); From 8b4e3352e4b8b2dde29c43ce831526b000b37ac8 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 10 Sep 2022 13:52:50 +0900 Subject: [PATCH 04/14] Remove unnecessary border styles --- packages/block-library/src/calendar/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss index 2b4ba88112bb99..2bc52dc09407f2 100644 --- a/packages/block-library/src/calendar/style.scss +++ b/packages/block-library/src/calendar/style.scss @@ -16,8 +16,4 @@ background: $gray-300; } } - - thead { - border-bottom: 3px solid; - } } From 5adb2a6cf43f581179e816ea001c4d13a7cf4d20 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 10 Sep 2022 13:59:22 +0900 Subject: [PATCH 05/14] Lower specificity of background color for backward compatibility --- packages/block-library/src/calendar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss index 2bc52dc09407f2..3095e3f50a5190 100644 --- a/packages/block-library/src/calendar/style.scss +++ b/packages/block-library/src/calendar/style.scss @@ -12,7 +12,7 @@ border-collapse: collapse; // Keep the hard-coded header background color for backward compatibility. - &:not(.has-text-color):not(.has-background) th { + &:where(:not(.has-text-color):not(.has-background)) th { background: $gray-300; } } From d2f4b11a114807bf20c862e83149dd501bcdecb9 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 10 Sep 2022 17:30:35 +0900 Subject: [PATCH 06/14] Enable color support by global style --- packages/block-library/src/calendar/block.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index 072526e88ae612..747bfd67c8fa00 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -23,7 +23,8 @@ "__experimentalDefaultControls": { "background": true, "text": true - } + }, + "__experimentalSelector": "table" }, "typography": { "fontSize": true, From 3fb8847d5d56c450df88d61cbf0ac0208085b6bc Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 10 Sep 2022 17:35:18 +0900 Subject: [PATCH 07/14] Use style-engine for inline CSS --- packages/block-library/src/calendar/index.php | 35 +++++-------------- 1 file changed, 9 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php index 8e3a4711e134c0..e3b1de02bb760c 100644 --- a/packages/block-library/src/calendar/index.php +++ b/packages/block-library/src/calendar/index.php @@ -40,10 +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 ); + $inline_styles = ''; - $calendar = str_replace( ' Date: Sat, 10 Sep 2022 18:38:21 +0900 Subject: [PATCH 08/14] USe style-engine for class names --- packages/block-library/src/calendar/index.php | 53 +++++-------------- 1 file changed, 14 insertions(+), 39 deletions(-) diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php index e3b1de02bb760c..eac45b486b4626 100644 --- a/packages/block-library/src/calendar/index.php +++ b/packages/block-library/src/calendar/index.php @@ -40,18 +40,29 @@ function render_block_core_calendar( $attributes ) { } } - $color_classes = get_color_classes_for_block_core_calendar( $attributes ); + $color_classes = array(); + + if ( ! empty( $attributes['textColor'] ) ) { + $color_classes[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] ); + } + if ( ! empty( $attributes['backgroundColor'] ) ) { + $color_classes[] = sprintf( 'has-background has-%s-background-color', $attributes['backgroundColor'] ); + } + $inline_styles = ''; - if ( ! empty( $styles['css'] ) ) { + if ( ! empty( $attributes['style'] ) ) { $styles = gutenberg_style_engine_get_styles( $attributes['style'] ); if ( ! empty( $styles['css'] ) ) { $inline_styles = " style=\"${styles['css']}\""; } + if ( ! empty( $styles['classnames'] ) ) { + $color_classes[] = $styles['classnames']; + } } $calendar = str_replace( ' Date: Mon, 12 Sep 2022 23:39:41 +0900 Subject: [PATCH 09/14] Style engine covers more, improv backward compatibility --- .../block-library/src/calendar/block.json | 2 +- packages/block-library/src/calendar/index.php | 33 +++++++++---------- .../block-library/src/calendar/style.scss | 10 +++++- 3 files changed, 25 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index 747bfd67c8fa00..d1f2e0b60435a9 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -24,7 +24,7 @@ "background": true, "text": true }, - "__experimentalSelector": "table" + "__experimentalSelector": "table, table th" }, "typography": { "fontSize": true, diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php index eac45b486b4626..b019b2419fe35b 100644 --- a/packages/block-library/src/calendar/index.php +++ b/packages/block-library/src/calendar/index.php @@ -40,29 +40,26 @@ function render_block_core_calendar( $attributes ) { } } - $color_classes = array(); + $color_block_styles = array(); - if ( ! empty( $attributes['textColor'] ) ) { - $color_classes[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] ); - } - if ( ! empty( $attributes['backgroundColor'] ) ) { - $color_classes[] = sprintf( 'has-background has-%s-background-color', $attributes['backgroundColor'] ); - } + // 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; - $inline_styles = ''; + // 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; - if ( ! empty( $attributes['style'] ) ) { - $styles = gutenberg_style_engine_get_styles( $attributes['style'] ); - if ( ! empty( $styles['css'] ) ) { - $inline_styles = " style=\"${styles['css']}\""; - } - if ( ! empty( $styles['classnames'] ) ) { - $color_classes[] = $styles['classnames']; - } - } + // 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( ' Date: Mon, 12 Sep 2022 23:54:17 +0900 Subject: [PATCH 10/14] Add more backward compatibility --- .../block-library/src/calendar/style.scss | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss index f28900c0ae1283..ddeb10d42107d9 100644 --- a/packages/block-library/src/calendar/style.scss +++ b/packages/block-library/src/calendar/style.scss @@ -7,6 +7,10 @@ border: 1px solid; } + th { + font-weight: 400; + } + table { width: 100%; border-collapse: collapse; @@ -16,12 +20,18 @@ background: $gray-300; } - &.has-background th { - background-color: inherit; - } + &:where(:not(.has-text-color)) { + // Keep the hard-coded body and caption color for backward compatibility. + tbody, + caption { + color: #40464d; + } - &.has-text-color th { - color: inherit; + // Keep the hard-coded border color for backward compatibility. + th, + td { + border-color: $gray-300; + } } } } From 7cf7a3e054a9c959feb58a6774ae0f040d97bbe6 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 13 Sep 2022 00:22:57 +0900 Subject: [PATCH 11/14] Fix php lint error --- packages/block-library/src/calendar/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php index b019b2419fe35b..01d2b7eb8ad91b 100644 --- a/packages/block-library/src/calendar/index.php +++ b/packages/block-library/src/calendar/index.php @@ -57,7 +57,7 @@ function render_block_core_calendar( $attributes ) { $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. + // Apply color classes and styles to the calendar. $calendar = str_replace( ' Date: Tue, 13 Sep 2022 00:40:21 +0900 Subject: [PATCH 12/14] Fix: global style text color isn't applied to td --- packages/block-library/src/calendar/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index d1f2e0b60435a9..6f30569c941f7a 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -24,7 +24,7 @@ "background": true, "text": true }, - "__experimentalSelector": "table, table th" + "__experimentalSelector": "table, table th, table td" }, "typography": { "fontSize": true, From 63f6bcc078d516859f35096ec925d39a4c0dbe49 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 13 Sep 2022 00:45:43 +0900 Subject: [PATCH 13/14] Fix: global style text color isn't applied to caption --- packages/block-library/src/calendar/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index 6f30569c941f7a..89afb264108df1 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -24,7 +24,7 @@ "background": true, "text": true }, - "__experimentalSelector": "table, table th, table td" + "__experimentalSelector": "table, th, td, caption" }, "typography": { "fontSize": true, From 35cab080c622c6269284097e4f129f0ceebcca5c Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 18 Sep 2022 17:15:44 +0900 Subject: [PATCH 14/14] Fix regressions --- .../block-library/src/calendar/block.json | 2 +- .../block-library/src/calendar/style.scss | 28 ++++++++++++------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json index 89afb264108df1..2accd7142c7cc9 100644 --- a/packages/block-library/src/calendar/block.json +++ b/packages/block-library/src/calendar/block.json @@ -24,7 +24,7 @@ "background": true, "text": true }, - "__experimentalSelector": "table, th, td, caption" + "__experimentalSelector": "table, th" }, "typography": { "fontSize": true, diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss index ddeb10d42107d9..969d1aafec99ef 100644 --- a/packages/block-library/src/calendar/style.scss +++ b/packages/block-library/src/calendar/style.scss @@ -11,21 +11,16 @@ font-weight: 400; } + caption { + background-color: inherit; + } + table { width: 100%; border-collapse: collapse; - // Keep the hard-coded header background color for backward compatibility. - &:where(:not(.has-background)) th { - background: $gray-300; - } - &:where(:not(.has-text-color)) { - // Keep the hard-coded body and caption color for backward compatibility. - tbody, - caption { - color: #40464d; - } + color: #40464d; // Keep the hard-coded border color for backward compatibility. th, @@ -33,5 +28,18 @@ border-color: $gray-300; } } + + &.has-background th { + background-color: inherit; + } + + &.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; +}