10

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?

UPDATE: I made a pull request on the Gutenberg GitHub repository to try to implement the ability to override the default link target with a plugin. The latest version is here. As of writing, this has not yet been merged.

2

This was (finally) fixed to Gutenberg (and will be applicable for both the image and the gallery blocks); and will add an option to WordPress options' database table. this was done in https://github.com/WordPress/gutenberg/pull/25578 and https://github.com/WordPress/gutenberg/pull/25582

It'll be added to WordPress 5.6 but it's already available in the Gutenberg plugin.

To link the image to the file by default, issue the following in your theme or plugin:

add_action( 'after_setup_theme', function() {
    update_option( 'image_default_link_type', 'file' );
});

Replace file with attachment if you want to link to the attachment page for some reason, or none if you don't want to the image to have a link.

As for javascript: modifying blocks so that they alter the site's options is possible in Gutenberg although I haven't gotten it to work yet, check out: https://github.com/WordPress/gutenberg/issues/20731

Note that if you try do the image_default_link_type equivalent in javascript, don't use "file" and "post" as the options (as long as this ticket is open) - see https://github.com/WordPress/gutenberg/issues/25587

1
  • 1
    Thanks, I noticed that too and verified it works. Finally it's supported!
    – Sean
    Dec 7 '20 at 17:57
4

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
);
8
  • 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 '19 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 '19 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 '19 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 '19 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 '19 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.