jessyp

AI Product Finder is a Gutenberg block that enables AI-powered e-commerce product search using vector embeddings and large language models. 
Instead of traditional keyword matching, customers can describe what they’re looking for and get relevant product recommendations via semantic search powered by Pinecone’s vector database. 
It uses generative AI to provide concise explanations of why each product matches the customer’s search.
<h3>Requirements</h3>
<ul>
<li>WordPress 6.7 or higher</li>
<li>PHP 7.4 or higher</li>
<li>WooCommerce plugin (active)</li>
<li>Pinecone API key </li>
<li>OpenAI API key</li>
</ul>
<h3>External Services</h3>
This plugin connects to the following third-party services:
<h4>OpenAI API</h4>
Used for generating text embeddings for product search and AI-powered product match explanations. 
Data sent: user search queries, product names and descriptions.
<ul>
<li><a href="https://openai.com/policies/terms-of-use" rel="nofollow ugc">OpenAI Terms of Use</a></li>
<li><a href="https://openai.com/policies/privacy-policy" rel="nofollow ugc">OpenAI Privacy Policy</a></li>
</ul>
<h4>Pinecone</h4>
Used for storing product vector embeddings and performing similarity search. 
Data sent: product embeddings, product metadata (name, price, categories), search query embeddings.
<ul>
<li><a href="https://www.pinecone.io/terms/" rel="nofollow ugc">Pinecone Terms of Service</a></li>
<li><a href="https://www.pinecone.io/privacy/" rel="nofollow ugc">Pinecone Privacy Policy</a></li>
</ul>

jessyp AI Product Finder

AI-powered semantic product search block that uses vector embeddings to find products based on natural language descriptions.

niw2cp

The HTML5 Semantic Elements plugin introduces two custom Gutenberg blocks — Article and Aside — that allow you to structure your WordPress content with proper semantic HTML5 elements.
Use the Article block for self-contained content such as blog posts or news items, and the Aside block for related or supplementary information such as sidebars, pull quotes, or callouts.
These semantic elements improve both SEO and accessibility by clearly defining the roles of different content sections.
<h3>How to Use</h3>
<h3>Adding Blocks</h3>
<ol>
<li>Edit any post or page in the block editor</li>
<li>Click the “+” button to add a new block</li>
<li>Search for “Article” or “Aside”</li>
<li>Click the desired block to insert it into your content</li>
</ol>
<h3>Article Block</h3>
The Article block creates an HTML5 <code><article></code> element, ideal for: 
– Blog posts 
– News articles 
– Forum posts 
– Comments 
– Independent, self-contained content
Features 
– Nest any blocks inside (headings, paragraphs, images, etc.) 
– Wide and Full alignment support 
– Custom CSS classes 
– Anchor ID support 
– “Remove Article” button to unwrap the block while keeping its inner content
Removing the Article wrapper 
– Toolbar: Select the Article block → click the “Remove Article” (X) button 
– Menu: Use the three-dot menu → “Ungroup”
<h3>Aside Block</h3>
The Aside block creates an HTML5 <code><aside></code> element, perfect for: 
– Sidebars 
– Pull quotes 
– Related content 
– Callout boxes 
– Supplementary information
Features 
– Add any blocks inside 
– Left, Right, Wide, and Full alignment options 
– Default styling with background color and left border 
– Custom CSS classes 
– Anchor ID support 
– Transform paragraphs, headings, lists, or quotes into Asides 
– “Remove Aside” button to unwrap the content
Transforming existing blocks 
1. Select an existing block (paragraph, heading, list, quote, pullquote, or group) 
2. Click the block icon or three-dot menu 
3. Choose “Transform to” → “Aside”
Removing the Aside wrapper 
– Toolbar: Select the Aside block → click the “Remove Aside” (X) button 
– Transform: Convert to “Group” 
– Menu: Use the three-dot menu → “Ungroup”
<h3>Styling</h3>
Both blocks include basic styling. To customize:
<ol>
<li>Add a custom CSS class in the Advanced panel of the block settings.</li>
<li>Add your own CSS under Appearance → Customize → Additional CSS.</li>
</ol>
Example CSS:
<pre><code>`css
</code></pre>
/* Custom Article styling */ 
.wp-block-html5-semantic-article { 
 padding: 2em; 
 background: #ffffff; 
 box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}
/* Custom Aside styling */ 
.wp-block-html5-semantic-aside { 
 background-color: #fffbea; 
 border-left: 4px solid #f59e0b; 
 padding: 2em; 
}
<h3>Block Settings</h3>
Block Tab: Alignment options
Advanced Tab: Add custom CSS classes, anchor IDs
<h3>Tips</h3>
Nest Blocks: Combine headings, text, and media inside semantic containers
SEO Benefits: Helps search engines interpret your content hierarchy
Accessibility: Improves screen reader navigation and content structure
<h3>License</h3>
This plugin is licensed under the GPL v2 or later.

HTML5 Semantic Elements

Adds HTML5 and semantic elements as blocks in the Gutenberg editor.

jessyp AI Product Finder vs HTML5 Semantic Elements