First of all, this is a proposal. I just want to solve a few simple problems with this:
- Ticket #25295
- Personal experience with clients using WordPress can’t get how to use
<br> in HTML mode, but can use a shortcode like
[break clear-left] better
- I want to wrap a
<div> around an element, but possible cuts and paste’s can erase it because the code isn’t seen in visual
- When I do add a
<div style="float:right"> around an element in the editor, it actually happens in the editor. Sometimes this is nice, sometimes this sucks
…this seems like a solution to some of these issues because I have used these kinds of solutions before in themes and plugins to help clients and myself do more HTML-y things in the editor. I just want to build an all-in-one solution.
Follow #shortcodeml on my blog for updates.
Let’s see if I can sort this out. Because of ticket #25295, and the fact that 3.9 will most-likely not have the “Advanced” tab when editing an image’s properties, we will sadly no longer to be able to click on an image, go to Advanced, and, for instance, add class names like
.aligntop to an image.
I don’t think this should be done in the Advanced tab anyways. Sure, for images, it’s a quick way to do it, but if you really want to add a class to something, you’re going to use the text mode to do it (especially for something like a div or ul).
This ticket gave me the idea to write something close to bbScript, remember bbScript?
“Wouldn’t it be nice to just
Let’s add on to the image problem and say that, yeah, we also can’t add a break return without sending the user into text mode in the editor and having them write
<br>, which when switching back to Visual isn’t apparent that it’s there. It’s kind-of invisible. What if we could
[br] instead, or
[break], which is more understandable and readable, or
[break clear left] to also clear left (we should also be able to
[br style="clear:left"] because some of us are more familiar with HTML. It’s also hard to, in the editor, wrap
<code> around a piece of text. I’m currently using a plugin, but wouldn’t it be nice to just
That’s where the idea of a plugin, that I’m calling ShortcodeML, would allow us to do more HTML-y things in the editor and solve our ticket problem because we can just
[span class="aligntop"]<img />[/span] or
[class="aligntop" block]<img />[/class]. And for an intermediate WordPress user, this isn’t HTML, because you can see it, and it’s readable, and it’s a shortcode.
Organize the Idea
I didn’t want to go find some large list of HTML tags and kill myself coding each one. I wanted to do something more graceful and simple that solves the problems. First off, we only need a few HTML elements (I’m open to additions) to work with in the editor (tag|readable):
All of these only need to accept a few helpful attributes (attribute|readable attribute):
Data attribute can be handled like:
[... data="value", data-selector="x"]
We are also going to need some handy quick writable tags where “…” below are any of our tags above. Some elements may not need a “tag”, so “…” will not be included:
<span class="classes classes2"
[divider inline clear-left css="margin-top:20px"]...[/p]
[break clear-both hidden]
So, that’s my idea and what I’d like to start building. If you have any feedback, ideas, modifications, whatever, please comment!