1

Let's say I want to monitor all the editor blocks. In the standard editor (5.2.2) I can just select the blocks with e.g. $("div.wp-block"). Will this work across plugins etc or will some plugins alter the editor blocks class/id?

In other words, are there plugins/page builders, etc that alter the DOM structure so that the blocks do not have the "wp-block" class?

I am worried that if the user, for example, uses a plugin that alters how the editor looks/works will break this jQuery select for me?

If using jQuery selectors to get the editor block will not work in some cases, what would be a better approach to do this? I just need to monitor all text users enter in the editor blocks and match to certain keywords.

  • You probably shouldn’t be using jQuery in the block editor at all. The block editor is a React application and has its own APIs for interacting with it. Manipulating it with jQuery could actually break things if the resulting markup isn’t what’s expected for a given state. What are you ultimately trying to do? – Jacob Peattie Jul 17 '19 at 14:52
  • I am not manipulating it, just monitor the content of the block. It works very well in my dev environment, just worried that there are plugins that DO manipulate the blocks, change their class and id, etc? – Andreas Toresäter Jul 17 '19 at 15:03
  • There are APIs available for this sort of thing in Gutenberg such as the wp.data package where you can subscribe to changes. I'd be happy to provide an example if you can outline what you want to monitor on the blocks. As an aside, I believe you can customize the wp-block class so that might not be reliable – Welcher Jul 19 '19 at 16:56
  • The purpose is to monitor all the text content in the post to see when it changes (text added/changed/removed) but also if a new block is added/removed. I do this now by adding focusin/focusout event listeners to all "div.wp-block" and comparing the content of the blocks before and after. – Andreas Toresäter Jul 20 '19 at 4:34
0

You probably shouldn't use jQuery with gutenberg block-editor. Instead, use api access like:

wp.data.select("core").XXXXXXX()
wp.data.select("core/editor").XXXXXXX()

where you should replace xxx with desired functions. You can list them with console.log(wp.blocks.getBlockTypes()); while on block-editor page.

  • How can I monitor changes to the text like that? I do not see any way to listen to events? – Andreas Toresäter Jul 22 '19 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.