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 …

Valerio Monti

<p>This plugin implements the automatic creation of alt text for images uploaded to the media library. The alt text is generated at the time of uploading the image and it is also possible to generate the alt text for images already present in the media library.</p>
<p>To generate the alt text, you can choose to use the artificial intelligence of OpenAI or Azure, or decide if you simply want to copy the title of the article where the image is uploaded or the name of the image.</p>
<p>Clearly, using artificial intelligence will allow for a more accurate and useful alt texts.</p>
<h3>Features</h3>
<p>This plugin allows you to generate alt texts in the following ways:<br />
– using Openai APIs (GPT-4o, GPT-4o Mini, o1 Mini)<br />
– using Anthropic Claude API<br />
– using Azure APIs for computational vision;<br />
– recovering the title of the image<br />
– recovering the title of the article in which the image is uploaded</p>
<h4>Getting Started</h4>
<p>After installing the plugin, click on the ‘Auto Alt Text’ menu item.</p>
<h3>Choice of Generation Method</h3>
<p>Select the Generation Method you prefer</p>
<h3>OpenAI’s APIs</h3>
<p>In your OpenAI account, retrieve the following data to enter on the options page:<br />
– API Key</p>
<p>Choose the model you want to use for generating the alt text.<br />
Enter a prompt for generating the alt text according to your needs.</p>
<h3>Claude Anthropic’s APIs</h3>
<p>In your Anthropic account, retrieve the following data to enter on the options page:<br />
– API Key</p>
<p>Choose the model you want to use for generating the alt text.<br />
Enter a prompt for generating the alt text according to your needs.</p>
<h3>Azure’s APIs</h3>
<p>On your Azure account, create a Computer Vision instance and retrieve the following data to enter on the options page:<br />
– Computer Vision API Key<br />
– Computer Vision Endpoint</p>
<p>If you want to generate an alt text in English, save the options without filling in any other fields.</p>
<p>If you want to generate an alt text in a different language, on your Azure account, create a Translator instance and retrieve the following data to enter on the options page:<br />
– Translator Instance API Key<br />
– Translator Instance Endpoint<br />
– Translator Instance Region</p>
<p>After entering this data, save the options.</p>
<p>Select the desired language and save the options again.</p>
<h3>Title of the article</h3>
<p>For this generation method, there are no options to set as the alt text will be generated by copying the title of the article in which the image is uploaded.</p>
<p>In case the article is not uploaded as an attachment of an article, the “Title of the attachment” method will be used as a fallback.</p>
<h3>Title of the attachment</h3>
<p>For this generation method, there are no options to set as the alt text will be generated by copying the title of the image.</p>
<h3>Functioning</h3>
<p>Once the plugin is configured, each time an image is uploaded to the media library, an alt text will be automatically set based on the selected generation method.</p>
<p>For images already in the media library, you can create bulk alt texts. Open the Media Library in the “list” view, select the images for which to generate the alt text, and choose the “Generate alt text” bulk action. (Depending on the number of images chosen and their weight, this may take some time.)</p>
<p>You can also generate the alt text of a single image directly from the media library. Open the Media Library in “grid” mode, choose the image for which to generate the alt text, and click the “Generate alt text” button. In no time the alt text field will be overwritten by the generated description.</p>
<h3>WP-CLI</h3>
<p>If you prefer generating alt text in batch (e.g., to avoid processing in the Media Library UI), you can use WP-CLI.</p>
<p>Generate alt text for a list of attachment IDs:</p>
<pre><code>wp auto-alt-text generate --ids=123,456,789
</code></pre>
<p>Process all image attachments in batches:</p>
<pre><code>wp auto-alt-text generate --all --limit=200 --offset=0
wp auto-alt-text generate --all --limit=200 --offset=200
</code></pre>
<p>Dry run (no metadata updates):</p>
<pre><code>wp auto-alt-text generate --ids=123,456 --dry-run
</code></pre>
<p>Force overwrite of existing alt text (even if “Keep existing alt text” is enabled):</p>
<pre><code>wp auto-alt-text generate --all --limit=200 --offset=0 --force
</code></pre>
<p><strong>Notice</strong>: If you choose one of the methods that involves the use of external APIs, the upload times for images in the media library might increase because it requires sending a request to the APIs, waiting for the external server to process, and waiting for a response.</p>
<h3>Logging</h3>
<p>If the generation of the alt text via AI is set, in case of errors, to avoid blocking the editorial work, the image is loaded anyway but without the alt text being compiled.</p>
<p>When a call to the Azure or OpenAI API fails, a record containing the error message is saved in a custom database table.<br />
In this case, the cause of the error can be seen on the Auto Alt Text -> Error log page.</p>
<h3>External Services</h3>
<p>This plugin uses the following external services alternatively:</p>
<h3>OpenAI</h3>
<p>Selecting the generation method “OpenAI’s APIs” will use the API services of <a href="https://openai.com/" rel="nofollow ugc">OpenAI</a>.</p>
<p>This plugin does not collect any information from your OpenAI account. The data transmitted to OpenAI mainly consists of the image files uploaded to your website and the specified prompt.</p>
<p>For accurate information on privacy and conditions of use, please consult the <a href="https://openai.com/policies/privacy-policy" rel="nofollow ugc">privacy policy</a> and <a href="https://openai.com/" rel="nofollow ugc">terms and conditions</a> directly on the official website. It is also advisable to check the costs and usage statistics of the API service on the OpenAI website.</p>
<h3>Anthropic Claude</h3>
<p>Selecting the generation method “Anthropic’s APIs” will use the API services of <a href="https://console.anthropic.com/" rel="nofollow ugc">Anthropic</a>.</p>
<p>This plugin does not collect any information from your Anthropic Claude account. The data transmitted to Anthropic Claude mainly consists of the image files uploaded to your website and the specified prompt.</p>
<p>For accurate information on privacy and conditions of use, please consult the <a href="https://www.anthropic.com/legal/privacy" rel="nofollow ugc">privacy policy</a>, <a href="https://www.anthropic.com/legal/consumer-terms" rel="nofollow ugc">terms and conditions for consumers</a> and <a href="https://www.anthropic.com/legal/commercial-terms" rel="nofollow ugc">terms and conditions for commercial</a> directly on the official website. It is also advisable to check the costs and usage statistics of the API service on the Anthropic website.</p>
<h3>Azure</h3>
<p>Selecting the “Azure’s APIs” generation method will use the API services of <a href="https://azure.microsoft.com/en-us/" rel="nofollow ugc">Microsoft Azure</a>.</p>
<p>This plugin does not collect any information from your Azure account. The data transmitted to Azure consists mainly of image files uploaded to your website.</p>
<p>For accurate information on privacy and conditions of use, please directly consult the <a href="https://privacy.microsoft.com/en-us/privacystatement" rel="nofollow ugc">privacy policy</a> and <a href="https://azure.microsoft.com/en-us/support/legal/" rel="nofollow ugc">terms and conditions</a> on the official website. It is also advisable to check the costs and usage statistics of the API service on the Microsoft Azure’s website.</p>
<h3>Encryption Constants</h3>
<p>We <strong>strongly recommend</strong> defining the new plugin-specific constants in your <code>wp-config.php</code>:</p>
<pre><code>define( 'AAT_ENCRYPTION_KEY',  'a_random_string_of_at_least_64_characters' );
define( 'AAT_ENCRYPTION_SALT', 'another_random_string_of_at_least_64_characters' );
</code></pre>
<p>You will find these two define(…) lines already generated for you on the Auto Alt Text » Options page – simply copy & paste them before the <code>/* That's all, stop editing! Happy publishing. */</code> line in your <code>wp-config.php</code>.</p>
<p>If you choose not to add them, the plugin will continue to work normally, but it will fall back to using your WordPress <code>LOGGED_IN_KEY</code> / <code>LOGGED_IN_SALT</code>, which may break if those salts are ever changed.</p>
<h3>Disclaimer</h3>
<p>Auto Alt Text is a plugin that helps users automatically generate Alt Texts of their images using AI services such as OpenAI’s ChatGPT or Microsoft Azure.<br />
Users need their own API key and must follow the rules set by the AI service they choose.</p>
<p>By using Auto Alt Text, users agree to watch and manage AI-made content and address any issues or misuse.</p>
<p>AI Engine developer and related parties are not responsible for any problems or losses caused by the use of the plugin or AI-generated content.</p>


Auto Alt Text

This plugin allows you to automatically generate an Alt Text for images uploaded into the media library via AI.

BlockXpert vs Auto Alt Text