A New Block-Based Starter Theme for Building WordPress Websites and Gutenberg Blocks with an MVC Framework – WP Tavern

Within the days earlier than Gutenberg, the maturity of the WordPress theme ecosystem supplied a various choice of dozens of well-known starter themes the place builders had been prone to discover one which suited their particular person preferences or may simply be modified. Theme authors have often asked if there is a good starter theme for building block themes, however in the mean time there are actually solely a handful, because the block themes period is simply dawning.

WebREDONE, a Serbia-based internet company, has open sourced its new starter theme, Theme Redone, that provides a basis for constructing web sites and Gutenberg blocks with an MVC framework:

We’ve taken the inspiration from Laravel and different comparable tasks that actually approached this facet of coding cleverly and made it a breeze to arrange and purpose in regards to the code.

In Laravel, we’d write plain outdated PHP for the logic, after which we’d use Blade templates for the View layer, we even have mannequin, view, and controller recordsdata to separate the issues and set up code logically and effectively. We now have adopted that very same method however within the context of the WordPress setting. Conceptually, the way in which we set up code is much like Laravel, however with a couple of variations.

Theme Redone brings this method to Gutenberg block recordsdata, figuring out a  model.json, controller.php, and view.latte file. It makes use of the Latte templating engine. The JSON file accommodates the fields schemas with the info handed by to controller.php the place it may be filtered or modified earlier than getting handed to view.latte to be rendered on the entrance finish.

The starter theme makes use of Gulp 4 and ESBuild for compilation and watching duties, configured to help React, Svelte, Vue, and Petite Vue out of the field. Its GitHub page summarizes every little thing included within the framework:

•  Latte templating engine for its stunning syntax and a extra streamlined and manageable workflow
•  EsBuild/Webpack + Gulp activity duties for compiling SCSS and JS
•  SCSS (SMACSS folder/recordsdata construction)
•  Javascript (ES8 and React/Svelte/Vue help, due to EsBuild and Babel)
•  In-theme framework for building Gutenberg blocks in a streamlined and standardized method
•  TRB CLI helper for scaffolding new Gutenberg blocks
•  Bare-bones grid system coded with Flex and CSS variables (about 15 strains of code)
•  Helper functions for repetitive duties corresponding to rendering photos, hyperlinks, SVG code, and extra
•  Just some well-written UI components to get you began (we don’t like bloat in our code): Modal, Accordion, Tabs, Menu, Dropdowns, Sliders, and easy “in view fade-in transitions”
•  SVG support
•  Tracy Debugger to assist us be sure we write steady and error-free code

WebREDONE has developed a quick method to create new blocks by its TRB CLI (Theme Redone Blocks) NPM package deal, which can immediately create a brand new block with a single terminal command. It features a customized UI together with the block preview picture. The UI seems misplaced inside block editor and considerably extra restricted when it comes to controls out there to customers. This will likely not matter if the company is creating websites that aren’t edited by customers, but it surely appears complicated.

The theme’s creators have additionally written 50 pages of documentation over the course of two months, together with find out how to get began, working with the template recordsdata, the theme’s helper capabilities, block construction inside the framework, and extra.

Theme Redone is an opinionated starter theme. WebREDONE determined to share it as a result of it saves their company time. It could not work for everybody, but it surely’s fascinating to see the various methods businesses are evolving their instruments to construct web sites extra effectively within the block period. Try Theme Redone on GitHub for detailed set up directions.