• See Heru Website

    See Heru - Klevis Miho

    Project Overview

    I developed the See Heru website from scratch based on a Figma design, transforming the visual design into a custom WordPress Full Site Editing (FSE) theme with a library of reusable Gutenberg blocks.

    The project focused on creating a flexible content-editing experience while maintaining close visual fidelity to the original designs across desktop, tablet, and mobile. Each major section was developed as a custom block, with editable content and configuration options exposed directly in the WordPress editor.

    The website was also structured with maintainability, performance, accessibility, and future content expansion in mind.

    • Client: Heru, Inc
    • Project Duration: ~2 Months
    • Industry: Healthcare / Medical
    • Team Size: 20
    • Specialties: WordPress, Gutenberg, Full Site Editing, Custom Theme Development, Page Speed Optimisation, Accessibility

    Client Request

    Objective: Build a modern, responsive WordPress website from an existing Figma design while giving the client a flexible and intuitive way to manage the site’s content.

    Key Requirements:

    • Translate the Figma designs into a production-ready WordPress website
    • Build the website using a custom WordPress theme rather than a page builder
    • Create reusable Gutenberg blocks for the different page sections
    • Allow content editors to modify text, images, buttons, statistics, testimonials, and other content directly from WordPress
    • Support responsive layouts across desktop, tablet, and mobile
    • Build reusable templates and template parts using WordPress Full Site Editing
    • Maintain consistent visual styling across the entire website
    • Ensure the website remains performant and maintainable as content grows
    • Provide a polished editing experience with block previews and configurable block options

    Challenges

    • Translating a detailed Figma design into reusable WordPress components without relying on a page builder
    • Creating flexible Gutenberg blocks that could accommodate different content variations while maintaining the intended design
    • Building responsive behavior across a large number of custom blocks
    • Keeping the frontend and WordPress editor experience visually consistent
    • Managing complex block layouts such as tabs, testimonials, carousels, split layouts, feature sections, and content-driven components
    • Ensuring the custom theme remained maintainable as new blocks and requirements were introduced
    • Validating visual consistency through automated visual regression testing

    My Role & Solution

    Role: Lead WordPress Developer

    Responsibilities:

    • Architected and developed the WordPress theme from scratch using Full Site Editing
    • Translated the Figma designs into reusable custom Gutenberg blocks
    • Built the site’s header and footer as reusable FSE template parts
    • Developed the hero, logo grid, testimonials, people, benefits, tabs, split-card, split-content, features, video, plans, contact, article, and other custom blocks
    • Added editable block controls for content, images, buttons, taxonomies, visibility options, and other configuration settings
    • Implemented responsive behavior across all custom blocks
    • Added carousel functionality and interactions, including autoplay and visual fade effects
    • Implemented sticky content behavior for desktop layouts where required by the design
    • Created dynamic content integrations for posts, press releases, categories, and custom post type content
    • Added reading-time functionality to featured articles
    • Built a custom blog post template and improved content architecture
    • Added block examples/previews to improve the WordPress editing experience
    • Implemented unit testing and visual regression testing using BackstopJS
    • Continuously refined the implementation based on visual comparison with the original designs

    Technologies Used

    • CMS: WordPress
    • Architecture: Full Site Editing (FSE), Gutenberg, Custom WordPress Theme
    • Languages: PHP, JavaScript
    • Frontend: HTML5, CSS3, SASS
    • JavaScript: React / WordPress Block Editor APIs
    • Build Tools: Vite, WordPress Scripts
    • Editor: Gutenberg / Block Editor
    • Testing: PHPUnit, BackstopJS
    • Content Architecture: Custom Post Types, Taxonomies, Custom Fields
    • Version Control: Git
    • Design Source: Figma

    Custom Gutenberg Development

    A major part of the project was developing the website’s component library as custom Gutenberg blocks rather than building pages with a traditional page builder.

    The blocks were designed to provide content editors with control over the parts of each section that needed to remain editable while keeping the underlying design system consistent.

    Examples included:

    • Hero sections
    • Logo grids and carousels
    • Testimonials
    • People/team sections
    • Benefits
    • Tabs with content
    • Split layouts
    • Split cards
    • Feature sections
    • Featured articles
    • Press releases
    • Video sections
    • Plans
    • Contact sections
    • Navigation components

    Several blocks also included more advanced editor functionality, such as taxonomy selection, content reordering, visibility controls, editable statistics, configurable buttons, image/icon selection, and dynamic content sources.

    Testing & Quality

    To reduce regressions during development, I introduced both automated unit testing and visual regression testing.

    Testing included:

    • PHPUnit-based unit testing
    • BackstopJS visual regression testing
    • Responsive testing across desktop, tablet, and mobile layouts
    • Continuous visual comparison against the original Figma designs

    This allowed changes to individual blocks to be made while checking that existing components and responsive layouts remained visually consistent.

    Outcome

    • Delivered a complete custom WordPress website based on the Figma designs
    • Built the website entirely from scratch without relying on a page builder
    • Created a reusable library of custom Gutenberg blocks
    • Provided content editors with flexible controls while maintaining design consistency
    • Implemented responsive layouts across the full block library
    • Added reusable FSE templates and template parts
    • Established automated testing for both functionality and visual regressions
    • Created a scalable foundation for adding new content and page sections
    • Delivered a maintainable WordPress architecture designed around native WordPress editing capabilities

    Lessons Learned

    • Design systems translate well into Gutenberg when components are properly structured. Building reusable blocks around the underlying design system made it possible to maintain consistency while still giving editors flexibility.
    • Editor experience is just as important as frontend implementation. A block can look perfect on the frontend but still provide a poor experience if its editing controls are difficult to understand or use.
    • Responsive behavior should be considered at the block level. Establishing responsive rules while building each component prevented mobile-specific fixes from becoming a later-stage problem.
    • Visual regression testing is valuable for design-heavy WordPress projects. With a large library of custom blocks, automated visual comparisons helped catch unintended changes as the project evolved.
    • Native WordPress architecture can provide flexibility without sacrificing design fidelity. Custom Gutenberg blocks and FSE made it possible to closely reproduce the Figma designs while keeping the website editable through WordPress.