Skip to content

Feat(notifications): What's New — featured item hero + also-new accordion#6

Draft
avivu wants to merge 17 commits into
mainfrom
feature/whats-new-featured-item
Draft

Feat(notifications): What's New — featured item hero + also-new accordion#6
avivu wants to merge 17 commits into
mainfrom
feature/whats-new-featured-item

Conversation

@avivu

@avivu avivu commented Jun 27, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Summary

  • Adds a featured item hero layout at the top of the What's New drawer — large image, title, optional plan chip overlay, and CTA button
  • Adds a collapsed accordion section for all non-featured items, each with expand/collapse (chevron icon) and a per-item unread dot indicator
  • The divider above the collapsed list accepts an optional listLabel field on the featured notification — plain divider is rendered when omitted
  • Badge (admin bar + editor app bar) shows the unread count and decrements per item via a e-notification-item-seen window event
  • seenItemIds state is lifted to WhatsNew so it survives drawer close/reopen within a session
  • initialHasUnread flag (captured once at page load from PHP) suppresses unread dots after a page refresh when there are no unread items
  • Featured hero items (and all items when no featured exist) are auto-marked as seen on drawer open so the badge clears correctly
  • PHP: exposes unread_count (integer) alongside is_unread (boolean) in the JS config; private helper eliminates duplication in Options

Test plan

  • Reset notifications via ?reset_notifications=1, reload — badge shows unread count
  • Open What's New drawer — featured item renders as hero with image; remaining items in collapsed list with blue dots
  • Expand a collapsed item — its dot disappears, badge decrements by 1
  • Close and reopen drawer — expanded items remain without dots; unexpanded still have dots
  • Expand all items — badge reaches 0 and disappears
  • Refresh page — no dots, no badge
  • Test with no featured items — all items render as original full-card layout, badge clears on drawer open
  • Test with listLabel on featured notification — divider shows the custom label text
  • Test without listLabel — divider is plain with no text
  • Test RTL — dots and chevrons align correctly using CSS logical properties

🤖 Generated with Claude Code

@avivu avivu force-pushed the feature/whats-new-featured-item branch from 9484ad8 to 3bda21d Compare June 27, 2026 16:00
avivu and others added 4 commits July 1, 2026 09:45
@avivu @claude
Feat: What's New — featured item hero + also-new accordion
80c9947 
- Add featured item hero layout (image, title, chip overlay)
- Add "Also new" collapsed accordion list for non-featured items
- New WhatsNewItemCollapsed component with expand/collapse, chevron icon,
  and per-item unread dot (opacity-based, no layout shift)
- Lift seenItemIds state to WhatsNew so it survives drawer close/reopen
- Badge (bar button + editor app bar) decrements per item via
  e-notification-item-seen window event; no 9+ cap; corner-overlap position
- Auto-mark fully-visible items as seen (featured hero + all items when
  no featured exist) so badge clears correctly on drawer open
- initialHasUnread flag suppresses dots after page refresh with 0 unread

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
fix(notifications): use MUI Badge component for unread count indicator
e87078c 
Replace custom CSS keyframe animation and absolutely-positioned Box badge
with the MUI Badge component from @elementor/ui, matching the existing
design-system pattern. Also restore is_unread alongside unread_count in
the JS config to avoid breaking existing consumers.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
fix(notifications): revert is_unread usage and fix RTL chip positioning
14c943d 
- editor-v1.js: revert unread_count > 0 back to is_unread (restored in PHP config)
- whats-new-item.js: use insetInlineStart instead of left for RTL support

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
feat(notifications): show description preview and increase item spacing
71f273e 
- Show 2-line clamped description in collapsed state (disappears when expanded)
- Increase item padding from py:1.5 to py:2 (16px) for better breathing room
- Align chevron to flex-start to match taller row height

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu avivu force-pushed the feature/whats-new-featured-item branch from a681418 to 71f273e Compare July 1, 2026 06:45
avivu and others added 8 commits July 1, 2026 09:50
@avivu @claude
refactor(notifications): code review fixes — PropTypes, hooks, PHP he…
ed0e087 
…lper

- options.php: extract private get_unread_notification_ids() to eliminate
  duplicated transient logic between has_unread_notifications/get_unread_count
- whats-new.js: wrap handleSeen with useCallback for stable reference;
  make setIsRead optional (default noop) so callers don't need to pass it
- whats-new-drawer-content.js: add PropTypes, remove eslint-disable, use
  useRef for seenItemIds to cleanly satisfy exhaustive-deps
- whats-new-item-collapsed.js: add PropTypes, remove eslint-disable
- whats-new-item.js: use MUI variant="h6" instead of hardcoded fontSize
- bar-button-notification.js: drop explicit setIsRead noop prop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
fix(admin-top-bar): remove orphaned defaultIsRead prop from BarButton…
4347924 
…Notification

BarButtonNotification no longer accepts defaultIsRead — badge state is
now driven by window.elementorNotifications.unread_count directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
feat(notifications): make divider label configurable via listLabel field
6b1becb 
Add optional `listLabel` field to featured notifications that controls
the text shown in the divider above the collapsed items list.
When omitted, a plain divider is rendered with no label.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
fix(notifications): parse unread_count as integer to fix zero badge d…
3fe9d9d 
…isplay

wp_localize_script() converts all PHP values to strings, so unread_count: 0
becomes "0" in JS. Strict equality (0 === "0") returns false, causing the badge
to display "0" even when there are no unread notifications.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@hein-obox
Internal: Bump packages [ED-24759] (elementor#36369)
5a1c499
@avivu @claude
chore(notifications): remove stale TODO comment
68ab55c 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu
Merge branch 'main' into feature/whats-new-featured-item
757d2de
@avivu @claude
fix(notifications): make handleSeen idempotent and guard onSeen with …
de68c17 
…isNew

Collapsing and re-expanding an item was calling onSeen again, causing the
badge to double-decrement. Fix in two places:
- handleSeen: only dispatch e-notification-item-seen when item wasn't already seen
- handleToggle: only call onSeen when the item is still unread (isNew)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu avivu force-pushed the feature/whats-new-featured-item branch from 6c47038 to de68c17 Compare July 1, 2026 08:38
avivu and others added 5 commits July 2, 2026 08:44
@avivu @claude
fix(notifications): prevent description preview jump during collapse …
1eb487c 
…animation

When closing an expanded item, the description preview was appearing in the
header immediately (as expanded became false), while the image was still
visible inside the animating Collapse — causing a visual jump.

Fix: hide the preview on toggle and restore it only after onExited fires
(animation fully complete).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
fix(notifications): eliminate collapse animation jump using opacity t…
1535cba 
…ransition

Instead of mounting/unmounting the description preview (which caused a height
jump when it appeared), always keep it in the DOM and transition opacity only.
Header height stays constant throughout the animation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
fix(notifications): collapse description preview height when expanded
3003f6d 
Opacity-only approach left an invisible gap in the expanded header.
Also transition max-height and margin-top so the description takes
zero space when not shown.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
fix(notifications): remove description preview from collapsed header
7ac384a 
Animating the preview in/out caused layout issues no matter the approach.
The title is sufficient for identification in collapsed state; the full
description is visible on expand.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@avivu @claude
fix(notifications): close drawer on internal CTA in collapsed items
7c752aa 
Pass setIsOpen to WhatsNewItemCollapsed and add the same onClick handler
used in WhatsNewItem — clicking a '#'-prefixed CTA URL now closes the
drawer, consistent with the featured/regular item behaviour.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@avivu @hein-obox