● Company projectJJ-NET OY

TSXcase_study.tsx

TSarchitecture.ts

PHPblock-manager.php

// company project · solo build · 1 year+ · JJ-NET OY

const project = "Empa";

A custom WordPress theme system built solo from scratch over 1+ year at JJ-NET OY. Empa gives content editors a clean, intentional editing experience — blocks are installed on demand, patterns enforce their dependencies, and usage is tracked across pages. Now powering major Finnish client sites.

year to build

solo

architect & developer

150+

sites in ecosystem

live

major Finnish clients

// the_problem.ts

const problem = {

The default Gutenberg editor gives every site the same cluttered block library — dozens of blocks content editors do not need, cannot control, and often misuse. For an agency maintaining 150+ client sites, this creates inconsistency, content breakage, and constant maintenance overhead.

There was no clean way to give each client a curated, intentional editing experience without forking themes repeatedly or writing one-off solutions per site.

}

const goal = {

Build a single theme architecture that any client site could extend — with a clean editing baseline, a managed block library, dependency resolution, and multisite support. One system, maintained in one place, deployed everywhere.

The system had to be operable by non-technical content editors without developer involvement for day-to-day block management.

}

// what_i_built.ts

01Clean-slate editor

The editor starts with only p and h1. No default blocks, no noise. Every block is intentional — added on demand by the content editor, not dumped in by default.

02React block manager

A React-powered admin panel lets editors browse and install blocks from a remote library. Blocks are registered automatically on install — no manual PHP required.

03Pattern dependency resolver

Gutenberg patterns can declare block dependencies. If a required block is not installed, the pattern installation is blocked until the dependency is satisfied — automatically.

04Block usage tracking

The system tracks which blocks are used across which pages. Before removing a block, editors can see exactly where it is in use — preventing silent content breakage.

05React + ACF block support

Blocks can be built in React with ACF field groups, or as standard Gutenberg blocks. Both are first-class citizens in the block manager.

06Multisite + child theme creator

Empa supports WordPress Multisite out of the box. A built-in child theme creator lets new sites spin up with a consistent base while maintaining independence.

// architecture.ts

// system overview

  ┌──────────────────────────────────────────────────────────┐
  │                     Empa Theme System                     │
  ├──────────────────────────┬───────────────────────────────┤
  │     WordPress / PHP      │     React Admin Panel         │
  │                          │                               │
  │  ┌────────────────────┐  │  ┌─────────────────────────┐ │
  │  │  Clean-slate theme │  │  │  Block Manager UI        │ │
  │  │  (p + h1 only)     │  │  │  Browse · Install · Remove│ │
  │  └────────────────────┘  │  └─────────────────────────┘ │
  │                          │                               │
  │  ┌────────────────────┐  │  ┌─────────────────────────┐ │
  │  │  Block Registry    │  │  │  Dependency Resolver     │ │
  │  │  Auto-register     │  │  │  Pattern install guard   │ │
  │  └────────────────────┘  │  └─────────────────────────┘ │
  │                          │                               │
  │  ┌────────────────────┐  │  ┌─────────────────────────┐ │
  │  │  Usage Tracker     │  │  │  Multisite Support       │ │
  │  │  Per-page index    │  │  │  Child theme creator     │ │
  │  └────────────────────┘  │  └─────────────────────────┘ │
  └──────────────────────────┴───────────────────────────────┘
                    │               │
            ┌───────┴───┐   ┌───────┴──────┐
            │  ACF Blocks│   │ Gutenberg    │
            │  (React)   │   │ Native Blocks│
            └────────────┘   └─────────────┘

ReactWordPressGutenbergPHPACFREST APIMultisiteTypeScript

// how_it_works.ts

Editor opens WordPress

Sees only p and h1. No block noise. Clean slate.

Editor opens Block Manager

React UI lists all available blocks from the remote library with descriptions and previews.

Editor installs a block

Block is registered automatically. No PHP changes, no developer needed.

Editor installs a pattern

Dependency resolver checks if required blocks are installed. Blocks with missing deps are blocked until resolved.

Editor removes a block

Usage tracker shows which pages use it. If pages depend on it, removal is surfaced before it happens.

// timeline.ts

Architecture design

Mapped the full block system — library, manager, resolver, tracking

Core theme build

Clean-slate WordPress theme with minimal editor defaults

React admin panel

Block manager UI — browse, install, remove, track

Dependency resolver

Pattern-level dependency logic with install blocking

Block usage tracker

Cross-page tracking to prevent silent content breakage

Multisite support

Network-level block sharing + child theme creator

Production deployment

Live across major Finnish client sites via JJ-NET OY

// outcome.ts

const outcome = {

scope:

1 system

One theme architecture replaces dozens of one-off solutions. Any new client site extends Empa rather than starting from scratch.

ownership:

solo

Designed, architected, and built entirely alone over 1+ year — no team, no spec, no prior system to reference.

reach:

150+

Sites in the JJ-NET OY ecosystem. Major Finnish clients including Helsinki City and the Finnish Museums Association.

codeVisibility:

private

Code is company property and cannot be open-sourced. The case study documents the architecture and technical decisions.

}

// deployed_on

Helsinki CityCustom Gutenberg blocks for kettutesti.hel.fi

Finnish Museums AssociationFull site build — museoliitto.fi

NetoxAll custom Gutenberg blocks — netox.com

Enjoynature.fiFull site + booking system

150+ sitesMaintained via JJ-NET OY infrastructure

// Code for Empa is private company property and cannot be shared publicly. This case study documents the architecture, decisions, and outcomes. Happy to walk through the system in detail during an interview.

←back to portfolio

← godoc case study

⎇ mainEmpa — Case Study

TypeScriptUTF-8