NF Tushar

<p>? <strong>Professional Gutenberg Blocks for WordPress</strong> †Powered by AI and GSAP animations? ? A comprehensive WordPress plugin featuring 8 production-ready Gutenberg blocks with AI integration, advanced animations, and WooCommerce support.? ? —? ?</p>
<h3>Features?</h3>
<p>?</p>
<h3>AI-Powered Blocks?</h3>
<ul>
<li><strong>AI FAQ Block</strong> †Automatically generate and manage FAQs using AI?</li>
<li><strong>AI Recommendations</strong> †Smart content suggestions powered by OpenAI?</li>
<li><strong>AI Product Recommendations</strong> †Intelligent WooCommerce product recommendations?<br />
?</li>
</ul>
<h3>Animation & Design Blocks?</h3>
<ul>
<li><strong>Text Animation</strong> †GSAP-powered animations with 5 easing functions (easeInOut, easeIn, easeOut, linear, bounce)?</li>
<li><strong>Product Slider</strong> †Smooth GSAP carousel with 500ms transitions and momentum?</li>
<li><strong>Product Carousel</strong> †Autoplay-enabled product showcase with smooth animations?</li>
<li><strong>Advanced Post Block</strong> †Multi-layout post display (Grid, Masonry, Slider, Ticker)?</li>
<li><strong>Post Grid</strong> †Flexible post grid with advanced filtering?<br />
?</li>
</ul>
<h3>Professional Architecture?</h3>
<ul>
<li><strong>8 Independent Gutenberg Blocks</strong> †Fully customizable and modular?</li>
<li><strong>Admin Settings Panel</strong> †Enable/disable blocks with AJAX save (no page reload)?</li>
<li><strong>Real-time Notifications</strong> †Toast notifications for all user actions?</li>
<li><strong>Service Architecture</strong> †Dependency injection container and interface-based design?</li>
<li><strong>REST API</strong> †Full REST API endpoints for programmatic access?</li>
<li><strong>Caching System</strong> †Built-in performance optimization layer?</li>
<li><strong>Professional Logging</strong> †File-based logging with rotation?</li>
<li><strong>WooCommerce Ready</strong> †Full integration and compatibility?<br />
?<br />
—?<br />
?</li>
</ul>
<h3>Requirements?</h3>
<p>?<br />
– <strong>WordPress</strong> 5.8+ (Tested up to 6.7)?<br />
– <strong>PHP</strong> 7.4+ (Tested up to 8.3)?<br />
– <strong>Node.js</strong> 14+ (for development)?<br />
– <strong>npm</strong> or <strong>yarn</strong>?<br />
?<br />
—?<br />
?</p>
<h3>Installation?</h3>
<p>?</p>
<h3>Quick Start?</h3>
<pre><code>`bash?
</code></pre>
<p>git clone https://github.com/nftushar/blockxpert.git?<br />
cd blockxpert?<br />
npm install?<br />
composer install?<br />
npm run build?<br />
    `?<br />
?</p>
<h3>WordPress Activation?</h3>
<ol>
<li>Navigate to <strong>Plugins</strong> in WordPress admin?</li>
<li>Find <strong>BlockXpert</strong> and click <strong>Activate</strong>?</li>
<li>All 8 blocks are active by default?</li>
<li>Manage blocks in <strong>Settings ℠BlockXpert</strong>?<br />
?<br />
—?<br />
?</li>
</ol>
<h3>Development?</h3>
<p>?</p>
<h3>Build Commands?</h3>
<pre><code>`bash?
</code></pre>
<p>npm run build              # Development build?<br />
npm run build:prod        # Production build (optimized)?<br />
npm start                 # Watch mode with auto-rebuild?<br />
npm run clean             # Clear build folder?<br />
    `?<br />
?</p>
<h3>Code Quality?</h3>
<pre><code>`bash?
</code></pre>
<p>npm run lint              # Check code quality (ESLint)?<br />
npm run format            # Auto-format code (Prettier)?<br />
npm run validate          # Run all checks?<br />
    `?<br />
?</p>
<h3>PHP Dependencies?</h3>
<pre><code>`bash?
</code></pre>
<p>composer install          # Install dependencies?<br />
composer install –no-dev # Production (no dev dependencies)?<br />
    `?<br />
?<br />
—?<br />
?</p>
<h3>Project Structure?</h3>
<p>?<br />
    <code>?<br />
blockxpert/?<br />
──┠blockxpert.php                    ℠Main plugin entry?<br />
──┠package.json                      ℠npm dependencies?<br />
──┠composer.json                     ℠PHP dependencies?<br />
──┠banner-772x250.png                ℠Plugin banner (WordPress.org)?<br />
──┠icon-128x128.png                  ℠Plugin icon?<br />
?<br />
──┠src/                              ℠React/JavaScript source?<br />
┠  ──┠blocks/                       ℠8 Gutenberg blocks?<br />
┠  ┠  ──┠text-animation/?<br />
┠  ┠  ──┠product-slider/?<br />
┠  ┠  ──┠ai-faq/?<br />
┠  ┠  ──┠post-grid/?<br />
┠  ┠  ──┠product-carousel/?<br />
┠  ┠  ──┠advanced-post-block/?<br />
┠  ┠  ──┠ai-recommendations/?<br />
┠  ┠  ──┠ai-product-recommendations/?<br />
┠  ──┠shared/                       ℠Reusable utilities?<br />
┠      ──┠components/               ℠React components?<br />
┠      ──┠hooks/                    ℠Custom hooks?<br />
┠      ──┠services/                 ℠API clients?<br />
┠      ──┠context/                  ℠Global state?<br />
┠      ──┠utils/                    ℠Helpers?<br />
?<br />
──┠includes/                         ℠PHP backend?<br />
┠  ──┠classes/                      ℠Service classes?<br />
┠  ──┠interfaces/                   ℠Service contracts?<br />
┠  ──┠admin/                        ℠Admin UI?<br />
┠  ──┠assets/                       ℠Admin styles/scripts?<br />
?<br />
──┠build/                            ℠Compiled assets?<br />
──┠vendor/                           ℠Composer dependencies?<br />
──┠languages/                        ℠Translation files?</code>?<br />
?<br />
—?<br />
?</p>
<h3>Block Specifications?</h3>
<p>?<br />
| Block | Type | Features | Status |?<br />
|——-|——|———-|——–|?<br />
| Text Animation | Design | GSAP animations, 5 easing functions | ✠Production |?<br />
| Product Slider | WooCommerce | Carousel, momentum transitions | ✠Production |?<br />
| AI FAQ | Content | AI-powered accordion | ✠Production |?<br />
| AI Recommendations | AI | Dynamic suggestions | ✠Production |?<br />
| Post Grid | Posts | Advanced filters and layouts | ✠Production |?<br />
| Product Carousel | WooCommerce | Autoplay, pagination | ✠Production |?<br />
| Advanced Post Block | Posts | Grid, Masonry, Slider, Ticker | ✠Production |?<br />
| AI Product Recommendations | WooCommerce | Smart product filtering | ✠Production |?<br />
?<br />
—?<br />
?</p>
<h3>GSAP Animations?</h3>
<p>?<br />
BlockXpert uses <strong>GSAP 3.14</strong> for smooth, performant animations:?<br />
?</p>
<h3>Text Animation Block?</h3>
<ul>
<li><strong>5 Easing Functions</strong> †easeInOut, easeIn, easeOut, linear, bounce?</li>
<li><strong>Real-time Preview</strong> †See animations instantly in editor?</li>
<li><strong>Customizable Duration</strong> †100ms to 5000ms animation speed?</li>
<li><strong>Stagger Support</strong> †Multi-element animations with delays?<br />
?</li>
</ul>
<h3>Product Blocks?</h3>
<ul>
<li><strong>500ms Transitions</strong> †Smooth momentum-based slides?</li>
<li><strong>Hardware Acceleration</strong> †GPU-optimized for performance?</li>
<li><strong>Touch Support</strong> †Smooth swipe animations on mobile?</li>
<li><strong>Auto-play</strong> †Interval-based automatic animation?<br />
?</li>
</ul>
<h3>Performance?</h3>
<ul>
<li><strong>RequestAnimationFrame Optimized</strong> †60 FPS smooth animations?</li>
<li><strong>Lightweight</strong> †GSAP 3 is only ~15KB minified?</li>
<li><strong>Auto-Cleanup</strong> †Proper animation destruction on unmount?</li>
<li><strong>GPU Acceleration</strong> †Transform3D for smooth performance?<br />
?<br />
—?<br />
?</li>
</ul>
<h3>Architecture?</h3>
<p>?</p>
<h3>Backend (PHP)?</h3>
<ul>
<li><strong>Dependency Injection</strong> †Professional service container?</li>
<li><strong>Service Interfaces</strong> †Clear contracts for extensibility?</li>
<li><strong>Logger Service</strong> †File-based logging with rotation?</li>
<li><strong>Cache Layer</strong> †Performance optimization?</li>
<li><strong>AI Provider Abstraction</strong> †Pluggable AI system support?</li>
<li><strong>REST API</strong> †WordPress REST API integration?<br />
?</li>
</ul>
<h3>Frontend (React)?</h3>
<ul>
<li><strong>8 Independent Blocks</strong> †Full Gutenberg integration?</li>
<li><strong>GSAP Animations</strong> †Smooth, performant effects?</li>
<li><strong>React Context</strong> †Global state management?</li>
<li><strong>Custom Hooks</strong> †useAPI, useCache, useDebounce?</li>
<li><strong>Error Boundaries</strong> †Reliability and error handling?<br />
?</li>
</ul>
<h3>Build System?</h3>
<ul>
<li><strong>Webpack (wp-scripts)</strong> †Optimized bundling?</li>
<li><strong>SCSS Compilation</strong> †Modern styling?</li>
<li><strong>Auto Asset Generation</strong> †Automatic bundling?</li>
<li><strong>Cache Busting</strong> †Invalidation built-in?<br />
?<br />
—?<br />
?</li>
</ul>
<h3>Configuration?</h3>
<p>?</p>
<h3>Admin Settings?</h3>
<p>Access block settings at <strong>Settings ℠BlockXpert</strong>😕<br />
– Enable/disable individual blocks?<br />
– Configure block behavior?<br />
– Manage AJAX-based settings?<br />
– Real-time notification feedback?<br />
?</p>
<h3>API Endpoints?</h3>
<ul>
<li><code>POST /wp-json/blockxpert/v1/save-settings</code> †Save plugin settings?</li>
<li>Full REST API documentation included?<br />
?<br />
—?<br />
?</li>
</ul>
<h3>Creating New Blocks?</h3>
<p>?<br />
1. Create folder: <code>src/blocks/my-block/</code>?<br />
2. Copy structure from existing block?<br />
3. Edit block files (index.js, block.json, view.js)?<br />
4. Build: <code>npm run build</code>?<br />
5. Test in WordPress editor?<br />
?<br />
—?<br />
?</p>
<h3>Version History?</h3>
<p>?</p>
<h3>1.2.0 – March 28, 2026?</h3>
<p><strong>Enhanced Admin UX with AJAX & Real-time Feedback</strong>?<br />
– AJAX-based settings save (no page reload)?<br />
– Real-time toast notifications?<br />
– REST API endpoint for settings?<br />
– WordPress 6.7 compatibility?<br />
– PHP 8.3 tested and verified?<br />
?</p>
<h3>1.1.0?</h3>
<ul>
<li>Initial 8 blocks implementation?</li>
<li>AI FAQ and Product Recommendations?</li>
<li>GSAP animations?</li>
<li>Professional logging and caching?<br />
?</li>
</ul>
<h3>1.0.0?</h3>
<ul>
<li>Initial release with core blocks?<br />
?<br />
—?<br />
?</li>
</ul>
<h3>Contributing?</h3>
<p>?<br />
1. Fork the repository?<br />
2. Create a feature branch: <code>git checkout -b feature/name</code>?<br />
3. Make your changes?<br />
4. Build and test: <code>npm run build</code>?<br />
5. Format code: <code>npm run format</code>?<br />
6. Submit a pull request?<br />
?<br />
—?<br />
?</p>
<h3>License?</h3>
<p>?<br />
GPL v2 or later †See <a href="LICENSE.txt" rel="nofollow ugc">LICENSE.txt</a> for full license?<br />
?<br />
—?<br />
?</p>
<h3>Support?</h3>
<p>?</p>
<h3>Troubleshooting?</h3>
<ul>
<li><strong>Blocks not appearing?</strong> ℠<code>npm run clean && npm run build</code>?</li>
<li><strong>Build errors?</strong> ℠Delete node_modules: <code>rm -rf node_modules && npm install</code>?</li>
<li><strong>Admin issues?</strong> ℠Check PHP error logs?<br />
?</li>
</ul>
<h3>Resources?</h3>
<ul>
<li>GitHub: https://github.com/nftushar/blockxpert?</li>
<li>Issues: https://github.com/nftushar/blockxpert/issues?</li>
<li>WordPress.org: https://wordpress.org/plugins/blockxpert/?<br />
?<br />
—?<br />
?<br />
<strong>Author:</strong> NF Tushar  ?<br />
<strong>Status:</strong> ✠Production Ready  ?<br />
<strong>Version:</strong> 1.2.0?<br />
?</li>
</ul>


BlockXpert

? Professional Gutenberg Blocks for WordPress †Powered by AI and GSAP animations? ? A comprehensive WordPress plugin featuring 8 production-ready Gut …

Ibrahim

<p>AI Blocks Studio allows you to generate complete Gutenberg block sections using artificial intelligence. Simply describe what you want to create, and the plugin will generate the native WordPress blocks for you.</p>
<p>Features:<br />
* Support for OpenAI (GPT-4o), Google Gemini, Mistral AI, and Anthropic Claude.<br />
* Generates native WordPress blocks that are fully editable.<br />
* Easy-to-use admin interface for API configuration.<br />
* Modern block editor integration.</p>
<h3>External services</h3>
<p>This plugin uses third-party AI services to generate block content based on your prompts. Your prompts are sent to the AI provider you select in the settings.</p>
<ol>
<li>
<p><strong>OpenAI</strong></p>
<ul>
<li>Used for generating block structures and content.</li>
<li>Data sent: The text prompt you provide.</li>
<li><a href="https://openai.com/policies/terms-of-use" rel="nofollow ugc">Terms of Use</a></li>
<li><a href="https://openai.com/policies/privacy-policy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>
</li>
<li>
<p><strong>Google Gemini</strong></p>
<ul>
<li>Used for generating block structures and content.</li>
<li>Data sent: The text prompt you provide.</li>
<li><a href="https://policies.google.com/terms" rel="nofollow ugc">Terms of Service</a></li>
<li><a href="https://policies.google.com/privacy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>
</li>
<li>
<p><strong>Mistral AI</strong></p>
<ul>
<li>Used for generating block structures and content.</li>
<li>Data sent: The text prompt you provide.</li>
<li><a href="https://mistral.ai/terms/" rel="nofollow ugc">Terms of Use</a></li>
<li><a href="https://legal.mistral.ai/terms/privacy-policy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>
</li>
<li>
<p><strong>Anthropic (Claude)</strong></p>
<ul>
<li>Used for generating block structures and content.</li>
<li>Data sent: The text prompt you provide.</li>
<li><a href="https://www.anthropic.com/legal/consumer-terms" rel="nofollow ugc">Terms of Service</a></li>
<li><a href="https://www.anthropic.com/legal/privacy" rel="nofollow ugc">Privacy Policy</a></li>
</ul>
</li>
</ol>


AI Blocks Studio – for Gutenberg

Design Gutenberg blocks sections with AI (OpenAI, Gemini, Mistral, Claude).

BlockXpert vs AI Blocks Studio – for Gutenberg