Differences between Pinegrow Desktop and the Pinegrow WordPress Plugin

Since I’m in the Pinegrow WordPress Plugin beta and have been creating videos about it, I’ve had quite a few questions asking about the differences between the desktop version and the plugin version.

The simple answer to that question is, not many. Pinegrow is written in JavaScript, HTML, and CSS and is cross-platform by design. This allows Pinegrow to deploy the same code across all their platforms, including the browser-based web application. Of course, by nature of it being a web application tailored specifically for WordPress, some things are going to work differently in the WordPress Plugin than in the Desktop application.

Before I get started, please keep in mind that the Pinegrow WordPress plugin is still in a very early closed beta. We are typically getting one or more updates every day with new features, changes, and bug fixes, so anything I say today might be outdated tomorrow.

With that all said, let’s take a look at them…

First, the most obvious difference is that the desktop version of Pinegrow uses your local filesystem to save projects and export files. The WordPress plugin saves the projects to your WordPress database and your exported files directly to the wp-content plugins and themes folders on your WordPress site. This one change has a few trickle-down implications just due to the nature of the local versus server-based workflow.

Pinegrow Desktop also lets you access and modify your code directly on your computer using any 3rd party development tools you want, like VS Code or JetBrains. Since the WordPress Plugin version is all browser-based, you just don’t have that kind of flexibility, and you are limited to the somewhat rudimentary code editor that’s built-in to Pinegrow.

Source control is another big difference. With Pinegrow Desktop, you can use git or other source control systems to manage your code since everything is saved as a local file. The WordPress plugin has a nice revisions feature, but it’s nowhere near as full-featured as what you’d get with a local workflow.

In terms of frameworks, Pinegrow Desktop supports multiple versions of Bootstrap and Tailwind as well as Foundation, AngularJS, and Materialize. The Pinegrow WordPress plugin only supports the latest versions of Bootstrap, Tailwind, and plain HTML and CSS. For most purposes, though, this is just fine.

Component libraries are another place where the desktop and plugin versions are different. On the desktop, you can include all sorts of 3rd party libraries such as TailwindUI, or you can create your own library of reusable components to bring into your site. The Pinegrow WordPress plugin, however, only supports the block and component libraries created and hosted by Pinegrow. I’m told this is mainly because of security reasons. It’s not all bad, though, you can still use any 3rd party components and libraries you want, you just have to copy and paste them rather than having an integrated drag & drop panel.

The last big difference is that Pinegrow Desktop has built-in SASS and LESS compilers, and it supports the PUG syntax for quickly adding elements to your page. I’ve been told that PUG wasn’t included because it added too much overhead to the plugin, and it’s still a little bit unclear whether the SASS and LESS compilers are going to be added to the plugin before it’s launched.

The tradeoff for those capabilities, however, is complexity. With Pinegrow Desktop, it’s almost necessary to use a local WordPress server. Something like LocalWP, Laragon, or Laravel Valet. This is fine for initial development, but for making small changes once your project is live, it can be quite a hassle. The Pinegrow WordPress plugin, on the other hand, lets you simply jump onto your site, make your changes, and apply them. For supporting and maintaining a production website it’s much, much more time-efficient.

Working on the WordPress plugin has given Pinegrow the opportunity to add some quality-of-life things that will likely show up in the Desktop version in a future update.

One of the most obvious things is the placement of the insert menu. On the Desktop, it currently lives in a panel like every other property, but the Plugin version moves it to a dropdown menu on the top of the screen where it is always available. I wasn’t sure about this change when I first saw it, but it quickly grew on me. And, from what I’ve heard, more people like it there than they do in its current location.

Another big change, and this one is very welcome, is the addition of a new setting for WordPress menu action. Today, the menu smart action only handles styling for top-level menu items unless you are using Bootstrap. Any submenu styling or actions need to added by hand using the classes that WordPress adds to the rendered menus. In the Pinegrow WordPress Plugin, they added a setting where we can define a template for a menu item with a dropdown so that the styles, elements, and actions for dropdown menu items can all be created inside Pinegrow without any guesswork.

I wish this feature could have been added a few weeks ago before I started my most recent Pinegrow project. It would have easily saved me hours of time.

There are other, smaller differences and some bug fixes that aren’t worth mentioning here, but you get the general idea.

Put simply, Pinegrow Desktop is aimed at power users and developers. The Pinegrow WordPress Plugin is positioned as a low-code solution that offers almost all the benefits of Pinegrow Desktop without its hassles. There are compelling benefits and drawbacks to each platform, so I suspect that I’ll end up using both once the plugin is released.

I’ll likely keep Pinegrow Desktop for my main developer and me to use while we are building projects, but after launch, I’ll have the Pinegrow WordPress plugin installed on their servers so we can make small changes and provide real-time support. The great thing about Pinegrow is that the projects are interchangeable. I can easily import Pinegrow Desktop projects into the WordPress plugin, and I can just as easily export a project from the WordPress plugin to use on the desktop. It’s really a win-win scenario.

As always, if you found this video helpful, please like and subscribe or leave a comment down below.