I’ve noticed a growing discussion about extending WordPress core blocks and whether it’s necessary to create a custom block when you can often extend existing core blocks. Generally, it’s better to extend them rather than reinvent the wheel IMO.
In February 2024, I faced a situation where I needed to convert an old site into a new block theme while retaining some of its functionality.
Specifically, I wanted to preserve an enhanced animated header with navigation. As you scroll, the header animates away, then reappears as a fixed header, and its color transitions from white to green. Consequently, the full-color logo needed to switch to a white version.
To achieve this, I implemented various core functions, including the render_block_core/template_part filter hooks function, and added custom CSS using the WP_HTML_Tag_Processor class. I also had to jump into React to extend the core site logo block, adding a second logo during the rendering process (but hidden) and that swaps on the scroll event by adding all the JavaScript needed to manipulate the DOM elements.
I documented the entire process in a video on my YouTube channel, which you can find below. Feel free to watch it and leave any comments on my channel.
This video illustrates my approach to extending WordPress core blocks. Enjoy!
Leave a Reply