WP Manifestindependent plugin directory
manifest / editor / service-grid-block

Service Grid Block

Registers the "Service" custom post type and a dynamic Service Grid Gutenberg block.

by dee-webtech · github.com/dee-webtech/service-grid-block

★ 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/dee-webtech/service-grid-block/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/dee-webtech/service-grid-block ↗

A lightweight WordPress plugin that registers a "Services" custom post type and a dynamic Gutenberg block to display them in a configurable, responsive grid — no page builder required.

Why I created this plugin

Small business sites often need an editable list of services (a salon, an agency, a repair shop) without the overhead of a page builder or a hardcoded template. This plugin gives editors a native block that pulls live data from a dedicated post type, so services can be added, updated, or removed at any time without ever touching a template file — the display always reflects what's currently published, not a snapshot frozen at the moment the page was last saved.

Features

  • "Services" custom post type (title, body, excerpt, featured image)
  • Dynamic Gutenberg block with adjustable Columns (1–4), Number of services, and Order by
  • Live editor preview identical to the front-end output
  • Equal-height responsive cards that collapse to one column on mobile
  • Built-in, WP_DEBUG-gated debug logging for troubleshooting

Requirements

  • WordPress 6.3+
  • PHP 7.4+
  • Node.js 18+ and npm (only needed if editing the source in /src)

Installation

  1. Copy this folder into wp-content/plugins/.
  2. Activate "Service Grid Block" from the Plugins screen.
  3. Go to Services → Add New and create a few services.
  4. Insert the "Service Grid" block on any page and adjust its settings.

Editing the source

The /build folder is compiled and ready to run — that's what WordPress loads. To change behavior or styling, edit files in /src, then rebuild:

npm install
npm run build

Debugging

Add to wp-config.php:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

With debug mode on, every render logs its query parameters and result count to wp-content/debug.log, and an HTML comment with the same details appears in the page source — useful for confirming what the block queried without opening any files.

Architecture notes

  • Built as a dynamic block (server-rendered via render.php) rather than a static block, because the Services list changes independently of when a page was last saved.
  • Uses ServerSideRender in the editor so the preview and the live front end always run the exact same PHP — editor and front end can never drift apart.
  • Attributes are re-sanitized inside render.php itself, regardless of the types declared in block.json, since that schema is an editor-side contract, not a server-side guarantee.

License

GPL v2 or later