• Hi everyone,
    I am trying to create a custom embed for our WordPress CMS Gutenberg editor.

    Here I was able to create a new variation for the core/embed type using this

    registerBlockVariation( WPBlockType.Embed, {
    name: 'wordhub',
    title: 'Word Hub',
    icon: embedContentIcon,
    scope: null,
    description: __( 'Word Hub.', 'ink' ),
    patterns: [ /^https?:\/\/(www.)*.com\/interactive\/.+/i ],
    attributes: { providerNameSlug: 'wordhub', responsive: true },
    } );

    and using the following hook to create the embed,
    wp_embed_register_handler( 'wordhub', '#https?://\/\/(www.)*.com\/interactive\/.+*#i', __NAMESPACE__ . '\\_word_embed_handler' );

    (please note that sample code regex is changed due to the privacy concerns )
    The question is once the embed is created and added into the editor, embed providerNameSlug is changed to ’embed-handler’.

    I found the place where this is injected in the code – https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-oembed-controller.php#L215

    Could you please help me to add a custom provider_name (depending on the URL) for this embed?

    Please note that this block is very unique requirement and I am not looking for workarounds, the requirement is to have a separate block in the Gutenberg editor to input the URL and embed.

    Thank you very much.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    Use the ‘oembed_response_data’ filter to alter the response as desired, including the provider_name. The line you linked where provider_name as ‘Embed Handler’ is assigned will never be reached if the above filter is returning valid data (line 196 of the same method you linked to). $data comes from get_oembed_response_data_for_url() (line 194), which is where the above filter is applied.

    Thread Starter nadunindunil

    (@nadunindunil)

    Hi @bcworkz ,
    Thank you very much for the prompt reply!
    Apologies for my ignorance I am really new to the WP ecosystem!

    I have already tried that hook, however, that didn’t work for me.
    The way I used it is as follows,

    function my_modify_oembed_provider_name( $data, $post, $width, $height ) {
        if ( $data['provider_name'] === 'embed-handler' ) {
             // Change provider_name to wordhub
         $data['provider_name'] = 'wordhub';
        }
    
        return $data;
    }

    However, now I understand why this didn’t work. (since the response didn’t return anything yet) Could you please help me to understand what kind of object will be sent into this hook when I create the block variation mentioned above? So depending on that, I could change the response conditionally.

    More Findings that might help you to understand the context:
    It is important to note that since the current site is not an oEmbed-supported site, the oEmbed request is failing. This is why line 215 of the code is being executed. It’s worth mentioning that the oembed_response_data hook is triggered only when the oEmbed request is successful and returns valid response data. In this case, since the request has failed, there is no response to trigger the hook.

    Thank you very much for your help!
    I really appreciate it.

    • This reply was modified 2 years, 1 month ago by nadunindunil.
    Moderator bcworkz

    (@bcworkz)

    Unless you’ve done something to disable it, all WP sites should not only be an oEmbed consumer, they should also function as an oEmbed server. If you place a link to any other WP site on its own line, it should be expanded into a card by oEmbed. On a normal WP site, it doesn’t make sense to call wp_embed_register_handler() because WP already has a handler. I’ve no idea what _word_embed_handler() callback would do. It’s conceivable it uses none of the built in WP oEmbed functions, thus none of the usual actions and filters would fire either.

    In the “oembed_response_data” filter, $data is not an object, it’s an array. The requested WP_Post object is also passed, as is the card’s width and height.

    The provider name is unlikely to be ’embed-handler’ in this filter. It should be the return from get_bloginfo( 'name' ). The fallback ‘Embed Handler’ (from the code you linked earlier) name is assigned after this filter only when the expected process fails. I’m not sure where 'embed-handler' is really coming from. It’s not from the code you linked earlier. 'embed-handler' !== 'Embed Handler'

    Why is changing the provider name important? Why bypass the default process by registering a different handler?

    Thread Starter nadunindunil

    (@nadunindunil)

    Hi @bcworkz ,
    Sorry for the confusion,
    word_embed_handler is actually the function attached to the hook oembed_response_data I just wanted to mention it didn’t work in my previous reply.

    “Unless you’ve done something to disable it” – We have disabled it. This was a previous requirement I guess. Users should not be able to embed all kinds of URLs.

    “I’m not sure where ’embed-handler’ is really coming from. It’s not from the code you linked earlier” – sorry again, this should be Embed Handler

    In fact, I tried the method even without an if block. Ex:

    add_filter( 'oembed_response_data', __NAMESPACE__ . '\\my_modify_oembed_provider_name', 10, 4);
    
    function my_modify_oembed_provider_name( $data, $post, $width, $height ) {      
         $data['provider_name'] = 'wordhub';
        return $data;
    }

    No luck though.

    Apologies for the ignorance again. I understand this is very niche. It’s due to that the customer is using a complex system with a WP headless CMS. So there are hundreds of custom implementations in the System. I was looking for a way to achieve this using an existing code in WordPress. However, considering all these restrictions from the custom tweaks, I feel like I might need to introduce a new block into the editor.
    Let me know your thoughts, Thank you very much for your help!
    I really appreciate it.

    Moderator bcworkz

    (@bcworkz)

    I think a custom block could be a good solution as far as I understand what you want to achieve. Is the block content intended to be from within the same site, or is it from external sites as well? Are they all WP sites, or is it variable? A custom block may not be feasible for variable external sites. If only internal content is needed, you have a couple of options for getting content. If there are external WP sites, you can utilize the REST API to get desired data, unless that has been disabled as well. This works equally well for internal content, though you can also directly query the DB for internal content. Using the API gives you the most flexibility and meshes well with how blocks work.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘custom embed block in gutenburg editor’ is closed to new replies.