TL;DR: I built a simple custom menu block and got it to render in the editor no problem, but it took hours of poring through WordPress docs and SO/SE discussions and fiddling with **edit.js** and **save.js** to figure out how to get it to render on the live site. I finally found [an implementation on StackExchange]). It involves creating an additional vanilla JS file (**client.js**) that listens for the DOM to load and then individually renders the block with its own script.
**My main question is if this is best practice for block development or if it’s a hacky workaround and there is a better way to do it.**
**FULL POST:**
Hey all,
I am hoping that this post will be a place where some discussion around best practices for block theme and custom block development can happen so that it might be a good resource for newish WP devs like me.
I am a web developer that has worked mostly in the JavaScript ecosystem. About 6 months ago and out of necessity, I took a job managing a large WordPress site for a local business and have been learning a lot about traditional WordPress architecture, development, and maintenance.
I’ve recently taken on a side project helping my friend build a website for his fledgling business. I am doing it for free with the trade-off that his business will provide some services for me in the future and that he understands that I am using this project as a learning experience and will be experimenting with things that may be out of my depth and may take more time for me to learn. We’re both okay with the deal.
I wanted to try block theme development because I am more comfortable in JavaScript than PHP, and I am experienced with coding in React, which made me think block themes might be more in my wheelhouse. Blocks also seem to be the way that WP is going, so I wanted to build something for my friend that would last into the future.
The task I chose to tackle first was the navigation. The default navigation block with the full-screen overlay, the lack of nice transitions, and the limited icon choices couldn’t be customized enough for the design we agreed on, so I decided to build my own custom menu (a task which took me 5 minutes to prototype and view live in a React project).
The first hurdle was figuring out if a custom menu was meant to be built into the theme somehow or if it had to be built as a block/plugin. With the idea that the theme should control layout and appearance of content, it seemed like I should be using the theme to control how the menu looks, but after a bunch of reading, I couldn’t find a way to achieve what I wanted through theme files and decided to try building a block (I’m still not sure if this is correct, but I’m also not sure how I would have implemented the same thing through theme files).
[gif of the rough nav menu we want to implement with a custom animated icon and a nice slide transition])This is the implementation I ended up with:
**edit.js**
[edit.js file, which allows the custom menu to render in the editor view])**save.js**
[save.js file, which is supposed to be responsible for the frontend rendering of a custom block, creates the wp-block-kwd-\[redacted\]-menu-block wrapper])**client.js**
[client.js, listens for the DOM to load and then renders my React component \<KwdMenu \/\> inside the wrapper created by save.js])**block.json**
[block.json, specifies that client.js has to be run for rendering the view])**kwd-menu-block.php**
[enqueue script function in the block’s main php file])My main issue is with the save.js file. From reading the docs and tinkering with it, I found that save.js cannot render React components or handle any React logic. While edit.js can just render a straight up React component in the Gutenberg editor, save.js cannot render a React component in the client. This made absolutely no sense to me because save.js is supposed to be responsible for front-end rendering, and React is a front-end JS framework. What was the point in incorporating React, whose purpose was partially to make DOM manipulation and rendering of reactive page elements easier, only to require this convoluted method to render a React component in the client?
This made me think that I must have implemented this incorrectly because it is so many steps (the most crucial of which doesn’t seem to be documented anywhere) just to render a simple component. Is this the tradeoff that comes with using WordPress for client convenience? You don’t have to build your own CMS, but you have jump through five hoops to render each custom block?
I would appreciate any feedback or discussion you all have on these questions:
* Was I correct to implement the menu as a custom block? Was there a way to do it through theme files?
* Is this implementation best practice for block development or is this just a hacky workaround? Is this the intended client-side rendering method for custom blocks? Why can’t save.js return a React component for the client while edit.js can return a component for the editor?
Thank you for any help or discussion you can offer!
​
​
[ad_2]