🐛 Fixed accent color styles disappearing in Admin design preview#24722
Conversation
WalkthroughIn ghost/core/core/frontend/helpers/ghost_head.js, the logic for placing the accent color style tag was adjusted. The search for an insertion point now targets only the last closing </style> tag using /</style>/, replacing the previous check for either </style> or </script> via /</(style|script)>/. The variable was renamed from existingScriptIndex to existingStyleIndex. If a closing </style> is found (existingStyleIndex !== -1), the style is appended to it; otherwise, a new <style>:root {--ghost-accent-color: ...}</style> tag is added. Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
ghost/core/core/frontend/helpers/ghost_head.js (2)
340-343: Make the matcher resilient (case-insensitive, optional whitespace) and stringify nodes.Some entries in
headare SafeString objects and user/3rd-party injections may close</STYLE>with different casing or whitespace. Minor hardening below:Apply this diff:
- const existingStyleIndex = _.findLastIndex(head, str => /<\/style>/.test(str)); + // Be robust to SafeString objects, casing, and stray whitespace before '>' + const existingStyleIndex = _.findLastIndex( + head, + (node) => /<\/style\s*>/i.test(String(node)) + );
342-343: Add a newline when concatenating for readability (nit).Purely cosmetic; keeps the generated markup readable when multiple styles are concatenated into a single array entry.
- head[existingStyleIndex] = head[existingStyleIndex] + styleTag; + head[existingStyleIndex] = `${head[existingStyleIndex]}\n ${styleTag}`;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
ghost/core/core/frontend/helpers/ghost_head.js(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: kevinansfield
PR: TryGhost/Ghost#23824
File: ghost/core/core/server/services/email-service/email-templates/partials/styles.hbs:919-926
Timestamp: 2025-06-13T11:57:58.226Z
Learning: In `ghost/core/core/server/services/email-service/email-templates/partials/styles.hbs`, some style blocks (e.g., `.latest-post p` and `.latest-post p a`) still use the legacy colour `#73818c` on purpose; they are later overridden by `emailCustomization` feature rules, as noted by inline TODO comments. These occurrences should not be flagged as inconsistencies.
📚 Learning: 2025-06-13T11:57:58.226Z
Learnt from: kevinansfield
PR: TryGhost/Ghost#23824
File: ghost/core/core/server/services/email-service/email-templates/partials/styles.hbs:919-926
Timestamp: 2025-06-13T11:57:58.226Z
Learning: In `ghost/core/core/server/services/email-service/email-templates/partials/styles.hbs`, some style blocks (e.g., `.latest-post p` and `.latest-post p a`) still use the legacy colour `#73818c` on purpose; they are later overridden by `emailCustomization` feature rules, as noted by inline TODO comments. These occurrences should not be flagged as inconsistencies.
Applied to files:
ghost/core/core/frontend/helpers/ghost_head.js
⏰ 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). (8)
- GitHub Check: Ghost-CLI tests
- GitHub Check: E2E tests
- GitHub Check: Acceptance tests (Node 22.13.1, sqlite3)
- GitHub Check: Acceptance tests (Node 22.13.1, mysql8)
- GitHub Check: Legacy tests (Node 22.13.1, sqlite3)
- GitHub Check: Unit tests (Node 22.13.1)
- GitHub Check: Legacy tests (Node 22.13.1, mysql8)
- GitHub Check: Lint
🔇 Additional comments (1)
ghost/core/core/frontend/helpers/ghost_head.js (1)
340-343: Good fix: limiting the insertion point to only the last </style> avoids Admin Preview losses.Targeting only style blocks decouples the accent style from script sanitization/removal in Admin Preview and matches the intent described in the PR. Nice, minimal surface-area change.
|
Hey, thanks for the PR and apologies for the delays. I wasn't able to reproduce or locate the failure mode this PR guards against: the current Admin preview paths don't strip or sanitize <script> tags in a way that would take the adjacent accent-color <style> with them, and we couldn't find an issue or report describing the loss in practice. The change also reorders {{ghost_head}} output, which breaks the existing snapshot tests. I'm going to close this - if you can provide repro steps, please re-open and resolve the tests and we can go from there. |
|
Hi! @9larsons ! Thank you for looking into this. I checked again and I’m still seeing the issue on my end. I tested it thoroughly and here’s what happens: The accent color in the admin appears as the default, despite a custom color being set, when this exclusion set is used: {{ghost_head exclude="card_assets,comment_counts"}} 
For a single exclusion {{ghost_head exclude="card_assets"}}, the accent color is displayed correctly: 
|
|
@fueko Thanks for the extra details! I'll take another look. |
ref TryGhost#24722 - in the Admin design settings preview, the announcement bar helper returned undefined when the preview header carried no announcement params, pushing undefined into the ghost_head output array - the accent color splice then threw a TypeError matching against that undefined entry whenever no style/script tag followed it, and the catch-all returned a truncated head missing the accent style, code injection and custom fonts - returns an empty string from the announcement helper like the other helper empty paths, and hardens the splice predicate against non-string entries (replaces the earlier narrowing of the predicate to style tags only, which reordered output for existing sites)
9larsons
changed the title
|
Thanks! Confirmed the root cause: in the design-preview path, the announcement-bar helper could return undefined, which got pushed into the |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx run @tryghost/admin:build |
✅ Succeeded | 4m 9s | View ↗ |
nx run ghost:test:ci:integration:no-coverage |
✅ Succeeded | 1m 45s | View ↗ |
nx run ghost:test:ci:integration |
✅ Succeeded | 1m 6s | View ↗ |
nx run ghost:test:ci:e2e |
✅ Succeeded | 3m 46s | View ↗ |
nx run ghost:test:ci:e2e:no-coverage |
✅ Succeeded | 3m 45s | View ↗ |
nx run ghost:test:ci:legacy |
✅ Succeeded | 2m 13s | View ↗ |
nx build @tryghost/activitypub |
✅ Succeeded | 22s | View ↗ |
nx build @tryghost/signup-form |
✅ Succeeded | <1s | View ↗ |
Additional runs (10) |
✅ Succeeded | ... | View ↗ |
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗
☁️ Nx Cloud last updated this comment at 2026-06-13 16:57:33 UTC
|
Thanks @9larsons for tracking this down and for the detailed root-cause analysis. I really appreciate the investigation and fix! |
3 participants
When using the
{{ghost_head}}helper with the exclude option (for example excluding{{ghost_head exclude="comment_counts"}}), the accent color style can disappear in the Admin Preview.The issue occurs because the accent style is currently appended to the last style or script element in the head output. In the Admin Preview environment, script tags are sanitized or removed, and if the accent style was attached to one of them, it gets lost. This leads to the accent color not appearing in Admin, while still working correctly on the frontend. The inconsistency is confusing for theme developers and customers testing themes inside Admin.
Fix:
The injection logic has been adjusted so that the accent color is only appended to the last style element in the head output. If no style element exists, it will be added as a separate entry. This ensures that the accent color is never tied to a script element that could be removed in Admin Preview.