# IM-Press WooCommerce Gutenberg Blocks

6 production-quality WooCommerce Gutenberg blocks for the IM-Press WordPress plugin.

## File Structure

All blocks follow the pattern:
- `block.json` - Block registration & attributes
- `edit.js` - Block editor UI with InspectorControls
- `save.js` - Returns null (server-side rendered)
- `render.php` - Server-side rendering with live product data

## Blocks

### 1. Product Grid (`product-grid/`)

Display WooCommerce products in a customizable grid.

**Key Features:**
- Columns (1-6), rows configurable
- Order by: date, price, popularity, rating, title, random
- Filter by category, tag, on-sale, featured
- Styles: card, minimal, overlay
- Optional: price, rating, button, sale badge
- Hover effects: lift, zoom, fade, none
- Pagination support
- Server-side rendered with live WooCommerce data

**Files:**
- `block.json` - 67 attributes for full customization
- `edit.js` - Rich preview with dummy grid
- `save.js` - Null (SSR)
- `render.php` - Live WooCommerce query with CSS styling

---

### 2. Product Categories (`product-categories/`)

Display WooCommerce product categories with customizable layouts.

**Key Features:**
- Layouts: grid, list, carousel
- Show/hide: image, count, empty categories
- Parent categories only option
- Styles: card, overlay, minimal
- Order by: name, count, ID
- Responsive with touch-friendly carousel

**Files:**
- `block.json` - 10 attributes
- `edit.js` - Category preview grid
- `save.js` - Null (SSR)
- `render.php` - Live category query with responsive layouts

---

### 3. Cart Button (`cart-button/`)

WooCommerce add-to-cart button for a specific product.

**Key Features:**
- Product ID selector
- Customizable button text
- Styles: filled, outline, pill
- Sizes: small, medium, large
- Color customization (button, text, hover)
- Optional: price display, quantity selector
- Full width option
- AJAX add-to-cart with feedback
- Icon display with SVG cart icon

**Files:**
- `block.json` - 13 attributes
- `edit.js` - Button preview with color picker
- `save.js` - Null (SSR)
- `render.php` - Live product button with AJAX/form fallback

---

### 4. Mini Cart (`mini-cart/`)

Floating mini cart widget showing live cart contents.

**Key Features:**
- Trigger: hover or click
- Styles: dropdown, sidebar, popup
- Position: top/bottom, left/right
- Icons: bag, cart, basket
- Fixed or absolute positioning
- Shows item count badge
- Shows total price
- Cart item preview with images
- View Cart & Checkout links
- Overlay support for popup style
- Responsive on mobile

**Files:**
- `block.json` - 11 attributes
- `edit.js` - Icon preview with color picker
- `save.js` - Null (SSR)
- `render.php` - Live cart data with styling and JavaScript interactions

---

### 5. Account Page (`account-page/`)

WooCommerce my account page with custom styling.

**Key Features:**
- Layouts: tabs, sidebar, stacked
- Shows: avatar, email, welcome message
- Sections: orders, downloads, addresses, account details
- Accent color customization
- Card styling option
- Logout link
- User authentication check
- Responsive design

**Files:**
- `block.json` - 8 attributes
- `edit.js` - Layout preview for all 3 styles
- `save.js` - Null (SSR)
- `render.php` - Authenticated user dashboard with WooCommerce templates

---

### 6. Checkout Fields (`checkout-fields/`)

Custom styled WooCommerce checkout form.

**Key Features:**
- Layouts: one-column, two-column
- Styles: modern, classic, minimal
- Label positions: above, floating, hidden
- Billing & shipping address fields
- Coupon code input
- Shipping method selection
- Order notes textarea
- Order summary sidebar (sticky on desktop)
- Trust badges (security, payment icons)
- Responsive: sidebar becomes full-width on mobile
- Button text customization
- Color customization (button, accent)

**Files:**
- `block.json` - 11 attributes
- `edit.js` - Checkout form preview
- `save.js` - Null (SSR)
- `render.php` - Full checkout form with styling

---

## Technical Details

### API Version & Namespace
- API Version: 3 (latest Gutenberg)
- Namespace: `im-press`
- Category: `im-press`

### Editor Utilities Used
- `@wordpress/i18n` - i18n translations
- `@wordpress/block-editor` - useBlockProps, InspectorControls
- `@wordpress/components` - UI controls (Range, Select, Toggle, etc.)

### Rendering Pattern
All blocks use **server-side rendering**:
1. `block.json` includes `"render": "file:./render.php"`
2. `save.js` returns `null`
3. `render.php` handles live data fetching and HTML output

This is essential for WooCommerce blocks because:
- Product/cart data is user-specific and dynamic
- Requires server-side WooCommerce API calls
- Cannot be statically cached in HTML

### Styling Approach
All blocks use **inline CSS in render.php**:
- Production-optimized CSS selectors
- CSS custom properties for dynamic values
- No external stylesheets required
- Responsive design with media queries
- Accessibility-friendly defaults

### Browser Compatibility
- Modern browsers with ES6 support
- WooCommerce 6.0+
- WordPress 6.0+
- Gutenberg 13.0+

---

## Installation

1. Copy block folders to `/wp-content/plugins/im-press/src/blocks/`
2. Register blocks in plugin PHP:
```php
register_block_type( __DIR__ . '/src/blocks/product-grid' );
register_block_type( __DIR__ . '/src/blocks/product-categories' );
register_block_type( __DIR__ . '/src/blocks/cart-button' );
register_block_type( __DIR__ . '/src/blocks/mini-cart' );
register_block_type( __DIR__ . '/src/blocks/account-page' );
register_block_type( __DIR__ . '/src/blocks/checkout-fields' );
```
3. Build if using build tools (webpack, etc.)
4. Blocks appear in Gutenberg editor under "IM-Press" category

---

## Total Files: 18

- 6 block.json files
- 6 edit.js files
- 6 save.js files
- 6 render.php files (PHP server-side rendering)

All files follow WordPress coding standards and best practices.
