Converting a WordPress website into a mobile app: challenges and solutions

In this article, we tell you about one of our projects where we were asked to convert a WordPress website into a mobile application and ended up creating a platform that converts Gutenberg blocks into mobile app components.

The problem: Convert a WordPress website into a mobile app

In August 2022, we received a request from one of our best partners to evaluate a Project. We were asked to build a mobile application on the top of their WordPress website. Here at NovemBit, we value long-term partnership and NDA’s we sign, hence as an outsourcing services provider we cannot disclose many details about the Project and the Client. However, we can provide you with a general idea about both:

• The Client does a great job helping people to fight cancer by building a community and giving support to patients and caregivers. Their website has thousands of articles, clinical trials, podcasts, webinars etc. 
• The main objective of the Project is to build a mobile application (iOS/Android) that will introduce new tools for the community, offer access to most of the website content, and provide offline capabilities.

The success of every project relies on thorough research from the beginning. Therefore, we made efforts to understand the current state of the field. To clarify what we were looking for, let’s define the main requirements and facets of the Project:

• Apart from the home page and a few other landing pages, the entire website content must be accessible in the app with an offline-first approach.
• In addition, the application must also provide new offline tools and utilize device hardware capabilities, such as sending reminders, note-taking, working with the camera, and location services.
• The main audience are older people, so the UI/UX are not something we can compromise with. The application must operate smoothly, handle all native gestures, and provide navigation and accessibility features inherent to the system by default. 

Keeping this in mind, we initiated our research to determine if any existing solutions (paid or free) could meet our needs. Just like in almost every field, there are solutions available for WordPress, and mobile application development is no exception. We began searching for articles on ‘how to convert WordPress website into a mobile app’ and found numerous resources, many of which recommended using the same products, technologies, and techniques,  so if you are looking for a plug-and-play solution, then we recommend you to stop reading now and continue here, or here or even here. While there are multiple solutions available, several factors make them unsuitable for our requirements:

• You don’t own your code and remain dependent on the chosen provider
• Limitations in offline functionality
• Limited options for customization
• Not the smoothest performance
• Sometimes the UI/UX resembles a web interface rather than a native app interface

We don’t want to dive into each of the points mentioned above now, but it was clear to us that trying to “convert WordPress website into mobile app” with our pretty high requirements in place is not doable, but do we really need to do this?  

Digging deeper։ Better understanding of the data structure

Before moving forward with our evaluation, we decided to sit down and  analyze what in fact we have in our website, how our data is structured and how we want it to be represented in the mobile app? Analyzing a few thousands of posts is not something you can do manually one by one, so you need to use a plugin or run some code to parse the data the way you need it. The website has been live since 2017, so there were posts created using both the WordPress Classic Editor and Gutenberg. Our target was to find answer of the following questions: 

• list custom post types and define how they must be displayed inside the mobile app.
• list Gutenberg blocks used sitewide with the set of applied attributes, calculate the amount of posts using the particular block.
• parse WYSIWYG content to find out the HTML tags, their CSS classes and overall density of custom HTML usage.

Having this analytics in hand, we could see that most of the content was based on several Gutenberg blocks with minimal usage of attributes. To our surprise, the WYSIWYG content was relatively simple and could be converted to Gutenberg if necessary. There were a few custom blocks, such as the podcast player, but they could be effectively integrated into the application.

Now that we have a complete understanding of the data and its structure, we can provide better suggestions to the Client. Instead of attempting to solve the ‘convert WordPress website into a mobile app’ problem, which is not feasible with the current requirements, why not create an outstanding application that can ‘convert Gutenberg blocks into native mobile components’ and accurately represent the website’s content in the application?”

Our solution: Converting the blocks, not the website

Gutenberg was relatively new, and unlike solutions that convert the entire WordPress into mobile apps, we were searching for a library, SDK, or codebase that specifically converts Gutenberg blocks into native iOS/Android components. Gutenberg mobile, the mobile version of Gutenberg targeting Android/iOS and built as a React Native library, is overly complex for solely displaying the content. It includes numerous editor features that we do not require but must still support. Another solution could involve utilizing third-party libraries. For instance, here is an intriguing Flutter helper widget available to parse WordPress content in its raw form. However, it has limited support and requires significant effort to implement.  Ultimately, if something goes wrong and the application crashes with an error, we cannot simply email the client and say, ‘It’s not our fault, but the fault of another third-party SDK we are using’. Therefore, we have taken on the challenge of building a concept that is not overly complicated but will help us complete the Project!

Summary

The primary goal of the project was to create a co-pilot iOS/Android application for the WordPress website that provides users with innovative tools, offline access to website content, and a seamless user experience. Our solution was to create a platform that converts Gutenberg blocks into mobile app components instead of trying to convert the entire WordPress site. It was a perfect fit for this project, and once the client agreed, we jumped right into it. Gotta admit, it’s no walk in the park because Gutenberg is packed with powerful tools for creating stunning posts. Tackling all that in the mobile apps is a real challenge, but our extensive experience in WordPress and solid knowledge of Gutenberg give us the confidence and motivation to make it happen!