Gutenberg: Prevent links from being clickable in the block. Error: "Cannot destructure property 'frameElement' of 'r' as it is null."

Question

I added my block to an article and the new full site editing. The block renders an tag. When I select the block in the editor I click on the tag and I get a "Cannot destructure property 'frameElement' of 'r' as it is null." and reloads itself.

export default function Edit( { attributes, setAttributes } ) {

    return (
    <div { ...blockProps  } >
    <InspectorControls>
        <Panel>
            <PanelBody>
                <PanelRow>
                    <MyFontSizePicker />
                </PanelRow>
            <PanelRow>
            </PanelBody>
        </Panel>
    </InspectorControls>
        
    <ServerSideRender 
        block="game-review/random-game" 
        attributes={ attributes }
    />
    </div>
    );
}

The callback does something like this:

function render_random_game(){

 $link = '<a ' . $fontsizeattr . ' href="' . $url . '">' . $game_title . '</a>';
 return "<p>" . $link . "</p>";

}

Any idea why this happens? Other blocks from my other plugins run fine. Here is the full source code for context: https://github.com/mtoensing/game-review-block/tree/main/blocks/random-game

Answer 1

It seems that this helped:

$is_backend = defined('REST_REQUEST') && true === REST_REQUEST && 'edit' === filter_input(INPUT_GET, 'context', FILTER_SANITIZE_STRING);

 if ( $is_backend == true) {
        $url = "#void";
    } else {
        $url = get_permalink( $post_id );
    };

$link = '<a ' . $fontsizeattr . ' href="' . $url . '" target="_self">' . $game_title . '</a>';

return "<p>" . $link . "</p>";

#void worked for me.

Answer 2

The best practice seems to use tags and not tags in the backend for server side renders.

$is_backend = defined('REST_REQUEST') && true === REST_REQUEST && 'edit' === filter_input(INPUT_GET, 'context', FILTER_SANITIZE_STRING);

$tag = 'a';

if ($is_backend) {
   $tag = 'span';
}
            
$html = '<'.$tag.' href="' . $url . '">' .  $title . '</'.$tag.'>';