# 🎨 Bento Box – Customizable Grid & Bento Layout Block

![WordPress](https://img.shields.io/badge/WordPress-6.5%2B-blue?style=flat-square)  
![PHP](https://img.shields.io/badge/PHP-7.4%2B-green?style=flat-square)  
![License](https://img.shields.io/badge/License-GPL--2.0--or--later-orange?style=flat-square)

Bento Box is a **WordPress block** that allows users to create **Bento layouts** or **simple grids** in the Gutenberg editor. It offers full customization, including hover effects, background options, and automatic layout generation.

## ✨ Features

✅ **Random Layout Generator** – Automatically arranges blocks for a unique design.  
✅ **Hover Focus Effect** – Highlights the hovered card while blurring others.  
✅ **Customizable Grid** – Adjust the number of rows and columns dynamically.  
✅ **Background Customization** – Change card backgrounds with colors or images.

---

## 🛠️ Installation

### 🔌 **From WordPress Plugin Directory**

1. Go to **Plugins > Add New** in your WordPress admin.
2. Search for **Bento Box**.
3. Click **Install Now** and then **Activate**.

### 📥 **Manual Installation**

1. Download the latest `.zip` from the **[Release](https://github.com/Hackkzy/bento-box/releases)**.
2. Upload it via **Plugins > Add New > Upload Plugin**.
3. Activate the plugin in **Plugins > Installed Plugins**.

---

## 🚀 Usage

1. Open the **WordPress Block Editor (Gutenberg)**.
2. Add the **Bento Box** block to your post/page.
3. Customize grid settings, hover effects, and layout.

---

## 🖥️ Live Demo with WordPress Playground

Try Bento Box instantly in WordPress Playground:  
[▶ **Launch Demo**](https://playground.wordpress.net/#ewogICIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsCiAgImxhbmRpbmdQYWdlIjogIi93cC1hZG1pbi9lZGl0LnBocCIsCiAgImxvZ2luIjogdHJ1ZSwKICAic3RlcHMiOiBbCiAgICB7CiAgICAgICJzdGVwIjogImluc3RhbGxQbHVnaW4iLAogICAgICAicGx1Z2luRGF0YSI6IHsKICAgICAgICAicmVzb3VyY2UiOiAidXJsIiwKICAgICAgICAidXJsIjogImh0dHBzOi8vZ2l0aHViLXByb3h5LmNvbS9wcm94eS8/cmVwbz1IYWNra3p5L2JlbnRvLWJveCZicmFuY2g9bWFpbiIKICAgICAgfSwKICAgICAgIm9wdGlvbnMiOiB7CiAgICAgICAgImFjdGl2YXRlIjogdHJ1ZQogICAgICB9CiAgICB9LAogICAgewogICAgICAic3RlcCI6ICJyZXNldERhdGEiCiAgICB9LAogICAgewogICAgICAic3RlcCI6ICJpbXBvcnRXeHIiLAogICAgICAiZmlsZSI6IHsKICAgICAgICAicmVzb3VyY2UiOiAidXJsIiwKICAgICAgICAidXJsIjogImh0dHBzOi8vcmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbS9IYWNra3p5L2JlbnRvLWJveC9yZWZzL2hlYWRzL21haW4vX3BsYXlncm91bmQvZXhwb3J0LnhtbCIKICAgICAgfQogICAgfQogIF0KfQ==)

---

## 📜 Changelog

### **v1.1.0**

- New Feature: You can now add Button, Quote, Code block, and Video block inside Bento Box.

### **v1.0.1**

- Minor bug fixes.

### **v1.0.0**

- Initial release.

---

## 🤝 Contributing

Want to improve Bento Box? Feel free to fork, submit issues, or contribute!

📩 **Feedback & Support** → Open an [Issue](https://github.com/Hackkzy/bento-box/issues)

---

## 📝 License

This plugin is licensed under **GPL-2.0-or-later**.  
[🔗 GNU License](https://www.gnu.org/licenses/gpl-2.0.html)

---

🌟 **Enjoying Bento Box?** Consider giving it a ⭐ on GitHub! 🚀