Editable button with RichText for Gutenberg custom block

As I said in my comment, your code worked fine for me.

But that’s probably because I used the default Twenty Twenty-One theme on a test site running the default WordPress setup (basically, almost no plugins).

And the reason I asked you, “is that the actual and entire code in your file“, is because the el and RichText variables in your block.js file are in the global scope (just like the wp object which can be accessed using just “wp” as in wp.blocks as well as window.wp as in window.wp.element), and thus the issue in question happened most likely because one of your variables may have “lost” its original definition which could happen because variables in the global scope can easily be overwritten by other scripts, be they in a plugin or theme, just as with global variables in PHP.

For example, you defined the el like so: var el = window.wp.element.createElement; which is equivalent to doing window.el = window.wp.element.createElement;. Now if a plugin later on redefined the variable in the global scope, e.g. var el="foo bar"; or maybe window.el="foo bar";, then your edit() and save() functions would be in trouble 🙂 (because the el is no longer a function).

So to prevent such issues from happening, scope your code, e.g. using Immediately-Invoked Function Expression (or IIFE for short), like so:

( ( function () { // <- 1. Add this line
    var el = window.wp.element.createElement;
    var RichText = window.wp.blockEditor.RichText;

    wp.blocks.registerBlockType( ... your code );
} )(); // <- 2. Add this line

And BTW, if you’re not already doing so, you should consider developing using ES6/ESNext and JSX, and then follow the JavaScript build setup in the block editor handbook for details on how to transform your ES6+JSX code to “normal” JavaScript (that can be understood by most browsers).