2

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 );
  • The escaping is due to the regex needing to go inside a PHP string literal, it isn't a part of the regex itself – Tom J Nowell Feb 28 at 14:26
  • You could always ask for the padlet oembed code from wp.com support – Tom J Nowell Feb 28 at 14:34
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?

| improve this answer | |
0

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 );
    }

padlet embed example

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. enter image description here enter image description here

| improve this answer | |
  • This makes sense. I am planning to run as a plugin for a few embeds, and can enqueue a style sheet. However, I copied your code exactly, and am still getting a failed embed. Will go over again. – cogdog Feb 28 at 18:27
  • Would you clarify what you mean by "failed embed"? If you inspect the HTML, what do you see? If you debug $matches in wp_embed_handler_padlet e.g. error_log( print_r( $matches, true ) ); what do you see? I was thinking it could be an oembed caching issue, but after investigating, it looks like only native oembeds are cached. – Dave Romsey Feb 28 at 18:47
  • Ah, never mind. I was getting the fail in the block editor paragraph block, it works in the classic block. I guess I need to figure out how to add support or maybe write a block? – cogdog Feb 28 at 19:23
  • Can you use the embed block? When I do that, it works for me. – Dave Romsey Feb 28 at 19:39
  • Mine still fails in the embed block. Revised regex to simpler and explode on "/" suggested wordpress.stackexchange.com/a/359696/14945 – cogdog Mar 1 at 3:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.