Custom Gutenberg Blocks Plugin

A comprehensive collection of custom Gutenberg blocks designed for professional WordPress websites. This plugin provides specialized blocks for photo studios, portfolios, and content-rich websites.

Plugin Details

• Plugin Name: Custom Gutenberg Blocks Plugin
• Version: 1.0.2
• Author: Sufiyan Khan
• Text Domain: custom-blocks
• License: GNU General Public License v3.0
• WordPress Compatibility: 5.0+
• PHP Version: 7.4+

Overview

This plugin automatically registers all custom blocks and provides a modern, webpack-based build system for development. Each block is designed with accessibility, performance, and user experience in mind.

Available Blocks

1. Featured Content Slider (custom/featured-content-slider)

• Category: Design
• Icon: Format Gallery
• Description: A responsive slider block with image and featured content
• Features:
  • Multiple slide management
  • Customizable background and text colors
  • Media upload integration
  • Rich text editing capabilities
  • Mobile-responsive design

2. How It Works (custom/how-it-works)

• Category: Design
• Icon: Smiley
• Description: A structured section explaining processes with title, subtitle, and three steps
• Features:
  • Customizable main title and subtitle
  • Three-step process display
  • Color customization options
  • Typography controls
  • Professional layout design

3. Photo Session Backgrounds (custom/photo-session-backgrounds)

• Category: Design
• Icon: Format Gallery
• Description: A slider showcasing photo session backgrounds with labels and links
• Keywords: photo, session, backgrounds, slider
• Features:
  • Dynamic background gallery
  • Customizable headings and subheadings
  • "View All" link functionality
  • Responsive image handling
  • Professional photo studio layout

4. Schedule a Session (custom/schedule-session)

• Category: Design
• Icon: Location Alt
• Description: Two-step CTA for studio scheduling with location autocomplete
• Keywords: schedule, studio, location, cta
• Features:
  • Two-step user interaction flow
  • Location autocomplete functionality
  • Customizable headings and button labels
  • Wide and full alignment support
  • Spacing controls (padding/margin)
  • Mobile-optimized design

5. Testimonial Slider (custom/testimonial-slider)

• Category: Widgets
• Icon: Format Quote
• Description: A testimonial slider block with call-to-action integration
• Features:
  • Multiple testimonial management
  • Customer images and quotes
  • Call-to-action button integration
  • Smooth slider transitions
  • Professional testimonial layout

Installation

1. Download or clone this repository to your WordPress plugins directory:

   cd wp-content/plugins/
   git clone [repository-url] wp-custom-blocks

2. Install dependencies:

   cd wp-custom-blocks
   npm install

3. Build the blocks:

   npm run build

4. Activate the plugin through the WordPress admin dashboard.

Development

Prerequisites

• Node.js (v14 or higher)
• npm
• WordPress development environment

Development Workflow

1. Start development mode:

   npm start

   This command runs webpack in watch mode for live development.

2. Build for production:

   npm run build

   This creates optimized files in the /build directory.

Project Structure

wp-custom-blocks/
├── custom-blocks.php          # Main plugin file
├── package.json               # Node.js dependencies
├── webpack.config.js          # Webpack build configuration
├── LICENSE                    # GPL v3 License
├── README.md                  # This file
├── blocks/                    # Individual block directories
│   ├── featured-content-slider/
│   ├── how-it-works/
│   ├── photo-session-backgrounds/
│   ├── schedule-session/
│   ├── testimonial-slider/
│   └── images/               # Shared block assets
└── build/                    # Compiled JavaScript files

Block Structure

Each block follows a consistent structure:

• block.json - Block configuration and metadata
• index.js - Block registration and main entry point
• edit.js - Block editor interface
• save.js - Block frontend output
• style.css - Frontend styles
• editor-style.css - Editor-specific styles
• frontend.js - Frontend JavaScript (if needed)

Features

• Automatic Block Registration: All blocks are automatically discovered and registered
• Modern Build System: Uses webpack with Babel for modern JavaScript development
• Responsive Design: All blocks are mobile-friendly and responsive
• Accessibility: Built with WordPress accessibility standards
• Performance Optimized: Efficient loading and minimal footprint
• Extensible: Easy to add new blocks following the established pattern

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Changelog

Version 1.0.2

• Current stable release
• All core blocks implemented
• Production-ready build system

Support

For support and questions, please refer to the plugin documentation or contact the plugin author.

License

This plugin is licensed under the GNU General Public License v3.0. See the LICENSE file for full details.