Adding custom block in isolated block

[UsamaTheDev]

Hi @johngodley,

I have called the IsoEditor_Gutenberg() classes in my function.php and require the iso-gutenberg.php file as described here: https://github.com/Automattic/isolated-block-editor/blob/trunk/examples/wordpress-php/README.md

Added textarea in my custom file: <textarea id="isolated-block-editor-container"></textarea>

It is showing the block editor of the front end which is great but I also want to be able to add my custom block inside the isolated block textarea.

Is there a way I can add my custom block in the isolated block?

Do I have to make changes in the core files of the isolated block or is there any other way to achieve this functionality?

require get_template_directory() . '/isolated-block-editor/examples/wordpress-php/iso-gutenberg.php';

add_action( 'init', function() { $gutenberg = new IsoEditor_Gutenberg(); $gutenberg->load(); }, 5000 );

I have activated the Essential Blocks plugin all of its block are working good in the wp-admin but none of its blocks are showing on frontend: https://wordpress.org/plugins/essential-blocks/ Thanks.

[johngodley]

Sure, you add custom blocks in the same way as you do in Gutenberg - you load your block and register it. This needs to happen before the editor is shown.

[UsamaTheDev]

Hi @johngodley,

Thanks for your reply I have created my custom block how to load it before the editor is shown?

[johngodley]

You are in charge of when the editor is shown and it is something you will need to do in your code. It doesn't involved the isolated editor.

[UsamaTheDev]

Will it work if the block is registered before calling the class "IsoEditor_Gutenberg"?

add_action( 'init', function() { $gutenberg = new IsoEditor_Gutenberg(); $gutenberg->load(); }, 5000 );

[UsamaTheDev]

@johngodley Currently users can upload images from URLs. Is there also a way to allow users to upload images from the WordPress media library?

Thanks.

[johngodley]

I can't say whether it will work in your code. You will need to make sure that the block is loaded and registered before Gutenberg starts. You should look to Gutenberg documentation for help here as it is outside the scope of this project.

Yes, you can upload images. There are examples in the main readme, and there are other people asking the same question. This is also outside the scope of this project.

[UsamaTheDev]

@johngodley Yes, I understand it is outside the scope. I'm really stuck, on this one, I would really appreciate it if you could let me know in which file and where should I use the following code:

import { MediaUpload } from '@wordpress/media-utils';

addFilter( 'editor.MediaUpload', 'your-namespace/media-upload', () => MediaUpload );

import { mediaUpload } from '@wordpress/editor';

const settings = { your settings };

settings.editor.mediaUpload = mediaUpload;

What does the "your-namespace/" mean do I have to create two separate blocks?

I am using the following code in the footer.php

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const editorContainer = document.getElementById('isolated-block-editor-container');
    // Call the initialization function of the Isolated Block Editor
    if (editorContainer) {
      wp.attachEditor(editorContainer, {
        iso: {

        },
      }); // Adjust the function name
    }
  });
</script>

Thanks.

[johngodley]

It's not a question of which file. The code needs to run before you start the editor. It goes wherever your code is.

You can find information about namespaces in the Gutenberg documentation. It's just something unique to your project.