Change block type with hook

  • I know how I can use the ‘render_block’ filter to change a block on the front end.

    But I am curious how to change a block to another type using php or js hooks? I made a plugin which adds vimeo videos to the library. But of course when you select those video’s in the block editor it tries to show them as a local video. On the frontend it is working ok using the render_block filter. In the blockeditor I would also show it correctly.
    How can I do that? My thinking was to change to block type programmatically to a vimeo block if the selected video is a vimeo video. But I don’t know how to do that.

    thanks!

    • This topic was modified 2 years, 3 months ago by tsjippy.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @tsjippy
    To change the type of a block programmatically in WordPress, you can use the update_block function provided by the WordPress block editor. This function allows you to modify the attributes of an existing block, including its type.

    Here’s an example of how you could use this function to change the type of a block to a “vimeo” block:

    function change_block_type( $block ) {
  // Check if the block is a "video" block
  if ( $block['blockName'] === 'core/video' ) {
    // Change the block type to a "vimeo" block
    $block['blockName'] = 'my-plugin/vimeo';
  }

  return $block;
}
add_filter( 'render_block', 'change_block_type' );

    This code uses the render_block filter to modify the block before rendering it on the front end. It checks if the block is a “video” block, and if it is, it changes the block type to a “vimeo” block.

    Remember that this will only change the block type on the front end, not in the block editor. To change the block type in the block editor, you will need to use JavaScript to modify the block.

    You can use the wp.blocks.registerBlockType function to register your “vimeo” block, and then use the wp.blocks.unregisterBlockType function to unregister the “video” block. You can then use the wp.blocks.registerBlockType function again to re-register the “video” block, but this time as a “vimeo” block.

    Here’s an example of how you could do this:

    wp.blocks.unregisterBlockType( 'core/video' );
wp.blocks.registerBlockType( 'core/video', {
  // Define the block type as a "vimeo" block
  name: 'core/vimeo',
  // Other block type options...
} );

    Remember that this will only work if the block is actually a “video” block and not some other type of block. You may need to modify the code to check for the specific block type you are trying to change.

    Thread Starter tsjippy

    (@tsjippy)

    Thanks for your detailed answer.

    are you saying that the only way to change a block output in the blockeditor is to register your own version of it?

    so I should find the existing video block source code, modify it and reregister

    Hi @tsjippy
    Correct, to change the output of a block in the block editor, you will need to create your version of the block and register it using the wp.blocks.registerBlockType function. This allows you to customize the behavior and appearance of the block in the block editor.

    To do this, you will need to find the existing block’s source code, modify it to suit your needs, and re-register it using the wp.blocks.registerBlockType function. Remember that you will need to unregister the original block using the wp.blocks.unregisterBlockType function before you can re-register it with your modifications.

    It’s also worth noting that you can use the render_block filter to modify the output of a block on the front end, but this will not affect the appearance of the block in the block editor. If you want to change the appearance of the block in the block editor, you will need to create your version of the block and register it as described above.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change block type with hook’ is closed to new replies.