內容簡介
BlockXpert 是一款專業的 WordPress 外掛，提供 8 種可用於 Gutenberg 的區塊，結合 AI 功能與先進動畫，並支援 WooCommerce，讓網站設計更為靈活與互動。
【主要功能】
• AI FAQ 區塊：自動生成與管理常見問題
• AI 產品推薦：智慧化的 WooCommerce 產品建議
• GSAP 動畫：多種文本動畫效果
• 產品滑動區塊：流暢的產品展示旋轉木馬
• 多樣化佈局：靈活的文章顯示選項
• 即時通知：用戶操作的即時提示
開發者團隊
原文外掛簡介
? Professional Gutenberg Blocks for WordPress †Powered by AI and GSAP animations? ? A comprehensive WordPress plugin featuring 8 production-ready Gutenberg blocks with AI integration, advanced animations, and WooCommerce support.? ? —? ?
Features?
?
AI-Powered Blocks?
AI FAQ Block †Automatically generate and manage FAQs using AI?
AI Recommendations †Smart content suggestions powered by OpenAI?
AI Product Recommendations †Intelligent WooCommerce product recommendations?
?
Animation & Design Blocks?
Text Animation †GSAP-powered animations with 5 easing functions (easeInOut, easeIn, easeOut, linear, bounce)?
Product Slider †Smooth GSAP carousel with 500ms transitions and momentum?
Product Carousel †Autoplay-enabled product showcase with smooth animations?
Advanced Post Block †Multi-layout post display (Grid, Masonry, Slider, Ticker)?
Post Grid †Flexible post grid with advanced filtering?
?
Professional Architecture?
8 Independent Gutenberg Blocks †Fully customizable and modular?
Admin Settings Panel †Enable/disable blocks with AJAX save (no page reload)?
Real-time Notifications †Toast notifications for all user actions?
Service Architecture †Dependency injection container and interface-based design?
REST API †Full REST API endpoints for programmatic access?
Caching System †Built-in performance optimization layer?
Professional Logging †File-based logging with rotation?
WooCommerce Ready †Full integration and compatibility?
?
—?
?
Requirements?
?
– WordPress 5.8+ (Tested up to 6.7)?
– PHP 7.4+ (Tested up to 8.3)?
– Node.js 14+ (for development)?
– npm or yarn?
?
—?
?
Installation?
?
Quick Start?
`bash?
git clone https://github.com/nftushar/blockxpert.git?
cd blockxpert?
npm install?
composer install?
npm run build?
`?
?
WordPress Activation?
Navigate to Plugins in WordPress admin?
Find BlockXpert and click Activate?
All 8 blocks are active by default?
Manage blocks in Settings ℠BlockXpert?
?
—?
?
Development?
?
Build Commands?
`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 Dependencies?
`bash?
composer install # Install dependencies?
composer install –no-dev # Production (no dev dependencies)?
`?
?
—?
?
Project Structure?
?
?
blockxpert/?
──┠blockxpert.php ℠Main plugin entry?
──┠package.json ℠npm dependencies?
──┠composer.json ℠PHP dependencies?
──┠banner-772x250.png ℠Plugin banner (WordPress.org)?
──┠icon-128x128.png ℠Plugin icon?
?
──┠src/ ℠React/JavaScript source?
┠ ──┠blocks/ ℠8 Gutenberg blocks?
┠ ┠ ──┠text-animation/?
┠ ┠ ──┠product-slider/?
┠ ┠ ──┠ai-faq/?
┠ ┠ ──┠post-grid/?
┠ ┠ ──┠product-carousel/?
┠ ┠ ──┠advanced-post-block/?
┠ ┠ ──┠ai-recommendations/?
┠ ┠ ──┠ai-product-recommendations/?
┠ ──┠shared/ ℠Reusable utilities?
┠ ──┠components/ ℠React components?
┠ ──┠hooks/ ℠Custom hooks?
┠ ──┠services/ ℠API clients?
┠ ──┠context/ ℠Global state?
┠ ──┠utils/ ℠Helpers?
?
──┠includes/ ℠PHP backend?
┠ ──┠classes/ ℠Service classes?
┠ ──┠interfaces/ ℠Service contracts?
┠ ──┠admin/ ℠Admin UI?
┠ ──┠assets/ ℠Admin styles/scripts?
?
──┠build/ ℠Compiled assets?
──┠vendor/ ℠Composer dependencies?
──┠languages/ ℠Translation files??
?
—?
?
Block Specifications?
?
| Block | Type | Features | Status |?
|——-|——|———-|——–|?
| Text Animation | Design | GSAP animations, 5 easing functions | ✠Production |?
| Product Slider | WooCommerce | Carousel, momentum transitions | ✠Production |?
| AI FAQ | Content | AI-powered accordion | ✠Production |?
| AI Recommendations | AI | Dynamic suggestions | ✠Production |?
| Post Grid | Posts | Advanced filters and layouts | ✠Production |?
| Product Carousel | WooCommerce | Autoplay, pagination | ✠Production |?
| Advanced Post Block | Posts | Grid, Masonry, Slider, Ticker | ✠Production |?
| AI Product Recommendations | WooCommerce | Smart product filtering | ✠Production |?
?
—?
?
GSAP Animations?
?
BlockXpert uses GSAP 3.14 for smooth, performant animations:?
?
Text Animation Block?
5 Easing Functions †easeInOut, easeIn, easeOut, linear, bounce?
Real-time Preview †See animations instantly in editor?
Customizable Duration †100ms to 5000ms animation speed?
Stagger Support †Multi-element animations with delays?
?
Product Blocks?
500ms Transitions †Smooth momentum-based slides?
Hardware Acceleration †GPU-optimized for performance?
Touch Support †Smooth swipe animations on mobile?
Auto-play †Interval-based automatic animation?
?
Performance?
RequestAnimationFrame Optimized †60 FPS smooth animations?
Lightweight †GSAP 3 is only ~15KB minified?
Auto-Cleanup †Proper animation destruction on unmount?
GPU Acceleration †Transform3D for smooth performance?
?
—?
?
Architecture?
?
Backend (PHP)?
Dependency Injection †Professional service container?
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)?
8 Independent Blocks †Full Gutenberg integration?
GSAP Animations †Smooth, performant effects?
React Context †Global state management?
Custom Hooks †useAPI, useCache, useDebounce?
Error Boundaries †Reliability and error handling?
?
Build System?
Webpack (wp-scripts) †Optimized bundling?
SCSS Compilation †Modern styling?
Auto Asset Generation †Automatic bundling?
Cache Busting †Invalidation built-in?
?
—?
?
Configuration?
?
Admin Settings?
Access block settings at Settings ℠BlockXpert😕
– Enable/disable individual blocks?
– Configure block behavior?
– Manage AJAX-based settings?
– Real-time notification feedback?
?
API Endpoints?
POST /wp-json/blockxpert/v1/save-settings †Save plugin settings?
Full REST API documentation included?
?
—?
?
Creating New Blocks?
?
1. Create folder: src/blocks/my-block/?
2. Copy structure from existing block?
3. Edit block files (index.js, block.json, view.js)?
4. Build: npm run build?
5. Test in WordPress editor?
?
—?
?
Version History?
?
1.2.0 – March 28, 2026?
Enhanced Admin UX with AJAX & Real-time Feedback?
– AJAX-based settings save (no page reload)?
– Real-time toast notifications?
– REST API endpoint for settings?
– WordPress 6.7 compatibility?
– PHP 8.3 tested and verified?
?
1.1.0?
Initial 8 blocks implementation?
AI FAQ and Product Recommendations?
GSAP animations?
Professional logging and caching?
?
1.0.0?
Initial release with core blocks?
?
—?
?
Contributing?
?
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. Submit a pull request?
?
—?
?
License?
?
GPL v2 or later †See LICENSE.txt for full license?
?
—?
?
Support?
?
Troubleshooting?
Blocks not appearing? ℠npm run clean && npm run build?
Build errors? ℠Delete node_modules: rm -rf node_modules && npm install?
Admin issues? ℠Check PHP error logs?
?
Resources?
GitHub: https://github.com/nftushar/blockxpert?
Issues: https://github.com/nftushar/blockxpert/issues?
WordPress.org: https://wordpress.org/plugins/blockxpert/?
?
—?
?
Author: NF Tushar ?
Status: ✠Production Ready ?
Version: 1.2.0?
?
