Version 23.7 Blocks

[bwood]

Thanks for posting Chris. Lots of great work. Your miles ahead of me. For those following and just using blocks check the YouTube instructions first. As well I’ve posted this link before from Michal. https://xaratemplates.com/blocks2.html

[Chris M]

I'm becoming more confident, and with that confidence comes clarity.

I rebuilt the above page from scratch. Yes, I copied the layout, so I was much quicker, but I wasn't bringing any problems from the first attempt into this one.

Mixing Flexible with Freestyle, I had no 'where'd-it-go' moments, and nothing that made me delete a Block and restart. In short, it all worked as expected. Now, onto the niggles:
ONE) Marquee selecting. I know I can use SHIFT click, or select from the P&L Gallery, but the amount of times I instinctively drew a box...
TWO) Moving multiple objects in a Block. I've never taken drugs, but if someone asked me what I thought it would be like, I would tell them to open Xara.
THREE) Snap to objects. Aligning things in the Freestyle blocks is sheer guesswork, especially when combined with the above.

Things I feel certain Xara will add in the very next update, probably within a week =/
ONE) Key press and click to add an object into a Block. As an example - I paste an object, it appears over the block, but not IN the Block. I position, colour, resize, and then I have to drag it away from the Block, release it, select it again, and drag it back into the Block again.
TWO) Toggle from Freestyle to Flexible, and visa-versa.
THREE) Ditch the forced variant idea, or explain why it's a necessity.

[Initiostar]

First pass though web blocks: I can see the productivity gain.

My start point was to better understand how FlexGroup’s work, alignment, padding and object margins. The upside for using a FlexGroup is an opportunity to transition from a desktop to a mobile format, just by squeezing the width of the FlexGroup to change the alignment from horizontal to vertical.

I applied this to a demo here: https://initiostar.co.uk/demo/flex-group/ where one has a photo and text template that extends downwards as the text grows. Visually, it works better where templates are the same size and the mobile variant transitions to a one-template width. Having played with FlexGroup’s, I found it is easier to grasp where to use Flexible Blocks and where to use Freehand Blocks.

Thereafter, I simply selected a Web Block website template, deleted all but one block, added a Freehand Block at the page top. One can create one’s own Web Blocks, or just select ANY Web Block from ANY of the modular website templates.

First bash here: https://initiostar.co.uk/demo/blocks2/

- The first web block seems better as a Freehand block; I ran into a variety of alignment issues when I started with a Flex Block. I could not get the position [ x : y ] to be [ 0 : 0 ] i.e. have an object sit at the top of the page, left-aligned; it seems the x coord would not set to [ 0 ]

- Using the Alt and Shift keys to bypass adding an object to a Flexible Block or standard Web Block seems to work and it was easy to add my own Navbar for a desktop and variant.

- Adding objects in a standard website does not auto-share them across variants, whereas with Web Blocks it does. This requires a designer to stop sharing and delete where this is not appropriate.

- You need a disciplined approach to text styles, else it can become real messy between variants (because of blocks auto-share).

I can see the attraction of Web Blocks if you are familiar with WordPress, WIX etc.

[Acorn]

Gary, the origin alignment requires you to select just the WB background shape and tweak that.

Acorn

[Chris M]

Gary, the origin alignment requires you to select just the WB background shape and tweak that.

Acorn

Even so, I can't re-centre an object once it decides to mess you about.

Describing the picture below. The pink (placeholder, actually) rectangle pushed 20px to the right, because the combination of width plus both sets of padding made it larger than the 720px page width.
The rectangle is 700px with 10px Flex padding, 0px object padding and an X coordinate of 20px. I cannot alter the coordinate.
The background is 720px with 0px object padding and an X coordinate of 0.

This is only page 1 of my Great Remake project, and I'm already looking at the placeholder offset, the header logo that doesn't resize equally and a disappearing shape on the footer.
To be fair, the unequal resize may be me multiple selecting and expecting everything to remain in aspect. The footer, I'm certain, is just one of the elements that decided to take a step backwards.

I'm giving up for the evening, but I'm still finding the forced variant a big problem. If all you're doing is dropping objects into the Blocks (like the YouTube videos), then all is well. But, move something, and you're looking over your shoulder like a fox that can hear the horns blowing.

[Initiostar]

Gary, the origin alignment requires you to select just the WB background shape and tweak that.

Acorn

Not sure about that: if a drag an image from the bitmap gallery into view, but NOT into a FlexBlock, resize it to the same width as the page (i.e. 1280px); then add it to the FlexBlock, it extends the right-hand side of the block outside the page, left justify gets to x= [0], now justify right, and it extends outside the page width.

FlexBlock_Alignment.xar

If I drag the image direct from the Bitmap Gallery into the FlexBlock and then resize it, it seems to behave correctly. I don't think this is an issue with a Freehand block; this suggests it has something to do with padding in a FlexBlock, maybe?

[Chris M]

Not sure about that: if a drag an image from the bitmap gallery into view, but NOT into a FlexBlock, resize it to the same width as the page (i.e. 1280px); then add it to the FlexBlock, it extends the right-hand side of the block outside the page, left justify gets to x= [0], now justify right, and it extends outside the page width.

FlexBlock_Alignment.xar

If I drag the image direct from the Bitmap Gallery into the FlexBlock and then resize it, it seems to behave correctly. I don't think this is an issue with a Freehand block; this suggests it has something to do with padding in a FlexBlock, maybe?

That's exactly the same as I'm experiencing. You can make the object sit properly by using Justify Left in the Horizontal Alignment option. But the FlexBlock remains the incorrect size, and you may not want to be left justified if you have multiple objects in the Block.

[Acorn]

Not sure about that: if a drag an image from the bitmap gallery into view, but NOT into a FlexBlock, resize it to the same width as the page (i.e. 1280px); then add it to the FlexBlock, it extends the right-hand side of the block outside the page, left justify gets to x= [0], now justify right, and it extends outside the page width.
If I drag the image direct from the Bitmap Gallery into the FlexBlock and then resize it, it seems to behave correctly. I don't think this is an issue with a Freehand block; this suggests it has something to do with padding in a FlexBlock, maybe?

That's exactly the same as I'm experiencing. You can make the object sit properly by using Justify Left in the Horizontal Alignment option. But the FlexBlock remains the incorrect size, and you may not want to be left justified if you have multiple objects in the Block.

Both, there is a process, sadly, needed on both Main and Variant.

You have to think Shape, Web Block, FlexGroup, Blockbackground.

Taking @Gary's demo design file:

• The image was Justify Right - set to Justify Left.
  
  • The image was too wide. - Alt-Selected right edge and reduced to page width.
  
  
• WB was too deep - selected and picked bottom boundary and moved up.
• FlexGroup was too wide - Alt-selected right edge to touch page edge.
• BlockBackground check - was at origin.
• Ditto above for Variant.

I also set Main's image to Full Width & Tiled.

FlexBlock_Alignment - Acorn tidy.xar

@Xara - all this is an edge case but it necessarily needs to be automated.

Acorn