Nova Gutenberg Blocks

Next-Generation Interactive Gutenberg Blocks for WordPress (Block API v3, Dynamic SSR, Schema.org JSON-LD)

A modular, enterprise-grade WordPress Gutenberg blocks suite designed for high-performance fintech, SaaS, and content platforms. Built following official WordPress Core development guidelines, leveraging modern Block API v3 (block.json), dynamic Server-Side Rendering (render.php) for zero layout shifts (CLS), and progressive client-side hydration in pure Vanilla JavaScript (zero jQuery).

🚀 Key Architectural Features

• Modern Block API v3 Standard: Each block is encapsulated with its own block.json declaring metadata, attributes, controls, and dependencies.
• Server-Side Dynamic Rendering (render.php): Pages render complete semantic HTML on initial server load. Ensures optimal Core Web Vitals (LCP, CLS) and 100% crawlability by search engine bots even when JavaScript execution is deferred.
• Progressive Client-Side Hydration: Lightweight Vanilla JavaScript (~3.8 KB) seamlessly attaches event listeners to sliders, calculation engines, and disclosure accordions without external framework overhead.
• Automated Schema.org JSON-LD Generation: The FAQ block automatically constructs and enqueues Google-compliant FAQPage microdata into wp_footer, securing eligibility for Google Rich Snippets in search results.
• React-Powered In-Editor Controls: Native WordPress Block Editor experience featuring InspectorControls, PanelBody, RangeControl, SelectControl, ColorPalette, and live inline RichText editing.
• Custom Block Category: Automatically registers a dedicated Nova Interactive Blocks section in the Gutenberg block inserter with priority placement.

📦 Included Blocks

1. Yield & ROI Calculator (nova-blocks/yield-calculator)

• Real-Time Compounding Engine: Computes interest formulas dynamically based on deposit amount, APY rate, duration (3 to 24 months), and compounding frequency (daily, monthly, annual): $$A = P \times \left(1 + \frac{r}{n}\right)^{nt}$$
• Interactive Range Slider: Custom range track with dynamic fill interpolation and quick-preset deposit chips ($2,500, $10,000, $25,000, $50,000).
• Live SVG Growth Metric: Animated progress meter visualizing portfolio growth against baseline deposit.
• Fully Customizable via Inspector: Configurable currency symbols, APY ranges, accent colors, and custom Call to Action (CTA) buttons.

2. Pricing & Tier Matrix (nova-blocks/pricing-matrix)

• Monthly / Annual Billing Switcher: Interactive animated toggle with configurable annual discount badge (e.g., -20%).
• Feature Comparison Cards: Responsive grid layout with highlighted "Most Popular" card, custom badges, and SVG checkmarks.
• Accessible Screen-Reader Markup: Fully compliant with WCAG 2.1 AA keyboard navigation and ARIA landmarks.

3. SEO FAQ Accordion & Schema (nova-blocks/faq-accordion)

• Accessible Accordion Pattern: WAI-ARIA compliant disclosure buttons (aria-expanded, aria-controls, role="region") with smooth CSS height interpolation.
• Dual Mode: Supports single-item accordion or multi-open configuration via block settings.
• Automated Schema.org FAQPage Rich Snippet: Parses questions and answers into valid JSON-LD graph enqueued in the document footer for maximum search engine visibility.

📂 Architecture & Directory Structure

nova-gutenberg-blocks/
├── nova-gutenberg-blocks.php        # Main plugin bootstrap & constants
├── package.json                    # Package metadata & linting scripts
├── README.md                       # Comprehensive documentation
├── includes/
│   ├── class-plugin.php            # Main OOP singleton & hook coordinator
│   ├── class-block-registry.php    # Block registration & asset enqueue manager
│   └── class-schema-generator.php  # Schema.org JSON-LD builder & footer injector
├── blocks/
│   ├── yield-calculator/
│   │   ├── block.json              # Block API v3 metadata & attribute schema
│   │   └── render.php              # Server-side dynamic render template
│   ├── pricing-matrix/
│   │   ├── block.json              # Pricing matrix schema & defaults
│   │   └── render.php              # SSR grid and switcher template
│   └── faq-accordion/
│       ├── block.json              # FAQ accordion schema & attributes
│       └── render.php              # Accordion markup & schema registration
└── assets/
    ├── css/
    │   ├── frontend.css            # Scoped frontend layout & typography
    │   └── editor.css              # Gutenberg editor canvas & sidebar adjustments
    └── js/
        ├── frontend.js             # Client-side calculator & accordion hydration
        └── blocks.js               # React/Gutenberg editor block definitions

🛠️ Installation & Usage

1. Clone or copy the plugin into your WordPress plugins directory:

   git clone https://github.com/Lelyaler/nova-gutenberg-blocks.git wp-content/plugins/nova-gutenberg-blocks

2. Activate the plugin via WordPress Admin > Plugins > Installed Plugins > Nova Gutenberg Blocks.
3. Open any Page or Post in the WordPress Block Editor (Gutenberg).
4. Click the + inserter and search for Nova or find Nova Interactive Blocks in the category list.
5. Insert Yield & ROI Calculator, Pricing & Tier Matrix, or SEO FAQ Accordion and customize via the sidebar Inspector.

🔒 Coding Standards & Performance

• PHP 8.2+ Strict Typing: Built with modern object-oriented PHP, typed properties, strict sanitization (esc_html, esc_attr, esc_url, wp_kses_post), and nonce/permission awareness.
• Zero jQuery: Entire frontend engine is written in modern Vanilla JS (ES6+) with zero third-party dependencies.
• Lighthouse Performance: Produces clean, semantic markup resulting in 98+ Performance and 100 SEO scores.

📄 License

GPL-2.0-or-later. Distributed under the terms of the GNU General Public License.