Functionality & Technology
By utilizing a custom WordPress Plugin this component contains three ways it can be rendered:
- Single Block – ACF/Gutenberg (Clever Block Single)
- Repeater Block Block ACF/Gutenberg (Clever Block Repeater)
- WordPress Shortcode
The Single Block requires manual data entry but allows fine-tuning if a by-hand approach is desired while the Repeater Block takes a single CSV file upload and will generate the table from there. The beauty of these blocks truly lies with their ability to give a live preview when inserting into a page/post.
Implementing a Shortcode covers usage OUTSIDE the Gutenberg space where maybe the rendering needs to happen programmatically based on a database call or other external data sources.
Rendering relies strictly on PHP and the WordPress Core and uses no Javascript.
Responsive UX/UI
When seeing what was initially set up as the Development space I wanted to do something a little more than just render a plugin in a default WordPress theme. By writing a very simple custom theme using the vanilla WordPress Core it allows for more control and visualization on things such as branding, color, overall look and feel and most importantly, typography.
Mobile inspiration came directly from movebuddha and how they lay their cards out. This classic layout excels at a mobile-first approach while still communicating the data/content clearly and efficiently.
Fallbacks
ACF itself allows the addition of default values for custom fields created, but a secondary measure exists within the plugin files themselves. When attempting to get a field it will check if said field is empty/null and if so it will assign a default. All of the icon assets are also included right within the plugin structure to easily grab default images/icons should one come up missing in the data.
V2 and Up
Thinking of improvements immediately I think of more Javascript implementation for user interactions. Being able to sort the table columns by clicking on headers, more interactive tooltips, pop-ups and modals for CTAs and various features of that nature.
AI Usage
My approach to using AI within this build was fairly minimal. One aspect was to generate the typography for the 5 Top-Rated Realtors post to avoid Lorem Ipsum and get a better feel of page flow.
There are a few pieces of logic within the PHP where AI was used as more of a scratch pad for things like performance, best practices and more abstract concepts. The CSV Processor PHP file comes to mind where this workflow took place.