HOME > Reviews

What’s New in Blocs 3

There is so much new in Blocs 3, and I thought it would be helpful to share with you a list of new features and improvements.

Posted by @EldarGezalov on November 27, 2018
blocs 3 everything what is new
Blocs 3 for Mac is an amazingly powerful tool for visual web design.

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.

User Interface Changes

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.

Layer Tree

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. 

Page Navigator

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. 

Inspector

Identical to Blocs 2 with the addition of scroll FX and custom data attributes features. 

Bric Library

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. 

Light Theme

Blocs 3 supports a light theme, which can be enabled from the main app's preferences.

Project Settings Button

This has been moved to the top left corner of the main title bar. 

Breakpoint Controls

These are now located in the center of the main title bar. A fourth breakpoint has been added. 

Zoom Controls

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%. 

Add Page Button

This has been moved to the new navigator tab on the left sidebar.


Preview Controls

New preview controls (play | stop) have been added to the top right of the apps main title bar.

Additional Window Keyboard Shortcuts

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. 

Canvas Interface Changes

The user interface located on the main design canvas has also been given a major overhaul.

Bloc Bar

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. 

Bric Bar

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. 

Margin Controls

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. 

Resize Controls

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. 

Bloc Padding Control

With a Bloc selected holding the shift key now reveals two handles to edit the current Blocs padding setting. 

Freehand Editing

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. 

Opacity Editing

Keys 1 to 0 set opacity levels for items per breakpoint. This value can now also be adjusted via the class editor interface too.

Project Settings

There are also a few changes inside the Project Settings.

Sites Home Page

Blocs now enables users to set the page that will be the home page of a site. 

Background Color

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

Disable sitemap generation.

Site Language

Site language can now be set globally for the entire project in project settings. 

Global Typography Options

Now support all breakpoints.

Custom Pre-Loader

It’s now possible to set a custom preloader animated gif. 

New Brics

Tabbed Bric

Tabbed areas enable users to create tabbed areas. These consist of various sub-elements that can be styled and broken apart. 

Accordion Bric

Accordion areas enable users to create toggleable areas of content. These consist of various sub-elements that can be styled and broken apart. 

Navigation Bric

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.

Audio Player Bric

Basic audio player Bric, mp3 only. Make sure you have mp3’s in your asset library, so they show in audio file dropdown.

Other Big Improvements and New Features

Bootstrap 4

Blocs now has Bootstrap 4 support, with various new Brics, settings, and controls for this new version of the framework. 

Migration Tool

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. 

Custom Data Attributes 

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. 

New Scroll Effects

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.

CSS Editor UX 

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. 

Column Controls 

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 

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.

Custom Blocs 

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. 

Custom Bloc Editor 

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 

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 Search

Class Manager now has search functionality.


Global Swatches

Global swatches now support an alpha value.

Pre-Loader Subclass

The pre-loader background fill now has a subclass for additional customization. 

Code Widgets

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

Page guides can now be enabled by hitting the G key. 

Bloc Background Video Youtube

It’s now possible to set youtube videos as a Bloc background video. 

Video Poster

It’s now possible to set a videos poster attribute from the Blocs UI. 

Swipe Controls

It’s now possible to swipe on segmented controls to change the selection. 

Row flex align

Rows now include vertical alignment controls. 

Swipe Alignment

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. 

Text Edit UX improvement

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!

Visit Blocs App Website

Posted in Reviews

Email Newsletter

Join my newsletter to be the first to know about new articles, courses and templates, and get insight into my creative process.

eldar gezalov trainer web designer

Hi, I’m Eldar

Authorized Trainer for Blocs & Squarespace
I help people make beautiful websites, create and sell online courses, and run online businesses.

Email Newsletter

Subscribe to my newsletter to get the latest news and updates on work I do to help people.

Projects

learn how to create online courses with course master
premium templates for blocs
learn web design with blocs master
learn web design with squarespace master

Featured News

Read what’s happening with the work I do to help people.

course master introduction by Eldar Gezalov
November 26, 2018 - Courses

Introducing the Agency Template

course master introduction by Eldar Gezalov
November 25, 2018 - Templates

Introducing the New Blocs Master

course master introduction by Eldar Gezalov
October 30, 2018 - Courses

Introducing the Course Master

Newsletter

Join my newsletter to be the first to know about new template releases, new courses, workshops, and other news.

Contact Me

Have questions or need help?