The Challenge
- Gated content only worked on one template and could not be reused.
- HubSpot forms were off-brand and introduced layout shifts.
- Block library had partially broken interactions and browser inconsistencies.
- Recommendation logic was hard-coded and not modular.
My Approach
I started with a full audit and resolved high-impact reliability issues first, then rebuilt the core content system around reusable Gutenberg architecture.
Gated Content Block - Flagship Deliverable
- Built a reusable Gutenberg block plugin with React, Webpack, and Babel.
- Added Inspector controls for portal and form IDs.
- Implemented reveal-on-submit behavior without redirects.
- Preserved layout stability with dynamic minimum-height handling.
Branded HubSpot Forms
- Replaced fragile iframe flows with branded raw HTML form integration.
- Added inline validation and stable error behavior.
Additional Blocks and Refactors
- Built improved accordion and lightbox blocks.
- Added tag-based recommendation logic with configurable limits.
- Fixed script loading and browser inconsistencies.
Results
| Deliverable | Outcome | | --- | --- | | Gated Content Block | Reusable anywhere on site | | Build pipeline | Production-ready React block architecture | | HubSpot forms | Branded and stable with no layout shifts | | New block system | Modular content patterns for editors | | Audit fixes | Better reliability and standards compliance |
Technical Stack
WordPress, PHP, React, Webpack, Babel, Tailwind CSS, Gutenberg Block API, ACF, HubSpot Forms API, WP Engine, GitHub