Freehand Blocks Questions

[Chris M]

I'm rather nonplussed about blocks, and therefore haven't played with them much. However, the new freehand blocks offer the freedom to stick stuff in weird places should I choose, but keep whole sections in nice boxes that I can move around with abandon. Worth a look at, I thought.

In the example below, I imported a freehand block, and then:
I dragged the 2 images onto the page, resized them and dragged them into the block. I then created a text block and dragged that into the block also.
Q) If the height of the block is greater than the largest image, how can I reduce the height of the block without dragging the images out of it first?

I now created a variant, leaving the default setting of 480px.
I want to move the text (off page in the variant) and position it under the first image. Simply dragging the text underneath the image makes the image increase in size and the text sit on top.
Okay, I'll alter the height of the block by dragging the bottom of it. That crops the images.
I'll try dragging the right side of the block to the width of the page. That also crops the images.
Typing a size into the width box does nothing.
I tried Shift, Ctrl and Alt whilst dragging. Toggling Smart Transform and Aspect Ratio off and on. Nothing.

Alright. I'll drag the objects out of the block, adjust the block, then pop the objects back. This appeared to work, except having to guess the height required made me come to the realisation this was not the correct way to do it. A quick check of the main variant. The main had mimicked the other variant and things were all over the place.

I considered the Cognac bottle, thought better of it as I had only just finished breakfast, and wrote this instead.

What fundamental mistake am I making here? Attached is the .xar with just the images and text. No variant, no editing other than resizing.

Freehand Blocks.xar

[Acorn]

Chris, in v23.6 Xara 'updated' how Web Blocks work. I suspect much of what you now have is an oversight of Xara's testing.
I could manage all you have described in v23.5 and not sweat it.

All I can offer is in the Web Block ensure all objects you want to alter are part of the WB then pick Open Web Block and make you changes then then Save.

Juggling plates comes to mind.

Acorn

[Chris M]

If I use the predetermined offering from Xara, the one with the logo, white header and nav bar, then it nearly works. The images don't move in unison, but I still can't resize the block without cropping/enlarging the images.

I'm going to be honest. I don't want to waste my time on something that doesn't work very well if I don't need to, and I don't need blocks. They can join navbars, templates and a whole pile of widgets in the Xara attic.

I do like the idea, so when I've finished the 2 projects I have going, I may revisit.

[Acorn]

Chris, I built my own design file.

What you have to play with is ensuring your object are under/within the FlexGroup grouping.
There they are bounded by a purple border, within the Web Block.

The other thing you need to realise is the FlexGroup holds items in cells that you can align and control with the Flex Layout toolbar.
This hides in non-modular templates so it is a pain to get to it unless you created your own toolbar.

Flex Layout toolbar appears when switching to any website document. Fixed - it now appears only when switching to a Modular website.

Ah well!

At least the cropping and resizing is stopped.

Xara - Flexing WBs.xar

Acorn

[bwood]

While we’re on the subject I carefully followed the video regarding adding web blocks to existing free form websites …

https://youtu.be/mbAZlvjRVvM?si=Xcu-HejYrxenLVVl I reported to Matt that the video is incorrect. One cannot ungroup a block and simply move it up. Into another place. That doesn’t work. Listen carefully. If you ungroup a block, every element is in pieces.

Rather unfortunate because this is a novel way of using a web block. I’m not sure of a real fix because if you have to ungroup a block to move it, you have to select everything in the block, move, then group again.

[Chris M]

Chris,I could manage all you have described in v23.5 and not sweat it. Acorn

I'm afraid not. You've used, or ended up with, a completely different block. If, for example, you rotate the text 90°, the images rush in to fill the gap...but, perhaps, you want the images to remain where they were. That's the reason I was interested in the 'Freehand' blocks.

Flexible - Alter the height of the block, but the objects go where they want to.
Freehand - Place the objects where you want, but the block will go taller, but not shorter.

I've no doubt there will be ways to bodge the shortcomings, but using blocks simply isn't that important to me. If they worked, I would use them, but I don't need them.

[Acorn]

I'm afraid not. You've used, or ended up with, a completely different block. If, for example, you rotate the text 90°, the images rush in to fill the gap...but, perhaps, you want the images to remain where they were. That's the reason I was interested in the 'Freehand' blocks.

Flexible - Alter the height of the block, but the objects go where they want to.
Freehand - Place the objects where you want, but the block will go taller, but not shorter.

I've no doubt there will be ways to bodge the shortcomings, but using blocks simply isn't that important to me. If they worked, I would use them, but I don't need them.

Chris, a Freehand block is a totally empty Web Block. To best use it open it add some shapes, select them and Arrange > Create FlexGroup.

The positioning of the shapes is then controlled through the Flex Layout toolbar. Defaults are all centred but you can align and alter padding.

Perhaps we are looking at them differently. I have said all along that SmartShapes are a bolt-on to the traditional Xara wo0rkflows.
I have accepted Tables are they are imperative in controlled design layouts.
Perhaps WBs will align with these in due course.

Acorn

[Chris M]

Are you using 23.6, Acorn?

The Freehand block is indeed an empty block, but it isn't the same as a flex group. I'm still working on the theory that it's me that's missing a piece of information.

Another angle of attack: throw some objects onto the page, select them all, then Arrange > Create Web Block. Ignore the warning about using the tailor made template, and you should have a block with your objects captured within.

You can now move these objects around without them snapping into predetermined places.

I have, just now, discovered that when I create a variant, the objects don't mimic each other, which was one of my original whinges. I still can't adjust the width/height without cropping, but simply removing the objects, making the adjustments, and then dragging them back into the block isn't a big hardship. After 3 or 4 curse words, it would become second nature. I can also drag an object to the bottom and the block expands. Moving it back up and the block shrinks...just as I would expect, but didn't when imported from Elements.

I'll test the difference between importing from Elements and creating a web block later this evening.

[Chris M]

Xara premade responsive website:
1) Elements - Freehand Transparent Web Block
2) Drag/drop 3 images
3) Resize so all 3 fill full width (1280)
4) Drag images to form a single row. Images move without snapping and can overlap.
5) Mobile variant - Block too high for the page (Y coordinate -404.7)
6) Set Y coordinate to 0. All 3 images already in the block.
7) Moved the images to form a single column.
8) Main variant - one of the images turned maverick and wandered out of position.
Observation - the maverick image was the bottom image in the mobile variant. As I was positioning the image, it slipped out of the block a couple of times. Using the undo function until the main variant showed a neat row again, I then repeated the steps to organise the images in a column in the mobile variant without slipping out of the blocks boundaries.
9) Result - Main variant in a neat row, image1, image2, image3 (image3 flipped). Mobile in a column, image1, image3, image2, none flipped.
Observation - moving objects around in a block. Whilst dragging, ensure the mouse cursor remains within the block's boundaries when releasing. The cursor determines whether the image is in, or out, of the boundaries, not the object.
10) Block grows when pushed by an object, and shrinks when the object is moved away from the boundaries.
11) Manually adjusting the block's boundaries causes images to enlarge/crop a-la 'Smart Transform'.

Standard website:
Same methods as above
3) After resize, the block did not automatically adjust its height to suit the new image sizes. Manually adjusting the block causes the images to be cropped.
5) Create mobile variant and move images to single column.
Observation - Everything worked in the same way as the responsive website EXCEPT the block will not shrink back to the bottom object. I was left with a blank, immovable space.

Xara premade responsive website:
Drop images onto page. Select all images and, Arrange > Create Web Block...greyed out.

Standard website:
Drop images onto page. Select all images and, Arrange > Create Web Block.
Moving an image within the block...well...just don't do it.

Conclusion:
The freehand web block (and likely others) will only work correctly using Xara's premade responsive template. Xara warns that this is the case every time I play with a block, and they were right! Who would've thunked it?

With zero time spent on creating an actual website using blocks, I can see several pros and only a few tiny (so far) cons with the system. I promise to have a go at an actual site and get back to you in the near future.

[Acorn]

@Chris, thank you for the hard work.
It definitely should not be hard to use WBs the way you, as the designer, want. Xara has a feature that each one of us has to learn its quirks on our own.

It makes it near impossible to debug others' attempts or your own at a later time.

Acorn