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.

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.

• plugin-development
• jquery
• block-editor

Share Improve this question edited Jul 19, 2019 at 10:48 Andreas Toresäter asked Jul 17, 2019 at 14:47 Andreas ToresäterAndreas Toresäter 6366 bronze badges 4

• 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 Commented Jul 17, 2019 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 Commented Jul 17, 2019 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 Commented Jul 19, 2019 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 Commented Jul 20, 2019 at 4:34

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.