Register Embed Handler for Padlet.com

Question

I'm trying and failing to register an embed code for content from padlet.com (strangely it's supported in WP.com but not WP.org). A URL like

 https://padlet.com/cogdogblog/aos9fosbbwk4

should embed like

<div class="padlet-embed" style="border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:border-box;overflow:hidden;position:relative;width:100%;background:#F4F4F4"><p style="padding:0;margin:0"><iframe src="https://padlet.com/embed/aos9fosbbwk4" frameborder="0" allow="camera;microphone;geolocation" style="width:100%;height:608px;display:block;padding:0;margin:0"></iframe></p>

My attempt that fails so far

add_action( 'init', function(){
  $regex_url = '#https?://padlet\.com/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$#i';

  wp_embed_register_handler(
    'padlet',
    $regex_url,
    'wp_embed_handler_padlet',
    true
  );
});


function wp_embed_handler_padlet( $matches, $attr, $url, $rawattr )
{
  $embed = sprintf(
    '<div class="padlet-embed" style="border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:border-box;overflow:hidden;position:relative;width:100%;background:#F4F4F4"><p style="padding:0;margin:0"><iframe src="https://padlet.com/embed/%1$s" frameborder="0" allow="camera;microphone;geolocation" style="width:100%;height:608px;display:block;padding:0;margin:0"></iframe></p>',
    esc_attr($matches[2])
    );

  return apply_filters( 'embed_padlet', $embed, $matches, $attr, $url, $rawattr );
}

I am sure it is my regex clumsiness. It would sure help newbies like me if the Codex docs for this function had a better explained (and actually working) example.

And what form of regex is used in wp_embed_register_handler? None of the online testers I use have this format and requires escaping of / - looking for a place to test patterns that WordPress uses.

UPDATE After failing to find Padlet listed as an oembed provider https://oembed.com/ and not finding any documentation on their developer site https://padlet.readme.io/ I decided to wild guess at the URL for an oembed request from the format

 https://padlet.com/oembed?url=https%3A//padlet.com/XXXXXX/yyyyyyyyyy&format=json

or a real example

https://padlet.com/oembed?url=https%3A//padlet.com/cogdogblog/aos9fosbbwk4&format=json

And I get a response (this makes sense as this is how WordPress.com is likely supporting it). So now I get full support via the much simpler:

wp_oembed_add_provider( "https://padlet.com/*", "https://padlet.com/oembed/", false );

Answer 1

Have you considered using a simpler regex such as:

'#^https?://padlet\.com/(\?.+)?$#'

Then breaking apart the latter section with explode to get the video ID?

Answer 2

I think the issue is that the inline styles on the <iframe> are causing the embed to choke due to WP's sanitizing of the HTML. I was able to get the embed to work once I removed the inline styles and balanced the HTML tags:

    add_action( 'init', function(){
        $regex_url = '#https?://padlet\.com/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$#i';

        wp_embed_register_handler(
                'padlet',
                $regex_url,
                'wp_embed_handler_padlet',
                true
        );
    });


    function wp_embed_handler_padlet( $matches, $attr, $url, $rawattr ) {
        $embed = sprintf(
            '<div class="padlet-embed">
                <iframe src="//padlet.com/embed/%1$s" frameborder="0" allow="camera;microphone;geolocation"></iframe>
            </div>',
            esc_attr($matches[2])
        );

        return apply_filters( 'embed_padlet', $embed, $matches, $attr, $url, $rawattr );
    }

You can style the embed by targeting .padlet-embed in your CSS rather than adding the styles inline.

Edit: Tested in the block editor and it works on both the backend and frontend without any changes but you need to use the embed block.