Version 23.7 Blocks

[Chris M]

@Chris, in a Freeform WB you can resize objects so that the WB wrapper exceeds the page width.
If I scale right, the WB right-side extends beyond the page. Ditto, to the left with an origin shift as well.

I have my Variant set to W:720px.
If I scale back the shapes so all fit on the page, the WB resets back to (0, 0) and all is right in the world.

With a FlexGroup, the origin is fixed at (0, 0) and the WB extends right only.
Aligning things back is far more problematic.
The simplest start is to select the FlexGroup and set its width to 720px.
You then find things like text have scaled and the WB it wider than is ought to be.
This is where you have to resize and reposition the BlockBackground.

One small user oops! and a cascade of hurt.
None of this seems to be covered in v23.8 > Help > Modular website tutorials (https://www.youtube.com/watch?v=4azS...SZMW7&index=40).

Acorn

With this firmly in mind, and with the knee scrapes from falling off the Blocks bike to remind me, I shall rebuild the first site I did. I'm pretty sure the 23.8 update cured the images running off when set to full width, or whatever it was. The aim is 100% Blocks. No fudging, no workarounds, no looking behind, no backing down (Eye Of The Tiger plays in the background). There's a challenge to be faced, and I've drunk enough Guinness to pick up that gauntlet.

ChrisM, boldly going where intelligent people circumnavigate.

[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

[Initiostar]

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

Thanks Acorn, this issue seems to occur only with a FlexBlock, where an object being inserted into the FlexBlock has a width => to the page width; the FlexBlock extends to accommodate the increased width.

I reduced the size of the image, then tried to use Select/Alt to change the FlexBlock width and it just sprung back. Clearly I am not getting something right.

I have found if I set the padding and object margins at [0:0] before inserting the image, the issue does not occur and you can simply resize the "too-large-object" to fit, no problem.

It's likely me here that is the problem, but since I know the issue, I'll not repeat the mistake.

[Chris M]

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

I'm missing something, probably something small, but vital.

I did all the bullet points above.
Confusion 1: why does altering the main variant to Left Justify have any bearing on this?
Confusion 2: by alt-select, you are referring to the ALT keyboard key, correct?
Confusion 3: alt-select, standard select, triple checking that it's left justified, having the background less than page width and varying the strength of curse words has no effect. Flexithing bounces back.
Gary happily said "Cool, I get it, and now I know, it will never happen again." It will happen many times with me, because, just to use a Flexible Block, with one object, I have to set 4 toolbar setting to 0px, and ensure the object is less than page width? I want to drop that sucker into the Block, adjust like I would do in every other occurrence in Xara, and move on.

I agree it's better to know HOW these things work, but the whole point of this post is to use Blocks as we are told they can be used. The YouTube videos I have watched all show someone whistling a happy tune and throwing Blocks around, which all jump up and arrange themselves like Mickey cleaning the sorcerer's room in Fantasia.

Before Blocks were released, we were told on this very forum, that something new and exciting was about to be released, that we would love it. It would change the way we build websites forever. A site could be built in minutes. Well, here we are, fudging, creating workarounds, spending hours on one simple thing because it doesn't work.

I totally understand that new things will have unforeseen issues. I understand that I, as a user, will make mistakes and do things that are silly. But, this is my fifth attempt at creating a simple site, that I would love, and would take mere minutes. I should be getting the basics by now, surely. I should be able to throw my Blocks onto a page and quickly arrange them, no?

I have no objection to uploading the project file, but, as I said earlier, I really don't want this to turn into the usual "yeah, it doesn't work. What you have to do is...." thread. I wanted it to be a "ahh, so I can just...and...that's great, I can now..." thread.

[Acorn]

@Chris, sorry my 'Alt+Select' is hold down the Left Alt key while dragging the rightmost middle control with the Left Select mouse down for the FlexGroup.
Only needed is Smart transform is Off, which is the way I always work to preserve my sanity. I didn't say anything about left aligning the Variant.

Not essential for the bottom middle control of the Web Block but again it maintains a consistency my muscle memory can accommodate.

Left Align is essential for a full-sized image as it does its own thing if Centre or Right Aligned.

It should not be the case that making an image too big throws so much off, hence my barb at Xara.

Acorn