Hey guys, I’ve had this question swirling around my head for many months. It’s a question specifically for the experienced devs in the forum who generally feel comfortable with editors like VS Code, but still use Pinegrow in their workflow. My question is: What are the features in Pinegrow that you particularly value? What things are easier or quicker to do with Pinegrow than simply switching to a code editor? I usually keep VS Code open next to Pinegrow (when the plugin works), and find that some editing tasks are faster to do in VS Code, while in Pinegrow I like the ability to easily build components and master pages, the visual feedback, and I also feel Pinegrow is a superior replacement for devtools in many ways (especially when I’ve forgotten the code for an attribute).
So what do you guys think? What are the essential features of Pinegrow (and Vue editor) that make it a worthy tool for professional devs? For me it’s been a great learning tool so far, and I’ve seen that echoed a few times on the web. But then, I still have a lot to learn. Which brings me to a final question: Does there ever come a point where everything is easier or quicker to code in a straight up editor and maybe one day—God forbid—I’ll end up abandoning Pinegrow which I love so much? I’m curious about your opinions.
I think any text editor like VS Code or Sublime Text is a multitude faster in workflow then Pinegrow when you talk about developing a regular website as a developer if you know your HTML, CSS and JavaScript. Both named editors have also “Browser View” to see what you do in your browser of choice and eventually you could use MAMP as a local server for PHP or Ajax driven sites.
Now a days you have so many dependencies in a website that need maintenance all the time so for that I use CodeKit (direct connection with Github) and Sublime text. Thats all impossible with Pinegrow.
All I use Pinegrow for is “HTML Rapid Prototyping” in Bootstrap 5 and to make animations with Interactions.
But maybe there are developers on this forum here that are using Pinegrow and can tell you more!
Hey, David. Thanks for your answer. This is interesting to me. Since I’m only building plain html, css and js sites at the moment, and hosting on Netlify, it works fine. What do you do for components? I know Pinegrow can create components, which might be easier than coding them directly, though I only did one tutorial.
Thanks for the response, David. I haven’t heard of Codekit, but there’s always a lot to learn. Just curious, what do you do for components? I’m thinking of using Pinegrow’s implementation which might be easier than coding them from scratch, or learning Vue or something else. How do you handle that?
I think it makes building custom themes and blocks easier, so that alone, makes it worth it for me. It’s very close to how sites “used” to be built (from scratch), but without having to remember all of the WP stuff, so you can just build a site and tell PG which parts of the code should do certain things in WP.
I do, however, find it easier to work within my code editor, so I’ll usually code in one place and then connect all the WP-related things inside PG. So answer the real question, I use it because it does something I don’t want to always have to do manually (WP stuff), but gives me the freedom to also use my own code editor, or compling (via Terminal, or something like Codekit or Prepros).
I want to work as much in the code editor and terminal world as possible, and PG let’s me do that, while still offering all the WP and animations when I’m ready for that step.
TDLR: I’m very experienced in hand coding and can do it fast, but I think PG is even faster if you use a hybrid VS and PG work style.
When you’re experienced hand coding in VS is for sure faster than trying to use the PG code editor or UI. Especially since the PG code editor can’t open in a real new window (it’s a fake new window) and since it does not color code the code for the nesting.
I use PUG in PG which is faster than hand coding the HTML in VS by far but I would guess hand coding vs. the UI in PG is about the same.
I think the time savings come in by being able to see your styles instantly (I also hand-code all SCSS in VS because it’s faster than the UI and way more organized). The other huge time saver is creating blocks in PG, is way faster for basic blocks vs. hand coding a block in VS.
Beyond time savings, PG forces all my developers to use the same process/setup, which is helpful for maintaining projects. It’s framework helps us all stay similar in how we build a custom theme and that’s a lifesaver.
I think your average professional dev would not like PG because of the learning curve, but if they gave it a true shot, I’d be surprised if they did not find value in it over just hand coding.
I use Pinegrow to visually prepare static HTML pages (I can do it one handed). Then getting nitty gritty with the code if I need.
There are many aspects i prefer to code such as GSAP but generally the laborious task of writing HTML and styling is quicker for me to do in Pinegrow and avoids any live server back and forth. It’s nice to have the option and sometimes I just like coding.
Thanks for your observation. I definitely like the WordPress integration though I must say it’s taking me a lot longer than I expected to get comfortable with it. But I like the option to add the WP CMS to almost any webpage without having to move to a builder.
Thanks for your comment. That makes sense. Maybe the way to go is to create custom pre-made drag-and-drop components in Pinegrow with a custom framework and use that to build out sites quickly. But then, if I need a CMS and decide to convert to WordPress or an SSG like Astro with something like Decap CMS, I’m not sure if those components would be transferable as they are. By the way, I love your channel and how you’re exploring a variety of options for coding sites. Lots of people seem to stick with just one builder, and pass over Pinegrow.
So are you mostly building custom themes for WordPress in your agency? I’m working through my first tutorial to convert a site to blocks, and it’s taking a while, but I can see the benefits. I guess the one button conversion process isn’t on the timeline yet, ha ha.
Hi, yes, for 90% of my client’s use cases, WP is the best option for them. The important thing for WP these days is to build FSE themes with blocks. I wouldn’t recommend learning the old theming (classic) for WP as it will be obsolete in a couple of years, with the exception of a small percentage of people who refuse to change (like people who still use the classic editor over Blocks).
I like that FSE themes give the client flexibility in how a page is laid out but still “forces” them to stay within the theme’s overall style. It’s a learning curve for sure, but once you get it a lot of new doors will open.
While Pinegrow doesn’t directly support full FSE themes yet, could you tell me your workflow for creating a WordPress theme that utilizes both Pinegrow for design and FSE features for block-based editing?
Thanks
I’m not sure I can properly get the whole workflow in a comment but in short:
Create a Starter Template for Pinegrow that is set up for FSE (I have some basic CSS in there based off normilize.css, also some common WP class updates)
Every time I start a new project I duplicate the PG FSE starter template and change the theme colors, fonts, base spacing, etc. to match the design
I pull in elements and blocks I’ve created in the past into the a-master.html file which is basically the only HTML file I have. This file has all of my blocks (including header/footer blocks). Each block has it’s own JS and SCSS/CSS file (this makes them easier to move from project to project)
Manually create patterns and templates in the theme folders via VS code or in WP depending the needs of the project.
I’m hoping to make a video in the next 4-5 months to better explain with examples.
Thanks jonroc, that sounds interesting and I’d like to see the video whenever you get it online. I understand how having a starter template is useful, though I’m not sure what you mean by “common WP class updates”. Also an master .html file with blocks is something I’m planning on preparing to have instant access to components I use often. When you say each block has it’s own JS and CSS, do you mean in separate .css and .js files, or inline in the html?
Some default WP blocks and default WP styles need to be added to or overridden for my theme and style of css.
I have separate .js and .css for each block. Also, for some of the blocks they have their own WPadmin .css file as well that only affects the editor styles.
Another thing I do is hide some of the default WP blocks from the editor page because they are so terrible. I’ve made good custom blocks to replace them on my end. Once example is I have a spacer block that I set up with all the standard spacing per the theme design (section spacing, inner section spaceing, etc.) This way the users are forced to keep the theme spacing consistent.