Plans to overhaul our website had been on the schedule for a little while, and with January’s second rollout of full site editing features in the 5.9 WordPress update, it seemed like the perfect opportunity for us to mash two potatoes with one fork – rebuild the Big Bite site and give FSE a decent road test.
As one of the biggest developments in the history of the WordPress platform, FSE enables non-technical users to more easily build entire sites – including pages, posts, footers, headers and menus – using predefined blocks (WordPress core contributor, Carolina Nymark, provides a lot more info here). Although we’ve utilised some of the FSE functionality for a recent client project, and we’ve tinkered with it a fair bit since the first batch of features were released back in July 2021, for the new Big Bite site we wanted to go all in and exclusively use FSE to create it.
We’re really pleased with the results, which you can now see for yourself, however as with any new functionality it wasn’t all plain sailing so here we’ve highlighted some of the pros and cons based on the experiences of the team who put our new site together.
Empowering editors with a changed approach
As the world’s first agency to use Gutenberg to launch an enterprise level project, Big Bite has a great deal of experience when it comes to blocks, however building a site entirely with FSE features meant that we had to rethink our approach.
Everything has to be made in blocks, so that’s a new set of immediate challenges because you’re giving users control of everything…that means that things that were previously simple to build are much more complex initially, however the advantage is that once it’s built, it’s a reusable component.
Gareth Elwell
Senior Engineer
Our developers were able to put together a pretty good looking site in an incredibly short timeframe solely using FSE core blocks, however as we began to hit barriers we reverted to building custom blocks instead for a number of key requirements. This included a post preview card that features client logos – ordinarily, we’d code that into a template, however using FSE meant that it had to be coded into a block to give users somewhere to upload the logo or indicate if a logo isn’t required. Essentially we needed to think about all of the different ways that the block could be used, and accommodate those needs in advance.
Our team also needed to consider what could go wrong, and look at ways to prevent users from inadvertently impacting the site’s look and layout. Although that takes a lot more initial planning, it empowers editors – whether they’re technically minded or not – to use components in different ways in different places, which is likely to save a lot of development time in the longer term.
Visual uniformity without design rigidity
Another key advantage of FSE is the addition of block patterns, which are reusable layout elements created from groups of blocks. Patterns are a great time-saving measure that make it easy to adjust the look and layout of a page to better suit its content while staying on brand. A key point to note however, is that pattern creation should be left until the very last stage of development as any changes to blocks will impact patterns too.
We used patterns quite heavily to create the new site, and that does seem to be the most efficient way to go when it comes to building layouts, even more so than templates and template parts
Jonny Waters
Head of Design & UX
Once we’d defined most of the patterns for the site, we built many of the pages using them, with each page just taking a few minutes providing the content and images were ready. It’s not as rigid as having a predefined template, however everything is there to enable you to easily achieve design uniformity without being restricted to creating identical layouts. Where fixed layouts are required, templates are still a viable option.
While patterns deliver an improved experience for editors, the lack of responsiveness throughout FSE features is a pretty major UX drawback. It’s very much a desktop-first editor, and there were instances when building the new site where the team needed to compromise on how certain elements display on different devices. This means it does get tricky when trying to scale things down, and we constantly came up against different responsive challenges that we needed to build workarounds for.
An example of that, is where we have three posts from each category of our blog highlighted on the homepage. One of the post highlights is intentionally larger than the other two, and the way that we needed those to stack on smaller devices just wasn’t possible with the core blocks and features of FSE, so we again needed to write custom styles.
One of the big takeaways of this building experience for me, is that if I was using FSE to build another site, I’d initially look for areas that need to be fully responsive, and I’d approach those in a different way…I’d recommend sticking to core blocks for page layouts and section layouts, but when you get to component level layouts, go straight to building custom blocks instead.
Gareth Elwell
Senior Engineer
Creative control for simple sites
Building a site with nothing but blocks certainly pushed us to think a lot more about what each block should and shouldn’t do, and that ultimately results in a rich experience for editors. True to its original aim, FSE gives non-technical users much more creative control and flexibility than ever before, and makes it possible to publish lots of visually unique pages within the parameters of a distinct design system. FSE also delivers strong site performance – which is a huge plus point for readers and SEO rankings – and scores highly for a number of Google’s Core Web Vitals metrics, including first contentful paint, largest contentful paint, and speed index.
From our perspective as an enterprise WordPress agency, there may be occasional use cases where FSE offers an ideal solution – for example, where we have a client that’s simply looking to self-build and publish a large number of landing pages – however as it currently stands, FSE isn’t a realistic build option where custom post types and complex WordPress data is required. The responsive issues are also a pretty major challenge at this point.
Of course, it’s still early days for FSE, however for those looking to run simple but great looking sites, it’s a game-changer in terms of editor enablement. While it’s not yet comprehensive enough to cover the complexities that we encounter at Big Bite, it’s undoubtedly a major step towards delivering the ultimate experience for no code site builders.
