– an exercise in block customisation
As an exercise, I tried a variety of methods for customising a core WordPress block, in order to learn about the different approaches and decide which might be best for my typical use.
The intention of the exercise was to offer a “True Parallax” feature for the cover block by adding a small amount of Javascript to the page, and customising the block to allow the writer of the page to choose “True Parallax”.
I considered:-
1. Adding a Block Style.
This is the simplest method. It supports the addition of a simple button to add a class to the block, along with styling to support that class.
2. Adding a Block Variation.
This is a method of offering a version of the block, which is pre-configured with particular attribute values, and potentially some pre-set inner blocks. It may appear to the user as a different block (with a different icon), which allows it to be easily identified.
3. Customising the block using Block Filters
Using a filter, we can add and handle additional block attributes, such as a “true parallax” toggle button.
4. Creating an entirely new Block.
This would be a new version of the existing core block, with attributes modified to meet our needs.
An Exercise in Customising the Cover Block
First, I needed to add a small Javascript file to the front end of the site, only if the Cover block is present on the page. A cover block on the page with class of “is-style-true-parallax” will cause the parallax Javascript to take effect.
Then, I investigated different methods for customising the core block, to allow the user to choose the “True Parallax” option, which will add the “is-style-true-parallax” class.
A Cover Block with Parallax
My experiment has allowed me to:-
- Learn what coding is required to add the option in each case.
- Experience using each alternative – which method is clearest to spot, easiest to use?
- Conclude which method makes the most sense for my purposes.
1. Which method is simplest to code?
The answer to this is the order in which the methods are listed above. Block Style is the simplest, Block Variation next; Using Block Filters and Creating a New Block are both more complex.
2. Which is most efficient method (from a smallest additional file size / performance perspective)?
Again, the answer to this is the order in which they are listed above. Block Style is the smallest additional code, Block Variation second, Using Block Filters third and Creating a New Block would involve the most additional code.
3. Which is simplest and clearest for the user to choose?
In my view, the clearest option for the user is to see Cover Block with Parallax as a separate block or as a Block Variation (which appears in the Block Inserter as if it was a different block, with its own icon). However, all of the methods (other than an entirely new block) also introduce some confusion.
Can I remove an existing attribute from a core block?
My implementation of True Parallax overrides Fixed Background. My ideal solution would be to add my True Parallax option and to remove or hide the Fixed Background option in the Editor settings sidebar. However, it seems that neither Block Variation nor Block Filters supports removing an existing attribute. It seems that the only way to remove an attribute would be to create an entirely new block.
Thus my preferred approach needs to balance simplicity of code v clarity for the user.
Which is the best method of customising the core cover block?
It seems unnecessary to build an entirely new block, just for this purpose. Using Block Filters introduces some confusion, since the True Parallax button is positioned in a different location from the Fixed Background (and Repeated Background) buttons. Since those buttons cannot be removed or hidden, for any of the options, there is really no value in choosing an approach which is more complex than it needs to be.
Using a Block Style keeps the choice of True Parallax away from the other background options (by sitting in the style tab), thus making it clear that it’s a separate and different thing. And yet this is also the simplest to implement. So I believe Block Style is the best approach, in this case.
