Dirty “Probaturas”: An emmet-like parser for php and Drupal

mad scientist doing experiment

“Probatura” (Spanish word): Test, trial, experiment.

If you’re a web developer, chances are that you’ve come across Emmet before. If you haven’t, chances are that you’re wasting time whenever you get to write some html in your favorite code editor or IDE. You should really check it out and see the options on the project page, but let me show you a quick example of how Emmet can help you. Let’s say you’re prototyping a simple page and know the markup you need. It would look like this:

Easy, right? Because you’re a cool front-ender with great and fancy text editors like Sublime or Atom, and fancy features like tag autocompletion, attribute suggestions, etc… surely just a few seconds to write. For you too, phpstorm guy, because nobody beats your all-terrain IDE, capable of even preparing pop-corn for you while you’re churning out the most beautiful PHP lines ever written with, you know… a real programming tool. Not to mention the vim players out there. You really are on another level of the game. HTML ain’t nothing for you, is it? Well, whatever built-in support you have for writing html, Emmet’s going to be better.

With Emmet, you’d type this, hit the tab key on your keyboard, and get exactly the markup mentioned. Awesome, isn’t it?


Well, guess what: Emmet’s available as a plugin for pretty much every text editor or IDE out there (in fact it’s bundled by default in some of them), so you can start using it right now without changing a single thing on your toolset. Anyway, this post is not to talk about all the goodness in Emmet. The project page does a great work at that.

Dirty coding on a Friday night

Motivated by some of the inconveniences of using Panels & mini panels to arrange elements in Drupal pages, I’ve recently started to think about the idea of having a ctools style plugin that allows me to specify an emmet-like string of markup in the settings form, that is parsed upon submission, and used later on to render the pane contents accordingly. This would be a fairly simple thing to do for normal content panes, since there are always two elements to render (pane title and pane content), so there’s no need to account for multiple combinations of elements. In other words: I don’t need a parser that supports all the features that Emmet has.

Since I had nothing to do, I couldn’t get to sleep thanks to a beautiful neck pain and I was reasonably inspired, I decided to grab a beer and start fighting with regular expressions to try and come up with a simple proof-of-concept emmet-parser in PHP. Oh, and I suck at regular expressions. I suck way more than I’d happily admit in public without feeling bad about it, so it was a great chance to spend some time getting better at them. The results, after a couple of hours feeling pretty miserable about my regex masonry, are here:

Beautiful, isn’t it? Before judging the code, remember I was mainly fooling around with regex and processing the parsed elements as a proof-of-concept. The code needs cleaning up, refactoring when the client has budget for it (oops, such unprofessional!) and commenting.

Testing it

So, with that code in place, I’d just need to call wrapper_expand() with the emmet-like string, and some content (optional) to wrap within the parsed string. While the content is not needed at all, keep in mind the ultimate goal of this would be to wrap some elements from the panels UI. Let’s try it:


 Yay, it works!

Awesome! Is it contributed already?

Of course it isn’t. While it works pretty well for the most basic stuff, like nesting elements, specifying classes, ids, and any arbitrary attributes, right now the code is just a bunch of functions with no real use from Panels UI. Aside from cleaning that up, I still have to create a ctools style plugin that takes care of showing the right fields on the settings form, processing them and store the processed markup in a suitable format (to avoid processing on display time).

Really not a big deal if the style plugin is going to be used just for panel panes. However, my goal is to make it usable for panel regions, which means I need to finish the grouping feature support, and come up with a particular character not used by Emmet (“%” for example) that allows the parser to inject contents in arbitrary sections of the generated markup. With that in place, I think this could be a pretty damn good alternative to the existing ways of defining markup from Drupal’s UI, and would provide a good foundation to extend this other areas of the site, like field formatters, or views style plugins.

Any thoughts on this from Drupal developers will be greatly appreciated, so feel free to leave your comments below!

One thought on “Dirty “Probaturas”: An emmet-like parser for php and Drupal

Leave a Reply to jsbalsera Cancel reply

Your email address will not be published. Required fields are marked *