Rawnaq – Elementor Widgets, Gutenberg Blocks & Divi Modules
| 开发者 | itsmanzur |
|---|---|
| 更新时间 | 2026年10月23日 23:58 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Rawnaq is a modular library of interactive widgets and blocks designed for clean performance and fast page loads. Built for site creators, agencies, and marketers, it gives you advanced layout and conversion tools across Elementor, Gutenberg, and Divi Builder without bloating your site.
Why Rawnaq?
- Lightweight and vanilla JS — Powered entirely by modern JavaScript with zero jQuery runtime dependency on the frontend.
- On-demand asset loading — CSS and JS files load only on the pages where a module is actually placed.
- One module across three builders — Every feature works identically in Elementor, Gutenberg, and Divi Builder without switching tools.
- Privacy and GDPR friendly — Form submissions stay privately in your database with full support for WordPress personal data export and erase tools.
- Smart Form – Multi-step lead forms with file upload, signature, WhatsApp redirect, live price estimation, and CRM/webhook delivery.
- Hub Diagram – Interactive radial workflow diagrams that illustrate core processes with one-click PNG and SVG export.
- Flow Chart – Structured process trees, decision maps, and organizational charts with customizable node connections.
- Scroll Sync Timeline – Engaging horizontal and vertical milestone stories that track progress as visitors scroll.
- Floating Dock – macOS-style floating menu bar for quick site navigation with an optional WhatsApp QR contact drawer.
- Bento Grid – Modern responsive marketing grids that combine feature highlights, metrics, and media in clean layouts.
- 3D Tilt Card – Interactive showcase cards with smooth parallax depth, light glare reflection, and flip interactions.
- Scroll Story – Immersive scrollytelling presentations with sticky media viewports and narrative text chapters.
- Scroll Progress & TOC – Live reading progress bar and auto-generated table of contents that improve long-form content navigation.
- Case-Study Grid – Filterable portfolio and project showcases with responsive categories, lightbox galleries, and link-outs.
- Google reCAPTCHA v3 — Optional spam protection on Smart Form. Site/secret keys are set in plugin settings. Form tokens are verified via Google’s siteverify API. reCAPTCHA · Terms · Privacy Policy
- WhatsApp (wa.me) — Optional. Opens a WhatsApp chat URL with a prefilled message when Floating Dock or Smart Form WhatsApp delivery is enabled. WhatsApp · Terms · Privacy Policy
- Mailchimp — Optional. When Smart Form's CRM delivery is set to Mailchimp, the submitted email address (and any mapped merge fields) is sent to Mailchimp's API to subscribe the contact to the audience/list you configure. Requires your own Mailchimp API key. Mailchimp · Terms · Privacy Policy
- HubSpot — Optional. When Smart Form's CRM delivery is set to HubSpot, the submitted form field values are sent to HubSpot's Forms API using the portal ID and form GUID you configure. HubSpot · Terms · Privacy Policy
- Custom webhook / Slack incoming URL — Optional. Smart Form can POST submission JSON to a URL you provide (e.g. Slack Incoming Webhooks). Only the endpoint you configure is contacted.
- QRCode.js (davidshimjs) — MIT-compatible QR rendering for Floating Dock WhatsApp mode. Human-readable source:
assets/js/qrcode.js(also minified asqrcode.min.js). Upstream: https://github.com/davidshimjs/qrcodejs
安装:
- Upload the entire
rawnaqfolder to the/wp-content/plugins/directory, or upload the ZIP file via WordPress Admin. - Activate the plugin through the 'Plugins' menu in WordPress.
- Drop the widgets into Elementor, insert blocks in Gutenberg, or add modules directly inside the Divi Visual Builder.
屏幕截图:
常见问题:
Can I build a contact form with Rawnaq?
Yes. The included Smart Form module lets you build single-step or multi-step forms with text, email, phone, file uploads, digital signatures, and dynamic cost estimation. Submissions can be delivered via email (wp_mail), WhatsApp redirect, webhook, or CRM (Mailchimp and HubSpot), with built-in spam protection including signed HMAC timestamp tokens, rate limiting, and optional Google reCAPTCHA v3.
Is Rawnaq lightweight / does it slow down my site?
Rawnaq is built for speed. All frontend modules run on vanilla JavaScript with zero jQuery dependency. CSS and JavaScript assets are loaded conditionally only on pages where that specific module appears, and all assets are fully minified.
Does Rawnaq work with the WordPress block editor without Elementor?
Yes. Every module has native Gutenberg block support with live settings in the block sidebar. You do not need to install Elementor or any other page builder to use Rawnaq.
How do I export or delete form submissions?
Form submissions saved with "Log submissions" enabled are stored privately in your WordPress database under Rawnaq → Form Submissions, where you can filter, view details, and export to CSV. Rawnaq also integrates with WordPress core Tools → Export Personal Data and Tools → Erase Personal Data, allowing you to export or permanently erase all submissions associated with an email address.
Does Rawnaq require Elementor?
No. Modules work seamlessly with Elementor, Gutenberg, and Divi Builder. Enable only the modules you need in Rawnaq settings.
Does Rawnaq support Divi Builder?
Yes! All 10 free modules and extensions include dedicated Divi Visual Builder modules with real-time controls.
Does Smart Form send data to Rawnaq servers?
No. Email uses WordPress wp_mail. Optional webhooks go only to the URL you configure. Optional reCAPTCHA talks to Google. WhatsApp opens wa.me in the visitor’s browser.
Where is the QR code library source?
See assets/js/qrcode.js in the plugin (unminified). Minified build: assets/js/qrcode.min.js.
Does the table of contents work without JavaScript?
Yes. For standard WordPress post and page content, Rawnaq renders the complete table of contents outline server-side with native HTML anchor links. Search engine crawlers can index heading structures immediately, and visitors without JavaScript can navigate sections with zero layout shift.
Can I show progress for just the article?
Yes. In Elementor, Gutenberg, or Divi Builder, configure the "Progress based on" setting to "Article/content area" or specify a "Custom CSS selector". The progress bar or circular ring will track reading progress strictly within that target boundary rather than the entire page.
更新日志:
1.5.0
- Security: Replaced transient/nonce AJAX context with a stateless HMAC-SHA256 signed token (
data-cs-ctx) usingwp_salt('auth'), ensuring tamper-proof display filters and privacy controls without breaking full-page caching. - Security: Enforced server-side
querySectorconstraints in AJAX queries to prevent unauthorized sector enumeration. - Security: Excluded password-protected case studies from queries and automatically redacted excerpts and details.
- Security: Sanitized custom CSS color properties against invalid characters, delimiter breaking, and script injection.
- Fixed: Bento grid layout overflow at narrow viewports resolved with explicit column and row span mapping per container breakpoint.
- Fixed: Eliminated duplicate dialog roles on modal wrappers and ensured full screen-reader compliance with dialog semantics on the inner dialog.
- Fixed: Corrected random order pagination anomalies by enforcing deterministic date order fallback on paged queries.
- Fixed: Restored modal scroll lock CSS with overflow hidden on html and body and dynamic scrollbar width compensation (
--rawnaq-cs-sbw). - Fix: Random ordering is now treated as newest-first when Load more uses AJAX, so cards no longer repeat or go missing between pages.
- Improved: Admin dashboard redesign.
- Improved: Upgraded Case-Study Grid to modern container queries (
@container rawnaqcs) with container-type isolated on a stage wrapper to prevent modal containment traps. - Improved: Enhanced keyboard and screen reader accessibility (WCAG 2.2 AA) by replacing clickable articles with real card trigger buttons or links inside headings.
- Improved: Touch swipe gestures on modal gallery slider via pointer events (40px threshold) with polite live slide announcements and eager loading for initial images.
- Improved: Client-side filtering automatically reveals matching hidden projects up to chunk size so filtered results never look empty.
- Improved: Replaced card emoji meta icons with clean, accessible inline SVGs.
- Improved: Internationalized all frontend messages and status strings via
rawnaqCaseStudy.i18nwith support for live counts and empty states. - Improved: Comprehensive
prefers-reduced-motionsupport across card hover, animations, modal backdrops, and gallery sliders. - Added: Introduced
.rawnaq-cs-stagecontainer element providing isolated inline-size containment. - Added: Polite live status region (
.rawnaq-cs-status) announcing visible project counts and empty search states. - Added: Inline AJAX error alert container with a localized Retry button.
- Added: Full builder parity across Gutenberg and Divi with controls for orderby, order, query sector, load chunk, and text color.
- Security: Sanitized Floating Dock and mobile action trigger tooltip and label construction against potential HTML/script injection from custom TOC titles.
- Security: Rebuilt mobile floating action buttons using standard DOM creation and strict attribute assignment, avoiding HTML string concatenation with localized text.
- Fixed: Excluded TOC title and internal module headings from auto-generated table of contents lists when the widget is placed within content scopes.
- Fixed: Wrapped scope selector resolution in a robust fallback pipeline (entry-content, article, post-content, main, body) with graceful warning to prevent DOMException errors on malformed CSS selectors.
- Fixed: Resolved sticky table of contents and top progress bar vertical alignment overlap when the WordPress Admin Bar is present on desktop and mobile viewports.
- Fixed: Resolved entity double-encoding in heading titles so ampersands, quotes, and mathematical operators render cleanly in TOC links without visible
&. - Fixed: Existing heading ID detection regex now strictly targets
idattributes and avoids false matches againstdata-idoraria-id. - Fixed: Registered
the_contentheading filter at priority 8 beforedo_blocksand added self-sufficient static cache in markup renderer so server-side TOC reliably outputs before blocks or inside template parts. - Fixed: Restricted server-side heading extraction and anchor injection to the main queried post in the loop, preventing secondary query loops from altering heading lists or post content.
- Improved: Upgraded scrollspy active section tracking from IntersectionObserver to a resilient scroll-position calculation that accounts for admin bar offsets, bottom-of-page thresholds, and instant jump navigation.
- Improved: Table of contents list accessibility — moved glow tracker indicator out of unordered list markup into a wrapper container for strict HTML5/WCAG compliance.
- Improved: Keyboard arrow-key navigation now dynamically traverses only visible TOC links, respecting search filters and collapsed sub-sections.
- Improved: Clicking a TOC link moves focus directly to the destination heading for seamless screen reader and keyboard accessibility (WCAG 2.2).
- Improved: Set heading scrollMarginTop dynamically to align with scroll offsets and re-scrolls to initial URL hashes after full window load.
- Improved: Added fallback clipboard copying via hidden element when navigator.clipboard API is unavailable, with screen reader live region announcements.
- Improved: Cleaned up redundant ARIA landmark roles and link tabindex attributes across Elementor, Gutenberg, and Divi templates.
- Improved: Internationalization (i18n) overhaul for Scroll Progress + TOC with translatable strings via
wp_localize_script(rawnaqSPT.i18n) andlanguages/rawnaq.pot. - Improved: Replaced UI emojis (reading book, chain link, up arrow, menu icon) with accessible inline SVG icons (
aria-hidden="true"). - Improved: Multilingual heading slug generation with Unicode property escapes (
\p{L}\p{N}\p{M}) for Bengali, Arabic, and other non-Latin scripts, with automatic document-wide ID uniqueness verification. - Improved: Unicode-safe slugification for manual TOC anchors preserving non-Latin scripts without percent-encoding.
- Improved: URL hash synchronization defaults to off across all builders; when enabled, updates the URL hash with 300ms debounce on scroll stop and instant updates on link clicks.
- Improved: Idempotent lifecycle management, Elementor scoped widget initialization, and single document-level click listener for floating action buttons (FABs).
- Improved: Single-instance guard preventing duplicate page-level progress bars or rings, with informative console logging in debug mode.
- Improved: Floating Dock integration using
MutationObserverwith a 5-second graceful fallback instead of hardcoded timeouts. - Added: Server-side rendering (SSR) for Table of Contents with automatic heading anchor ID injection on
the_content(priority 8), improving SEO and eliminating Cumulative Layout Shift (CLS). Filterable viarawnaq_spt_ssr_enabled. - Added: "Progress based on" setting with options for Whole page, Article/content area, or Custom CSS selector (
progressTargetandprogressSelector) with accurate bounded scroll percentage math. - Added: Unified single markup renderer (
rawnaq_spt_markup) and configuration sanitizer (rawnaq_spt_cfg_sanitize) providing full parity across Elementor, Gutenberg, and Divi Builder. - Added: Gutenberg block editor InspectorControls for progress target, progress selector, click-to-top, collapsible TOC, URL hash sync, and section reading time badges.
- Added: Divi Builder parity controls for scroll progress target, selector, TOC source, manual items, heading levels, collapsed subheadings, scroll offset, URL hash sync, floating dock attachment, and timeline sync.
- Added: Configurable reading speed in words per minute (WPM, default 200, filter
rawnaq_spt_wpm) with automatic CJK character support (500 characters per minute) and exclusion of comments, scripts, styles, and navigation from word counts. - Added: Gutenberg block alignment (
align: ['wide', 'full']) and HTML anchor (anchor: true) block supports.
- Security: Implemented signed HMAC-SHA256 timestamp tokens (rawnaq_ts) with 7-day validity to prevent replay attacks and bot flooding on cached pages.
- Security: Added per-IP rate limiting (5 submissions / 10 min per form, 30 / hour site-wide) with hashed transient keys, returning HTTP 429 when exceeded.
- Security: Hardened file uploads by storing files in a protected, non-executable folder (uploads/rawnaq-forms/) with access denials, random 12-char filename prefixes, and authenticated admin download streaming.
- Security: Blocked SVG, HTML, PHP, executable, and script MIME types unconditionally; enforced server-side max size and accept restrictions.
- Security: Canvas signatures are now securely validated and saved as PNG files to the protected uploads directory rather than stored as raw base64 text in database or email notifications.
- Security: Added HMAC signature header (X-Rawnaq-Signature) with configurable secret for outgoing webhooks, alongside SSRF private IP protections.
- Added: Submitter auto-responder email with customizable subject, sender name, plain/branded HTML templates, and personalized tokens ({name}, {first_name}, {last_name}, {email}, {site_title}).
- Added: Submissions admin manager overhaul featuring filtering by form, read/unread status, and date range; search across all field values; and private admin notes.
- Added: Dedicated 5-section submission detail screen (Fields, Files & Signatures, Delivery Log, UTM & Campaign Attribution, Consent & Privacy Record) with quick Mark Read / Mark Unread toggle.
- Added: Filtered CSV export with full spreadsheet formula injection sanitization.
- Added: Field-level help text across Gutenberg, Elementor, and Divi, seamlessly connected to input controls via aria-describedby.
- Added: Single source of truth option schema (rawnaq_smart_form_option_schema) providing unified option names and defaults across all builders.
- Added: Preset picker with instant "Apply Preset" action and visual field reordering (Up / Down) in the Block Editor (Gutenberg).
- Added: Divi visual warning banner when custom JSON syntax is invalid.
- Added: Admin settings connection test buttons for Mailchimp, test emails, and test webhooks.
- Improved: Upgraded form accessibility to WCAG 2.2 AA with aria-invalid, aria-describedby, fieldset/legend groupings, keyboard arrow-key navigation for star ratings, and accessible signature typing alternative.
- Improved: Multi-step forms now utilize an ordered progress list (
- ) with aria-current="step" and live screen reader step announcements.
- Improved: Nonce refresh public endpoint (rawnaq_sf_token) with automatic single-retry mechanism for full-page cached pages.
- Improved: Contact resolver intelligently maps first and last names, email addresses, and phone numbers for Reply-To headers, Mailchimp merge tags, HubSpot context, and entry titles.
- Improved: Mailchimp integration now strictly requires explicit opt-in consent and supports double opt-in (pending) status.
- Improved: WordPress core Privacy Tools integration: personal data export and eraser now query indexed email meta (_rawnaq_sf_email).
- Improved: Full support for prefers-reduced-motion in animations, transitions, and celebration confetti.
- Improved: plugin title, description and readme for clearer discovery.
- Fixed: 60-second duplicate submission guard prevents multiple duplicate emails and database entries when visitors double-click submit.
- Fixed: Prevented orphan uploads by safely unlinking all temporary files on early validation failure, duplicate guard, or fatal delivery errors.
- Fixed: Form attachment downloads now include RFC 6266 filename* UTF-8 encoding alongside an ASCII fallback header for cross-browser compatibility.
- Fixed: Entries menu unread count badge now strictly checks the rawnaq_smart_form_can_manage_entries capability helper.
- Fixed: Hidden legacy WhatsApp toggle in Elementor to prevent accidental or unwanted WhatsApp redirects.
- Fixed: Eliminated redundant CSS rules and improved color contrast ratios across all themes to meet WCAG AA standards.
- Fixed: legacy upload migration no longer flags files already stored in the protected folder.
- Fixed: Preserved uploaded files and confirmed submission when lead is saved as fallback entry despite email delivery failure.
- Fixed: Cleared duplicate submission transient when both lead logging and email delivery fail to allow immediate resubmission.
- Improved: Cleaned up unused localized i18n strings in Smart Form frontend script registration.
- Security: Rate limiter now tracks repeated validation failures with a filterable threshold (rawnaq_smart_form_rate_limit_fail_max) to mitigate brute-force attempts without locking out normal users.
- Improved: Added automatic background migration of legacy uploads into the protected folder with batched processing and dismissible admin notice.
- Floating Dock: DST-aware IANA business timezones (legacy fixed UTC offsets still supported).
- Editor parity: Gutenberg now exposes Hub Diagram export toggle, Flow Chart zoom/pan toggle, Scroll Story pin offset, and Scroll Progress content-selector + hide-on-short-page controls to match Elementor.
- Accessibility: Case-Study modal focus trap, focus return, and aria-modal; arrow-key gallery navigation; Scroll Story progress dots support arrow/Home/End keys; safer link handling on Flow Chart nodes.
- Polish: corrected mis-encoded characters in Scroll Timeline presets and shared strings.
- 3D Tilt Card: optional flip / back-face with hover or click trigger, back title/description/CTA, and back styling.
- Flow Chart: per-node connector (edge) labels and swimlane bands, included in PNG/SVG export.
- Added Divi Visual Builder support — all 10 free modules now include dedicated Divi modules.
- Updated plugin title for clarity.
- Initial public release on WordPress.org.
- Modular Elementor + Gutenberg library: Hub Diagram, 3D Tilt Card, Scroll Sync Timeline, Floating Dock (WhatsApp mode), Flow Chart, Scroll Progress + TOC, Bento Grid, Scroll Story Chapters, Smart Form, Case-Study Grid.
- On-demand assets, vanilla JS frontend, Elements Manager, WPML config, and documented optional third-party services (Fonts, reCAPTCHA, WhatsApp, webhooks).