Automattic / isolated-block-editor

Repackages Gutenberg's editor playground as a full-featured multi-instance editor that does not require WordPress.
343 stars 50 forks source link

How to add custom scripts to this Block Editor #237

Closed markhowellsmead closed 1 year ago

markhowellsmead commented 1 year ago

Does anyone have a pointer please? I have a script which adds block filters to the regular Block Editor, which works fine and is enqueued to the regular WordPress Block Editor using the enqueue_block_assets hook.

I now need to enqueue this script so that it works in the instance of the Block Editor within the Advanced Custom Fields Extended plugin, which provides a Block Editor “field”. (I’ve asked the developer of ACFE, but he’s not able to support the Gutenberg editor to the level I need for my requirements.)

How can I achieve this? I've asked in the WordPress Core Slack channel, but they have advised that I need to ask here.

Many thanks!

markhowellsmead commented 1 year ago

I've seen #235 but as the standalone editor is from a third-party, I have no access to add my own scripts to their code…

johngodley commented 1 year ago

What is a custom script?

If your question is about a specific plugin then I'm afraid you'll need to ask the plugin author. We have no knowledge of third party systems and how to modify them.

markhowellsmead commented 1 year ago

When working with the block editor, you can add custom JavaScripts which add or remove functionality. For example, register a custom block, add a block filter, or filter the controls and toolbar which appear in the block editor. My question is, put simply, how to enqueue this script or add this script so that the Isolated Block Editor sees it.

johngodley commented 1 year ago

You enqueue and register things in exactly the same way as you do for Gutenberg, there's no difference there.

How you do this in relation to another plugin I don't know. Whatever script you have is going to be set up for the core editor, not custom editors, and I don't think it's going to just work without modifications. Those are things that need to happen in the plugin itself.

If you are able to modify the plugin then that is the best place to start - find out how it is using the editor, and then see what needs to change to support your scripts.

Sorry I can't be more exact.

markhowellsmead commented 1 year ago

So, you mean that functions like registerBlockType and addFilter don't work in this version of the block editor?

johngodley commented 1 year ago

No, I didn't say that. However, I don't know if your scripts are going to run without modifications either to the script or to the plugin.

markhowellsmead commented 1 year ago

That wasn't what I asked… I simply wanted to know how to enqueue the script. Using enqueue_block_assets doesn't load the script unless I'm working with the WordPress Block Editor.

johngodley commented 1 year ago

This project is not a WordPress plugin, and as such enqueuing is not a concept that is relevant to it.

If you have a WordPress plugin that uses this project, and you have some WP scripts that you also want to use then you will need to use whatever features WordPress provides. The WP enqueuing system should still work but, as I said, it is not something that is connected with this project, and not something we can support.

In the context of WordPress I do not know why your script is not working. Maybe it isn't loading at the right time. Maybe it needs modification to the plugin. Maybe it requires things that this editor doesn't provide. This is something you will need to investigate with respect to the plugin itself and the scripts you want to use. The load order is likely to be the problem.

I'm not trying to be difficult here, but we can only really answer questions that directly pertain to this project - a library that wraps Gutenberg for use outside of WordPress. If a third party WP plugin is using this project to provide an editor, and you want to add extra features to that editor, then you need to start with the plugin itself

I have no access to add my own scripts to their code

I suspect you will need to modify their code.

markhowellsmead commented 1 year ago

Thank you for taking the time to answer my questions. Let's forget WordPress for a moment, then. If I'm using this repository in a completely separate environment, how can I integrate a JavaScript which, for example, modifies the behaviour of the toolbar by adding a custom button? (I don't mean how to add the button, but how to "speak to" the editor using my own script.)

johngodley commented 1 year ago

There's a lot of information here about using the editor and the configuration options. Additionally, the standard Gutenberg functions are available, and you would use them in the same way. For example, you can create a filter, create a custom block etc. The timing is usually important, as with Gutenberg, and it generally has to happen before you create the editor.

markhowellsmead commented 1 year ago

Thanks for the link: I’d already been through this. After further exchanges with the plugin author, we’ve found that this version of the block editor conflicts with the WordPress version when both are loaded on the same page, so I’ll have to revert to an alternative tech. to solve the requirements.