The introduction of Gutenberg in WordPress 5.0 gave developers and users the facility to build up pages of content using blocks. However, the new block editor is based on an entirely different technology stack than WordPress developers are used to using. This has caused a lot of frustration from developers in the WordPress community.
At Highrise Digital, we have used ACF in our development toolkit for a while now and were very excited to hear that ACF would be supporting creating Gutenberg blocks, using the same methods we have all gotten used to. And then the Highrise ACF Blocks Plugin was born – a plugin proving a suite of different block types, already created for you.
- A brief look at the Highrise ACF Blocks Plugin
Solving a development problem
- As a WordPress developer, have you ever found yourself writing the same code over again for different clients because it differs in a subtle way?
- Do you find that many of the sites you build are very similar in many ways and therefore require almost the same effort?
The Highrise ACF Blocks Plugin solves these problems by providing you all the stuff you have done over again for each project, whilst still giving you the control you need to modify things on a per-site basis.
You can use a core code-base which remains the same, is updatable across sites which leads to faster, more robust development.
Transitioning to a block-based editor in a pre-Gutenberg world
I have spoken at a number of WordCamps in the UK over the course of last year about our approach to building WordPress sites using a block-based editing system before the arrival of Gutenberg. The Highrise ACF Blocks Plugin allows you to bring these principles into the Gutenberg world but utilising the power of the Advanced Custom Fields ACF blocks method.
What is the Highrise ACF Blocks Plugin?
The plugin is built on-top of Advanced Custom Fields Pro and therefore requires this plugin to function correctly. In short, it does the following, speeding up your development of block-based WordPress websites.
- Provides a suite of blocks already built for you with many options for each block
- Template output for each block so you don’t have to focus on markup – just style them with CSS
- Many extensible features to allow you to customise things on a per-site basis – for example which blocks are available, the markup they output and the fields they contain.
What blocks are included?
I have been building WordPress websites for over a decade now, and with that experience, I have come to a conclusion that many sites are made up of the same basic building blocks and then designed or styled in a specific way. Therefore, when we built the Highrise ACF Blocks Plugin we wanted to include these basic building block options.
The plugin currently ships with the following out-of-the-box blocks, but as it is extensible additional blocks can easily be added:
- Accordion – perfect for FAQs
- Calls to action
- Content listing – for example displaying your latest blog posts or a specific set of posts
- Documents – great for providing a list of downloadable documents with an image preview
- Feature row – enables you to feature content with media (images or video) alongside some content (title, text and link)
- Hero – either a single slide for a hero image or multiple to create a slider
- People – good for a meet the team block
- Rich text – your classic editor block!
- Videos – includes lazy loading iFrames from Youtube and Vimeo videos
Can't I already create those layouts with Gutenberg alone?
Well, yes, kind of, but not quite… Let me explain.
Gutenberg is great at taking individual elements and laying them out in a page on top of each other. However, at the moment what it is not great at is allowing you to wrap elements together. For example with Gutenberg, you can create a title, text, image and a button. However, there is not a super easy way to group those together as a call to action block with specific classes etc. that developers can use to target for styling.
Having these block defined like this gives less control over the way they look and behave, something which editors don’t necessarily want or need. It means they can focus on adding their content in an easy to use interface and then you, as a developer can control how that data looks on the front-end of the site.
Template output taken care of
Another real advantage of the plugin is that it handles all of the template output for each of the blocks. Therefore you don’t have to worry about all the logic in your templates for getting the data and outputting it to your templates.
This is a massive time saver as we spent lots of time doing the same loops and while loops for clients which were almost the same.
Isn’t that really restrictive?
The markup used for the template was thought about for a while in terms of what was best and we have tried to make it as flexible as possible. We have produced some very different looking blocks using the same markup and using CSS to make them look very different.
If all that fails then you can use the extensible template override feature to make a copy of the template output for a specific block, placing this in your theme and then it is used instead. You can then make changes to the template without it being overridden in a future plugin update.
A highly extensible plugin
Those who know me, know that I am very passionate about developing solutions using WordPress in an extensible way. These principles were key to the building of the Highrise ACF Blocks Plugin.
Being extensible means you can tweak the functionality of the plugin without changing the plugin code itself, protecting your customisations when the plugin gets updated.
Below are just a few of the ways in which the plugin is very extensible.
- Easily add blocks – use WordPress filters to add new blocks if you need something more specific
- Modify existing blocks – need to remove a field from a block or add a field in? No problem, you can do this using the filters available and a little PHP code
- Template overrides – maybe you need some specific markup to achieve the design you have? No problem you can override the default template out by including it in your theme where it will be loaded from instead
- Many actions and filters provided where you can hook into the code base to change things. Some example are filtering image sizes, output and before and after hooks
- Utility classes – each block has a number of different classes applied depending on the block properties. For example, a call to action block has classes for the number of calls to action that have been added.
- Custom block classes – Gutenberg provides the opportunity for each block to have a custom class applied. This is perfect if you need to make a style change for a specific block.
For me at least, the extensibility of the plugin is one of the best and most time-saving features. If you are new to extensible WordPress development, why not read my guide to WordPress hooks, actions and filters.
Interested in the Highrise ACF Blocks Plugin?
We are not quite ready for launch just yet but it won’t be very long. If you are interested in getting your hands on using the plugin for your projects then please fill out of this form and we will keep you updated on the progress.