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

0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

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

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.