H5P snippet using custom CSS file shows generatepress URL at top of screen

Hi there,

can i see the site where the link is appearing ?

Sure, it is under development, providing credentials below...

Correction: the front-end view of the link is not temporary, as you'll see in the link below.

I assume if you remove that H5P snippet then the URL goes away ?

That is correct.

Does that developer provide support ?
As we would need to know what this h5p_alter_library_styles hook is doing.
It shouldn't be returning anything inside the post content.

Thanks David. It's very difficult to get help from H5P but here's what I learned. The bloginfo function was the culprit, causing the generatepress link to appear at the top of the page.

They advised that I use a different wordpress function. This may not be in your scope to help, but if not please refer me, I'm happy to hire someone.

As per their advice, I used the plugin_dir_url instead of bloginfo. I moved the CSS file into this location:
/public_html/wp-content/plugins/h5p/admin/styles

This results in no error, but the fonts don't get updated either. Perhaps I'm having trouble placing the CSS file in the correct folder, or referring to it properly? I'm at a loss and very grateful for any advice that could point me in the right direction...

/**
 * Allows you to alter which stylesheets are loaded for H5P. This is
 * useful for adding your own custom styles or replacing existing once.
 *
 * The path can be relative to wp-content/uploads/h5p, so
 * 'path' => '/mystyles.css',
 * would try to load wp-content/uploads/h5p/mystyles.css
 *
 * The path can be absolute, so
 * 'path' => 'http://mydomain.org/custom-h5p-styling.css',
 * would to try to load the styles from the URL
 *
 * The path can be retrieved using WordPress functions, so for instance
 * 'path' => plugin_dir_url( __FILE__ ) . 'styles/general.css',
 * will try to load styles/general.css inside this plugin's folder
 *
 * @param object &styles List of stylesheets that will be loaded.
 * @param array $libraries The libraries which the styles belong to.
 * @param string $embed_type Possible values are: div, iframe, external, editor.
 */
function h5pmods_alter_styles(&$styles, $libraries, $embed_type) { 
    $styles[] = (object) array( 
        /*
         * Path can be relative to wp-content/uploads/h5p or absolute or set using
         * WordPress functions
         */
        'path' => plugin_dir_url( __FILE__ ) . 'styles/custom-h5p.css', 
        'version' => '?ver=1.3.7' // Cache buster
    ); 
} 
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);

Where is the style sheet saved ?

Okay, I got it to work. I just had to figure out how to interpret the comments in the above code snippet, and get the file location to match the path function called by the hook. I had to remove the [ plugin_dir_url( __FILE__ ) . ] function as I couldn't figure out what path it was pulling up.

Still a mystery to me how their hook works, but an H5P contributor pointed me here if anyone's interested:
https://github.com/h5p/h5pmods-wordpress-plugin/blob/master/h5pmods.php#L115

Code that worked when css file was uploaded into the folder /wp-content/uploads/h5p:

function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {
  $styles[] = (object) array(
    /*
     * Path can be relative to wp-content/uploads/h5p or absolute or set using
     * WordPress functions
     */
    'path' => '/custom-h5p.css',
    'version' => '?ver=1.3.7' // Cache buster
  );
}
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);

Thanks for your help, David!!

So glad to hear you got that working, and thanks for sharing... as i too have no idea what that hook is doing or why they would choose to do it that way lol