7

I want to set the default target of the image block in Gutenberg to "Media File":

Link target

I've found solutions for the classic editor, and one that appears to work for Gutenberg galleries by editing the block's template, but I was under the impression that the intended way to modify the editor's behaviour is via JavaScript hooks in the block editor.

Is there a way to set the default target using a JavaScript hook in the block editor?

3

Using the filter blocks.registerBlockType we can alter block registration settings. We simply need to target the core/image block and modify the default value for the attribute linkDestination which is none by default.

function modifyLinkDestinationDefault(settings, name) {
    if (name !== "core/image") {
        return settings;
    }

    settings.attributes.linkDestination.default = "media";

    return settings;
}

wp.hooks.addFilter(
    "blocks.registerBlockType",
    "my-plugin/modify-linkDestination-default",
    modifyLinkDestinationDefault
);
  • 1
    Worked like a charm, thanks a lot! I wrapped your code in a ( function( wp ) { ... } )( window.wp ); block, and enqueued the script using the enqueue_block_editor_assets PHP hook. The enqueued script should have the wp-hooks dependency specified. – Sean Feb 2 at 9:37
  • 1
    And, to set the default for galleries, you must modify the core/gallery block and set settings.attributes.linkTo.default. Gutenberg inconsistencies... – Sean Feb 2 at 10:08
  • 1
    @Sean You can see here for what is the purpose of wrapping functions in that way. When you use a script dependency enqueuing your own script, in this case wp-hooks as you indicated, you can then safely use the contents of that dependency in your script. – Alvaro Feb 2 at 11:54
  • 2
    Update: unfortunately this solution doesn't actually work. The new default is set, but the href property is not - and this is required for the saved image to actually display the link. It seems that I actually have to somehow execute the onSetLinkDestination function to set the href, but this can't be done until an image is actually uploaded (i.e. not possible on the registerBlockType hook). Any ideas for how this might be fixed? – Sean Feb 6 at 18:35
  • 1
    I submitted a pull request to implement this in Gutenberg which was later improved by another user... if you need this feature, please poke the developers on those GitHub threads to implement it. – Sean Jul 28 at 19:43

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.