WordPress Extending Core Blocks

I'll demonstrate how to extend native WordPress core blocks to craft a visually appealing animated sticky header navigation bar. We'll delve into modifying the markup of core template parts using CSS classes and JavaScript to manipulate the DOM. Additionally, we'll leverage core WordPress React-powered blocks to enhance attributes and settings without the need to create new blocks. Knowledge of HTML, CSS, JavaScript, Node.js, NPM, and WordPress React components would be beneficial. Let's get started!

Пікірлер: 31

  • @danielibarra7375
    @danielibarra73755 ай бұрын

    This is the best tutorial I’ve seen so far for extending core blocks. Thank you for your work!!

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Wow! Thank you 🙏

  • @Sonya_Makepeace
    @Sonya_Makepeace5 ай бұрын

    Thanks, Elliot. This is going to require me viewing this video about 5 times, for it to sink in. Thank you very much for the time you've put into this.

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    More than welcome 👍

  • @mattsterp748
    @mattsterp7482 ай бұрын

    Thank you!

  • @elliottrichmondwp

    @elliottrichmondwp

    2 ай бұрын

    Most welcome

  • @NewwebmasterRu
    @NewwebmasterRu5 ай бұрын

    just wow very good explanation 👍

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Thank you for the feedback 🙏

  • @DarylMalibiran
    @DarylMalibiran5 ай бұрын

    Love your editing! Thanks for this new tutorial

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Glad you liked it! And thank you so much for the positive feedback, much appreciated 🙏

  • @__Aasim
    @__Aasim5 ай бұрын

    Subscribed, Gold content for learning Block theme.

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    🙏

  • @HashimWarren
    @HashimWarren5 ай бұрын

    thank you for this tutorial. I plan to start getting into extending core blocks

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Go for it! Would love to know how you get on 👍

  • @cholo2605
    @cholo26055 ай бұрын

    Thanks you , super usefull!!!!

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Thanks for the feedback, glad you found it useful 👍

  • @thesharifdev
    @thesharifdev5 ай бұрын

    Nice! Thanks ❤

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    No problem 😊

  • @ddrci88
    @ddrci885 ай бұрын

    nice

  • @maxziebell4013
    @maxziebell40135 ай бұрын

    This might be helpful as I am playing with HTMX. Sound has an echo on it?

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Yeah, I noticed that on one clip after I uploaded, apologies about that, not sure what’s happened but it was on a fusion clip 🤷‍♂️ rest assured it’s only on a small clip.

  • @tsxpneo
    @tsxpneo5 ай бұрын

    Thanks for the comprehensive tutorial! Very helpful! One question though - wouldn't creating a block variation have been more appropriate in this case? Doesn't this approach limit the use of the core blocks to one instance only because all other instances would equally be affected by your customization even if you wouldn't need or want the customization for, say, a secondary image, or another site logo in the footer?

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Great question 👍 If you’re referring to a style variation, I’m not certain that it would allow users to choose their own “alternative image” or “logo”; it would likely only result in a style change. My implementation demonstrates how users can define and use two different images. Additionally, there’s a conditional check based on the tag (), so the placement of the block wouldn’t be affected; it would be returned as intended. However, if there’s a bug I might have overlooked, I appreciate you’ve brought it to my attention, I’ll set up a test for that 🙌

  • @byfunkyoid2917

    @byfunkyoid2917

    5 ай бұрын

    I’m wondering the same thing. I’m new to all of this so my understanding is very limited but would this affect that block used elsewhere?

  • @tsxpneo

    @tsxpneo

    5 ай бұрын

    @@elliottrichmondwpYou're right, you're checking for the "header"-template part. So, it probably won't matter much in most cases, where there's only one navigation menu in "header". Still, imagine you have two menus in the header, one main and one offering functional navigation for login, privacy and legal info. The other navigation block would be affected because all changes apply to "core/navigation", wouldn't it? That's why I was wondering about "block variations", which are not "block styles" and which would, I think, allow you to register a copy of the core block (like core wp does with the different embed formats that are all variations of core/embed if I'm not mistaken) with a different name and then only target that new block with your code instead of all core/navigation blocks. That way a potential second navigation block in the header would be unaffected by your changes. This is what the block editor handbook says about "Block variations" - "Variations are an excellent way to create iterations of existing blocks without building entirely new blocks from scratch." developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/ developer.wordpress.org/news/2023/08/29/an-introduction-to-block-variations/

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    @tsxpneo You raise a valid point, and indeed, there are multiple ways to achieve the same goal. Block Variations is just one of them, and each approach should be considered based on the specific problem at hand. My tutorial presents "an approach" to the problem, but there are certainly other ways to accomplish it. I could refactor my code to improve it, as there's always room for enhancement. If my approach involved manipulating the 'core/navigation' block, for instance, I would likely take a different approach. However, in this case, I'm targeting the 'core/site-logo' block, which is only saved once in the database. Moreover, I'm conditionally targeting an image to append an element ID only if an alternative image has been selected, and only in the template. Therefore, my approach would still function correctly even if the site-logo block were placed in the footer. It's also worth noting that this is a unique case for a client website. If it were for commercial release, such as in a theme, I would probably approach it with a variation so I thank you for your sharing your thoughts and insights on this! 👍

  • @tsxpneo

    @tsxpneo

    5 ай бұрын

    @@elliottrichmondwp You're absolutely right to emphasize that there's different ways to get to the same result. As I suppose most people I'm also still relatively new to block development and "modern WP development", so clearly my thoughts are mostly that: my thoughts. And I would like to thank you again for your tutorial which I find very helpful! It's also a testament to the level of complexity necessary in "modern development" compared to classic php theming when it comes to customization that cannot be done by patterns of core blocks and/or theme.json.

  • @CarlMadsen
    @CarlMadsen5 ай бұрын

    the audio is VERY choppy at 3:00-3:46

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Yeah sorry about that, not sure what happened, only noticed it after the render, I’ll see if I get more info on what might have caused it 🧐

  • @user-vw4pe3zs8u
    @user-vw4pe3zs8u5 ай бұрын

    isnt wordpress dead yet

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    Nope 😍