From Gutenberg Blocks to AI-Assisted Code: A Real Website-Building Case Study
Try MaxiBlocks for free with 500+ library assets including basic templates. No account required. Free WordPress page builder, theme and updates included.
Website building has always evolved by removing one bottleneck at a time.
First, content management systems removed the need to hand-code every article and page. Visual editors then made layouts easier to create. Gutenberg changed WordPress again by turning paragraphs, images, buttons, columns and other elements into flexible blocks. Tools such as MaxiBlocks extended that idea with a broader design system, reusable patterns and more visual control.
Now AI is introducing another change. Instead of beginning every project by choosing a theme or assembling a page section by section, a website creator can begin with a business problem, describe the required outcome and work with an AI coding agent to produce and refine the implementation.
We recently explored this approach by using Codex to create the Tint & Seal window-film website, a focused local-business site serving George and the Garden Route. The project offered a practical way to compare an AI-assisted custom build with the block-based WordPress workflow.
The result was not a simple contest between blocks and code. It showed that these approaches solve different parts of the website-building problem—and that the strongest workflow may combine ideas from both.
How Gutenberg changed the WordPress starting point
Before the block editor, creating a distinctive WordPress page often meant working inside a single content field, using shortcodes or relying heavily on theme-specific settings. Gutenberg replaced that document-like editing experience with a modular system.
Each part of a page became an object that could be inserted, moved, styled, duplicated and reused. Headers, footers and templates could also be managed visually through full-site editing when a compatible block theme was used.
The Gutenberg WordPress editor made page creation more accessible, but a blank block canvas can still require many design decisions. Which hero structure should you use? How should services be presented? What spacing creates the right rhythm? How should the page adapt across different screen sizes?
This is where the MaxiBlocks WordPress page builder approach becomes useful. Premade patterns, page templates, style cards, icons and responsive design controls give creators a visual starting point without abandoning the native WordPress block workflow.
Instead of solving every layout problem from scratch, the creator selects a proven pattern and adapts it to the content and brand.
AI changes the starting point again
A pattern-led project often begins with a visual question: “Which layout is closest to what I need?”
An AI-assisted project can begin with a business question: “What must this website help the visitor understand and do?”
For Tint & Seal, the most important questions were not initially about colour palettes or column widths. Potential customers were dealing with hot rooms, uncomfortable glare, fading interiors or a lack of privacy. They needed to understand which types of window film might help, what the limitations were and how to request an assessment.
That gave the project a clear sequence:
- Identify the customer’s problem.
- Explain the relevant window-film options.
- Set realistic expectations about appearance and performance.
- Build trust with a clear process and useful answers.
- Make it easy to request an assessment.
Working with Codex meant that this customer journey could inform the structure, copy and code at the same time. We could review a working version, identify what was unclear and ask for a focused change without separating every revision into different design and development hand-offs.
What the Tint & Seal project needed
Tint & Seal is a local service business rather than a large publishing platform. Its website needed to remain focused and easy to navigate.
The finished site provides:
- Clear information about heat control, glare reduction, privacy, UV protection, frosted film and safety film.
- Separate residential and commercial use cases.
- A simple three-step path from enquiry to installation.
- Local relevance for George, Wilderness, Groot Brakrivier, Hartenbos, Mossel Bay and selected surrounding areas.
- Practical answers about privacy at night, suitable glass, fading, warranties and installation.
- An enquiry form that prepares a WhatsApp message without storing the visitor’s information on the website.
The WhatsApp enquiry is a useful example of purpose-built functionality. A conventional WordPress build might use a form plugin, configure storage and notifications, style the fields and connect the submission to another service. For this project, the required interaction was smaller: gather the details needed for an assessment, prepare a readable message and let the visitor decide whether to send it.
AI-assisted coding made it practical to shape the interaction around that exact workflow.
Gutenberg and MaxiBlocks compared with AI-assisted code
| Project consideration | Gutenberg + MaxiBlocks | AI-assisted custom code |
|---|---|---|
| Starting point | Blocks, patterns, templates and style cards | Business goals, user needs and technical requirements |
| Creation experience | Visual editing inside WordPress | Conversational direction, code changes and previews |
| Design consistency | Reusable patterns, global styles and template parts | Reusable components and a project-specific design system |
| Custom functionality | Core blocks, plugins or custom blocks | Can be written for the exact interaction required |
| Content editing | Established WordPress publishing workflow | Depends on the editing system included in the build |
| Site handover | Familiar dashboard for WordPress users | Requires a documented code and deployment workflow |
| Ongoing maintenance | WordPress, theme and plugin updates | Code, dependencies, hosting and deployment |
| Best suited to | Editable, content-led WordPress websites | Focused websites and specialised interactions |
The table highlights an important point: AI-assisted code is not automatically better because it is newer. Gutenberg and MaxiBlocks offer a mature editing environment that custom code does not provide by default.
Likewise, WordPress is not automatically the best answer simply because it can support almost any kind of website. A focused service site may not need every capability of a full content management and plugin ecosystem.
Where blocks remain especially strong
Visual control for non-developers
A block-based site can be edited without opening a code repository. Business owners and content teams can change text, replace images, rearrange sections and publish articles through a familiar interface.
Reusable design patterns
Patterns preserve the design work that creators should not have to repeat. A well-designed hero, feature grid or call-to-action section can be adapted across many projects while maintaining good spacing and hierarchy.
Full-site content management
WordPress already understands posts, pages, authors, categories, media and publishing roles. For a website that will grow into a large resource, news platform or marketing hub, those capabilities are extremely valuable.
A practical client handover
Many clients already know WordPress or can learn its basic publishing workflow quickly. A MaxiBlocks site remains part of that recognisable environment while giving them more visual flexibility.
Where AI-assisted development changes the workflow
Faster movement from intent to a working version
A written brief can become something testable sooner. Reviewing a functioning page often produces better feedback than discussing a static description of what the page might become.
Closer connection between content and implementation
If a service explanation changes, the page order, calls to action and supporting interface can be reconsidered at the same time. Strategy, copy, design and development do not need to remain isolated stages.
Smaller purpose-built features
Not every interaction needs a large plugin. AI can help create a focused feature when the requirement is clear and the resulting code is properly reviewed and tested.
Site-wide revisions through reusable components
A well-structured custom site can apply one change across every instance of a button, card or call to action. That benefit is similar to reusable blocks and global styles, but it is managed in code.
The most interesting option may be a hybrid workflow
The future of WordPress is unlikely to be blocks on one side and AI on the other. MaxiBlocks is already exploring the role of an AI website builder, and the two ideas fit together naturally.
A practical hybrid workflow could look like this:
- Use AI to analyse the brief, audience and conversion goal.
- Turn that analysis into a page structure and content plan.
- Select MaxiBlocks patterns that match the required hierarchy.
- Apply style cards and global design choices for consistency.
- Use custom code only for interactions that blocks or existing plugins do not solve cleanly.
- Use AI again to review accessibility, responsive behaviour, SEO details and content clarity.
This approach keeps the strongest part of WordPress—the editable publishing system—while using AI to reduce repetitive work and sharpen project decisions.
What website creators should take from this
The biggest lesson from Tint & Seal was not that AI can produce a website. Many tools can now generate pages.
The more useful lesson was that the quality of the result still depended on the clarity of the brief. The site needed accurate service information, realistic claims, a defined local audience and a clear next step. AI helped translate those decisions into a working system, but it did not remove the need to make them.
The same principle applies to block-based design. A large pattern library creates speed, but the creator still has to choose the right pattern for the content. Style cards create consistency, but someone still has to select a visual direction that suits the brand.
Whether the website is assembled with blocks or developed with an AI coding agent, professional judgment remains the part that connects the tool to the business result.
Blocks made website building modular. AI is making it conversational.
Gutenberg changed WordPress by making pages modular and visual. MaxiBlocks expanded that workflow with richer patterns, templates and design controls. AI now adds another interface: the ability to describe an outcome and collaborate on its implementation through natural language.
Each step removes friction, but none removes the fundamentals. A successful website still requires useful content, clear hierarchy, responsive design, accessibility, performance, trust and an obvious next action.
For content-rich sites and teams that want visual control, Gutenberg and MaxiBlocks remain a strong foundation. For a focused project with specialised interactions, AI-assisted custom code may offer a more direct path. For many website creators, the best answer will be to combine them.
The next generation of website building will not be defined by one tool replacing every other tool. It will be defined by choosing the right level of abstraction for each part of the job—and using AI, blocks, patterns and code where each provides the most value.