CSS Grid editor validates input values, element in the status bar, pick colors with system color picker, WordPress Builder improvements and more.
Update
UPDATE: On 12. Feb, 2019 we released Pinegrow 5.21 with bug fixes for issues related to CSS Grid editor, Unsplash photo browser, remembering “Generate thumbnails” setting and the Repeater.
Download
CSS Grid Editor input validation
CSS Grid editor now checks the syntax of grid properties. It caches common error like missing “(“ and “)” characters, wrong units and so on.
Only valid values are stored into CSS rules.
<html> element in the Status bar
Breadcrumbs of the selected element now include the top HTML element. That makes it easier to select it.
Color picker
Picking a color from the screen
We had to change how the picking a color from the screen works, so that the feature works with floating windows.
Until now, the screen picker was activated by clicking on the icon and then moving the cursor over the Pinegrow window and then clicking to confirm the selection.
Now, the icon is dragged over the Pinegrow window and releasing the mouse will confirm the selection.
Then, press on Change to keep the selected color or Cancel to restore the previous value.
Using the system color picker
Clicking on the color button next to the Picker icon opens up the system color picker.
On Mac the system color picker includes the screen color picker tool that lets us pick a color from anywhere on the screen, not just from the Pinegrow window.
Surprisingly, Windows and Linux system color pickers lack this useful feature.
Attribute editor
The element Attribute editor now supports editing values that contain JSON code, for example … Pinegrow will automatically use the right quote for the attribute in HTML: ‘ if the value contains “ and “ for all other cases.
More resilient stylesheet loading
A lot of templates and projects out there in the real world contain broken code. Browsers are designed to work around such errors instead of complaining about them.
Pinegrow is more sensitive by design, because the goal is to notice and fix errors during development.
Still, we often get support requests with issues that are caused by such errors. One recent case involved a template with a stylesheet that imported itself. Pinegrow now detects and survives such situations.
On a similar note, we also see a lot commercial templates that are loaded with 10s of Javascript plugins. That can easily lead to performance issues when editing such projects in Pinegrow.
One solution is to disable Javascript while editing in Pinegrow, but then you’re often stuck with poorly implemented loaders that rely on Javascript to be cleared from the screen.
That actually makes Pinegrow a good tool for checking how projects behave in various sub-optimal environments, for example in browsers without Javascript.
Running into a performance issue in Pinegrow, is often an indicator of the issue in the edited project. Either it is too bloated or it uses heavy Javascript code that negatively impacts the performance.
Sounds like an easy way out for us – just blaming any Pinegrow problems on your project 🙂
The point is that running a project in Pinegrow can help making sure that your project works well everywhere.
WordPress Theme Builder
Smarter way to apply master pages
Apply Master page command takes the current page, opens its master page and applies any changes to areas outside of the Site content.
A while ago we added the “Apply master page to all open files” that does this for all open pages.
Still, on larger projects with multiple templates and potentially multiple master pages, doing that is cumbersome. The easiest way is to open all template files and then run “Apply master page to all open files”.
Now, we added two more options:
Apply master pages to the whole project will go through all template files in the project and apply their respective master pages to them.
Apply master page to related files will do the same but only for project files that use the current page as their master page.
Both features work with projects, so they require Pinegrow PRO edition.
Changed files are not saved automatically, so that you have a chance to review changes before saving them.
Project panel indicates all files with unsaved changes.
You have a couple of options:
- To review changes, click on the file name in the Project panel to open the file in Pinegrow. Is everything is ok, you then save the file.
- Right click on the file name in the Project panel and select Save.
- Run File -> Save all to save all changed files.
has_term conditional statement
The parameters of has_term action have been mistakenly reversed until now. We fixed that and also added the optional post parameter.
Post loop – Smart
The “Order by” parameter of the Post loop Smart action with custom WP query has been fixed.