Fix : Calendar block: Colors do not change between global styles and theme.json

[Vrishabhsk]

What?

• Closes Calendar block: Colors do not change between global styles and theme.json #69896

Why?

• Even if you set colors in the calendar block using global styles and theme.json, the colors of td and caption do not change.

How?

• Update the __experimentalSelector attribute for color support to include td and caption
• Add styles which inherit the text color if set via the Editor else pick the color set via theme.json

Testing Instructions

1. Update the theme.json in twentytwentyfive theme
2. Add the following snippet in the JSON under styles ➡ blocks

"core/calendar": {
	"color": {
		"text": "red"
	}
},

3. Create a post and add the calendar block
4. It should match the screenshot added in this PR

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Vrishabhsk <vrishabhsk@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

This PR certainly solves the symptom, but I think the underlying problem needs to be addressed.

Specifically, lower the CSS specificity of the calendar block's default styles from 0-1-1 to 0-1-0 to allow global styles to properly override the calendar block's styles (See #69896 (comment) for more details.).

In my testing, the following changes seem to work ideally:

diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
index 969d1aafec..5e2db8da95 100644
--- a/packages/block-library/src/calendar/style.scss
+++ b/packages/block-library/src/calendar/style.scss
@@ -19,16 +19,6 @@
                width: 100%;
                border-collapse: collapse;
 
-               &:where(:not(.has-text-color)) {
-                       color: #40464d;
-
-                       // Keep the hard-coded border color for backward compatibility.
-                       th,
-                       td {
-                               border-color: $gray-300;
-                       }
-               }
-
                &.has-background th {
                        background-color: inherit;
                }
@@ -37,6 +27,16 @@
                        color: inherit;
                }
        }
+
+       :where(table:not(.has-text-color)) {
+               color: #40464d;
+
+               // Keep the hard-coded border color for backward compatibility.
+               th,
+               td {
+                       border-color: $gray-300;
+               }
+       }
 }
 
 // Keep the hard-coded header background color for backward compatibility.

Let me know if this approach works for you.

Also, important things to test are:

• Can change text color, background color, and link via the global styles
• Can override them individually from block instances.

[Vrishabhsk]

Hi @t-hamano, thanks for your feedback.

• I have addressed the CSS diff shared by you
• Im also attaching a screencast for the testing performed by me for the above mentioned scenarios

calendar.mp4

Let me know if this works. Thank

[t-hamano]

I have addressed the CSS diff shared by you

Sorry, I didn't explain it well enough. The changes I proposed were made to the trunk branch, not to this PR.

So even if we remove the code you added, it should work as expected.

[Vrishabhsk]

Hi @t-hamano, when i remove the other changes I've implemented the manual block styles the user may apply won't be applied correctly. Here's a screencast for the displaying the effect

fix.mp4

[t-hamano]

when i remove the other changes I've implemented the manual block styles the user may apply won't be applied correctly. Here's a screencast for the displaying the effect

Can you check again? We only need to change the CSS in the trunk branch. The packages/block-library/src/calendar/style.scss file should look like this:

Details

.wp-block-calendar {
	text-align: center;

	th,
	td {
		padding: 0.25em;
		border: 1px solid;
	}

	th {
		font-weight: 400;
	}

	caption {
		background-color: inherit;
	}

	table {
		width: 100%;
		border-collapse: collapse;

		&.has-background th {
			background-color: inherit;
		}

		&.has-text-color th {
			color: inherit;
		}
	}

	&:where(:not(.has-text-color)) {
		color: #40464d;

		// Keep the hard-coded border color for backward compatibility.
		th,
		td {
			border-color: $gray-300;
		}
	}
}

// Keep the hard-coded header background color for backward compatibility.
:where(.wp-block-calendar table:not(.has-background) th) {
	background: $gray-300;
}

[Vrishabhsk]

Hi @t-hamano I replace the entire file content with the copy you shared and these were the results

Your changes	My changes

We need to inherit the colors for the background of TD elements and the colors for text for TD, TH, and Caption.

[t-hamano]

@Vrishabhsk Did you change the value of __experimentalSelector back to "table, th"? The reason I'm suggesting not changing __experimentalSelector is that I want to avoid style overrides as much as possible.

Will anything go wrong if we don't update __experimentalSelector?

[Vrishabhsk]

Hi @t-hamano, After reverting the __experimentalSelector support back to its original state, the styles suggested were working as expected. I have synced the commit as well

[t-hamano]

@Vrishabhsk Thanks for the update!

Sorry, the code I suggested was incorrect. I think the ideal code would be the one in this comment, which means I think the following changes are needed:

diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
index cac3c0e1c6..5e2db8da95 100644
--- a/packages/block-library/src/calendar/style.scss
+++ b/packages/block-library/src/calendar/style.scss
@@ -28,7 +28,7 @@
                }
        }
 
-       &:where(:not(.has-text-color)) {
+       :where(table:not(.has-text-color)) {
                color: #40464d;
 
                // Keep the hard-coded border color for backward compatibility.

Can you test this code to see if it works?

[Vrishabhsk]

Hi @t-hamano, the above suggested change also works as expected. I have updated the selector. Thanks