Blocs 3 was released a few days ago, and it is an excellent upgrade over the Blocs 2. There are so many new features, and it is hard not to miss something. So, I thought it would be helpful to share the full list of new features coming with this version.
So here it is.
The main Blocs UI now has two sidebars, on the left side is a layer tree and page navigator. On the right is the main Bric inspector and the Bric Library.
This is a new feature to Blocs, and it gives users a much more user-friendly way to manage the page DOM. It has logic baked in to prevent users from breaking page layout. It also has various settings located at the bottom right corner.
This is no longer full screen, it offers all the same functions as version 2 but makes it a lot easier to find the page you require as you get a full screen preview on the main canvas as you navigate pages.
Identical to Blocs 2 with the addition of scroll FX and custom data attributes features.
The Bric Bar and slots have been replaced with a new workflow that gives users full access to the Bric library via the sidebar. The keyboard shortcut to switch to drop mode is now control+D.
Blocs 3 supports a light theme, which can be enabled from the main app's preferences.
This has been moved to the top left corner of the main title bar.
These are now located in the center of the main title bar. A fourth breakpoint has been added.
These are now located on the right side of the main title bar. The Zoom function has been completely redesigned for a more accurate rendering at smaller resolutions. It now also supports greater zoom in resolutions to 100%.
This has been moved to the new navigator tab on the left sidebar.
New preview controls (play | stop) have been added to the top right of the apps main title bar.
The additional windows such as the Asset Manager, Swatch Manager, Menu Manager, Class Manager, and the Notes window now require the option key plus the number key to open them.
The user interface located on the main design canvas has also been given a major overhaul.
The Bloc Bar now has a search bar integrated into it, and all of the categories have been been moved to a dropdown. The Bloc bar is initially set to show a single row of Bloc tiles, however, it can show up to 6 rows for a taller bar that shows more Blocs on screen. The Bloc Bar rows can be set in the main app's preferences.
The Bric Bar is a new feature that works similar to the Bloc bar UX. When an element is selected it will now show a plus (+) symbol above and below it, clicking this button will reveal the Bric Bar, this makes adding Brics to a layout a lot quicker.
The Bric bar is initially set to show a single row of Bric tiles, however, it can show up to 6 rows for a taller bar that shows more Brics on screen.
Most objects can now be positioned freely on the canvas (within the main stacking flow of the page) using the new canvas margin controls. With a Bric selected holding the shift key will show margin controls on each of the Brics edges, you can drag and move these bars to position Brics on the canvas freely.
All data is automatically written to a custom class (supports multi breakpoints and negative values for overlapping text with images etc.). This function is designed to be used for tweaking positions, moving the text down a little, creating space between buttons, etc.
Most objects can now be resized on the main canvas. Buttons and images also support setting the objects corner radius via the circular control located in the top left corner of the element.
All styling applied by these controls is applied to classes that are written on the fly, this means they can be edited per breakpoint for multiple visual styles.
With a Bloc selected holding the shift key now reveals two handles to edit the current Blocs padding setting.
Freehand editing refers to manipulating an object via the canvas, the values for these changes can be written into an automatically generated class or a class you individually assign. In the sidebar inspector, the freehand class tag is displayed slightly lighter in the class tags input field.
When there are more than one classes assigned to an item, a dropdown will appear next to the class field label. This enables you to set which class the freehand values (canvas editing controls) write to.
Keys 1 to 0 set opacity levels for items per breakpoint. This value can now also be adjusted via the class editor interface too.
There are also a few changes inside the Project Settings.
Blocs now enables users to set the page that will be the home page of a site.
It’s now possible to assign a single color to the background of the entire site. It’s worth noting, Blocs are no longer assigned a background when they are generated on the canvas (no more default white global swatch).
Disable sitemap generation.
Site language can now be set globally for the entire project in project settings.
Now support all breakpoints.
It’s now possible to set a custom preloader animated gif.
Tabbed areas enable users to create tabbed areas. These consist of various sub-elements that can be styled and broken apart.
Accordion areas enable users to create toggleable areas of content. These consist of various sub-elements that can be styled and broken apart.
The layout of the navigation can be adjusted by aligning the logo to create the center and left aligned navigations. The nav Bric also enables a user to add a content area to make it easy to add social media links or search fields to the navigation area.
Basic audio player Bric, mp3 only. Make sure you have mp3’s in your asset library, so they show in audio file dropdown.
Blocs now has Bootstrap 4 support, with various new Brics, settings, and controls for this new version of the framework.
Blocs 4 includes a migration function to help migrate Blocs 2 projects to the new Blocs 3 file format. The file migration will only take care of the basic Bootstrap classes and structure. Please be aware Bootstrap 4 now uses flex at its core, so custom classes are very likely to require additional work.
Blocs now enables users to assign custom attributes to any element. Custom data attributes broaden the scope of how Blocs can work with 3rd party code and services.
Scroll FX can be assigned to elements enabling users to control how elements move (animated) on the screen when the page is scrolled. These features make it possible to set how an element moves into position and out when the page is scrolled.
The CSS editor no longer locks the apps UI, and this means the class editor can be left open when you are using the main application. When you select a new element on the app canvas, the first class for that element will be loaded into the class editor.
The class editor also has a drop down selector in the class name field, and this enables users to switch between the classes assigned to an element quickly.
It is now possible to select and control columns, and this enables users to create layouts in a wide range of variations. The column controls allow you to set the width, order and offset per breakpoint for each column. Column controls also include flex vertical alignment features.
The column segmented controls support click-drag on the numeric portion to increase and decrease the values. It’s also possible to swipe on the number to increase or decrease.
Preview mode has been re-written to run a localhost server and now supports PHP rendering for in-app and browser preview. The preview mode is now slightly slower but almost 100% accurate to the browser. In-app preview now also gives access to the WebKit developer tools. There is an outstanding issue that prevents video showing on previews.
The keyboard shortcut is now control+V.
It’s now possible to store and re-use custom Blocs. To store a custom Bloc right click the selected Bloc and select add Bloc to library. It’s also possible to export, share and install custom Blocs.
Blocs 3 also comes with a Custom Bloc editor, that lets you edit the titles, keywords, and thumbnails for your custom and the core library Blocs.
Short codes can be inputted into the HTML of any page, and when exported they are replaced with common project variables such as page name, title or base URL. These short codes can also be used within custom Blocs, Brics and page templates.
pageName – Page Name
pageTitle – Page Title
pageFileName – Page File Name
keywords – SEO Keywords
description – SEO Description
pageURL – Page URL
baseURL – Base URL
Tip: A code should be placed between two ‘%’ symbols.
Class Manager now has search functionality.
Global swatches now support an alpha value.
The pre-loader background fill now has a subclass for additional customization.
Code widgets can now be toggled hidden, so they do not render on the main apps design canvas. This is useful for JS and PHP injection or when you embed autoplay audio players.
Page guides can now be enabled by hitting the G key.
It’s now possible to set youtube videos as a Bloc background video.
It’s now possible to set a videos poster attribute from the Blocs UI.
It’s now possible to swipe on segmented controls to change the selection.
Rows now include vertical alignment controls.
It’s now possible to align elements (buttons, text, images, icons) by holding the alt key and swiping left and right on a trackpad or a magic mouse.
Hit return on a selected text item to enable its editing functionality. Bric Builder Preview Style. Bric Builder now lets you choose the preview style (how it previews in the sidebar) for a custom Bric.
This is probably not a full list, but I am going to stop here. As you can see by this list of features, Blocs 3 brings some much imrpovement to the table, and it is now more powerful than ever.
If you haven’t already, check it out using the link below!