NX Bar: show the actual Elementor design in the admin Design preview

[AmitPaul-akp]

Summary

When an NX Bar (Notification Bar / PressBar) is designed with Edit With Elementor, the admin Design tab never showed the Elementor-built design. Both the top PREVIEW pane and the THEMES → Custom card kept showing a static starter-theme thumbnail (bar-elementor/{elementor_bar_theme}.jpg) keyed on the theme name, not on the Elementor content.

The design itself is fine — it's stored as elementor_id → a published nx_bar post and renders correctly on the frontend via PressBar::print_bar_notice() → get_builder_content_for_display(). This was an admin-preview-only bug (reported by a client).

Editor view	https://d.pr/i/OptchB
Backend preview (before)	https://d.pr/i/lvPlNB

Root cause

The admin preview components (PressbarAdminPreview.jsx, NxBarPresets.jsx) rendered a static <img> whose URL was derived from the starter theme name. There was no code path that rendered the live Elementor output in the admin.

Changes

includes/Extensions/PressBar/PressBar.php — new render_elementor_bar_preview() (hooked on template_redirect, served at ?nx_bar_preview={id}&_wpnonce=, guarded by nonce nx_bar_preview + capability edit_notificationx). It renders the same get_builder_content_for_display() as the live bar, so the preview always matches the front end. It deliberately:

• does not call wp_head()/wp_footer(), and
• prints only Elementor's own stylesheets and no scripts,

so the preview shows the bar and nothing else — no WP admin toolbar, no third-party chat widgets, no other notifications.

includes/Core/PostType.php — localizes the site home URL + a bar_preview_nonce into the admin data so the iframe URL can be built.

nxdev/notificationx/fields/helpers/PressbarAdminPreview.jsx & nxdev/notificationx/fields/NxBarPresets.jsx — for Elementor bars, render an <iframe> to the preview endpoint instead of the static <img>:

• the desktop / tablet / phone tabs drive the iframe width (true Elementor responsive),
• height auto-fits via a collapse-then-measure script inside the iframe (no blank space when switching device tabs),
• Gutenberg / preset previews are unchanged.

Build note

This is a source-only change. The built assets/admin/js/admin.js is intentionally not included — per this repo's convention it's regenerated in a separate "npm build" commit at release (npm run build). Run npm run admin to produce the bundle for testing.

Testing

• Build an NX Bar in Elementor (custom background, badge, image, button) → Publish → reopen NotificationX → Design tab now shows the actual Elementor design in both the PREVIEW pane and the Custom card.
• Toggle desktop / tablet / phone → the bar reflows and the frame hugs it (no leftover blank space).
• No admin toolbar / chat widget / other notifications leak into the preview.
• Verified PHP syntax; verified the endpoint output against a real bar (Elementor base + per-widget CSS present, design content intact, zero external scripts).