How can I block embeds and show an individual preview image per block?

I am trying to program an embed blocker for the default Gutenberg embeds with a prior consent banner and preview image (for matters of privacy). In detail:

  • block YouTube videos that are embedded via the Embed-Block (core/embed)
  • replace them with a custom HTML banner
  • including individual preview image per embed/block
  • after consent show the embed as normal

So far I got a very good foundation with Borlabs Cookie plugin, that has some content blockers integrated from the start. For the moment I use the filters that the plugin is giving me, and customize the html and css. Now this is the crucial point: I want to show an individual preview image per embed.

My current approach would be:

  1. Extend the core embed block with an image field, named e.g. embed_preview_image. Great tutorial I found: https://awhitepixel.com/blog/add-custom-settings-to-existing-wordpress-gutenberg-blocks/ ...
  2. Integrate a blocker with the 'embed_oembed_html' filter (https://developer.wordpress.org/reference/hooks/embed_oembed_html/) or just let Borlabs Cookie do the magic and customize the templates there with the plugin's filter...
  3. In order to include the image from the custom field on the individual block I need access to the block data from the current processed block, within the filter. I thought of parse_blocks() but this is giving me all of the blocks, and then I would need some regex to sort out the right block... I think there must be a better way...(?)

So, is there a correlation between the oembed filter and the current parsed embed block or something? Or do you have some hint for me?

EDIT: Added my current code examples

EDIT 2: Updated code with native WP filters

Use filter to modify output


/**
 * Show embed consent before embed is shown
 *
 * @link https://developer.wordpress.org/reference/hooks/embed_oembed_html/
 */
function edit_oembed_html($html, $url, $attr, $post_ID)
{   
    /** 
     * Replace embeds that are inserted via Gutenberg (Videos, Instagram, Twitter, etc.) with placeholder
     */

    // Default labels
    $description = 'Lorem ipsum...';
    $link_label = 'Link to...';

    // Default thumbnail
    $thumbnail = 'https://via.placeholder.com/800x450'; // Just a fallback

    // Check if the thumbnail should be individual per embed
    // if ( $this-embed-embed_blocker_thumbnail ) { // PSEUDO CODE

        // ISSUE: Here I want to get an individual preview image for that specific current embed
        // $thumbnail = $this-embed-embed_blocker_thumbnail[src]... PSEUDO CODE

    //}

    // Build HTML template
    $html = '
        div class=v4core_embed_blocker
            div class=v4core_embed_blocker_content_wrap
                img class=v4core_embed_blocker_thumbnail src='. $thumbnail .' alt='. $name .'
                div class=v4core_embed_blocker_content
                    span class=wp-caption-text v4core_embed_blocker_description'. $description .'br/a class=v4core_embed_blocker_link href='. $url .' target=_blank'. $link_label .'/a/span
                /div
            /div
        /div';

    // Return it
    return $html;
}
add_filter( 'embed_oembed_html', 'edit_oembed_html', 10, 4);

Topic block-editor privacy embed Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.