Multi-page WordPress portfolio for a fictional PNW architecture firm with a custom CSS Grid masonry block — server-rendered, per-item size, zero JavaScript library.

The problem

Architecture firms get sold WordPress as a CMS for blogs while design-led portfolio platforms (Webflow, Squarespace, Framer) get pitched as the only credible option for visual work — until you actually try to scale them across a working studio with twenty or forty project case studies that someone non-technical needs to update.

The approach

A well-built FSE block theme plus one well-aimed custom block (CSS Grid masonry, no JS library) supports image-led navigation, deep individual project case studies, and owner-editable copy at every level — without giving up the editor accessibility WordPress is actually good at.

What got built

A multi-page WordPress portfolio for a fictional Pacific Northwest architecture firm — five-page structure (home, projects archive, single project case study, studio, contact) on a custom Full-Site-Editing block theme. One server-rendered Gutenberg block uses CSS Grid + grid-auto-flow: dense for a masonry layout without a JavaScript library.

Custom block — sfp-blocks/portfolio-grid:

• Server-rendered, takes a JSON array of items with image_url, alt, caption, and size
• Three sizes: small 1×1, medium 2×1, large 2×2
• CSS Grid + grid-auto-flow: dense packs mixed-size items without a JS masonry library
• Lives in the shared sfp-blocks plugin — available to every future portfolio-style demo

Five-page structure with editorial depth:

• Home — Hero with practice statement on cedar-clad architectural image; 4-column portfolio-grid of the six featured projects with mixed sizes; studio teaser strip
• /projects/ — Full portfolio in a 3-column grid; Cedar Cove House anchors the 2×2 slot, the other five pack densely around it
• /projects/cedar-cove-house/ — Full case study: cover hero, narrative prose (the site / the materials / the decisions we'd defend), sidebar facts panel (type, location, year, sqft, structural system, awards, photography credit)
• /studio/ — Practice story, principals, recognition
• /contact/ — Direct contact + qualifying notes about scope, budget, geographic focus

Real-photo pipeline — validated end-to-end:

• Photos drop into local photos/ directory in the demo repo
• npm run deploy rsyncs to source-photos/ on EC2 (outside the public web root)
• npm run seed:pages calls wp media import for each photo
• Attachment slug rename — every attachment's post_name gets renamed to <name>-image immediately after import. Without this, WP silently appends -3, -5, -7 to the case-study page slugs to avoid collisions with attachment slugs, producing duplicate pages and a canonical URL that resolves to the JPG attachment rather than the page. Fix is now part of the standard seed pattern across every demo

Outcomes

• Lighthouse 75 / 96 / 100 / 92 with real photos at native resolution (~12 MB total payload)
• CSS Grid masonry with grid-auto-flow: dense — no Masonry.js, no Isotope, no client-side reflow
• Per-item size attribute (small / medium / large) maps to grid-column / grid-row spans
• Real-photo pipeline validated end-to-end with 7 supplied photos at native resolution
• Attachment-slug rename pattern fixes WP's silent page-slug collisions — now part of the standard seed
• Per-demo theme + chassis inheritance: identity lives in the demo, primitives live in the platform

Stack

• WordPress
• PHP 8.3
• React
• Gutenberg
• Full-Site Editing
• theme.json
• CSS Grid
• Apache
• AWS EC2