BlockXpert – Professional Gutenberg Blocks for WordPress

? > Enterprise-Grade WordPress Plugin | 8 AI-Driven Gutenberg Blocks | Production Ready? ? A powerful, professionally architected set of AI-powered Gutenberg blocks for WordPress, featuring advanced animations, AI recommendations, and WooCommerce integration.? ? —? ?

(✠Features?

?

>񈄠AI-Powered Blocks?

• AI FAQ Block – Automatically generate and manage FAQs?
• AI Recommendations – Smart content suggestions?
• AI Product Recommendations – Intelligent WooCommerce product suggestions?
  ?

<𺌠Design & Animation Blocks?

• Text Animation =𰈠- GSAP-powered text animations with 5 easing functions (easeInOut, easeIn, easeOut, linear, bounce)?
• Product Slider – Smooth GSAP carousel with 500ms transitions & momentum?
• Product Carousel – Autoplay product showcase with smooth GSAP animations?
• Advanced Post Block – Multi-layout post display (Grid, Masonry, Slider, Ticker) with smooth transitions?
• Post Grid – Flexible post grid with advanced filtering?
  ?

™☏︠Professional Features?

• 8 Independent Gutenberg Blocks – All fully customizable?
• Centralized Admin Panel – Enable/disable blocks with one click + AJAX save without reload?
• Smart Settings Management – AJAX-based settings with real-time toast notifications?
• Service Architecture – DI container, interfaces, and service patterns?
• REST API Integration – Full API support for blocks & settings management?
• Caching Layer – Performance optimization built-in?
• Professional Logging – File-based logging with rotation?
• WooCommerce Ready – Full WooCommerce block integration?
  ?
  —?
  ?

񆠠Documentation?

?

Quick Reference?

• =񀐠Folder Structure Quick Guide – Navigate the codebase?
• =񈈏︠Block Development Guide – Create new blocks from template?
• =񂠠Maintainability Review – Architecture assessment?
  ?

Detailed Guides?

• =񂰠Folder Structure Analysis – Complete structure review (10 sections)?
• =𙴠Maintainability Improvements – Step-by-step implementation guide?
  ?
  —?
  ?

𰈠Quick Start?

?

Prerequisites?

• WordPress 5.8+ (Tested up to 6.7)?
• Node.js 14+?
• PHP 7.4+ (Tested up to 8.3)?
• npm or yarn?
  ?

Installation?

?
1. Clone and install😕
bash?
git clone https://github.com/nftushar/blockxpert.git?
cd blockxpert?
npm install?
composer install??
?
2. Build the plugin😕
bash?
npm run build??
?
3. Activate in WordPress😕
– Navigate to Plugins in WordPress admin?
– Find “BlockXpert” and click “Activate”?
– All 8 blocks are active by default?
– Manage blocks in Settings ’℠BlockXpert?
?
—?
?

񉠠Folder Structure?

?
?
blockxpert/?
──┠blockxpert.php ℠Main plugin entry?
──┠package.json ℠npm dependencies?
──┠composer.json ℠PHP dependencies?
?
──┠src/ ℠React/JavaScript source code?
┠ ──┠blocks/ ℠8 Gutenberg blocks?
┠ ┠ ──┠text-animation/ ℠GSAP animations (?
┠ ┠ ──┠product-slider/ ℠Product carousel?
┠ ┠ ──┠ai-faq/ ℠AI FAQ accordion?
┠ ┠ ──┠post-grid/ ℠Advanced posts?
┠ ┠ ──┠product-carousel/ ℠WooCommerce carousel?
┠ ┠ ──┠advanced-post-block/℠Multi-layout posts?
┠ ┠ ──┠ai-recommendations/ ℠AI suggestions?
┠ ┠ ──┠ai-product-recommendations/ ℠Smart products?
┠ ──┠shared/ ℠Reusable utilities?
┠ ──┠components/ ℠React components?
┠ ──┠hooks/ ℠Custom React hooks?
┠ ──┠services/ ℠API clients?
┠ ──┠context/ ℠Global state?
┠ ──┠utils/ ℠Helper functions?
?
──┠includes/ ℠PHP backend?
┠ ──┠classes/ ℠Service implementations?
┠ ──┠interfaces/ ℠Service contracts?
┠ ──┠admin/ ℠WordPress admin UI?
┠ ──┠assets/ ℠Admin styles/scripts?
?
──┠build/ ℠Compiled assets (webpack output)?
┠ ──┠blocks/ ℠Individual block builds?
?
──┠vendor/ ℠Composer dependencies?
──┠languages/ ℠Translations?
──┠docs/ ℠Additional documentation??
?
=񅠠See FOLDER_STRUCTURE_QUICK_REF.md for detailed breakdown?
?
—?
?

񈈏︠Development Commands?

?

Building?

`bash?

npm run build # Development build?
npm run build:prod # Production build (optimized)?
npm start # Watch mode with auto-rebuild?
npm run clean # Clear build folder?
`?
?

Code Quality?

`bash?

npm run lint # Check code quality (ESLint)?
npm run format # Auto-format code (Prettier)?
npm run validate # Run all checks?
`?
?

PHP Composer?

`bash?

composer install # Install PHP dependencies?
composer install –no-dev # Production (no dev dependencies)?
`?
?
—?
?

>񈄠Architecture Highlights?

?

Backend (PHP)?

• Dependency Injection Container – Professional service management?
• Service Interfaces – Clear contracts for extensibility?
• Logger Service – File-based logging with rotation?
• Cache Layer – Performance optimization?
• AI Provider Abstraction – Pluggable AI system support?
• REST API – WordPress REST API integration?
  ?

Frontend (React/GSAP)?

• 8 Independent Blocks – Full Gutenberg integration?
• GSAP Animations – Smooth, performant animations?
• React Context – Global state management?
• Custom Hooks – useAPI, useCache, useDebounce?
• Shared Components – Reusable UI components?
• Error Handling – ErrorBoundary for reliability?
  ?

Build System?

• Webpack via wp-scripts – Optimized bundling?
• SCSS Compilation – Modern styling?
• Asset Management – Automatic asset generation?
• Cache-busting – Automatic cache invalidation?
  ?
  —?
  ?

񂰠Block Information?

?
| Block | Type | Features | Status |?
|——-|——|———-|——–|?
| Text Animation | Design | GSAP animations, 5 easing functions | ✠Production |?
| Product Slider | WooCommerce | Carousel, 500ms transitions | ✠Production |?
| AI FAQ | Content | AI-powered accordion | ✠Production |?
| AI Recommendations | AI | Dynamic suggestions | ✠Production |?
| Post Grid | Posts | Complex layouts, filters | ✠Production |?
| Product Carousel | WooCommerce | Autoplay, pagination | ✠Production |?
| Advanced Post Block | Posts | Grid, Masonry, Slider, Ticker | ✠Production |?
| AI Product Recommendations | WooCommerce | Smart filtering | ✠Production |?
?
<𻼠All 8 blocks are production-ready and fully tested?
?
—?
?

<𴼠Creating a New Block?

?
1. Read the guide: BLOCK_DEVELOPMENT_GUIDE.md?
2. Create folder: src/blocks/my-block/?
3. Use template: Copy structure from existing block?
4. Build: npm run build?
5. Test: Verify in WordPress editor?
?
—?
?

񂠠Production Ready?

?
✠All 8 blocks compiled and verified ?
✠Professional architecture with DI patterns ?
✠Comprehensive error handling ?
✠Performance optimized (caching, lazy loading) ?
✠REST API endpoints available ?
✠WooCommerce integration tested ?
✠GSAP animations smooth and performant ?
✠Admin settings implemented ?
?
Current Version: 1.2.0 ?
Status: Production Ready ?
?
—?
?

<𻌠GSAP Animation Guide?

?
BlockXpert leverages GSAP 3.14 for smooth, performant animations across multiple blocks:?
?

Text Animation Block?

• 5 Easing Functions😕
  • easeInOut – Smooth acceleration and deceleration?
  • easeIn – Gradual acceleration from rest?
  • easeOut – Gradual deceleration to rest?
  • linear – Constant velocity?
  • bounce – Fun elastic bounce effect?
    ?
• Real-time Preview: See animations instantly in the editor?
• Customizable Duration: Control animation speed (100ms – 5000ms)?
• Stagger Support: Multi-element animations with delay?
  ?

Product & Carousel Blocks?

• 500ms Transitions: Smooth momentum-based slides?
• Hardware Acceleration: GPU-optimized animations?
• Touch Support: Smooth swipe animations on mobile?
• Auto-play: Configurable interval-based animation?
  ?

Performance?

• RequestAnimationFrame Optimized: 60 FPS smooth animations?
• Memory Efficient: GSAP 3 is lightweight (~15KB minified)?
• Auto-Cleanup: Animations properly destroyed on unmount?
• Transform3d: GPU acceleration for smooth performance?
  ?

Usage Example?

`javascript?

import gsap from ‘gsap’;?
?
// Simple animation?
gsap.to(‘.element’, {?
duration: 1,?
opacity: 1,?
x: 100,?
ease: ‘power2.inOut’?
});?
?
// Staggered animation (used in Text Animation block)?
gsap.to(‘.text-chars’, {?
duration: 0.5,?
opacity: 1,?
y: 0,?
stagger: 0.05, // 50ms delay between each element?
ease: ‘back.out’?
});?
?
// Carousel animation (used in Product Slider)?
gsap.to(‘.carousel-track’, {?
duration: 0.5,?
x: -slideWidth,?
ease: ‘power2.inOut’?
});?
`?
?
—?
?

񂠠Changelog?

?

1.2.0 – March 28, 2026?

Major Update: Enhanced Admin UX with AJAX Settings & Real-time Feedback?
?

(✠New Features?

• AJAX-Based Settings Save – Save block settings without page reload?
• Real-time Toast Notifications – Success, error, warning, and info notifications?
• REST API Endpoint – New /blockxpert/v1/save-settings for plugin settings?
• Enhanced Admin UI – Improved visual feedback during settings changes?
  ?

<𺌠GSAP Improvements?

• Optimized GSAP animations across all animation blocks?
• Improved Text Animation block with smoother easing transitions?
• Enhanced Product Slider momentum animations?
• Better animation cleanup on block unmount?
• GPU-accelerated transforms for better performance?
  ?

=𖰠Bug Fixes?

• Fixed form submission behavior in admin settings?
• Improved error handling in REST API endpoints?
• Enhanced nonce verification for security?
• Better handling of block state updates?
  ?

=񆠠Documentation?

• Added comprehensive GSAP Animation Guide?
• Updated admin settings documentation?
• Enhanced README with new features overview?
  ?

=𙴠Technical Improvements?

• Refactored form handling to use AJAX?
• Added loading states to submit button?
• Improved error messages for user feedback?
• Better permission checking in REST endpoints?
  ?

1.1.0 – Previous Release?

• Initial 8 blocks implementation?
• AI FAQ and Product Recommendations?
• GSAP animations for Text Animation block?
• Professional logging and caching?
• WooCommerce integration?
  ?

1.0.0 – Previous Release?

• Initial blocks implementation?
  ?
  —?
  ?

1. Fork the repository?
2. Create a feature branch: git checkout -b feature/name?
3. Make your changes?
4. Build and test: npm run build?
5. Format code: npm run format?
6. Commit with clear message?
7. Submit a pull request?
   ?
   See BLOCK_DEVELOPMENT_GUIDE.md for development standards.?
   ?
   —?
   ?

񁀠License?

?
GPL v2 or later?
?
See license.txt for full license text.?
?
—?
?

<𶄠Support & Troubleshooting?

?

Common Issues?

• Blocks not appearing? ’℠Clear WordPress cache and rebuild: npm run clean && npm run build?
• Build errors? ’℠Delete node_modules and reinstall: rm -rf node_modules && npm install?
• Admin page not loading? ’℠Check PHP error logs in includes/logs/?
  ?

Getting Help?

• =񅠠Read FOLDER_STRUCTURE_QUICK_REF.md?
• =񈈏︠Check MAINTAINABILITY_IMPROVEMENTS_GUIDE.md?
• =𖰠Report issues on GitHub Issues?
  ?
  —?
  ?

𩀠Author?

?
NF Tushar ?
GitHub: @nftushar?
?
—?
?

𕴠Links?

?
– GitHub: https://github.com/nftushar/blockxpert?
– WordPress.org: https://wordpress.org/plugins/blockxpert/?
– Documentation: See files in root directory?
?
—?
?
Last Updated: Production Release ?
Status: ✠Fully Production Ready?
?