inside-editor.css is loaded for all wysiwyg editors rather than the post content

[rilwis]

• [x] I've searched for any related issues and avoided creating a duplicate issue.
• [x] I've read and understood the contribution guidelines.

Please give us a description of what happened.

I'm using plugin Meta Box to create some wysiwyg editors for users. The problem is that Yoast SEO plugin loads its CSS for all these extra editors, which cause a big performance problem if the number of editors is large. FYI, some of Meta Box users might create up to 30 editors :(.

Please describe what you expected to happen and why.

I understand that this CSS file is necessary to highlight sentences for reading score. But it should be loaded only for the main editor.

How can we reproduce this behavior?

1. Install the Meta Box plugin
2. Create a simple meta box, following this guide
3. Add a wysiwyg field
4. Go to Posts > Add New and see the files loaded in the Network tab in the browser dev tools.

Technical info

• If relevant, which editor is affected (or editors):
• [x] Classic Editor
• [x] Gutenberg
• [x] Classic Editor plugin

Used versions

• WordPress version: 5.2.3
• Yoast SEO version: 11.2

[Djennez]

Hi @rilwis and thank you for your report.

I've been looking into this, but was unable to reproduce the issue you're describing. Maybe I'm missing something in adding the metaboxes. I used the following code to add 3 metaboxes with wysiwyg editors:

add_filter( 'rwmb_meta_boxes', 'prefix_register_meta_boxes' );
function prefix_register_meta_boxes( $meta_boxes ) {
    $meta_boxes[] = array(
        'title'      => 'Alpha',
        'post_types' => 'post',

        'fields' => array(
            array(
                'name'  => 'Full name A',
                'desc'  => 'Format: {First Name} {Last Name}',
                'id'    => 'prefix_name',
                'type'  => 'wysiwyg',
            ),
        )
    );

    $meta_boxes[] = array(
        'title'      => 'Beta',
        'post_types' => 'post',

        'fields' => array(
            array(
                'name'  => 'Full name B',
                'desc'  => 'Format: {First Name} {Last Name}',
                'id'    => 'prefix_name',
                'type'  => 'wysiwyg',
            ),
        )
    );

    $meta_boxes[] = array(
        'title'      => 'Gamma',
        'post_types' => 'post',

        'fields' => array(
            array(
                'name'  => 'Full name C',
                'desc'  => 'Format: {First Name} {Last Name}',
                'id'    => 'prefix_name',
                'type'  => 'wysiwyg',
            ),
        )
    );

I then loaded up a new post editor and watched the network tab of the developer console. inside-editor.css got loaded once. I also checked our function that adds this CSS file and that function only triggers once (and only adds the css file once).

If you're able to share the code you use to add your metaboxes I might be able to replicate your issue. Or am I looking in the wrong places here?

[rilwis]

Hi @Djennez ,

Thanks for your feedback and sorry for the delay. I recorded a video with details and some debug info, please take a look:

https://www.loom.com/share/63e3ab3b0f18417795cdefd12e8cfa80

The problem with your code is the editors don't have unique IDs (which is require in Meta Box). Once they have unique IDs, you'll see the problem.

[Djennez]

Ok, had to look into this a bit more.

We add the CSS file once, and WordPress itself duplicates this any time a TinyMCE editor is loaded up. So this duplication behavior is kind of out of our hands at that point.

However, I noticed you are using Gutenberg as main editor, and this CSS file is not loaded for that editor. So for your specific situation you might get away with unsetting this CSS file entirely, if you're not using it in all the other editors, with the following hook:

add_filter( 'mce_css', 'strip_inside_css', 99, 1);

function strip_inside_css( $editor_css ){
  $list_css = explode(',', $editor_css);

  $inside_position = array_search('/wp-content/plugins/wordpress-seo-linked/css/dist/inside-editor-122-RC1.css', $list_css);

  if ( $inside_position != false ) {
    unset($list_css[$inside_position]);
  }

  $editor_css = implode(',', $list_css );

  return $editor_css;
}

Now, please note that this is probably inefficient code as it is a POC, and you will have to do a different array_search() than me. This is because A) I am using another structure and B) the version number will change with every update. So checking for a part of the string would be a better option. If you were to use the classic editor I recon this will break our functionality since that is TinyMCE.

Is that something you can work with?

[rilwis]

Thanks for your reply.

I actually can manage to add the code myself. And I already did that for an user. But that's not the point of this issue.

Yoast SEO plugin needs that CSS to be loaded only for the main post editor, and should not be added to other editors. So, the plugin should be responsible to remove its CSS files from other editors. Unless it use the CSS file for other purposes.

[Djennez]

Ah ok, this was the only workaround I was able to get you. Unfortunately I don't see this getting any priority on our end since we add that style to the editor for a reason. To be fair: it's not a normal usecase for a user to open more than 2 or 3 editors. If you spawn multiple editors I can see that maybe being an issue (in high numbers) but I can also see that it's your own responsibility to then make sure that doesn't cause problems like this one.

Of course, we would welcome any PR / code that would not impact the general workings of our plugin but would still fix this specific use-case for you.

[rilwis]

I don't think it's an edge case. Many developers use extra editors to enter more content (like brief description in WooCommerce product). Especially when they use things like ACF flexible content field. In case of Meta Box (which has 400k active installs), a lot of developers use more than 1 editor. Of course, using up to 30+ editors is very rare.

The only reason I can see the CSS file for is for highlighting sentences in the readability analysis (please correct me if I'm wrong), and that should happen only in the main editor. Or in case of using Gutenberg, there's no main editor (TinyMCE) at all.

I understand this is not a big problem since they still work and is not a high priority for you. I just report the problem which my users reported to me. And that would benefits users of both. Hopefully, your developers will fix it.

Thanks.