[Plugin: Post Snippets] Cant separate snippets in visual view

Hey,

Thanks for the report. I wasn’t able to reproduce that behavior. If you can provide me with some more details so I can reproduce it, I’ll be able to see if I can fix it. To start somewhere, I wonder if it could be browser related, what browser do you use?

Cheers,
John

I created two snippets, both comprised of html, Both were simply divs that had some content in it. Then headed to make a new post, and in the visual view inserted the first snippet, hit enter, then inserted the second snippet. When loaded in a browser the second snippet was placed inside the first as if it was part of the first’s content. Essencially just putting the secont snippet before the closing div tag for the first snippet. If you go in the html view this isnt a problem. Ive included some screenshots below.

the example here would be if I created 2 html snippets, one for the black box, one for the red box. If i insert them one at a time using the html view, the code and the display will look like this: https://cl.ly/3L3c2t2F2w1F2m331y0b

but if i insert them using the visual view, the code and the display look like this: https://cl.ly/1e0W050F140d1B3l0J1q

Does that help?

Im using the most recent updated of Chrome

Aha, I see, it’s div snippets.
Well, what’s happening is that in the visual editor, the first snippet is inserted, and then TinyMCE places the cursor after the last inserted text (not after the last inserted HTML in other words), as it assumes you will continue writing where the text ends.

That means that the cursor is inside the div after insert. Then when you directly add another div it will add it inside the one it’s already located in. So that’s what you see happening.

Checking the TinyMCE API, there doesn’t seem to be any control to override that behavior on insert, so I’d have to write my own addition to TinyMCE to change that behavior, which would demand a bit too much time than I can spare at the moment.

Anyway, the general recommendation is that when you are working with HTML via the editor in WordPress, is to use the HTML mode and not visual to avoid problems with HTML elements. So I’d suggest to adapt that method when using Post Snippets as well. Then you also don’t risk that the HTML get’s changed on save, as it can be when saving from the visual editor.

Another option, if you want to stay in the visual editor, could be to use a shortcode to insert the divs, then the visual editor doesn’t see the HTML at all, and the insert cursor will be placed at the very end on insert. By using the reserved {content} variable with shortcodes you can wrap content inside a shortcode, so you can have both opening and closing divs in the snippet and freely add content in between.

Hope this helps.

Cheers,
Johan

Thats what I suspected. If it were up to me the whole thing would be done in the HTML view in the first place. But this client wants to have complex pages buildable with no coding involved. I really appreciate your help and feedback. Its so nice to have a developer who is so involved with the people using his tools. The plugin is really nice, and Im going to keep tinkering and see if I can make it work.

Thanks so much again for all your help.

It does appear that adding a
to the end of the div snippet works. It gets a little funky sometimes and feels like a hack, but it seems to be doing the trick for the most part.

Cool that you found a workaround. I’ve added this to my to-do list for the future as well, to look into if I can get some further control via the API into the visual editor, for some more controlled inserts. But that will be after I’ve finished v2 which I’m working towards at the moment.

Cheers,
Johan