Front End Editor Insert Image Button Not Working in Custom Theme/Plugin

(Tom B) #1

Basically, I’m building a custom theme/framework that lets users post their own content, and that includes a page with the WordPress editor on the front end. However, for whatever reason, the insert image button doesn’t work at all.

They can open the media library and view/edit titles and what not. They can use every other command in the Tiny MCE editor. And there are no console errors suggesting something in the site’s JavaScript is broken either.

Yet this particular button seems to do nothing, as though something is overriding it/the event isn’t being run:

Does anyone here have any ideas why this would be the case? Could it be partly due to my site being tested on localhost rather than a proper server?

Thanks, it’s an issue that’s really confusing me at the moment, especially given there’s no obvious cause for the problem.

(Leland Fiegel) #2

I’m not sure what the problem could be but just wanted to chime in to say that I don’t think running a site locally would make much of a difference.

(Tom B) #3

Yeah, I don’t think that’d have an effect either. Just trying to figure out what JavaScript may not be loaded/what would clash with my theme now.

(Tom B) #4

Okay, I’ve figured this out.

Basically, the button to insert the image was appearing underneath the image thumbnail section in the editor, since apparently the editor style didn’t have it properly aligned to the fat right.

I’ve since added this CSS rule, which solves the issue:

.media-toolbar-primary {
justify-content: flex-end;