CSS modifications/process disabling editor in WordPress

Hi all,

I have set about making some minor css changes to the image hotspot content type on a WordPress multisite according to the process described here:

https://h5p.org/documentation/for-developers/visual-changes

The work was for an internal client and I chose to implement it via plugin for a variety of reasons but primarily not locking it into a theme (child theme approach) and scalability. For each additional request I get, I can just drop a similarly named css file into the appropriate blog directory.

My issue is this: when the plugin is active the CSS works fine for display, but the editor won't load. It just sits there spinning its wheels with the loading message and throws some js errors in the console.

h5peditor.js?ver=1.15.0:236 Ajax request failedh5peditor.js?ver=1.15.0:237

1. Object

h5peditor.js?ver=1.15.0:238 parsererrorh5peditor.js?ver=1.15.0:239 SyntaxError: Unexpected token h in JSON at position 0 at JSON.parse (<anonymous>) at parseJSON (VM5137 jquery.js:2) at Fn (VM5137 jquery.js:4) at k (VM5137 jquery.js:4) at XMLHttpRequest.r (VM5137 jquery.js:4)  ​

 

If I disable the plugin things are fine except I don't get the css. This occurs on a production server and I just did a test on a clean dev server same thing.

My plugin code looks pretty much like the advice from H5P:

<?php
/**
 * H5PMods Alter Styles
 *
 * @package           h5pmods_alter_styles
 * @author            Troy Welch
 * @license           GPL-2.0-or-later
 *
 * @wordpress-plugin
 * Plugin Name:       H5PMods Alter Styles
 * Description:       This plugin is used to permit override css files to be applied to H5P content. Note: server file system access is required to implement.
 * Version:           0.0.1
 * Author:            Troy Welch (Based on code provided on the http://h5p.org website)
 * Text Domain:       h5pmod_alter_styles
 * License:           GPL v2 or later
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 */

// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
	die;
}

/**
 * Allows you to alter which stylesheets are loaded for H5P. This is
 * useful for adding your own custom styles or replacing existing once.
 *
 * In this example we're going add a custom script which keeps track of the
 * scoring for drag 'n drop tasks.
 *
 * @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 ltig_h5p_alter_styles( &$styles, $libraries, $embed_type ) {
	$styles[] = (object) array(
		// Path can be relative to wp-content/uploads/siteid/h5p or absolute.
		'path'    => bloginfo( 'template_directory' ) . '/custom-h5p.css',
		'version' => '?ver=0.1', // Cache buster
	);
}
	add_action( 'h5p_alter_library_styles', 'ltig_h5p_alter_styles', 10, 3 );

and the css code I'm loading looks like this (because sometimes people think the question mark hotspot is too big, sigh):

.h5p-image-hotspot,
.h5p-image-hotspot:before {
  font-size: .9em;
}

.h5p-image-hotspot {
    height: 1em;
    width: 1em;
    border-radius: 0.5em;
}

.h5p-image-hotspot:focus, 
.not-an-ios-device .h5p-image-hotspot:hover {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

I'd sure appreciate any insight that anyone has.

I must also rant briefly, in the 2020 WordPress eco system it is absurd that minor css tweaks require access to a server's file system.

Thanks,
Troy