Allow extending the content of the block editor iframe content

[MatzeKitt]

What problem does this address?

I have an icon block to select an SVG icon and output it in the frontend. To allow customizing the icon properly, it is a dynamic block and the actual SVG is not saved in the editor. Since there are multiple thousands of icons available, I don’t use separate files (since they would result in too many HTTP requests on selecting an icon) but instead a single SVG file with the icons as <symbol> elements. In the block itself, I use a reference via a <use href=""> to display a single symbol of the SVG.

Currently, I use the admin_head hook to add the SVG symbols to the content, which works fine for the block editor when not inside an iframe. However, as soon as I switch to the iframed block editor, it has no more access to the SVG symbols and I couldn’t find any method to extend the iframe to allow custom content there.

What is your proposed solution?

Add a filter to allow adding custom content inside the block editor iframe content.

[CreativeDive]

You might be lucky that this works:

function add_svgs_to_iframed_editor( $settings ) {

    $your_svg_string = '';

    $svg_assets = array(
        'assets' => $your_svg_string,
        'isGlobalStyles' => 0,
        '__unstableType' => 'svgs',
    );

    array_unshift( $settings['styles'], $svg_assets );

    return $settings;

}

add_filter( 'block_editor_settings_all', 'add_svgs_to_iframed_editor' );

BUT! There is a bug, all imported SVGs are wrapped into a single SVG. This is invalid markup and also the reason why my SVG clippaths don't work. I wonder why all SVG files are wrapped in a single SVG, it certainly shouldn't be like that.

@ellatrix I pinged you, because you are the contact person for iframe implementations.

There is no official way to import SVG files into the iframe. There are countless variations on how you can use SVGs for design. The current way the core implements the Duotone SVG has a BUG and produces invalid markup, which results in SVGs with clippath context not working.

Is there a way to fix this bug or another official solution that allows us to insert additional markup in the iframe?

[CreativeDive]

A simple PHP filter or action would help here. Something like print_editor_assets().

[CreativeDive]

This is my hacky fix for now to solve the SVG bug:

/*
* Remove the invalid extra svg tag wrapper which is added by a bug in the core. 
* We need this hacky fix so that our SVG clippaths work in the block editor iframe.
*/

function fixIframeSVGBug() {
    const svgElement = glob.selector('.editor-styles-wrapper > svg[role="none"][viewBox="0 0 0 0"]');

    if (svgElement) {
        const svgs = svgElement.innerHTML;
        svgElement.insertAdjacentHTML('beforebegin', svgs);
        svgElement.remove();
    }
}

window.onload = function() {
    fixIframeSVGBug();
};

It's not nice to have to implement something like that, so I hope this bug gets fixed or an official way is provided how we can add SVGs in the iframe.

[simom]

I was trying to do the same thing without success and was just about to open a ticket.

Creating SVGs with symbols is quite common and there should be a method to add this type of markup in the backend editor, ideally with a PHP filter as already suggested.