Custom WordPress Gutenberg block for ergotherapists
The Project
The client wanted to enhance their WordPress site with a feature enabling users to find an ergotherapist based on the municipalities they serve within the canton of Valais (Switzerland).
The goal was to make this information easily accessible, clearly structured, available in both French and German, while ensuring simple and sustainable management within the existing WordPress environment.
The Solution
The site was already using a theme compatible with the native Gutenberg editor. To preserve the existing structure and maintain strong site performance, a custom Gutenberg block was developed—without relying on any third-party block builder plugins.
The site was built using the base WordPress "Twenty Twenty" theme, with a custom child theme created to track and preserve modifications.
The design of the custom Gutenberg block was developed simultaneously with the redesign of an existing map block listing ergotherapists.
Penpot was used to help the client easily visualize the final design, enhancing communication and feedback. It also allowed me to work more efficiently through rapid iterations and real-time collaboration.
Initial design approved by the client, created in Penpot.
Final version of the design, refined through multiple adjustments to meet expectations.
The custom Gutenberg block enables users to search by address or postal code, leveraging the Mapbox API - a cost-effective alternative to Google Maps - to interpret user input.
Content is managed through a custom WordPress post type called “ergotherapist”, with an additional field listing the municipalities covered. All data was automatically imported from an Excel file maintained by the client.
The module is fully bilingual, supporting both French and German in line with the site’s languages.
Users can refine their search by selecting whether the intervention is for adults or children, as well as the type of therapy required.
Available filters include areas such as poor eyesight, hand re-education, neurology, neurocognitive issues, mental health, and musculoskeletal disorders.
At the end of the project, a personalized tutorial video was delivered to help the client manage the platform independently.
The video is organized by topic and recorded with a professional microphone.