Support

Account

Home Forums Gutenberg Display block differently in editor and front-end

Solved

Display block differently in editor and front-end

  • I’m using ACF’s functionality to create a custom block. I’ve got everything working great using a template file.

    The block content has an image wrapped in an A tag with an href. However, in the editor I would like to omit the A tag so that the user does not accidentally click on it in the block editor and get sent to another URL.

    In short, is there some code/conditional I can put in my block render template so that my block renders one way in the block editor and a slightly different way in the front-end? A function of some kind? Or perhaps something in the $block object I can conditionalize against?

    Thank you!

  • I think I may have found my own answer:

    Is it $is_preview which is true during AJAX preview?

  • It is!

    In my template file $is_preview is true if the block is being rendered in the block editor and false if it is being rendered on the front-end.

    Yay!

  • Just in case someone else stumbles into this answer, I’ll add that there is a much easier way to prevent this specific problem of preventing the clicking of an anchor tag in the block editor.

    Enter CSS. =)

    
    .editor-styles-wrapper .your-block-class a {
        pointer-events: none;
    }
    
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.