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 …

BlockXpert vs BotWriter – AI Writer & SEO Content Generator