Josiah Hostetter – Clever Brokerage Data Blocks
Table Of Contents
Example 1 – ACF Block – CPT Query
- Query‑driven data: Pulls Companies (or any allowed CPT) with configurable post selection, ordering, and per‑page limit.
- Deliberate UX: Fully responsive, accessibility friendly.
- Don’t forget to try out the WP Block Editor 😊
| Company | Rating | Listing fee | Team size | Actions |
|---|---|---|---|---|
Clever Real Estate St Louis, MO |
1.5% listing fee | 50-100 | ||
Flex Group Real Estate Miami, FL |
$5,000 listing fee | 10–20 | ||
Dink Realty Miami Beach, FL |
1.5% listing fee | 20–50 | ||
Prevu Real Estate West Palm Beach, FL |
3% listing fee | 0–10 | ||
|
Terra Vista Realty Fort Lauderdale, FL |
2.5% listing fee | |||
Pro Players Realty USA Miami, FL |
50–100 |
Example 2 – ACF Block – Manual Entry
- Curated lists via ACF repeater: Editors can manually enter and order companies in a simple ACF repeater, perfect for featured or bespoke comparisons.
- Same view, new source: Maps repeater rows into the same $companies shape, using the exact same markup/CSS as the Example 1 ACF query block.
- CPT data storage and query is best practice, but some use cases call for manual entry blocks.
| Company | Rating | Listing fee | Team size | Actions |
|---|---|---|---|---|
|
Flex Group Real Estate Miami, FL |
$5,000 listing fee | 10–20 | ||
|
Dink Realty Miami Beach, FL |
1.5% listing fee | 20–50 |
Example 3 – Bricks Builder Dynamic Block
- Bricks Builder-native example: Recreates the comparison layout in Bricks using containers, Grid, Flex, and a Repeater… no PHP block required.
- Portability & simplicity demo: Shows the comparison design and data model can be reimplemented in Clever’s primary visual builder (Bricks), not just via a custom ACF block.
- Flexible Possibilities: The best of both worlds: visual builder + custom Gutenberg blocks. Allowing for simple and rapid maintainability that can meet scaling demands.
- Note: Time constraints limited the full design and functionality completion of this example.
- If you’re logged-in to this site… check out the Brick Builder template for this Custom Block here:
Assessment Brief Write-up
Approach & workflow
- Data first: CPT + ingest, then rough layouts to surface constraints (space, columns, breakpoints).
- Responsive-first: Desktop table → tablet stack → mobile cards with
data-label; built to hold up across viewports. - Priorities: Emphasized name, logo, CTA, price; dropped lower-value fields (e.g. license). In a real project would clarify user/editor/data needs.
Design & UX
- Semantic
<table>on desktop for alignment and accessibility (tabular data). - Breakpoints: full table → centered/stacked company column → mobile cards with row labels.
- Visual hierarchy: card treatment, consistent typography, clear focus states.
Technical implementation
- Two ACF blocks, one output: The ‘CPT Query Block’ and the Manual (Repeater) Block’ are separate blocks; both normalize their data into a single
$companiesshape and share the samerender.phpand CSS so the table looks and behaves identically either way (and less effort to maintain). - Safe data layer: whitelisted query options, type-checked ACF values, helpers like
cba_acf_bool_from_meta()so missing/unchecked fields don’t break the UI. - Theme-agnostic CSS: scoped under
.cba-comparison-wrap, px typography so themes/Bricks don’t override.
Edge cases & missing data
- No logo: space kept on desktop; empty logo container hidden on tablet/mobile.
- No rating/fee/team size: placeholders or blank cells; ARIA adjusted when rating is missing.
- Optional CTA/links: only rendered when URLs exist (no dead buttons).
Bricks Builder example & tradeoffs
- Goal: show the same comparison pattern built in Bricks (containers, grid, repeater). No custom PHP block.
- Context: Bricks Builder is Clever’s primary visual builder; using it can shorten timelines and reduce maintenance when the use case fits.
- Scope: focused on structure and main layout; not full pixel/breakpoint parity due to time.
With more time / future iterations
- Interaction: sorting, filtering, “best match” or similar.
- Editor needs: better tooling and controls for content teams.
- Bricks: use builder custom blocks when the use case fits—faster to ship, simpler for editors, and less maintenance than hand-coding every variation.
- Git + versions: keep the block plugin in a private Git repo and ship tagged releases so changes are reviewable and easy to roll back.
- More data, shown on demand: add extra fields over time, but only surface them when needed so the table stays scannable.