– an exercise in block customisation

Parallax is a term which is used to describe movement on a web page – specifically when individual items move at different speeds as you scroll down the page.

Generally some Javascript is used to achieve this (since the position of each item on the page must be adjusted depending on how far you have scrolled and the scroll position can only be determined by using Javascript). There are other ways to produce a parallax effect but, perhaps unusually, the Javascript method is the cleanest and makes the most sense.

The WordPress Cover Block offers a “Fixed Background” option. This makes use of CSS to hold the background image in place while scrolling, thus making an attempt at providing some movement (without Javascript). But this is not true parallax (which generally shows a more subtle difference in movement).

Parallax for the Cover Block

I want to offer a “True Parallax” feature for the cover block, by adding a small amount of Javascript to the page (in the front end) when a cover block is in use, and customising the block to allow the writer of the page to choose “True Parallax”.

I need to adapt the Cover Block to allow the user an easy way to choose the “True Parallax” option.

There are a few alternative methods for adapting an existing block, listed here in order of increasing complexity.

1. Add 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. Add 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. Customise the block using Block Filters to add and handle additional block attributes, such as a “true parallax” toggle button.
4. Create an entirely new Block. This would be a new version of the existing core block, with attributes modified to meet our needs. (Start by finding the block in the WordPress code reference, then copy the code and edit as desired).

An Exercise in Customising the Cover Block

As an exercise, I employed each of these methods of implementing the “True Parallax” option on the Cover block. The end result on the front end of the site is exactly the same – the block has a new class of “is-style-true-parallax”, and my parallax Javascript runs for each block which has that class.

However, within the editor, the method of choosing “True Parallax” is different in each case – and my experiment has allowed me to:-

1. Learn what coding is required to add the option in each case.
2. Experience using each alternative – which method is clearest to spot, easiest to use?
3. Conclude which method makes the most sense for my purposes.

The code involved is discussed in the following posts, along with my conclusions on the best approach for this particular case.

---

Adding Custom Javascript Only When a Specific Block is Present

We need to add a small Javascript file to the front end of the site, only if the Cover block is present on the page.

Read more…

---

Adding a Custom Block Style

---

Adding a Block Variation

---

Customising a Block using Block Filter

---

Creating an Entirely New Block

All of the methods tried in this exercise successfully add parallax to the cover block. Since it is clear that true parallax can be implemented by one of the simpler methods, I decided that there was little value in building an entirely new block for this purpose.

---

Best Method for Customising a Core Block

We compare the different methods for customising a core block and consider which method is best for the simple scenario of adding the “True Parallax” option to the cover block.

Read more…

---