WP Hero Block

A custom Gutenberg block for WordPress that renders a Hero section with:

• Background image or video
• H1 title
• Optional overlay
• Smooth scroll-to link

Built as a dynamic block with PHP render.php and bundled assets (@wordpress/scripts).

---

📦 Installation

1. Clone or download this repository into your WordPress plugins folder:

   cd wp-content/plugins
   git clone https://github.com/code-mat/wp-hero-block.git

2. Install dependencies and build assets:

   cd wp-hero-block
   npm install
   npm run build

3. Activate the plugin in WordPress Admin → Plugins.

---

⚡ Development

Start a development build with file watching:

npm run start

Build for production:

npm run build

Create a plugin zip for distribution:

npm run plugin-zip

---

🛠️ Block Features

• Background
  • Image (uses <img> with object-fit: cover for better LCP)
  • Vimeo embed via <iframe>
• Overlay – optional, configurable opacity
• Title (H1) – main headline
• Scroll-to button – smooth scrolling to target section or next sibling

---

📂 Project Structure

wp-hero-block/
├── build/                # Compiled JS/CSS after build
├── src/                  # Source files
│   ├── block.json        # Block metadata
│   ├── edit.js           # Block editor UI
│   ├── style.scss        # Frontend styles
│   ├── editor.scss       # Editor styles
│   ├── view.js           # Frontend JS (smooth scroll)
│   ├── render.php        # PHP render callback
│   └── index.js          # Block registration
├── wp-hero-block.php     # Main plugin file
└── README.md

---

💡 Example Usage

After activating the plugin, insert the Hero Block in the WordPress block editor:

• Set a background image or video URL
• Add your title
• Enable/disable overlay
• Optionally add scroll-to target and link text

---

🧑 Author

Created by code-mat
Licensed under GPL-2.0-or-later