
=== Bento Grid 5 ===

Contributors:      WordPress Telex
Tags:              block, grid, bento, layout, responsive
Tested up to:      6.8
Stable tag:        0.1.0
License:           GPLv2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html

A beautiful, responsive 5-item Bento grid layout block with full customization capabilities.

== Description ==

The Bento Grid 5 block creates a stunning responsive layout with 5 customizable cards arranged in a modern Bento grid format. Perfect for showcasing featured content, portfolios, or product highlights.

**Key Features:**
- 5-item responsive Bento grid layout (2 items on top row, 3 on bottom row)
- Full customization for each card: images, titles, descriptions, and links
- Two beautiful design themes: Modern Light and Bold Dark
- Mobile-responsive with single-column stacking
- Semantic HTML structure with accessibility features
- Easy-to-use sidebar controls for all customizations
- Comes with attractive demo content

**Layout Structure:**
- Row 1: 2 items at 50% width each
- Row 2: 3 items at 33.33% width each
- Mobile: All items stack in single column
- Full-width responsive design

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/bento-grid-5` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress
3. Add the "Bento Grid 5" block to any post or page from the "Bento Layouts" category

== Usage ==

1. Add the Bento Grid 5 block to your post or page
2. Choose your preferred design theme from the style selector
3. Customize each card using the sidebar panel:
   - Upload custom images
   - Add titles and descriptions
   - Set link URLs
   - Toggle visibility options
   - Add custom CSS classes

== Design Themes ==

**Modern Light**
- Clean white/light grey backgrounds
- Soft drop shadows
- Dark text for readability
- Minimalist aesthetic

**Bold Dark**
- Dramatic black backgrounds
- Vibrant green accent color (#BFFF00)
- White icons and text
- High-contrast design

== Frequently Asked Questions ==

= Can I customize the grid layout? =
The grid maintains its 5-item Bento structure (2+3 layout) for optimal visual balance, but all content within each card is fully customizable.

= Is the block mobile-responsive? =
Yes! The grid automatically stacks into a single column on mobile devices while maintaining proper spacing and full-width images.

= Can I add my own images? =
Absolutely. Each card supports custom image uploads through the WordPress media library with lazy loading and proper alt text support.

= Does it work with my theme? =
The block is designed to respect your theme's typography and spacing while providing its own layout structure using CSS variables for easy theming.

== Screenshots ==

1. Bento Grid 5 block in the editor with Modern Light theme
2. Bold Dark theme showing dramatic contrast design
3. Mobile responsive view with single column layout
4. Block settings panel showing customization options

== Changelog ==

= 0.1.0 =
* Initial release
* 5-item Bento grid layout
* Two design themes (Modern Light, Bold Dark)
* Full customization capabilities
* Mobile-responsive design
* Semantic HTML structure
* Accessibility features

== QA Checklist ==

✓ Block loads without errors in editor and frontend
✓ All customization options work properly
✓ Images upload and display correctly
✓ Links function properly when URLs are provided
✓ Responsive design works on all device sizes
✓ Both design themes render correctly
✓ Semantic HTML structure is maintained
✓ Accessibility features are functional
✓ Plugin activates and deactivates cleanly
✓ No conflicts with common themes and plugins
