Fix custom color palette conflict with block themes (e.g. Blocksy)#975
Fix custom color palette conflict with block themes (e.g. Blocksy)#975ravinderk wants to merge 5 commits into
Conversation
Prevent custom color settings from being overwritten by block theme. Jira: KAD-5436
- Add inline style in advancedheading to ensure kb-palette colors take precedence over root CSS variables set by themes like Blocksy - Sync colors to both legacy colors setting and __experimentalFeatures on color state change in color palette defaults Jira: KAD-5436
|
🎉 Zip build complete |
ravinderk
changed the base branch from
release/M26.gardevoir
to
release/M26.haunter
ravinderk
force-pushed
the
fix/KAD-5436-block-custom-color-blocky-them-conflict
branch
from
3d02777 to
97412ae
Compare
ravinderk
requested review from
Copilot and
gilbert-hernandez
and removed request for
Copilot
| console.error('Failed to update colors', error); | ||
| } | ||
| } | ||
| }, [colors, existingFeatures, updateSettings]); |
There was a problem hiding this comment.
I'm not sure existingFeatures and updateSettings should be included in the dependency array as it could lead to an infinite loop. I think they should probably be removed.
There was a problem hiding this comment.
I agree. I kept only colors as dependency
| existingFeatures.color.palette.theme = colors; | ||
| updateSettings({ | ||
| colors, // Legacy support for color palette, will be removed in future versions. | ||
| __experimentalFeatures: existingFeatures, // Update the experimental features with the new color palette. |
There was a problem hiding this comment.
existingFeatures is a live reference to the Redux store's state object, obtained via useSelect. Mutating it directly is a React/Redux anti-pattern and undefined behavior. The store may or may not reflect the change depending on whether it does shallow or deep comparisons, and it bypasses immutability guarantees.
Maybe this instead:
updateSettings({
colors,
__experimentalFeatures: {
...existingFeatures,
color: {
...existingFeatures?.color,
palette: {
...existingFeatures?.color?.palette,
theme: colors,
},
},
},
});
There was a problem hiding this comment.
Good suggestion. Fixed.
Keep the editor color palette update scoped to the theme palette\ninstead of replacing the full experimental features object.\n\nJira: KAD-5436
3 participants
Resolve: KAD-5436
Description
Fixes a conflict where custom block themes color palettes override by our plugin such as Blocksy. Ensures the correct color palettes are applied to color picker in the editor and on the frontend.
Changes
colorssetting and__experimentalFeatures.color.palette.themeon color state change incolor-palette-defaults.jsupdateSettings({ colors })call fromsaveConfig(now handled reactively)