Skip to content
pinegrow.com
Docs menuPinegrow Web Editor release notes
Release notes

Pinegrow Web Editor 5, November 20, 2018

Updated

“Focus on…” mode, Handling inline styles and other styling improvements, Drag files from the Project panel and more.

On this page

First, a quick look back. In the year since Pinegrow Web Editor 4 was released, we had 10 strong updates with features like Smart WordPress Actions and powerful Visual CSS Grid Editor.

A note about upgrades to Pinegrow 5: if your license is eligible for free updates (one year after the license purchase and renewal, or as long as subscription is active) you get all Pinegrow Web Editor updates for free, including Pinegrow 5.

With Pinegrow 5 we focus on improving the workflow of dealing with HTML layout and CSS styling. We even created a feature called “Focus on”.

So, let’s start with that.

Focus on…

“Focus on…” lets us isolate an element on the page and deal with just this element instead of the whole page. That’s very useful on complex HTML layouts.

“Focus on…” command is available in the top toolbar, on the element context menu or with the shortcut CMD+F (CTRL+F on Windows/Linux).

Pinegrow Focus on menu with Page Layout and Selected element options, above a grid of numbered photo tiles.

A couple of things happen when we Focus on an element:

The Tree panel displays the structure of the focused element, with all its children nodes collapsed (only the top most level is expanded):

Pinegrow in focus mode on a grid, with the Focusing on div.grid label at top and the layers tree beside the image tiles.

Drag & drop on the page deals only with top level children of the element. For example, grabbing anything within the element will grab the top level child:

Pinegrow focus mode dragging a grid item, with a tooltip explaining Hold CMD to target grid cells and Hold ALT to clone.

Similarly, dropping an element from the Library panel will place the element on the top level of the focused element.

That’s very handy for dealing with the top level structure of the focused element without worrying that we’ll drop something in the wrong place.

If we want more control over drag & drop placement, we can expand relevant nodes in the Tree panel and use it for dropping or rearranging elements:

Pinegrow layers tree in focus mode, with a callout saying to expand tree nodes to rearrange their content.

The “Focus on” menu also contains a shortcut to focusing on the Page layout of the Body element:

Pinegrow focus mode menu with Page Layout selected, shown over the Pinegrow website hero with its body element focused.

The Focus bar also lists the elements that can be inserted into the focused element, if available:

Pinegrow focus mode Insert toolbar for a navbar, with a callout saying to insert elements into the focused element.

To exit the “Focus on” mode click on the close icon in the Focus bar or select Clear from the Focus menu.

Pinegrow focus bar reading Focusing on Page Layout body, with a callout pointing to the x that exits Focus on mode.

Improved CSS Styling

Starting from Pinegrow 3 it has been possible to style elements with inline styles (with HTML element style attribute).

The benefit of inline styles is that we can jump straight into styling an element, without thinking about classes, ids and CSS rules.

But eventually, all inline styles should be transferred into proper CSS rules. That’s hard to do if inline styles are scattered around the page.

Pinegrow 5 has a solution for that.

Working with inline styles

First, the Style panel now clearly indicates when inline styles are used:

Pinegrow Style attribute panel for a grid element listing its inline grid properties, with a callout saying inline style is set for this element.

Second, the Quick Create CSS Rule tool offers to transfer the inline styles into a newly created CSS rule:

Pinegrow quick CSS rule field with my-new-class typed in, and the option to save the inline style to the new rule checked.

And the Tree panel shows the style icon next to elements with inline styles. Clicking on the style icon in the Tree jumps straight into Style editor for that element:

Pinegrow layers tree with inline style indicators next to the grid and its items, with a callout explaining the indicator.

The Tree panel filter can be used to only display elements with inline styles:

Pinegrow layers tree filtered to show only elements with inline styles, with a callout explaining the filter.

With these tools we have the best of both worlds: the freedom to directly style with inline styles and the systematic process for creating CSS rules for those styles.

And some might ask: Why not have a feature that would automatically save all inline styles on the page as CSS rules?

It would be easy for Pinegrow to go through the page and store all inline styles into CSS classes like .rule1, .rule2…

Although it sounds useful, such feature would lead to messy CSS code. Creating maintainable CSS structure requires strategic thinking about properly naming and organizing CSS rules. That’s not something that an app can do for you.

Creating clean and maintainable code is the top goal and quality of Pinegrow Web Editor. We don’t want to introduce any feature that would go against this.

Other styling improvements

There are more styling improvements worth mentioning:

Stylesheets and their CSS rules can be hidden in the Active Style panel by clicking on the Hide stylesheet icon next to the stylesheet name:

Pinegrow Active Styles panel with the eye icon next to bootstrap.css clicked to hide that stylesheet, with a callout.

Before, the “Ignore in Active” function was only available from the Stylesheets menu.

Text indent control was added to the Text section of the CSS Visual Editor:

Pinegrow Visual Editor Font and Text section with Indent set to 3em, applied to a paragraph on the canvas.

“Customize variable” command (for SASS and LESS files) will ask for the new value if the default value uses a custom function:

Pinegrow _variables.scss file with a context menu open on a variable, offering Customize in custom.scss, Edit variables and Delete.

This avoids breaking SASS/LESS files with functions that are not yet defined in the section where custom variables are defined:

Set the variable value dialog for $link-color, with a callout saying theme-color is not defined in custom.scss and $primary entered as a safe value.

Pinegrow uses CSS Autoprefixer when compiling SASS and LESS files. Now you can control the Autoprefixer configuration in the Settings dialog. This feature is for advanced users, most users can just leave the autoprefixer settings as they are.

Pinegrow Settings dialog's SASS and LESS compilation section, with Remove empty CSS rules and Use CSS Autoprefixer checked.

The Project panel

Note, the Project panel is a Pinegrow PRO feature.

Now, we can drag images, stylesheets and scripts from the Project panel to the page. Draggable files have a Drag icon displayed next to their names:

Pinegrow Project panel for the CSSGridPlayground project, listing image files, with a callout saying the files are draggable.

Dragging an image inserts the image to the selected place on the page or in the Tree

Dropping an image on an existing image on the page replaces that image:

Pinegrow dragging an image file from the Project panel onto a grid image, with a callout saying to drop the image to replace it.

Dragging a stylesheet (.css file) to the page appends the stylesheet to the page.

Doing that with a Javascript (.js) script file will insert the script to the footer of the page.

Image previews in the Project panel now also display the dimensions and size of images:

Pinegrow Project panel preview of an image file showing a misty landscape, with its dimensions and file size of 800 by 536 pixels and 20 KB.

And using the search in the Project panel expands all folders with matched files.

The Tree panel

The Tree panel got a “Filter” function that lets us display only elements with inline styles, images, texts, links, components or WordPress actions:

Tree panel filter menu with Links checked under Show only, listing options for inline styles, images, texts and WordPress.

The filter works alongside the existing search function that lets us search with strings and CSS selectors:

Tree panel search box with Buy typed in, filtering the tree down to the Buy link in the navbar.

Other improvements

Use arrow keys to select elements

  • UP selects the parent element
  • DOWN selects the first child element
  • LEFT selects the previous element
  • RIGHT selects the next element

Use SHIFT with LEFT and RIGHT keys to select a range of elements.

Selecting a duplicated element

A duplicated element is now automatically selected, if the Duplicate command was run on a selected element.

Element dimensions in pixels are shown when an element is selected or hovered with the mouse pointer:

Pinegrow paragraph on a page with the Element size label showing p at 483.75 by 96 pixels.

Clicking on a image in the Unsplash photo browser replaces the currently selected image:

Pinegrow Search Photos on Unsplash dialog over The Pine Poems page, with a tooltip for replacing the selected image with a larger size.

Use “Clear code” icon in Insert code in the Library panel to clear the code from the editor:

Pinegrow Insert Code panel with the code h1 The title, p.lead Subtitle, p Hi! and a callout to clear the code editor.

Page and project thumbnails are now turned off by default on Linux because on Linux, generating thumbnails requires briefly showing a second window. You can turn them on in the Options menu on the Start screen:

-

This was an overview of noteworthy Pinegrow 5 features.

To take Pinegrow 5 for a spin, download it from [pinegrow.com](https://pinegrow.com). If your Pinegrow trial already expired, you’ll get a fresh trial period.

Have fun.