manifest / editor / wp-gutenberg-blocks

WP Gutenberg Blocks

Custom Gutenberg block library using Block API v3

by Hamza · github.com/oiahamzayy/wp-gutenberg-blocks · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/oiahamzayy/wp-gutenberg-blocks/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/oiahamzayy/wp-gutenberg-blocks ↗

Custom Gutenberg block library using Block API v3. All blocks are server-side rendered in PHP for performance and SEO, registered via block.json for schema-driven validation, and styled with scoped CSS.

Blocks Included

Block	Description
`wpgb/cta-banner`	Call-to-action with heading, subheading, and styled button
`wpgb/testimonial`	Customer quote with avatar, star rating, author name/role
`wpgb/feature-grid`	Icon + heading + text feature cards in a responsive grid
`wpgb/pricing-table`	Pricing tier cards with feature lists and CTA button
`wpgb/team-member`	Team member card with photo, name, title, and social links

Architecture

Why server-side rendering?

No hydration — zero JS required on the frontend for content blocks
Dynamic data — blocks can query the database at render time
Accessible HTML — full control over markup and ARIA attributes
ISR-friendly — SSR output is cacheable by Next.js via headless API

block.json registration

All blocks use register_block_type_from_metadata() — the WordPress-recommended approach since 5.8. The block.json file is the single source of truth for attributes, supports, styles, and the render file.

register_block_type_from_metadata( WPGB_PATH . 'src/blocks/cta-banner' );

Project Structure

wp-gutenberg-blocks/
├── src/
│   └── blocks/
│       ├── cta-banner/
│       │   ├── block.json      # Block definition + attribute schema
│       │   ├── render.php      # Server-side render callback
│       │   ├── style.css       # Frontend styles
│       │   └── editor.css      # Editor-only styles
│       ├── testimonial/
│       │   ├── block.json
│       │   └── render.php
│       ├── feature-grid/
│       ├── pricing-table/
│       └── team-member/
├── composer.json
└── wp-gutenberg-blocks.php

Installation

Upload the plugin directory to wp-content/plugins/ and activate.

No build step required — blocks are server-side rendered.

Usage

After activation, all blocks appear in the "Custom Blocks" category in the Gutenberg inserter.

License

GPL-2.0+ — see LICENSE.