📝 This post has been written by Vinuraj Varma.

Author bio: Vinuraj Varma is a Super Developer at Awsm Innovations, a UX focused studio that provides a range of design, web, and WordPress related services. He has over 11 years of experience in web development. His hobbies are blogging and gaming. A soft spoken technical expert with an unassuming attitude, he lets his works speak for him.

Building a snappy and fast WordPress frontend is what we always aim for and what most of our clients want. Besides, an easy-to-use content editing backend would increase the value. For backend, the WordPress or Gutenberg block editor more than meets the needs. By default, it comes with a dozen blocks and we can extend it to thousands of blocks from third-party WordPress plugins. Thus we can build our pages in any way we wish.

Coming to frontend, building a fast and responsive WordPress website with all those plugins and blocks in traditional PHP theme structure won’t work out that easily. As we are entering the age of server side rendering (SSR) and static hosting, blazing fast websites are the new norm. Taking advantage of this new age tech stack, we have Frontity, the React framework built entirely with WordPress in mind.

Frontity uses WordPress as a headless CMS and harnesses the power of the WordPress REST API to build a React based JAMstack website. It’s also highly extensible with Frontity packages and you can work with most of the React packages. In case you are stuck anywhere, then there is a wonderful community to rely on. Don’t forget the massive community of React devs, as the Frontity platform is based on React. In short, we could build a fast, reliable, scalable and secure frontend with Frontity.

Thus we have the Gutenberg editor taking care of the backend for adding/editing content, and Frontity as our frontend for a modern, fast JAMstack website.

F1 Frontity Theme

We’d like to introduce AWSM F1, our new starter theme for Frontity. You can see the theme demo here.

Out of the box it packs support for the most common Gutenberg blocks and, more importantly, you can extend it to further support any blocks.

We have included a bare-minimum Bootstrap CSS which combines the following Bootstrap CSS/SCSS files: functions, variables, mixins, root, reboot, type, grid, forms and utilities from the latest version. This essentially provides a starting point for resetting browser defaults and typography styles, form styles, creating custom layouts/grids and adding responsive breakpoints. Please note that we have not included any Bootstrap JS files.

The theme also adds support for the WP Job Openings WordPress plugin that combines our WP Job Openings Frontity package. All the default fields and the fields supported by WP Job Openings Pro are also supported in the job application form.

Installation and Theme settings

To install AWSM F1 theme in any Frontity project use the code npm i @awsm/f-one.

Then configure the AWSM F1 theme settings via the frontity.settings.js file. The theme options can be specified in the state.theme property under packages.

Using Gutenberg with Frontity

As we said earlier, the AWSM F1 Frontity theme supports Gutenberg blocks. We are using the latest Gutenberg blocks styles and themes file directly from the WordPress repository in the theme. The layout you build on the WordPress backend using Gutenberg blocks will reflect on the Frontity frontend. To further customize these blocks you can write custom style codes on Frontity.

In order to add custom styles to your Gutenberg blocks, you first need to add the child blocks inside a “Group” block and assign one or more CSS classes to it. Then you can use these CSS classes to style the entire block along with all sub-blocks inside the group block.

For any third party Gutenberg blocks you use in the WordPress backend, their corresponding stylesheet or CSS should be copied over to Frontity.

Pros

You can use Gutenberg blocks in the WordPress backend which can be reflected in the Frontity frontend.
Easy styling and customisation of Gutenberg blocks in Frontity.
You can add support for third-party Gutenberg block plugins by adding their CSS or Stylesheet to Frontity.
You can use Bootstrap helper classes and grid to build new layouts and sections.

Cons

Custom Gutenberg blocks with JS dependencies (like tabs, accordion etc) may not work as intended, as currently we can’t use those JS dependencies on React.
You need to adapt to the CSS-in-JS concept and emotion (it works similar to SCSS).
If you are linking custom stylesheets, Frontity can’t fully optimise the code base and it would affect your page ranking.

Resources

Please find the demo of the theme in the link shared below. For viewer’s pleasure, we have added a couple of standard pages with content, layouts formatted using Gutenberg blocks. We have also integrated WP Job Openings and Contact Form 7 plugins in the theme to show how well the plugins work with Frontity framework.

Demo: https://awsm-theme.vercel.app/
NPM Package: https://www.npmjs.com/package/@awsmin/f1
Git Repository: https://github.com/awsmin/f1
CodeSandbox: https://codesandbox.io/s/github/awsmin/f1

This is literally just a starting point for Frontity. That’s what “F1” is all about. What you can build on it is limitless. All we wanted to do is to build a solid starter theme that will encourage more developers to try and start using Frontity to build their projects.

We hope it will help people learn and build Frontity websites. If you have any suggestions or questions, please feel free to reach out.