Theme Redone: A New Block-Based Starter Theme for Building WordPress Websites and Gutenberg Blocks with an MVC Framework

In the days before Gutenberg, the maturity of the WordPress theme ecosystem offered a diverse selection of dozens of well-known starter themes where developers were likely to find one that suited their individual preferences or could easily be modified. Theme authors have frequently asked if there is a good starter theme for building block themes, but at the moment there are really only a handful, as the block themes era is just dawning.

WebREDONE, a Serbia-based web agency, has open sourced its new starter theme, Theme Redone, that offers a foundation for building websites and Gutenberg blocks with an MVC framework:

We’ve taken the inspiration from Laravel and other similar projects that really approached this aspect of coding cleverly and made it a breeze to organize and reason about the code.

In Laravel, we would write plain old PHP for the logic, and then we would use Blade templates for the View layer, we also have model, view, and controller files to separate the concerns and organize code logically and efficiently. We have adopted that same approach but in the context of the WordPress environment. Conceptually, the way we organize code is similar to Laravel, but with a few differences.

Theme Redone brings this approach to Gutenberg block files, identifying a  model.jsoncontroller.php, and view.latte file. It uses the Latte templating engine. The JSON file contains the fields schemas with the data passed through to controller.php where it can be filtered or modified before getting passed to view.latte to be rendered on the front end.

Theme Redone Latte template files example

The starter theme uses Gulp 4 and ESBuild for compilation and watching tasks, configured to support React, Svelte, Vue, and Petite Vue out of the box. Its GitHub page summarizes everything included in the framework:

WebREDONE has developed a fast way to create new blocks through its TRB CLI (Theme Redone Blocks) NPM package, which will instantly create a new block with a single terminal command. It includes a custom UI along with the block preview image. The UI looks out of place inside block editor and somewhat more restricted in terms of controls available to users. This may not matter if the agency is creating sites that are not edited by users, but it seems confusing.

The theme’s creators have also written 50 pages of documentation over the course of two months, including how to get started, working with the template files, the theme’s helper functions, block structure within the framework, and more.

Theme Redone is an opinionated starter theme. WebREDONE decided to share it because it saves their agency time. It may not work for everyone, but it’s interesting to see the diverse ways agencies are evolving their tools to build websites more efficiently in the block era. Check out Theme Redone on GitHub for detailed installation instructions.

5

5 responses to “Theme Redone: A New Block-Based Starter Theme for Building WordPress Websites and Gutenberg Blocks with an MVC Framework”

  1. Hi WP Tavern team, and thank you for taking the time to write the extensive review of Theme Redone. The rest of the WebRedone team, and I, can’t be more grateful for the blog post.

    But I really need to address the “This may not matter if the agency is creating sites that are not edited by users” part.

    It’s exactly meant to be used by the users, not the agency owners. It’s a theme starter meant for developers and agencies that would create the UI that the users (clients) would then use. It’s meant to be used to build custom and performant websites based on the approved design and to deliver a clean and consistent editing experience to the user.

    Thanks again

  2. That’s great, thanks for sharing this. Looks like a solid and very well thought out starter theme. Just some questions:

    Is it full site editing compatible or plans for this?

    Plans to remove SASS and use modern CSS?

    Confirm UI components like tabs and accordions are not blocks so not for end user?

    Why use it’s own lazyload library when WP and most browsers already have lazy load?

    Not much mention of accessibility, is this something that is built into the starter theme and components?

    Is their ui components for form builder or just plugins used for that like CF7?

    Thank you!

    • Hi Lukasz, thanks for the comment.

      To answer shortly, we’ve been building the theme for over 2 years, and it’s been useful for us as is: It’s a balanced opinionated theme, let’s put it that way.

      To explain: It’s opinionated in a way that we have standardized the way we work with blocks and templates;
      On the other hand, custom integrations (like the forms that you mentioned, are left to the developer to integrate, it’s not a Premium theme, after all, just a solid starter). From our experience, forms integration choices vary from client to client as well: Some want to integrate Hubspot, Mailerlite, or Mailchimp, and some want custom-coded forms…

      We have plans to make it even better tho, which we will be focusing on very soon and will be documenting everything.

      Accordions, tabs, and similar are the building blocks for the developer to create the UI for the end user. (Again, with this theme we are focusing on developers and agencies that are offering custom solutions based on the approved design). For quickly building websites that are not tied to the design, we recommend native Gutenberg blocks (this doesn’t mean building sites with Theme Redone excludes native Gutenberg blocks, on the contrary, they work great together) and solutions like Elementor for example.

      Lazyloading: Because it’s optional. Sometimes you might want to lazy load images, sometimes you might not. (Theme Redone also has the possibility for lazy loading SVGs to improve the text to HTML ratio SEO metric, for example).

      a11y: Where it made sense yes. For example, carousels and dropdowns and similar already have aria-labels.

      Full Site Editing: For now we don’t have it done, but it’s on our list.

      We don’t have plans for removing SCSS, as it’s useful for readability and writing (BEM, OOCSS, etc…). It works with modern CSS, of course. We work with CSS variables, clamp, and similar on a daily basis.

      I hope I’ve answered your questions 🙂
      Thanks again!

      • Thank you, you did answer my questions adequately! When I have some more time I will give your starter theme a spin, as of now I adapted tracy debugger to one my projects and it really is VERY useful 🙂 way better then default debugging or xdebug(which none ever seems to know how to work with).

        Keep up the good work and thanks for sharing this!

  3. This is really cool! WordPress is still lacking too much developer friendliness. I can’t stress how important the work by companies such as yours is, because it thrives the community.
    On that note, I am a bit bitter about WordPress. I rather had them adhering to a concept, be it OOP or functional driven, than what the system currently is – a pretty stiff mixture of both, with no concept or plans for the future to improve in the slightest, focusing all energy on Gutenberg. I honestly think Gutenberg has potential. Still, it takes too much time to unlock all of it.
    I hope you stay dedicated to the MVC pattern and WP developement. Much good luck to you. 🙂

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: