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

[Vrishabhsk]

What?

• Closes https://github.com/WordPress/gutenberg/issues/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[bot]]

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 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: shimotmk <[email protected]>

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

[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

https://github.com/user-attachments/assets/e6afd254-f67f-4d46-846c-ba484bc842d5

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

https://github.com/user-attachments/assets/057debb1-0998-4cb1-8b05-02905842c613

[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