Softpedia >Mac >Development >WEB >Pinegrow Web Editor >  Changelog

Pinegrow Web Editor Changelog

What's new in Pinegrow Web Editor 7.93

Mar 7, 2024
  • Pinegrow Web Editor 7.93 brings usability improvements to all users, and introduces a whole new way of working with WordPress.

New in Pinegrow Web Editor 7.92 (Jan 16, 2024)

  • Pinekit, a free component and template library
  • Inline SVG images with one click
  • AI Assistant tutorials
  • WordPress Block supports settings
  • Bug fixes

New in Pinegrow Web Editor 7.9 (Dec 14, 2023)

  • Improved AI Assistant
  • CSS Stylesheet tree
  • Project images
  • UI improvements and more

New in Pinegrow Web Editor 7.8 (Nov 2, 2023)

  • Publish projects to Netlify
  • Disable component scanning
  • WordPress 6.4 compatibility
  • Bug fixes and more.

New in Pinegrow Web Editor 7.72 (Sep 30, 2023)

  • This update fixed a bug that was introduced by a bug fix in 7.71, related to incorrectly exporting empty loop elements (shown if there are no posts found). In addition, the text inside the empty loop element is now translated.
  • Fixed incorrect render template paths for ACF blocks.
  • The Theme / Plugin Settings option to enable loading block assets only when blocks are used on the page is included as well.

New in Pinegrow Web Editor 7.71 (Sep 30, 2023)

  • This update fixes a bug with WordPress theme export.

New in Pinegrow Web Editor 7.7 (Sep 15, 2023)

  • Bootstrap and Tailwind CSS updates, editable tag names in blocks, improved block controls, new tutorial and more.

New in Pinegrow Web Editor 7.6 (Jun 29, 2023)

  • Hybrid blocks
  • CSS Tree improvements
  • Reorder colors
  • Inner HTML field
  • New AI models

New in Pinegrow Web Editor 7.5 (May 31, 2023)

  • Native dialog element
  • Block condition action for WordPress
  • Tailwind CSS background images
  • Visual Studio Code integration

New in Pinegrow Web Editor 7.4 (Apr 27, 2023)

  • New CSS Tree Inspector
  • Improved Tailwind Class Inspector
  • Export theme.json in WordPress
  • AI Assistant improvements and tutorial.

New in Pinegrow Web Editor 7.3 (Mar 29, 2023)

  • Improved AI Assistant with chat and its own panel
  • Class Tree inspector for Tailwind CSS
  • Bug fixes

New in Pinegrow Web Editor 7.2 (Feb 9, 2023)

  • AI Assistant
  • Visual Studio Code extension update
  • Bug fixes

New in Pinegrow Web Editor 7.1 (Jan 12, 2023)

  • Store recent classes in project – with Clear recent list feature:
  • Pinegrow Web Editor 7.1 now stores classes for each project, instead of having them stored globally. This makes it easier to keep your projects organized, and you now also have the option to clear all the recent classes with a single click.
  • CSS media size tabs in Visual CSS editor indicate which size has style:
  • The CSS media size tabs in the Visual CSS editor and Tailwind CSS visual controls now indicate which size has style. This makes it easier to keep track of which styles you have applied to each size.
  • Added aspect-ratio CSS property:
  • You can find the aspect-ratio CSS property in the Display section of the Visual CSS editor.
  • Design panel with local webfonts:
  • Fonts references are now stored as urls relative to the project, so that they remain valid when transferring projects between different locations.
  • WordPress improvements:
  • Breadcrumbs now do not include the post on non-singular templates.
  • Fixed Post Author for Avatar field and added the Description to the dropdown of available fields.
  • Fixed Background image Block attribute when used on the top element of a Dynamic PHP block.
  • PG_Helpers updated and renamed to PG_Helpers_v2 to avoid conflicts with older themes and plugins on the site. This ensures that new projects use the latest resource, without having to re-export other themes and plugins that may be active on the site.
  • Tutorials:
  • The Build your first WordPress block interactive tutorial is now available in Pinegrow Web Editor as well. The tutorial is not just about WordPress – it also covers building the HTML structure and styling with CSS grid and responsive media queries.
  • Use the Interactive tutorial button on the dashboard to access tutorials.

New in Pinegrow Web Editor 7.05 (Dec 29, 2022)

  • This release addresses the following Pinegrow issues:
  • Fixed “stuck” CSS properties in CSS Visual editor (Display, Gap…)
  • Fixed file picker on srcset fields in Properties panel
  • Listing CSS variables from imported stylesheets with field helper dropdown in the Style panel

New in Pinegrow Web Editor 7.04 (Dec 21, 2022)

  • Prevent stuck class previews on visual controls in the Properties panel
  • Fixed Design panel adding multiple stylesheets
  • Fixed Post Breadcrumbs WordPress action breaking HTML in certain situations
  • Fixed exporting WordPress React blocks with Pinegrow Interactions

New in Pinegrow Web Editor 7.03 (Dec 8, 2022)

  • This release addresses the following Pinegrow 7 issues:
  • Fixed VS Code integration
  • Fixed crashing on some workspace configurations
  • Fixed Interactions issue that required Restart on Play where it before was not needed
  • Fixed double class attributes if WordPress Post Class and Post Field are used together
  • Fixed Create new file in Project panel
  • Fixed Attribute editor in Properties panel
  • Fixed version number
  • Fixed showing Bootstrap modals during editing
  • And we also squeezed in two new features for Tailwind CSS:
  • Class preview now works with external build process
  • ALT + click on a Tailwind CSS class to jump to its control in the Properties panel (a menu option for this is included on click as well)

New in Pinegrow Web Editor 7.0 (Dec 1, 2022)

  • Updates
  • Mac M1 build
  • Layout tools
  • Improved CSS editor
  • Class previews
  • Responsive interactions and more.

New in Pinegrow Web Editor 6.8 (Aug 25, 2022)

  • Bootstrap 5.2
  • Edit code
  • WordPress improvements
  • Plugins with WooCommerce blocks

New in Pinegrow Web Editor 6.7 (Jul 26, 2022)

  • Edit element code shortcut
  • Tailwind CSS prose and WordPress editor stylesheet
  • WordPress with remote pages
  • Tags and categories.

New in Pinegrow Web Editor 6.6 (Jul 7, 2022)

  • Picture element
  • Lazy loading
  • CSS Grid context menu
  • SASS performance
  • WordPress & WooCommerce improvements

New in Pinegrow Web Editor 6.5 (Mar 23, 2022)

  • Shop Builder for WooCommerce:
  • Shop Builder is the new premium add-on that let’s you easily create fully custom WooCommerce themes. Pinegrow makes sure that WooCommerce adjusts to your design, not vice versa.
  • Shop Builder for WooCommerce requires WordPress Builder add-on.
  • Other updates in Pinegrow 6.5:
  • Bug fixes.

New in Pinegrow Web Editor 6.4 (Feb 11, 2022)

  • UI improvements
  • Tailwind CSS with plugins
  • WordPress
  • Performance and stability

New in Pinegrow Web Editor 6.3 (Jan 14, 2022)

  • Tailiwnd CSS 3
  • Bootstrap 5.1.3
  • Broken links checker
  • Performance and stability
  • And more.

New in Pinegrow Web Editor 6.21 (Nov 23, 2021)

  • Creating custom WordPress blocks
  • WordPress plugins
  • Plain HTML Design Panel
  • Monterey macOS support and more.

New in Pinegrow Web Editor 6.2 (Nov 18, 2021)

  • Creating custom WordPress blocks
  • WordPress plugins
  • Plain HTML Design Panel
  • Monterey macOS support and more

New in Pinegrow Web Editor 6.1 (Jul 30, 2021)

  • Design panel with improved backgrounds, filters, harmonic colors and local web fonts
  • New templates and blocks
  • SVG icons for every project
  • Code editor with intelisense, new color themes and better performance
  • Bootstrap and Tailwind CSS updates – and more!

New in Pinegrow Web Editor 6.0.0 (Jul 30, 2021)

  • Design panel
  • Floating tools
  • Replace colors
  • Move up and down
  • Tree auto collapse
  • CSS fields
  • Monaco code editor and more.

New in Pinegrow Web Editor 5.992 (Mar 18, 2021)

  • Bootstrap 5 Beta
  • Improved text editing
  • WordPress custom image sizes
  • Bug fixes

New in Pinegrow Web Editor 5.991 (Jan 29, 2021)

  • Tailwind Blocks
  • Tailwind CSS 2
  • Tailwind UI works again
  • Bootstrap templates
  • Bug fixes

New in Pinegrow Web Editor 5.99 (Dec 20, 2020)

  • Bootstrap 4 Blocks library:
  • Pinegrow finally got a native Bootstrap 4 Blocks library that works with a simple three-steps workflow for creating uniquely designed websites.
  • 2000+ SVG icons:
  • SVG images are great for using as icons, instead of bloated icon web fonts. Bootstrap icons and Remix icons are available as a part of Bootstrap 4 Blocks, but can be used independently of blocks with any project, regardless of what framework (or none) is used.
  • To use the icons on non-Bootstrap projects, go to File -> Manage libraries & plugins -> Bootstrap 4 Blocks -> Activate. Skip adding resources to the project, when asked.
  • In the Library panel, open the Blocks tab and navigate to Bootstrap or Remix icons.
  • SVG manipulation:
  • Properties panel got useful controls for inline SVG images and SVG sub-elements. The most useful is the ability to use the current CSS text color as fill or stroke color.
  • To be able to select individual SVG sub-elements, expand the SVG image node in the Tree panel.
  • WordPress local video and audio resources:
  • Local sources for , and elements are now automatically mapped to the theme folder.
  • BrowserSync:
  • Preview page in browser now supports live preview with BrowserSync.
  • Performance improvements:
  • We changed the way how changed CSS stylesheets are applied to the page views. This should solve issues with slow updates and freezes that occasionally happen when working with large stylesheets.
  • Bug fixes:
  • And, we never run out of bugs to fix.

New in Pinegrow Web Editor 5.981 (Nov 23, 2020)

  • A quick release with:
  • Fixing the issue with opening a New page dialog
  • Changing the attribute with Attribute Editor updates the values in the Properties panel.
  • Tailwind CSS colors are now correctly detected in Tailwind Visual Editor.
  • Fixing the Customize Bootstrap Theme feature and issues with copying resources to projects.
  • Improvement of how multiple Pinegrow windows are managed.
  • Pinegrow Interactions library updated to 2.01:
  • Fixes issues with Scroll scene animations that are played independently (not synced with scroll).
  • Added the ability to name the Scroll scene animations.
  • Added Invalidate setting for independent Scroll scene animations.

New in Pinegrow Web Editor 5.98 (Nov 23, 2020)

  • Pinegrow Interactions 2.0
  • Tailwind CSS was updated to 1.9.3
  • Display the content of SVG elements in the tree
  • Using root project URL mapping is now on by default
  • Better highlighting and selecting non-visible elements
  • Bug fixes

New in Pinegrow Web Editor 5.973 (Aug 25, 2020)

  • Bootstrap 4.5.2,
  • the option to serve project files from the web-server root,
  • keeping inline classes when assigning class styles,
  • improved VS Code extension & integration,
  • and bug fixes for custom colors in Tailwind Visual Editor.

New in Pinegrow Web Editor 5.971 (Jul 30, 2020)

  • Work with customized Tailwind themes in Tailwind Visual Editor
  • Faster CSS Grid editor
  • Bug fixes

New in Pinegrow Web Editor 5.97 (Jul 8, 2020)

  • Tailwind Visual Editor add-on
  • Drag & Drop with collapsed elements
  • Reorganized HTML element Library
  • Copy paste attributes
  • Combined Undo history and more.

New in Pinegrow Web Editor 5.96 (May 14, 2020)

  • Improved Page Libraries:
  • Page Libraries let you add any web page (local or remote) to the Library Panel and use it as a library of components that you can then drag to your page.
  • This is a very useful feature and now we made it even better:
  • Page library settings let you specify CSS selectors for components and navigation areas.
  • Back and Forward buttons let you move back and forward in the navigation history.
  • Test clicks toggle lets you switch between selecting the elements on the page and interacting / navigating the page library.
  • Page libraries can be zoomed out so that you can see the desktop size of the library page without having to enlarge the Library panel.
  • You can open remote websites directly so that navigation and login methods work properly.
  • Editing XHTML Files:
  • Pinegrow can now be used to edit XHTML files with UTF8 encoding. In the past there was a problem with handling the attribute and auto-closed tags like when they were explicitly closed with .
  • Preserve attribute case:
  • Although HTML is case-insensitive language, some libraries (for example Angular 2) can require case sensitive attributes, like ngIf and not ngif.
  • Pinegrow now preserves the case of attributes. So, if you name your attribute myAttribute it will remain such in the source code. Before, Pinegrow saves all attributes in lower case.
  • Correct #Link mapping in components and master pages:
  • Links and URLs in components and master pages are mapped according to the position of the component definition and each individual instance.
  • For example, if the component is defined in /index.html and used on /products/ball.html the link products/index.html will map too index.html in the ball.html instance.
  • Until now Pinegrow also mapped anchor URLs like #contact. In most cases this was not the expected behavior. Now, Pinegrow leaves URLs that start with # as they are.
  • Note, prefix / or the file name if you need to link to a specific anchor in a destination file, for example /#contact or index.html#contact.
  • WordPress – Register Taxonomy supports Blocks editor:
  • The Register Taxonomy action now automatically adds the “show_in_rest” parameter so that the taxonomy can be used in the WordPress Blocks editor.
  • For existing projects that use Register Taxonomy action, no change is required, just re-export the theme.
  • Bug fixes:
  • Formatting CSS rules with multiple selectors
  • WordPress: set_post_thumbnail_size syntax error when defining custom post thumbnail size
  • WordPress: duplicate resource ids when enqueuing scripts and styles

New in Pinegrow Web Editor 5.95 (Apr 2, 2020)

  • Partials are back, improving the default stylesheet, create new file from the project view and configuring Pinegrow in centralized deployment.

New in Pinegrow Web Editor 5.94 (Feb 27, 2020)

  • Create custom WordPress blocks
  • Improved CSS Grid editor and projects.

New in Pinegrow Web Editor 5.93 (Feb 4, 2020)

  • Insert special characters, exclude project folders and files, updated device presets and UI improvements.

New in Pinegrow Web Editor 5.92 (Jan 21, 2020)

  • Edit remote documents, work with dynamic HTML elements, Materialize 1.0.0, WordPress improvements and more.

New in Pinegrow Web Editor 5.91 (Dec 11, 2019)

  • Bootstrap 4.4.1 and Pinegrow Interactions improvements.

New in Pinegrow Web Editor 5.9 (Nov 27, 2019)

  • Bug fixes:
  • This release also includes our monthly batch of small fixes that make a webdesigner life easier.

New in Pinegrow Web Editor 5.8 (Oct 29, 2019)

  • Reveal CSS rule in source code, control CSS code formatting, WordPress Post Breadcrumbs and bug fixes.

New in Pinegrow Web Editor 5.7 (Jul 31, 2019)

  • Duplicate media queries:
  • Media queries can now be duplicated in Style panel by right-clicking on them and selecting Duplicate or Duplicate in…
  • Previously, only individual CSS rules could be duplicated.
  • Positioning duplicated or overridden rules has also been improved. When the original rule is located inside a media query, the new rule is placed outside of media query, right after it.
  • Lock all stylesheet children:
  • Pinegrow 5.6 introduced locked stylesheets. Now it is possible to quickly lock or unlock all sub-stylesheets by selecting “Lock / Unlock all children” in the Stylesheets dropdown.
  • Map urls in Master pages:
  • Master pages and the pages that use them can be located in different folders within the project. Pinegrow maps all urls (linked stylesheets, scripts, images…) in order to preserve link validity.
  • In Pinegrow 5.7 we changed the way how urls are mapped in order to avoid linking to wrong resources in cases where resources with same names exist within the project (for example, two index.html files).
  • Now, Pinegrow maps urls according to the position of the content page relative to its master page.
  • Components links:
  • The same url mapping process is now used when updating component instances. That makes it possible to define a component with links and to use it on pages that are located in different folders within the project.
  • Url mapping can be disabled on component definition by unchecking its Map urls setting.
  • Empty elements placeholders:
  • Pinegrow adds pg-empty-placeholder class to empty elements so that they can be visible on the page, for example to empty divs .
  • Now, any unneeded placeholder classes are removed when the page is saved, for example after adding content to the div in code editor.
  • Empty placeholders can be disabled in Settings. In that case all pg-empty-placeholder classes are removed when page is saved.
  • Note that the empty placeholder class can also be toggled for each page element in its Properties
  • Font Awesome update:
  • Font Awesome was updated to the latest version 5.9.0.
  • Bug fixes:
  • Pinegrow 5.7 comes with important bug fixes, most notably fixed drag & drop into the CSS grid. Hold CTRL (CMD on Mac) while dragging an element over a CSS grid to drop it into the selected CSS grid cell.
  • We also have a couple of WordPress Theme Builder bug fixes, including fixing the “Apply master page” command and correctly outputting term links with Post Tags & Categories smart action.

New in Pinegrow Web Editor 5.6 (Jun 27, 2019)

  • Protect locked stylesheets from editing, improved Google Fonts and bug fixes.

New in Pinegrow Web Editor 5.5 (Jun 21, 2019)

  • Major update to WordPress Theme Builder, smooth Drag & Drop, CSS improvements and bug fixes.

New in Pinegrow Web Editor 5.4 (Mar 27, 2019)

  • Redesigned element context menu – Copy & Paste actions – SASS fixes – WordPress improvements – Insert actions from the context menu – Visual helpers – Post & Loop settings – Smarter Smart Menu – Reusable Customizer Sections and Fields

New in Pinegrow Web Editor 5.3 (Mar 27, 2019)

  • Open CSS Grid Editor and other tools in floating windows, Collapse / Expand all in the Tree panel, Bootstrap Carousel and more.

New in Pinegrow Web Editor 5.2 (Mar 27, 2019)

  • CSS Grid editor validates input values, element in the status bar, pick colors with system color picker, WordPress Builder improvements and more.

New in Pinegrow Web Editor 5.1 (Mar 27, 2019)

  • Open panels in floating windows and arrange them on multiple screens. Easily update Bootstrap, fixed Master pages, WordPress improvements, Starter Theme 2 update and more.

New in Pinegrow Web Editor 5 (Mar 27, 2019)

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

New in Pinegrow Web Editor 4.91 (Mar 27, 2019)

  • CSS Gradients, Bootstrap 4.1.3 and improved CSS Grid Editor & SASS support.

New in Pinegrow Web Editor 4.8 (Jun 5, 2018)

  • The Light Theme:
  • Many users asked for it and we finally have it. The light theme often feels easier on the eyes.
  • Use the “Workspace” menu in the top toolbar to switch between UI themes.
  • Preserving the HTML formatting:
  • By default, Pinegrow auto-formats the HTML code using common-sense formatting options. That is an issue for users that prefer to keep their own HTML formatting when editing documents in Pinegrow.
  • Now, the auto-formatting can be disabled in Settings.
  • With this setting, Pinegrow only auto-formats the elements that are added to the page visually, for example dragged from the Library panel. Of course this also means that you’ll have to take responsibility for formatting the HTML code after manipulating the layout in Pinegrow.
  • Simplified Google Fonts:
  • The Google Fonts Manager is now integrated directly into the Font Family CSS control. There, you can choose any font family that is loaded on the page or open the Google Fonts Manager to add or remove fonts.
  • Font Awesome 5:
  • Font Awesome, with all its icon settings is now available in Pinegrow, alongside legacy Font Awesome 4.
  • Font Awesome 5 can be included on the page with plain CSS or with Javascript that dynamically replaces icon elements with SVG images. The Javascript way is recommended by the Font Awesome team. While I can’t see a good reason for that (without Javascript the icons won’t even show up on the page), Pinegrow fully supports both approaches.
  • WordPress Theme Builder improvements:
  • We also have a couple of additions and fixes for the WordPress theme builder.
  • Pinegrow now tries to avoid multiple registrations of Custom Post Types, Sidebars and other stuff that goes into functions.php, by first checking if identical item is already defined.
  • Note, if you define multiple Custom Post Types with the same post type id, but with different settings, all these registrations will still be added to the code.
  • In addition to this, on non-master pages, Pinegrow now ignores registration actions that are placed outside of the Site content area. The thinking is that Apply Master Page command would overwrite these actions anyway.
  • Add url() when setting the background image inline style
  • If “url(…)” is not present yet, Pinegrow adds it to the code that sets the background-image inline style property.
  • Output Navigation menu to a variable:
  • Sometimes it is useful to first put the Nav menu output into a PHP variable, do some processing and then output the result.
  • The Nav Menu action now has a handy way to do that.
  • Processing and outputting can than be achieved with PHP code block or PHP Code action.

New in Pinegrow Web Editor 4.5 (Mar 7, 2018)

  • Easily customize Bootstrap 4 themes:
  • You can now use Pinegrow to customize your Bootstrap 4 themes by modifying Bootstrap SASS variables and adding CSS rules.
  • Customizing Bootstrap is normally a bit complicated because it requires setting up the SASS compilation environment, installing Bootstrap SASS sources and creating a file structure for your custom theme.
  • But with Pinegrow it’s very simple. Pinegrow takes care of all these tasks. All we have to do is the actual customization.
  • Customize SASS variables:
  • SASS variables can already be directly edited in the CSS List editor in Pinegrow. But for frameworks like Bootstrap, Foundation and various templates it is not recommended to edit variables directly in the source files. By doing that we lose the ability to easily update framework or template files to newer version.
  • The correct approach is to over-ride the variables in custom SASS file and then include the rest of the frameworks / template’s SASS files from there.
  • The new “Customize variable in…” feature makes this process easy.
  • Simply right-click on the variable that you want to customize and choose the SASS file where the customized variable should go.
  • Pinegrow also takes care of copying any other variables that are referenced in the value of the over-ridden variable.
  • Check out the guide about customizing Bootstrap 4 themes to learn more about this.
  • WordPress: Bootstrap 4 pagination and navigation:
  • Pagination and Navigation actions for WordPress Theme Builder have been updated to support Bootstrap 4.

New in Pinegrow Web Editor 4.4 (Mar 7, 2018)

  • Free images for your projects:
  • Use 500.000 free high quality images from Unsplash in your projects – from within Pinegrow.
  • Object-fit and object-position:
  • CSS properties object-fit and object-position in Display section of the Visual CSS Editor.
  • WordPress: Bootstrap 4 pagination and navigation:
  • Oops… Looks like this feature didn’t make it into 4.4. Will be out soon.
  • Pagination and Navigation actions for WordPress Theme Builder have been updated to support Bootstrap 4.
  • Improved paste into inline text editor:
  • DIVs are no longer pasted into inline text editor.
  • The Snowman is back:
  • Responsive media component is back in Bootstrap 4 library.

New in Pinegrow Web Editor 4.3 (Jan 25, 2018)

  • Bootstrap 4:
  • Bootstrap 4 was released on Jan 18, after years of being in a Beta state. Pinegrow 4.3 comes with the complete support for Bootstrap 4, including new and updated starter templates.
  • We also have updated Bootstrap docs and a series of short videos about how to work with Bootstrap in Pinegrow.
  • Toggle the display of Visual helpers:
  • Visual helpers, like selected element borders & menu, Bootstrap column overlays and image overlays, can now be toggled with CMD/CTRL + T or by clicking on the Visual helpers icon in the top toolbar. Use the dropdown menu to choose which helpers to show when the visual helpers display is active.

New in Pinegrow Web Editor 4.2 (Jan 18, 2018)

  • Foundation 6.4:
  • Pinegrow now supports Foundation 6.4. Not only that, all new visual tools like column resizers, page libraries, and grid/column overlays are available for Foundation 6.4 projects as well.
  • Image overlay guides:
  • Use “Image overlay” in the Visual helpers menu to toggle and set up the image overlay that is used as a visual guide for implementing your design.
  • Other improvements:
  • Faster Page code editing, especially noticeable on large pages.
  • Save Partial action accepts a relative path as well.
  • Support for remote stylesheets with the integrity attribute.
  • Many bug fixes and small improvements.

New in Pinegrow Web Editor 4.1 (Jan 18, 2018)

  • CSS Grid:
  • CSS editor got basic support for the CSS grid. Grid properties are located in “Grid container” and “Grid item” sections of the Visual editor.
  • Improved value sliders in Visual Editor:
  • Changing the field values by dragging the mouse slider or by using UP and DOWN keys now works in fields that contain multiple numeric values. The value under the input cursor is changed.
  • Color picker:
  • Picking up the color from the screen is now optional. Click on the icon in the color picker to toggle picking the color from anywhere in the Pinegrow app window.
  • Inline styles in Active:
  • CSS rules located in inline stylesheets, for example,h1 {...} are now listed in the Active Style panel.
  • Bootstrap improvements:
  • Abbreviations and a couple of other components got Element properties for easier customizations. Table Rows and columns settings add or remove rows and columns from the table, even if cells are not empty. Missing colors were added and bugs were fixed.
  • Bug fixes and stability:
  • Pinegrow now notices if a document with broken HTML is too large to be safely loaded. We also fixed many bugs.

New in Pinegrow Web Editor 4 (Dec 15, 2017)

  • Bootstrap 4 with new visual tools:
  • Visual controls for responsive layouts, text, visibility, Flex helpers and more:
  • Rich component library with 100s of ready-to-use Bootstrap elements. Use + icon to load custom Page libraries.
  • Grid and column overlay helpers. Toggle them above every page view or globally with View helpers icon in the top bar.
  • Bootstrap 3 got all these goodies as well.
  • The User interface:
  • You’ll notice a new default grey theme. Use “Workspaces” to switch to the Pinegrow 3 High contrast theme if you like it more. Save your own workspace layouts.
  • Get UI out of the way. Just press TAB and all the panels are gone. With your page front and center, you can then use a bunch of quick tools to bring up the feature you need without opening the main panels. Toggle eye icon in panel headers to make that panel always visible.
  • Floating panels:
  • Press P to display quick Element properties in a floating quick window. Press + to display quick Library with page libraries.
  • The start screen has thumbnails images.
  • CSS editing:
  • Edit CSS code in the main code editor. Rules selected in the Style panel get highlighted in the code editor. CSS code is properly formatted now.
  • Change element tag:
  • Right-click on any element to change it into a different tag. For example P to DIV.
  • Pick colors from the screen:
  • Use color pickers to pick colors from anywhere in the Pinegrow UI, including pages. Great for getting colors from photos that are used on the page.
  • Simpler Undo and Redo:
  • By default, the editing history is now combined for all pages and all stylesheets.
  • Grab & Drag:
  • No need to select the element on the page before moving it. Just grab any element, hold the mouse down for half a second and then move it.
  • Duplicate as group:
  • Press ALT when duplicating multiple selected elements to duplicate them as a group. Bt default, duplicating elements A B C will create A A B B C C. When using the group option, you’ll get A B C A B C.
  • Performance and bug fixes:
  • The number of files in Pinegrow package was brought down from 10000+ to about 1000. This brings faster installs and faster startup.
  • Numerous bug fixes and small tweaks.

New in Pinegrow Web Editor 3.11 (Oct 11, 2017)

  • Double-click to collapse panels:
  • Panels are no longer collapsed by clicking on the active tab. Instead, double-click on any tab to collapse the panel.
  • Style Active panel shows rules with :after and :before pseudo selectors:
  • :after, ::after, :before and ::before selectors are used to insert content after or before an element with a CSS rule. Active style panel now lists such CSS rules.

New in Pinegrow Web Editor 3.1 (Sep 14, 2017)

  • Faster CSS styling workflow:
  • The goal of Pinegrow is to make you a more powerful web developer.
  • With that goal in mind, we redesigned the flow of creating new CSS rules.
  • Now you can use a one-step process to create a new CSS rule and to add a class to the selected elements.
  • Improved text editing:
  • Going from editing one element to another flows smoother now. The editing cursor goes where you click when switching to editing another element. Pressing Enter when editing a P or a heading will break the element at that point in two elements.
  • Shiny new Help and Tutorials:
  • Pinegrow now has a built-in help system with interactive guides, including a comprehensive Getting started tutorial that covers the basic usage of all Pinegrow panels and a reference of all Pinegrow keyboard shortcuts. And it also works offline.
  • Other improvements and bug fixes:
  • Color picker accepts the current value when clicking outside of the picker (before that meant that color selection is canceled).
  • Page code editor removes the “Code has syntax error” message once the syntax error is fixed.
  • Element outlines (blue dotted borders around elements) are now off by default. Use the Display helpers icon in the top toolbar to turn them on.
  • Pinegrow no longer temporary adds special .pg-* selectors to CSS code. In certain situations, these selectors were left in the code. Pinegrow will now offer to clean up such code.
  • Javascript syntax highlighting in code editor when you open a JS file through Project panel.
  • Fixed the issue where Undo and redo stopped working after an error during a undo or redo operation.

New in Pinegrow Web Editor 3.07 (Aug 28, 2017)

  • Atom + Pinegrow:
  • Atom is back! Live-sync Pinegrow and Atom code editor to create the perfect web development IDE. All edits are synced between the two apps, without having to save files first. Follow this guide to set it up.
  • Split and Merge HTML elements:
  • “Split parent” splits the parent of the selected element into two elements, at the point of the selected element.
  • “Merge” combines selected elements into the element on which you run the “Merge” command. Content of merged element is prepended or appended to the destination element, according to its position in relation to the destination element. Empty merged elements are discarded.
  • Compile & Save command for SASS/LESS stylesheets:
  • Normally, changed SASS/LESS stylesheets are compiled into corresponding .css files when you save the page. Use “Compile & Save” command to force compiling .css files even if the source SASS/LESS file is not changed. For example, if you open a project in Pinegrow after editing the source file with another app without compiling .css files.
  • Hide selected element border:
  • Blue borders of the selected elements sometimes get in the way. Use “Display helpers” tool to switch them on and off. There you can also hide menus of the selected elements and other visual helpers.
  • More predefined workspaces:
  • Restore workspace menu has better descriptions and a new layout: All sides, a 4 column layout with Element properties and Element code just below page view area.
  • Bug fixes:
  • Just when we think that we fixed everything, new bugs come out – thanks to out amazing user community. Btw. if you haven’t yet checked out our Slack and forum, give them a visit. They are full of friendly and helpful Pinegrowers.

New in Pinegrow Web Editor 3.04 (Jul 22, 2017)

  • Brings significant performance improvements fixes important bugs.

New in Pinegrow Web Editor 2.951 (Oct 31, 2016)

  • Fixes bug with Pinegrow occasionally freezing when entering the Edit code mode.

New in Pinegrow Web Editor 2.95 (Oct 28, 2016)

  • 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
  • ASP, ASPX and ERB template editing in addition to PHP. Pinegrow now supports editing HTML templates with

New in Pinegrow Web Editor 2.94 (Sep 27, 2016)

  • Classes shown in the tree are now updated when properties in PROP panel change.
  • Use Name in tree property in Info section of the PROP panel to name elements in the tree.
  • Manage Google Fonts (old asset manager) was added to Page menu. It lets you easily add and remove Google fonts from the page.
  • Code editor is now focused when opened.
  • FIXED: Selecting code in the code editor in the external window no longer deletes the selected code.
  • SVG elements can be edited with Element edit code without freezing Pinegrow.

New in Pinegrow Web Editor 2.93 (Sep 6, 2016)

  • 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.
  • 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.
  • 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.
  • 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.
  • Mr. Pine Cone – A simple personal HTML website.
  • You can use them for personal and commercial purposes. They’re also a great way to learn about how to create websites with Pinegrow.

New in Pinegrow Web Editor 2.92 (Jul 26, 2016)

  • UI IMPROVEMENTS:
  • Double clicking on an image will open image selection dialog.
  • When selecting an image located outside of the project folder, Pinegrow asks if you want to copy the file to the project.
  • Classes are shown in the tree. The first class is displayed, all can be seen by hovering the mouse over the it.
  • Background image property was added to Style section of the PROP panel.
  • ESC key exits the inline edit mode, no more mouse clicking the Done button.
  • 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.
  • 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.
  • 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.
  • 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.

New in Pinegrow Web Editor 2.91 (Jun 13, 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.

New in Pinegrow Web Editor 2.9 (May 26, 2016)

  • Now you can use Atom code editor and Pinegrow together: code parts that are easier to code in Atom and use Pinegrow’s powerful tools to work with HTML structure, Bootstrap, master pages, components and so on.

New in Pinegrow Web Editor 2.81 (Apr 27, 2016)

  • Brings improved performance and lower memory usage as well as:
  • Enable or disable Javascript on edited pages in Settings (Javascript code in edited pages can cause stability and performance issues during editing in Pinegrow).
  • Blocks updated to Bootstrap 3.3.6.
  • Font Awesome plugin updated to the latest version.

New in Pinegrow Web Editor 2.8 (Apr 21, 2016)

  • Copy & paste:
  • Pinegrow came far without it. But now proper copy, cut and paste with clipboard manager is here.
  • 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…
  • 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).
  • 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 elements). To force the selector search prepend the selector with $ (for example, “$p” will find only elements);
  • 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 element.
  • 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.
  • 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.

New in Pinegrow Web Editor 2.71 (Mar 7, 2016)

  • Quick bug fix release solving issues with loading and unloading Pinegrow plugins.

New in Pinegrow Web Editor 2.7 (Mar 4, 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.
  • 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.
  • 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.

New in Pinegrow Web Editor 2.65 (Feb 18, 2016)

  • 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.
  • 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”.
  • 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.
  • Font Awesome plugin now adds Font Awesome CSS resources through Page -> Manage plugins & libraries -> Font Awesome -> (Activate if not yet activated) -> Resources.
  • Bug fixes.

New in Pinegrow Web Editor 2.6 (Feb 4, 2016)

  • Rearrange UI panels:
  • Select the best position for LIB panel, document outline tree and page views. Tree and pages are also horizontally resizable.
  • Edit code in a separate window:
  • Open code editor in a separate window. That’s especially handy if you have multiple screens.
  • Better tree visibility:
  • The tree displays vertical guides for different nesting levels with a highlighted guide for the current level.
  • Quickly switch between panels:
  • Keyboard shortcuts (CTRL/CMD + 1..6) will switch between LIB, PROP, CSS, ACT, WP and PRJ panels.
  • 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.
  • 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 »
  • Better handling of PHP tags in HTML attributes:
  • Pinegrow can now handle HTML attributes that contain PHP code, for example:

New in Pinegrow Web Editor 2.4 (Dec 3, 2015)

  • Resizable views, PHP editing, partials, improved components and many other fixes.

New in Pinegrow Web Editor 2.31 (Nov 19, 2015)

  • We discovered a bug that prevented exporting WordPress themes in trial mode.
  • Auto fixing broken links in project:
  • Use Fix links in PRJ context menu to fix broken links within the project, for example after moving the page or its resources to a different subfolder. Fix links will look for missing files and search for them within the project. If more files with the same name are found, Fix links will ask you to pick the right one.
  • Search box for icons:
  • All of us wasted enough time scrolling through hundreds of icons, searching for the right one. Finally, we have a search box! This works with the [Font Awesome plugin](), Bootstrap Glyphicons and Materialize CSS icons.
  • Clearing Bootstrap columns:
  • Bootstrap column grid becomes messed up if columns have different heights. The official solution is to insert column breaks at line breaks between columns. But doing this manually, especially for responsive column spans, is boring and error-prone. Not any more! Just right-click on any element that contains columns and select *Update column breaks*. Pinegrow will analyse the layout and insert column breaks at the right places. Remember to re-update column breaks after changing the column grid.
  • Test clicks:
  • In the past using test clicks (SHIFT + Click or Test clicks mode, that lets the page handle the click so that you can interact with menus, modals…) often lead to confusing “Are you sure you want to leave this page” messages. Now, test-clicking on a link will open the link in Pinegrow, or show the page if it is open already. That’s a nice way to navigate & edit around your multipage website.
  • Hiding elements during editing:
  • We changed the way how elements can be hidden during editing in Pinegrow. Instead of using inline styles that in some cases leaked back into the source code, Pinegrow uses data-pg-hidden attribute to mark hidden elements. You can even tell Pinegrow to remember hidden (and collapsed) elements in saved files. Read more about hiding and collapsing elements.
  • File pickers for links:
  • Link fields have a file picker now. Also, you can use the project view to insert links. Just select an element that need an href or src attribute, right-click on the file you want to link to and select “Set href/src”.
  • Set which files are editable in Pinegrow:
  • Use Support -> Settings -> File types editable in Pinegrow to specify file extensions that Pinegrow should open in HTML editing mode.

New in Pinegrow Web Editor 2.3 (Nov 19, 2015)

  • Projects:
  • Pinegrow lets you open any folder as a project. The file tree of the folder (project) is displayed in PRJ panel. There you can easily open pages, add new ones, delete files and so on. Projects are the foundation of other PRO features: Master pages, Smart components and Libraries.
  • Master pages:
  • Master pages let you define a common template for all the pages in your website. Any changes made to the master page will be automatically applied to all pages that are based on that master page. Master pages usually contain editable areas that can be customized on the content pages and will be preserved during updates.
  • Smart components:
  • Smart components are reusable website elements that can have editable areas. Any HTML element can become a smart component. Like Master pages, all changes done to the component definition will be automatically applied to all instances of the component, across the whole project.
  • Editable areas:
  • Editable areas are used in both Master pages and Smart components. They are layout elements that can be customized on content pages and in component instances. Different aspects of elements can be defined as editable: the content, attributes and classes.
  • Libraries:
  • Every project can be loaded as a library of another project. That means that all the components and resources defined in the library project will become available for use in the current project. That’s a powerful way of defining reusable website components.
  • And more:
  • Many other improvements, like greatly increased speed and decreased memory usage, update to the latest versions of Bootstrap and Foundation.

New in Pinegrow Web Editor 2.21 (Sep 4, 2015)

  • Smart WP menus and bug fixes

New in Pinegrow Web Editor 2.2 (Jul 27, 2015)

  • Blocks for Bootstrap and WordPress
  • Full support for WordPress Customizer
  • Online course about creating WordPress themes with Pinegrow
  • Pinegrow Slack Community
  • and more.

New in Pinegrow Web Editor 2.01 (Apr 25, 2015)

  • Release 2.01 has a couple of important bug fixes:
  • App window disappeared on Windows after being minimised.
  • Theme could not be exported in trial mode on Windows.
  • Attributes enclosed in single quotes were not correctly parsed.

New in Pinegrow Web Editor 2.0 (Apr 4, 2015)

  • WordPress theme builder (paid upgrade)
  • Refreshed UI
  • Icons for CSS properties (thanks Martin!)
  • Font Awesome plugin
  • Remembering the screen size and position
  • Persistent tree collapsing (data-pg-collapsed attribute is added to collapsed elements)
  • Set element's name (bottom of PROP panel, stored in data-pg-name attribute)
  • Emmet in code editors (enable it in Settings)
  • And many bug fixes.

New in Pinegrow Web Editor 1.27 (Dec 27, 2014)

  • New and improved:
  • Open recent files
  • Setting to disable auto-reloading externally changed files
  • Online documentation
  • Kelvin Pine - free personal resume Bootstrap theme
  • Bug fixes

New in Pinegrow Web Editor 1.25 (Dec 2, 2014)

  • Using Pinegrow alongside your favorite code editor or IDE:
  • Pinegrow is not an all-or-nothing web development solution. You can use Pinegrow for those tasks where it can save you lots of time and effort while using other tools for tasks more suited to them.
  • In this release we greatly improved the way how Pinegrow handles changes made in external programs, so that you can easily use it with editors like Sublime Text, Vim, Emacs, WebStrom or even Adobe Dreamweaver.
  • To do that you simply open the same HTML page in Pinegrow and in the external editor. Pinegrow will watch the HTML and attached CSS/LESS files for changes. When you save a file in the code editor Pinegrow will recognise that the file was modified externally.
  • Now, here's where the magic begins. Instead of simply reloading the whole page, Pinegrow compares both versions of the page and only updates the modified elements. This is fast and also works great on pages with loaders, modals and similar dynamic elements because the page view is not re-initialised every time you make a change.
  • The modal box in Pinegrow gets updated automatically without having to reload the page and reopen the modal. This also makes Pinegrow a great solution for previewing sites during editing.
  • Pinegrow also selects the changed element after it gets updated (this happens only if a single element is changed externally).
  • Editing works both ways. We can make edits in Pinegrow, save the file and the external code editor will reload the modified file.
  • Editing the code in the external editor also works great when we use Pinegrow to show multiple views of the same page.
  • In some situations Pinegrow can't update changed elements selectively (for example, if the whole page changes). In that case Pinegrow will do a quick reload of the whole page.
  • Additional advantage of this setup is that you can use multiple displays:
  • keep Pinegrow open on one display and the code editor on the second display.
  • Smarter built-in code editor:
  • Due to the above mentioned changes it is much more efficient to use an external code editor for any serious coding. Pinegrow's built-in code editor can still be used though. In this release we improved its performance and usefulness by using the same selective-updating engine that is used when working with external code editors.
  • One advantage of the internal editor is that selecting an element on the page highlights the element in the code view. And right-clicking on the element in the code selects the clicked element on the page.
  • Auto-update is disabled if the code has syntax errors (like unclosed tags). Correct the problem or do the manual refresh (CMD + R) to update the page.
  • Open file in Pinegrow from the command line:
  • You can also setup Pinegrow as the external preview for your IDE. File name of the page you want to open is passed through command line parameter. Note, that only one instance of Pinegrow can run at the same time. If Pinegrow is already running the page will be opened in that instance.
  • Preventing synchronous Ajax calls from freezing the UI:
  • Quite often web templates and plugins contain JavaScript code that makes synchronous (as opposed to asynchronous) AJAX calls to load dynamic data. By design synchronous calls block the page until the call is completed. But such calls also dead-lock Pinegrow when Ajax call is made to Pinegrow's internal web server and you are stuck with "Loading, please wait..." screen.
  • To avoid this Pinegrow now intercepts all Ajax calls and forces them to be asynchronous. As a result there should be less lock-ups when loading a page
  • Other changes:
  • Bootstrap was updated to 3.3.1
  • bug fixes

New in Pinegrow Web Editor 1.24 (Oct 20, 2014)

  • No data-pg-id attributes in Preview and copied code
  • Pinegrow uses data-pg-id attributes internally to map DOM elements to their source-code representation. These attributes are removed when you save HTML files, so that you get clean code without any Pinegrow artefacts.
  • With 1.24 update you get clean code also when you preview page in external browser and when you copy the code from the edit code view.
  • Inline edit performance improvement
  • Inline edit (double-click or Actions -> Edit content) works by using browser's contenteditable mode on the closest parent div, section, table or body element. Depending on your layout this can cover quite a large section of the page. For example, if you have a column that contains hundreds of paragraphs of text and double-click on one paragraph, the whole column will go to inline edit mode and with each change you make Pinegrow will have a lot to do to map edits back to the source code.
  • Release 1.24 reduces the amount of processing that happens for each keystroke. Hiding the tree view can also increase responsiveness.
  • Improved HTML formatting
  • Producing clean HTML code is the top goal of Pinegrow. Code for formatting HTML was completely rewritten as part of the new source manipulation engine in release 1.2. While it tries to be smart and sensible in choosing how to format the output code, it is quite possible that it doesn't do this job perfectly in certain situations. If you run across any formatting mistakes, please let us know and send sample code.
  • Sync between Edit code and Page view was inconsistent
  • Edit code mode tried to be smart in mapping changes made to the code back to the live page view. In fact, it was too smart! In some cases it didn't detect the changed element correctly and this resulted in unwanted artefacts or missed updates on the live page view.
  • With 1.24 the smart Edit code went back to the lab. In its place we have a simple sync that simply copies the whole code to the page with each change. On large documents this can cause performance issues. Workarounds are closing the tree and using Actions -> Edit code on selected elements to edit the HTML code of just that particular element and its children.
  • Another issue that can come up is page being reinitialised on every edit code change. For example, it the page contains loader overlay, the overlay will be again displayed over the page. Refresh (CMD + R) will fix the page view if it get messed up.

New in Pinegrow Web Editor 1.23 (Oct 16, 2014)

  • Pinegrow 1.23 has support for AngularJS.

New in Pinegrow Web Editor 1.22 (Oct 3, 2014)

  • Edit pages with dynamic JavaScript elements
  • Use code & visual editing at the same time
  • Use code & visual editing at the same time
  • Preview changes without saving
  • Control sliders
  • Bootstrap was updated to 3.2 and Foundation to 5.4.5.
  • Edit code supports Find and Replace:
  • find = Ctrl-F (PC), Cmd-F (Mac)
  • findNext = Ctrl-G (PC), Cmd-G (Mac)
  • findPrev = Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)
  • replace = Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)
  • replaceAll = Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)
  • CSS panel and tree are now about 10x faster
  • Also CSS panel scrolls so that the stylesheet list, search bar and Add rule links are always visible.
  • Refresh page CMD+R
  • Up to PG 1.21 CMD+R reloaded the page from disk. Now it uses special magic to reload the working state of the page (including unsaved changes). This is useful when editing pages with JS plugins that can get messed up during editing. Just do a refresh if that happens.
  • Undo & Redo will auto refresh the page
  • This makes undo and redo operation a bit slower, but is necessary to restore page properly if it is using JS plugins.
  • A couple of small things:
  • Zoom in Window menu
  • Option to auto add .html extension when saving
  • Vertical align and list style added to CSS props
  • Better readability, no more small-caps in tree and CSS panel

New in Pinegrow Web Editor 1.21 Beta (Sep 29, 2014)

  • Edit pages with JS plugins.
  • Use Edit code together with visual editing
  • Any changes done in LIB, PROP on the page, or in the tree are reflected in the code view. Changes done in the code view are reflected on the page and in the tree. Right-click on the element in the code to select it on the page.
  • Edit code supports Find and Replace:
  • find = Ctrl-F (PC), Cmd-F (Mac)
  • findNext = Ctrl-G (PC), Cmd-G (Mac)
  • findPrev = Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)
  • replace = Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)
  • replaceAll = Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)
  • Open from url improvements
  • Remote pages are now loaded through a built-in proxy server. That lets Active option in CSS panel (that shows only CSS rules that affect the selected element) work regardless of where stylesheets are served.
  • Preview without saving
  • Pages can now be previewed in browser without having to save them first. Just click on CMD+B or Page -> Preview in Browser to open a special preview url in the external browser.
  • CSS panel and tree are now about 10x faster
  • Also CSS panel scrolls so that the stylesheet list, search bar and Add rule links are always visible.
  • Refresh page CMD+R
  • Up to PG 1.21 CMD+R reloaded the page. Now it uses special magic to reload the working state of the page (including unsaved changes). This is useful when editing pages with JS plugins that can get messed up during editing. Just do a refresh if that happens.
  • Undo & Redo will auto refresh the page
  • This makes undo and redo operation a bit slower, but is necessary to restore page properly if it is using JS plugins.
  • A couple of small things:
  • Zoom in Window menu
  • Option to auto add .html extension when saving
  • Vertical align and list style added to CSS props
  • Better readability, no more small-caps in tree and CSS panel

New in Pinegrow Web Editor 1.2 Beta 1 (Sep 8, 2014)

  • Working with HTML pages that use JavaScript code and plugins
  • Better Edit code - Visual page synchronization
  • Support for Revolution Slider and Bootstrap Carousel
  • Bug fixes

New in Pinegrow Web Editor 1.15 (Jun 24, 2014)

  • New features:
  • CSS UI fields for top, right, bottom and left.
  • pg-empty-placeholder class makes empty elements visible during editing (read more).
  • Settings for UI zoom (useful for visually impaired users) and HTML code indent size in Support -> Settings.
  • Smarter Insert Lorem Ipsum in selected element Actions menu.
  • Bug fixes:
  • CSS parser mistook // characters as comments even when they were a part of url(...) or content values.
  • Other minor bugs.

New in Pinegrow Web Editor 1.14 (Jun 17, 2014)

  • New features:
  • UP and DOWN arrow keys in CSS rules properties increases or decreases values by 0.1 unit (1 unit with SHIFT) if value is a decimal value (normally by 1 and 10 units).
  • Use selected element Actions -> Insert Lorem Ipsum to quickly insert placeholder text.
  • Improved handling of empty elements (for example, divs without children). min-height:100px is applied to empty elements so that you can see them while editing the page (otherwise their default height is 0px). New setting was added to enable or disable this behaviour.
  • Disable auto-updating in page Edit code (checkbox on the right side of the edit toolbar). Click on Refresh or press CMD + R to manually refresh the page view after making changes to the code. This is useful when auto-updating gets too slow on complex pages.
  • Bug fixes.

New in Pinegrow Web Editor 1.13 (Jun 12, 2014)

  • New time-saving features:
  • Use UP and DOWN arrow keys in CSS rules properties to increase or decrease values by 1 unit. Press SHIFT to change the value by 10 units.
  • Bug fixes:
  • CSS sometimes couldn't be saved and it was reporting LESS syntax errors even when LESS parser was not used.
  • Non-standard HTML tags were not recognized in plain HTML mode.

New in Pinegrow Web Editor 1.12 (Jun 5, 2014)

  • CSS improvements:
  • Pinegrow 1.12 handles CSS and LESS differently. LESS parser is used only when variables are used or LESS file is present alongside the CSS file when the document is opened.
  • LESS icon next to the stylesheet name indicates that the LESS parser is used. LESS file (and SCSS version) are saved only when LESS parser is used. In all other cases more flexible CSS parser is used.
  • Stylesheets right-click menu:
  • Show only these CSS rules will hide all other stylesheets from the rule list
  • Ignore will hide the stylesheet (use to Load & Show to show it again)
  • Disable / Enable the stylesheet on the current page
  • Reload the stylesheet. Useful when you make a change to the CSS file outside of Pinegrow.
  • Syncing code and page view:
  • Code view and page view are now synced.
  • When you select an element on the page its html code gets highlighted in the code editor. Any change you do in page view (move, delete, duplicate elements, type text...) is also reflected in the code view.
  • Any changes you do in the code view are immediately visible in the page view.
  • Pinegrow loves the code:
  • Preview of LIB and component elements also shows the html code. That's useful when graphical preview doesn't have enough information. Also it lets you easily see the code behind the element.
  • LIB components right-click menu got a Copy code option that will copy the html code of the element to the clipboard. From there you can paste it into the code view or use it in another app.
  • Settings:
  • Pinegrow finally got its own Settings screen (Support -> Settings). It lets you turn off automatic file backup that saves file copy to _pgbackup folder before overwriting the file. And you can choose your favorite theme for the code editor.

New in Pinegrow Web Editor 1.11 (May 30, 2014)

  • The most important is support for defining custom responsive breakpoints together with the media query selection tool. This works on any HTML page, regardless of which framework it is using (or not).
  • Multi-page editing was also improved. Mirroring now works both ways, so that you can make changes to any of the main page's views and all changes will be propagated back to the main page. Save command will always save the main page even if you're editing its view.
  • New keyboard shortcuts that will save you a lot of time:
  • CMD/CTRL + E will take you straight to edit page code mode and back.
  • CMD/CTRL + B will save the current page and open it in browser.
  • CSS panel got two new checkbox right bellow the search field:
  • Active will show only those CSS rules that apply to the selected element.
  • Visible at X px will show only the rules that are relevant to the current screen size.
  • Bootstrap updates:
  • container-fluid added
  • navbar is fixed so that it now always contains a container
  • push-0, pull-0 and offset-0 classes were added.
  • Save All will now also save changes to component libraries.
  • Startup on Windows is now a lot faster because we're using Enigma VirtualBox for packaging the app. This avoids having to unzip tons of small files every time the app is started.

New in Pinegrow Web Editor 1.108 (Apr 26, 2014)

  • Bug fixes:
  • In 1.107 new stylesheet could not be added in Manage stylesheets if any open page contained inline stylesheets.

New in Pinegrow Web Editor 1.103 (Apr 4, 2014)

  • Now we have a couple of useful keyboard shortcuts and more to come in the future:
  • CMD + S - Save file
  • CMD + SHIFT + S - Save file as
  • ALT + S - Save all changed files
  • CMD + X - Close the selected page
  • CMD + R - Remember project
  • BACKSPACE - Delete selected element
  • D - Duplicate selected element
  • C - Edit code of the selected element (press ESC to quickly close the edit code window)