Code changes when switching to visual editor

Hey @voodoochill – I’m unable to recreate this in my testing – which leads me to think this may be a plugin or theme conflict. Please attempt to disable all plugins, and use one of the default (Twenty*) themes. If the problem goes away, enable them one by one to identify the source of your troubles.

If you can install plugins, install and activate “Health Check”: https://www.ads-software.com/plugins/health-check/
It will add some additional features under the menu item under Tools > Site Health.
On its troubleshooting tab, you can Enable Troubleshooting Mode. This will disable all plugins, switch to a standard WordPress theme (if available), allow you to turn your plugins on and off and switch between themes, <strong>without affecting normal visitors to your site</strong>. This allows you to test for various compatibility issues.

There’s a more detailed description about how to use the Health Check plugin and its Troubleshooting Mode at https://make.www.ads-software.com/support/handbook/appendix/troubleshooting-using-the-health-check/

Thanks, I’ve tried with Twenty Twenty Three and all plugins except Classic Editor disabled and I still get the issue.

I have run your code through a code validator and I see this error message:

Attribute “controlslist” not allowed on element “audio” at this point.

So, it looks like maybe this is an issue with the HTML itself, not with the Classic Editor. Could you try removing controlsList="nodownload" from your code and trying again?

• This reply was modified 1 year, 1 month ago by Alvaro Gómez.

Many thanks for the reply.

Yes, without the controlsList attribute the code does not get altered.

I agree the html validator does say it is not a valid attribute however the attribute does actually work in that Google Chrome recognises it and obeys by not displaying the download link, which in many cases is obviously a good thing.

So it seems the visual editor is actually correcting what it thinks is invalid code, even though that is the code I want

I have noticed some other strange behaviours that are not desirable e.g. if I write a span, but don’t give it a class or id, the visual editor removes it

e.g.

<span>this is a span</span>

will have the spans stripped out when switching to the visual editor.

So I believe it would be good to be able to turn off the autocorrect and not lose any code when switching to visual and back.

So my question now is can I turn off the visual editor’s autocorrecting feature?

• This reply was modified 1 year, 1 month ago by Mr Lucky.

Hey @voodoochill I’m not aware of a way to turn that off. It seems that’s a function of the HTML validation in the plugin itself – so the best suggestion I would have is to report it as an issue in the Github repository (which is used for development of the plugin).

https://github.com/WordPress/classic-editor/issues?q=is%3Aissue+is%3Aopen

Thanks I tried reporting it but gave up as the code markup in the text editor wasn’t working (as it does here where it shows the raw code unrendered as expected)

Thanks I tried reporting it but gave up as the code markup in the text editor wasn’t working (as it does here where it shows the raw code unrendered as expected)

I am not quite sure what you mean by that, sorry. Could you elaborate a bit, please?

Yes, see my first post here, I put the code in a code block so it shows as code like this and doesn’t attempt render the audio player here.

<figure>
<figcaption class="audiocaption">Example 1</figcaption>
<audio controls controlsList="nodownload" src="https://examples/xxx.mp3">
</audio>
</figure>

On GitHub there is a code icon <> where you place the code between the apostrophes ‘some code here’ . (Like it used to be here and some sites that use bbcode). It presumable converts top the html code tag

However when I do that the code is not visible when I preview it.

• This reply was modified 1 year, 1 month ago by Mr Lucky.

Hey @voodoochill – on Github you can try using Markdown to signify the code snippet. it would look like this.

<figure>
<figcaption class="audiocaption">Example 1</figcaption>
<audio controls controlsList="nodownload" src="https://examples/xxx.mp3">
</audio>
</figure>
`</code></pre>