# Extending WordPress Core Blocks

- Link: https://elliottrichmond.co.uk/extending-wordpress-core-blocks/
- Published: 2024-07-23T10:08:41+00:00
- Author: 

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.

![Extending WordPress core blocks](https://elliottrichmond.co.uk/wp-content/uploads/
2024/07/scrolleffect-1.gif)

To achieve this, I implemented various core functions, including the `[render_block_core/template_part](https://developer.wordpress.org/reference/hooks/render_block_this-name/)`
filter hooks function, and added custom CSS using the `[WP_HTML_Tag_Processor](https://developer.wordpress.org/reference/classes/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](https://www.youtube.com/channel/UCJx2jPMo8t_ysy1HBrHAlOw),
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!

### Share this:

 * [  Facebook ](https://elliottrichmond.co.uk/extending-wordpress-core-blocks/?share=facebook)
 * [  X ](https://elliottrichmond.co.uk/extending-wordpress-core-blocks/?share=x)

### Like this:

Like Loading…