Blocs for Mac 5.1.3 Beta Build 1 📢

[Norm]

I’d be interested to know which terminology needs work IYO, by all means share feedback

[Monark]

To start… a better explanation of (fr) units and how they are manipulated. I’ll put a list together that helped me when I started.

In the mean time, this website has been really helpful to me.

Free learning:
https://gridbyexample.com/learn/

This is a paid tutorial but really good:

CSS Grid

[Monark]

@Norm are explicit responsive grids with media queries possible in Blocs? Please see example here: Redefining Grid Areas with Media Queries

[PeteSharp]

Nice work there @Norm.

I think there is enough information in the article to give a good overview.

People can look further for definitions of things like fr if they want too. Heck most people don’t know what rem and em units are. The article keeps focused

@Monark is referring to grid-areas / grid-template-areas
Which is a pretty quick way of building a grid layout. It probably would need a visual editor where you can name areas to make it visually easier for users. Maybe next week @Norm

[PeteSharp]

@Norm, I discovered when using nested pages and clean URLS that forms fail.

Or it least it seems like that. Not using clean URLs the form works fine.

This works
mydomain/contact/

This fails
mydomain/company/reviews

This has been ongoing with the stable build.

[Norm]

Ok got it, I’ll take a look.

[webdeersign]

I expect Monarch is referring to col & row templates. These are the bread and butter of CSS Grid.

On a basic level CSS Grid can create pretty traditional grids that can break out of the colum world, but CSS Grid can do so much more and add position of content on top of content, offset overlapping of content and replace the entire page layout. In addition you can put grids inside grids, etc…

Where Blocs still trips up, is that if you create a template with a comma such as minmax(20px, auto) 1fr 1fr; the edit view treats the content after the comma as the next column.

Also I notice that the Template boxes are too small to sview anything other than short templates

[Norm]

Any chance you could please share a screenshot of what you would expect vs what we currently get with the current system when using the code minmax(20px, auto) 1fr 1fr;?

[webdeersign]

The labels at the top of the columns are wrong. Maybe the comma used in the template triggers this.

The grid looks correct but the col labels are not correct. Also note that as the cols labels grow, there soon comes a point where the labels don’t have enough space for anything other than short simple template values such as 1fr. E.g. the label minmax(20px, auto) doesn’t fit.

I would be favour of an option to turn the col and row labels off or automatically turn them off when a template is used. Actually, the option perhaps should be to turn off all labels, draggable lines and handles when a template is used because they no longer make sense or apply. E.g. if you set a col to be minmax(20px, auto) and then drag that col handle, what should then be displayed in the label? When you use a template you don’t actually need anything other than the blank edit mode grid.

[Norm]

Thanks thats super helpful.

So the grid renders correctly, but the labels are misleading in the surrounding UI?

[webdeersign]

@Norm

So the grid renders correctly, but the labels are misleading in the surrounding UI?

Yes correct.

Also, they don’t have enough room when using anything other than a small number of simple columns and would work better if optionally removed.

[Norm]

@webdeersign

would work better if optionally removed.

I’ll continue to improve and make these controls more flexible and get them to display the correct info in scenarios such as this. However, in beta 2 of V5.1.3 I have added a new position control option for grid which means you can build your own grids from scratch (without the Bric).

Grids built from scratch, will not display the visual controls, here’s an example.

[webdeersign]

That sounds like a really good solution. Looking forward to using this.

[Monark]

@Norm

I have added a new position control option for grid which means you can build your own grids from scratch

SWEET! Thank you for this!

[Jerry]

Hey, @Norm.

Lists have started to have some fun.

[Norm]

Preview inspect brining anything up for this?

[Jerry]

No, nothing.
I’ll send you the file.

[Jerry]

Just got another crash while changing the colour of a text link:

Exception Name: NSRangeException
Description: *** -[__NSArrayM objectAtIndexedSubscript:]: index 8 beyond bounds [0 .. 7]
User Info: (null)

0   CoreFoundation                      0x00000001913eb154 __exceptionPreprocess + 176
1   libobjc.A.dylib                     0x0000000190f0a4d4 objc_exception_throw + 60
2   CoreFoundation                      0x00000001914d59b8 -[__NSCFString characterAtIndex:].cold.1 + 0
3   CoreFoundation                      0x000000019135ebd8 -[__NSCFString hasSuffix:] + 0
4   Blocs                               0x000000010289e5a8 Blocs + 1320360
5   Blocs                               0x000000010289e48c Blocs + 1320076
6   Blocs                               0x00000001027bc938 Blocs + 395576
7   Blocs                               0x00000001027bc7a8 Blocs + 395176
8   Blocs                               0x00000001027b9148 Blocs + 381256
9   Blocs                               0x00000001027b90fc Blocs + 381180
10  CoreFoundation                      0x0000000191367180 __CFNOTIFICATIONCENTER_IS_CALLING_OUT_TO_AN_OBSERVER__ + 148
11  CoreFoundation                      0x0000000191402eec ___CFXRegistrationPost_block_invoke + 88
12  CoreFoundation                      0x0000000191402e34 _CFXRegistrationPost + 440
13  CoreFoundation                      0x00000001913384cc _CFXNotificationPost + 704
14  Foundation                          0x00000001922968e4 -[NSNotificationCenter postNotificationName:object:userInfo:] + 88
15  Blocs                               0x00000001029303f0 Blocs + 1917936
16  AppKit                              0x000000019473f4cc -[NSApplication(NSResponder) sendAction:to:from:] + 440
17  AppKit                              0x000000019473f2e4 -[NSControl sendAction:to:] + 72
18  Blocs                               0x0000000102973548 Blocs + 2192712
19  Blocs                               0x000000010297256c Blocs + 2188652
20  Blocs                               0x0000000102960768 Blocs + 2115432
21  AppKit                              0x000000019473f4cc -[NSApplication(NSResponder) sendAction:to:from:] + 440
22  AppKit                              0x000000019473f2e4 -[NSControl sendAction:to:] + 72
23  AppKit                              0x0000000194846170 -[NSTableView _sendAction:to:row:column:] + 116
24  AppKit                              0x0000000194844fb8 -[NSTableView mouseDown:] + 4808
25  AppKit                              0x0000000194739ef0 -[NSWindow(NSEventRouting) _handleMouseDownEvent:isDelayedEvent:] + 3476
26  AppKit                              0x00000001946c4b2c -[NSWindow(NSEventRouting) _reallySendEvent:isDelayedEvent:] + 364
27  AppKit                              0x00000001946c47ec -[NSWindow(NSEventRouting) sendEvent:] + 284
28  AppKit                              0x00000001946c3b30 -[NSApplication(NSEvent) sendEvent:] + 1556
29  AppKit                              0x0000000194913c48 -[NSApplication _handleEvent:] + 60
30  AppKit                              0x000000019458afa0 -[NSApplication run] + 500
31  AppKit                              0x00000001945623cc NSApplicationMain + 880
32  dyld                                0x0000000190f3bf28 start + 2236

[Jerry]

Using the latest stable i’ve created a class: .feature-header.
When trying to open the class Blocs crashes.

Crash report:

Exception Name: NSRangeException
Description: *** -[__NSArrayM objectAtIndexedSubscript:]: index 1 beyond bounds [0 .. 0]
User Info: (null)

0   CoreFoundation                      0x00007ff815aae18a __exceptionPreprocess + 242
1   libobjc.A.dylib                     0x00007ff8155d442b objc_exception_throw + 48
2   CoreFoundation                      0x00007ff815b883ca -[__NSCFString characterAtIndex:].cold.1 + 0
3   CoreFoundation                      0x00007ff815a249a1 -[__NSCFString hasSuffix:] + 0
4   Blocs                               0x00000001086ac32c Blocs + 2356012
5   Blocs                               0x00000001086a1b1e Blocs + 2312990
6   AppKit                              0x00007ff818c7f117 -[NSWindowController _windowDidLoad] + 548
7   AppKit                              0x00007ff818c7ae0f -[NSWindowController window] + 110
8   AppKit                              0x00007ff818cf13c9 -[NSWindowController showWindow:] + 36
9   Blocs                               0x00000001084e90ea Blocs + 508138
10  CoreFoundation                      0x00007ff815a2c6f8 __CFNOTIFICATIONCENTER_IS_CALLING_OUT_TO_AN_OBSERVER__ + 137
11  CoreFoundation                      0x00007ff815ac545e ___CFXRegistrationPost_block_invoke + 88
12  CoreFoundation                      0x00007ff815ac53b3 _CFXRegistrationPost + 536
13  CoreFoundation                      0x00007ff8159ff987 _CFXNotificationPost + 729
14  Foundation                          0x00007ff81686bb60 -[NSNotificationCenter postNotificationName:object:userInfo:] + 82
15  Blocs                               0x00000001085ad925 Blocs + 1313061
16  AppKit                              0x00007ff818cc342c -[NSApplication(NSResponder) sendAction:to:from:] + 323
17  AppKit                              0x00007ff818cc32b0 -[NSControl sendAction:to:] + 86
18  AppKit                              0x00007ff818dfa5dd -[NSTableView _sendAction:to:row:column:] + 113
19  AppKit                              0x00007ff818df8fb7 -[NSTableView mouseDown:] + 6202
20  AppKit                              0x00007ff818cbcf9d -[NSWindow(NSEventRouting) _handleMouseDownEvent:isDelayedEvent:] + 4330
21  AppKit                              0x00007ff818c347d7 -[NSWindow(NSEventRouting) _reallySendEvent:isDelayedEvent:] + 404
22  AppKit                              0x00007ff818c34427 -[NSWindow(NSEventRouting) sendEvent:] + 345
23  Blocs                               0x0000000108551d73 Blocs + 937331
24  AppKit                              0x00007ff818c32e01 -[NSApplication(NSEvent) sendEvent:] + 345
25  AppKit                              0x00007ff818eed74e -[NSApplication _handleEvent:] + 65
26  AppKit                              0x00007ff818ac27ad -[NSApplication run] + 623
27  AppKit                              0x00007ff818a969a1 NSApplicationMain + 817
28  dyld                                0x00007ff81560141f start + 1903

INSTANT UPDATE:
When setting Clip to : Border Box blocs will crash when re-opening the class. @Norm

[Norm]

Ok I’ll check that.