customised gutenberg blocks wordpress

WordPress is trying to make everything editable for users that want to endlessly tinker with their websites, but what if you manage a larger corporate site and want to focus on content?

With Full Site Editing in development and page builders like Elementor, you get endless control over virtually every element of your website.

You can change fonts, colours, padding, and margins and add 100s of different CSS effects to the smallest element of your content.

While this might sound great, it can cause major problems for people who look after large sites that need to remain on brand.

Don’t micro-manage your website.

If you’ve employed a designer or agency to design the perfect on-brand site for your company, having too much control over every styling element can mean it starts to drift off-brand.

If you’ve more than one person working on the site, this can be an even bigger problem as people create content and style it slightly differently from one page to the next.

Over time, this can make your website look messy and amateur, which you don’t want.

Design is essential, but the content is crucial.

Your design team will have created visuals for the various elements of your website.

These will all be carefully considered and created in something like Figma or Adobe XD.

Going through all the trouble of creating pixel-perfect layouts and then not sticking to the layouts wastes time and money.

Here at Toast, we encourage our clients to see their site’s design as something with a start and end point, not something that continually evolves after the site goes live.

Sure, there will be tweaks, but the fundamentals of your professionally designed site should all remain the same.

The main thing that should change once you go live is the amount and quality of content on your website.

Well-written content will get your content ranking in the search; a well-designed site will then help you convert.

Whether an element on your webpage has a four or five Rem margin above it will seldom force a user to bounce back to the search results: this is why we believe the design should be fixed across your site.

This is where custom Gutenberg blocks come to hand.

While a lot of blocks in WordPress allow you to endlessly fuss over what are essentially design aspects, custom blocks, built with the awesome ACF plugin, can be locked down, so the focus is on the content rather than the layout.

Here are some reasons why custom Gutenberg blocks in WordPress can save you time.

  • If you work on content, you don’t want to run everything past the creative team before posting something – it will all be on-brand
  • A larger team working on the site can have the confidence to build new pages, knowing the blocks they are using are all design-approved
  • A head of marketing can be sure that the website won’t start to look awful
  • Pages and posts become a breeze to create, which means reduced time in getting content published
  • Blocks are built for a purpose, and there’s no limit to your block library so that the site can grow and new blocks can be designed and added as required

Locked-down does not mean inflexible.

Like a well-designed visual identity, styling custom WordPress blocks does not mean there are zero options when editing content.

A good bespoke website design will be consistent, but there will be options which often relate to padding and margins to space content on the front end.

Typically we suggest using the simple shirt-sizing method for adding some options back in: xs, s, m, l and xl.

Across the entire site, these sizes can be mapped to dimensions to keep the design and layout consistent.

So if you want to give your call to action block a little more space at the top and bottom (potentially due to the nature of the content above and below it), you can easily do this using the predefined options rather than guessing or constantly having to reference how you did it last time.

Custom Gutenberg blocks also save on development time.

Once your site has a set of custom blocks, the clone and change development process is quick.

Blocks can be cloned in seconds and tweaked to give you a new, similar block.

This type of modular development means that your site becomes very flexible.

Perfect for large websites.

Custom Gutenberg blocks are the right choice for larger, complex websites that are updated and edited by small or large teams.

The ability to manage the types of content on a larger website means that the front end will remain on brand, and content teams can concentrate on what they do best; producing great content.