fix (global color scheme): fix jumping when dragging in color picker

[kaeizen]

fixes #3638

Summary by CodeRabbit

• Refactor
  • Updated the color scheme picker’s update flow for more reliable and consistent color changes, preventing stale state and ensuring immediate application of edits in the UI.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main fix: preventing jumping behavior when dragging the color picker in the global color scheme settings.
Linked Issues check	✅ Passed	The code refactors the onChange flow to use a functional updater pattern, which eliminates race conditions between state mutations and side-effects that likely caused the jumping behavior reported in issue #3638.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the color picker jumping issue by refactoring state management in the onChange handler; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/3638-global-color-schemes-color-picker

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 73390de and a1cd0a8.

📒 Files selected for processing (1)

• src/plugins/global-settings/color-schemes/color-scheme-picker.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/plugins/global-settings/color-schemes/color-scheme-picker.js (2)

src/hooks/use-block-color-schemes.js (1)

• schemeHasValue (10-16)

src/plugins/global-settings/color-schemes/utils.js (3)

• schemeHasValue (29-35)
• schemeHasValue (29-35)
• isGradient (59-59)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)

• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: build

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3645-stackable-3645-merge.zip	a1cd0a8

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3645-stackable-3645-merge.zip"}}]}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7d01e08 and 73390de.

📒 Files selected for processing (1)

• src/plugins/global-settings/color-schemes/color-scheme-picker.js (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: kaeizen
Repo: gambitph/Stackable PR: 3601
File: src/components/design-library-list/use-preview-renderer.js:307-331
Timestamp: 2025-09-25T08:17:15.564Z
Learning: In the design library preview renderer hook (src/components/design-library-list/use-preview-renderer.js), selectedTab changes trigger content updates through a chain of effects rather than direct dependencies. The first useEffect (template processing) responds to selectedTab changes indirectly and updates content state, which then triggers the second useEffect (rendering/scaling) that depends on content. This eliminates the need to add selectedTab to the second effect's dependency array.

🧬 Code graph analysis (1)

src/plugins/global-settings/color-schemes/color-scheme-picker.js (2)

src/hooks/use-block-color-schemes.js (1)

• schemeHasValue (10-16)

src/plugins/global-settings/color-schemes/utils.js (3)

• schemeHasValue (29-35)
• schemeHasValue (29-35)
• isGradient (59-59)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)

• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: build