Release Notes

Release 2.95 – 27. October 2016

Pinegrow 2.951 fixes bug with Pinegrow occasionally freezing when entering the Edit code mode.

Status bar with path to the selected element that lets you easily select any of the element’s parents. After the parent is selected the path to originally selected element stays displayed for quick navigation. Use right-click to open context menu on elements and -/+ icon to hide/show the status bar:

statusbar

ASP, ASPX and ERB template editing in addition to PHP. Pinegrow now supports editing HTML templates with <?php, <?, <?= and various forms of <% server-side code tags. Learn more.

serverside

Improved backup: Pinegrow keeps 20 (changable in settings) revisions of any saved file and deletes older backups to prevent old backup files piling up. Also for projects, a single _pgbackup folder is located at the root of the project, not in every subfolder as before:

backup1

You can also delete project backups from the PRJ project menu:

backup2

Edit files without extension. To enable that list “NOEXT” among editable file types in Support -> Settings:

noext

Bug fixes.

Release 2.94 – 27. September 2016

Classes shown in the tree are now updated when properties in PROP panel change:

classes

Use Name in tree property in Info section of the PROP panel to name elements in the tree:

name

Manage Google Fonts (old asset manager) was added to Page menu. It lets you easily add and remove Google fonts from the page:

gf

Code editor is now focused when opened.

FIXED: Selecting code in the code editor in the external window no longer deletes the selected code. That was a very annoying bug, we’re happy it is gone now 🙂

SVG elements can be edited with Element edit code without freezing Pinegrow.

Release 2.93 – Sep 7. 2016

Note: just like the previous release 2.92, this release also deserves more than just a 0.0x version bump, but we ran out of decent numbers before the 3.0 release.

Pinegrow CMS for static HTML websites

Pinegrow CMS lets end-users edit static HTML websites without touching the HTML code. See documentation and tutorials to get started.

Add and Remove links

To add a link to the selected element use Actions -> Add link and Actions -> Remove link. Link url and other properties can then be edited in the PROP panel.

pg2.93.link

Auto update CSS rules display in Style PROP section

The list of CSS rules that affect the selected element is now updated automatically without having to re-select the element after making a change.

updaterules

Editable areas extensions

Editable area properties have been simplified and plugins can now add their own editable area extensions. Currently, Font Awesome icon and Bootstrap button size and type are implemented.

pc24

Bootstrap and Foundation

  • Foundation was updated to 6.2.3.
  • Bootstrap was updated to 3.3.7. We’re still waiting for the official 4.0 release.
  • Bootstrap and Foundation resources to an existing page with Manage libraries & plugins -> Bootstrap (or Foundation) -> Resources.

Free WordPress and HTML templates

We also released two useful themes:

PG-Blog – A pure HTML+CSS (no frameworks) WordPress Theme with PGWP source files.

pgblog

Mr. Pine Cone – A simple personal HTML website.

mrpinecone

You can use them for personal and commercial purposes. They’re also a great way to learn about how to create websites with Pinegrow.

Release 2.92 – 27. July 2016

First of all, this release deserves more than just a 0.0x version bump, but we ran out of decent numbers before the upcoming major 3.0 update.

Pinegrow 2.92 has lots of small improvements that add up to a significant advance in productivity and user friendliness.

UI improvements

Double clicking on an image will open image selection dialog.

setimage
When selecting an image located outside of the project folder, Pinegrow asks if you want to copy the file to the project.

copyimage

Classes are shown in the tree. The first class is displayed, all can be seen by hovering the mouse over the it.

treeclasses

Background image property was added to Style section of the PROP panel.

bgimage

ESC key exits the inline edit mode, no more mouse clicking the Done button.

closeinlineedit

Plus:

  • More stable inline editing prevents DOM changes done with Javascript leaking into the source.
  • Setting for ignored subfolders, for example node_modules. This significantly speeds up working with projects.
  • Larger click area for assigning classes in the CSS panel.
  • Deleting an element will select the next element. Up to now, no element was selected after deletion.
  • When Javascript is disabled during editing, scripts show as normal scripts in the tree and head scripts don’t go into body anymore.
  • File -> Quit menu added.

Master pages & components

Learn and experiment with master pages with a comprehensive master pages tutorial. We’ll keep adding more topics and examples.

tutorialmp

Editable areas can have additional options:

  • Background image can be editable (inline style background-image property).
  • Listing which component types can be edited in the inner content of the editable area. All other elements will be locked. “Add instance” buttons will be shown in the PROP panel when the component or editable area is selected.

areatypes

areaadd

Components -> Quick update now runs in the interactive mode that will ask you what to do when updating a component or child page would cause some editable information to be lost. See 5-LostEditableArea in Master pages tutorial for an example.

interactiveupdate

Plus:

  • When duplicating an element that is also a component definition, Pinegrow will offer the choice to duplicate the definition or to make the cloned element an instance of the component.
  • A warning notice before a component definition is deleted.
  • Child pages: added Page -> Restore master page optional areas to bring back optional editable areas that were deleted on the child page.

WordPress theme builder

Better handling of large projects that contain multiple pages with the same name. For example, in case you have multiple index.html pages Pinegrow will select the one that is a master page when exporting the theme.

Those of you that like to poke around might notice something called “Content contributor mode”. That’s a feature that lets Pinegrow be used as CMS for static HTML websites. At the moment it is still rough around the edges and lacks documentation. Try to figure it out if you like puzzles and mysteries 🙂

Release 2.91 – 14. June 2016

WordPress Starter Theme 1.2 has lots of useful improvements like new LIB components, bbPress support, automatic plugin installation, custom backgrounds & headers, 100% WP theme check pass, new templates and more.

WordPress Theme Builder: Custom theme header can be displayed as default value of The Post Thumbnail action and as a standalone action that can be placed on any image. Note, the code for configuring theme header has to be added to functions.php manually.

Bug fix: Multiple editable attributes of a selected component instance can now be edited in PROP panel.

Release 2.81 – 27. April 2016

Last week we released Pinegrow Web Editor 2.8 with many useful improvements like copy & paste with clipboard, editing JS files directly in Pinegrow and more.

But together with all the good stuff we also got some performance issues: high memory usage that led to laggy speed with continued use.

So we spent the last few days hunting bugs, memory leaks and making Pinegrow faster. We’re happy with the result. Pinegrow 2.81 is faster and uses less memory than ever before.

And we added a new feature that has become my favorite: global setting to disable Javascript while editing pages in Pinegrow (by default Javascript is enabled).

nojs

That is now my default choice for editing files in Pinegrow. Why do I like it?

  • Documents load much faster especially if external Javascript scripts are used on the page. Editing is faster as well.
  • Our websites should work without Javascript. Editing pages with disabled Javascript makes it easy to ensure that all the main features and content are accessible without replying on code. For most websites Javascript stuff should just be an optional candy.

And we also have user reports that some Javascript code can crash Pinegrow. Disabling Javascript on those pages will take care of that.

Note: Disabling and enabling Javascript was (and remains) already possible through Page menu on individual pages, but only after the page was already loaded:

jaonoff

Special deal on volume licensing for companies

Do you use Pinegrow at your job and think it would be useful for others on your team or in your company?

We’ve now made it easier for companies to buy multiple Pinegrow licenses, either as subscriptions or one-time license purchases with significant discounts. Regular discounts go from 20% for 5+ licenses to 50% for 50 or more licenses.

Get Pinegrow for your team or company »

And to celebrate the launch of the volume licensing plan we’re adding additional 15% discount – for a limited time only. So, from 35% for 5+ licenses to 65% for 50+ licenses.

 

Release 2.8 – 20. April 2016

Pinegrow 2.8 has lots of useful improvements that will let you work with web documents faster and smarter:

Copy & paste – Finally!

Pinegrow came far without it. But now proper copy, cut and paste with clipboard manager is here:

clipboard

Auto-complete in PROP and ACT panels

Pinegrow scans the whole project (or all open pages in case of Pinegrow standard) and offers auto-complete suggestions for attributes…

autocomplete

…component definitions and instances…

autocomplete2

…classes and more:

classac

Edit Javascript and other non-HTML files

These files can now be edited directly in Pinegrow. Use “Open in code editor” command in PRJ panel. To re-run the Javascript code after changing it use Page -> Refresh (CTRL/CMD + R).

editjs

Search document tree by selector

Use selectors like div.active, [href=”#”] or any other CSS selector to search the page. By default Pinegrow searches by text and selector (for example, searching for “p” will find all elements with the text “p” and all <p> elements). To force the selector search prepend the selector with $ (for example, “$p” will find only <p> elements);

searchselector

Page properties

Select the top page element in the tree and use PROP panel to edit page title, keywords, description and author fields. Meta field is also available in LIB panel from where you can place it to the <head> element.

pageprops

Removing ACT and WP actions

ACT and WP actions are now removed from elements by clicking on the x icon. In previous versions actions were removed by clicking on the action name.

removeaction

And:

  • Detect problems with the internal webserver and offer solutions.
  • WordPress quick export can be turned off (WordPress -> Quick export on save). The export happens also when HTML and CSS files are modified outside of Pinegrow.
  • Bug fixes and probably a couple of new bugs 🙂

Release 2.7 – 3. Mar 2016

Editable areas in PROP panel

Editable elements, attributes and classes of smart components can now be edited directly in the PROP panel. This happens automatically. All you have to do is define component’s editable areas.

c2.editable.props

Learn how to use components

Documentation about Components is finally complete. All features are explained through practical examples, sample projects and tutorials. Just scroll through the page to see how Pinegrow PRO can super-charge your workflow.

Collapse tree level

Whole tree level can now be collapsed or uncollapsed with a single click. ALT + Click on the collapse icon to collapse or uncollapse all elements on that level.

treelevel

Foundation and Materialize

Foundation was updated to 6.2.0 and we have an updated Materialize plugin with more starting templates, new components like carousel and paralax, bug fixes and better organisation in the LIB panel.

materialize

Release 2.65 – 16. Feb 2016

What’s new?

Smart components can now have descriptions that are shown when you hover over the component in the LIB panel. And you can set that component photos are only used for previews and not shown in the LIB panel.

comp

The link between WordPress Template parts and Smart components has been improved so that it can also be used on template parts that are included with get_sidebar, comments_template and similar tags. To make this work the component / template part definition must also include the action that will display the template part, for example “Include template part”, “Get sidebar” or “Comments template”. Read more…

Bootstrap was upgraded to 3.3.6. We’re still waiting for 4.0 to be released.

In Bootstrap Blocks “Soft scroll #links” property was added. It enables soft scroll on # links (#links are no longer auto-scrolled by default). This change only affects new Blocks projects.

softscroll2

Font Awesome plugin now adds Font Awesome CSS resources through Page -> Manage plugins & libraries -> Font Awesome -> (Activate if not yet activated) -> Resources.

fa

And Bug fixes.

Release 2.6 – 3. Feb 2016

Pinegrow 2.6 is available for download. Our focus for this release has been making the user interface easier to use, making it more flexible and consistent.

Lots of further UI improvements will happen in the next few months. Instead of releasing one big UI redesign that would be unfamiliar to most users, we’ll implement and release changes in a gradual way.

Let’s take a look at what’s new:

Rearrange UI panels

Select the best position for LIB panel, document outline tree and page views. Tree and pages are also horizontally resizable.

panels

Edit code in a separate window

Open code editor in a separate window. That’s especially handy if you have multiple screens.

codeeditwin2

Better tree visibility

The tree displays vertical guides for different nesting levels with a highlighted guide for the current level.

tree

Quickly switch between panels

Keyboard shortcuts (CTRL/CMD + 1..6) will switch between LIB, PROP, CSS, ACT, WP and PRJ panels.

switchtabs

Components: Make the selected element an instance of a chosen component

This is a very useful feature, especially if you’re adding components to an existing page. For example, after creating a component definition for a team member, select team members on the page and use “Make the selected element an instance of” to make them into instances of the team member component. Pinegrow will even take care of editable areas for you.

makeinstance

WordPress: Link Template parts with Smart components

WordPress template parts can now be easily linked with Smart components so that they appear in the LIB panel from where they can be easily added to any page in your theme. Learn more »

tps

Better handling of PHP tags in HTML attributes

Pinegrow can now handle HTML attributes that contain PHP code, for example: <img src="<?php echo "images/".$image; ?>" />

And as always, we also have a bunch of bug fixes.

Release 2.51 – 14. Jan 2016

To update your installation of Pinegrow, simply download the install package for your OS and install it over your existing installation.

Pinegrow 2.51 has a couple of important bug fixes and improvements:

  • Blocks for WordPress: missing PHP files broke exported WordPress theme
  • Certain HTML syntax errors prevented Pinegrow from loading the page
  • Better error messages in case of missing files
  • “Components -> Add/Update resources from libraries” can now be used to update resources on pages in the same project where resources are defined.
  • Internal id of the FontAwesome plugin was changed, so the plugin needs to be activated again on pages where you want to use it.

Release 2.5 – 8. Jan 2016

Happy birthday Pinegrow! Two years ago, the first version was released.

Foundation 6

Pinegrow now lets you easily create and edit Foundation 6 projects, in addition to Foundation 5, Bootstrap, MaterializeCSS, AngularJS and general HTML. See how you can easily work with the full range of Foundation components.

Components, Libraries and Master pages

Pinegrow PRO has lots of powerful features that can make your web development work easier and quicker. In this series of articles we’ll start with simple things and then go deeper:

Build your own Blocks – Tutorial

demopage

Opening Times – Free component & Tutorial

pt.openingtimes

Plus, components have new & improved features:

  • Choose if components are auto-updatable or not (check the tutorials for more)
  • Nested component definitions are supported now

WordPress theme builder

Pinegrow provides a very efficient way to build professional WordPress themes and we’re continuing to improve the process.

Define multiple master pages with custom headers and footers

With Pinegrow 2.5 you can now have more than one header and footer template in your WordPress theme.

Set Define master page action to the top level of your HTML template and you will be able to customize everything that is on top and below the Site content element.

multiple_master_pages

This action overrides the Use master page setting on the WordPress site action.

If the page is not index.html, page name is used as a slug for the header and footer.

Read more about headers and footers

Apply master pages to all open files

A real time saver! You can now apply the master page settings to all the open files in Pinegrow editor.

It is very convenient if you proceed to some modifications to your master page HEADER and FOOTER and need to spread the modifications to all the other templates of the project.

apply_masterpage_allopenfiles

Watch more about Master Pages in Pinegrow WP

Enclose multiple elements in conditional statements

By using the new action Add to previous if, you now can include any element into the if statement of the previous element.

add_to_previousIF

The action can also be added to a string of subsequent elements to include all of them into a single if block statement.

Read more about conditionals with Pinegrow WP

Create template parts with content of the element

In Define template part action, It is now possible to set a template part on a container (DIV for example) but using only its content.

template_with_content

Here is an example of a full featured comments template which elements are in a DIV but the DIV is not included in the final template export, only its content:

template_with_content_part2

Read more about partial templates in our post about the comments template.

Organize theme files in subfolders

You can now create subdirectories in your theme folder and organize your templates files according to your needs.

The subfolders and their contents will be exported in your WordPress theme just like the other files located at the root of your project.

UI tool for Google fonts

Easily browse and add Google Fonts to your projects – right within Pinegrow. Support for Google Fonts is a part of evolving Asset manager and is currently in Beta.

To manage Google Fonts open Page -> Manage assets. From there you can search and add new fonts, select styles and charsets and get the font family name for use in CSS rules:

googlefonts

UI tweaks

Selecting an element inside a collapsed section will now select that element and open the collapsed section in the tree. Once the element is de-selected the section will close again. Before 2.5, clicking on any element within the collapsed section selected the whole section.

Page tabs have unsaved changes indicator. Finally!

Bug fixes

Among them, the issue with opening pages that contain other HTML documents in iframes and bugs with restoring window position and size.