Bootstrap 5.2 – Edit code – WordPress improvements – Plugins with WooCommerce blocks
Download Pinegrow 6.8
The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.
Pinegrow for Mac (Disk image) Antivírus checkedMac: 97323e094f3ea96ff8ef79e2052c1a9edbee52c5
Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: ceff7d5bf7ba7495ecd35ed27a2f2e144d18442d
Pinegrow for Windows 32 (Installer) Antivírus checkedWindows: 425406ff0a1ea60dbffb0a8ed192bfa4a02a4e41
Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 431d57a48b8caa1609f8a5f0647cea470ce81604
Bootstrap 5.2
Bootstrap was upgraded to 5.2.0.
Customize & update Bootstrap theme
The structure of custom.scss changed in order to support:
- Customizing colors and other variables
- Adding values to maps (such as adding custom colors)
- Customizing utilities
Look at comments in custom.scss to learn where to add your custom code.
Edit code preserves collapsed Tree panel nodes
Pinegrow uses data-pg-collapsed attributes to remember which HTML elements are collapsed in the Tree panel. The code editor now shows these attributes, so that the elements in the Tree panel remain collapsed during and after the code editing.
WordPress improvements
This release brings significant improvements to WordPress Builder add-on. Most of them are the result of user feedback and discussion on our community forum.
Fix problems with registering blocks
Repeating dragging the same element from the page library and adding the Block action caused subsequent blocks not to be exported during the editing session. Forum topic »
Increased Block Attributes limit
An element can now have up to 12 block attributes. Forum topic »
Support adding srcset to block images
Block attribute images now add the wp-image-[id] class, based on which, WordPress adds srcset attribute at the time the page is displayed.
Using ALT attribute of the block image attribute
Alt text is now set to the alt attribute. The behavior is controlled by new Use image ALT option on the Block attribute action. Forum topic »
Added Attachment actions
Attachment Title, Caption, Description and ALT text have been added to the Post section.
Reference image block attributes in dynamic PHP blocks
Use notation @block:image to reference the selected image attribute, for example as the parameter of the Attachment Title action. Forum topic »
Use media / post properties in JavaScript blocks
Select Use post property setting on the Block Attributes action to display properties of the selected image block attribute, such as Image title, description and so on. Note that the information shown in JavaScript blocks is set at the time of editing, not at the time of page view. Forum topic »
Include block script in the editor
Use the Editor script option of the Block action to enqueue a block script in the editor. Forum topic »
Prevent clicks on links in block during editing
JavaScript blocks use onClick handler to prevent default click behavior when clicked in the editor. Forum topic »
Allow attributes with single quotes
Single quotes are now correctly escaped in exported blocks. Forum topic »
Do not generate files that exist in the source project
For example, if header.php exists in the source project, header.php will not be generated from the master page and instead, header.php will be copied to the exported project. Forum topic »
Building block plugins with WooCommerce Shop Builder
The shop builder now lets you create Gutenberg blocks with custom WooCommerce templates, defined in the plugin. This means that the block defined in your plugin can use custom layouts for WooCommerce elements such as prices, ratings, add to cart buttons and so on.
We will publish a tutorial soon.
For now, the way to design such blocks is:
- Use Show Products with type Block or Custom query as a wrapper that selects one or more products to be displayed with the block.
- Use Freestyle layouts with named template variants to ensure that the correct template is used.
- Prefix variant names with a unique id (such as
my_plugin) to ensure that the plugin templates variant names are unique across the theme and all activated plugins.
Download Pinegrow 6.8
The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.
Pinegrow for Mac (Disk image) Antivírus checkedMac: 97323e094f3ea96ff8ef79e2052c1a9edbee52c5
Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: ceff7d5bf7ba7495ecd35ed27a2f2e144d18442d
Pinegrow for Windows 32 (Installer) Antivírus checkedWindows: 425406ff0a1ea60dbffb0a8ed192bfa4a02a4e41
Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 431d57a48b8caa1609f8a5f0647cea470ce81604