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:
- 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/ ...
- 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... - 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