Announcement Bar

I made a few updates to the component. Already updated the original post, but here are the changes in more detail:

Localized strings

The bar text and button label are now translatable. Instead of the old bar_text and button_text settings, the strings live in locales/en.yml. You can add additional locales manually or use AI translations.

Simpler dismiss logic

Replaced the cookie-based dismiss with localStorage. The key is derived from the bar text itself, so when you update the announcement text, the bar automatically re-appears for everyone who dismissed the old one.

Responsive layout

Consolidated styles into a single file using flex-wrap. On wide screens, the text and button sit inline. When the text wraps, the button drops below.

BEM element classes

The markup now uses BEM classes for all elements (__text, __button, __close) making it easier to target in theme overrides.

3 Likes