When floating an image I can't control which block should return to full width

[djay]

Problem

You can float an image but there is no way to specify which paragraph should stop being floated

Proposed Solution

• This is up to Plone's Designated UX Czar to decide (once there is one)

Solutions considered

Row/Grid float settings

We could get rid of the alignment option for images/videos and instead make this an option for the Row Block. So a row in left float mode would take the left cell and merge it into the 2nd left cell so the 2nd left cell flowed around the left cell.

Pros: Why this could be a good idea

• Lets you flip between side by side vs floated with a single click
• Don't have to know about the oddity of floats that the image has to be placed above the text
• Works automatically for any kind of block not just images and videos
• It's in a place that is perhaps more discoverable. The user creates a Row/Grid to put an image and text in sideby side mode and then thinks realises they really want the text wrapper around the image since the text is so much longer. If they looked at the image block for the alignment option it would do nothing and they would be confused. They would have to know everything now has to be moved out of the grid for it to work. So instead perhaps they would look at the style of Grid row and see the alignment option there and then it will just work.

Cons:

• if you have a bunch of text and you just want to throw up a floating image then you have to move all that text into a Row which is more DND than just insert image and set to float
• you would have to have options for the row that ensures there is no additional padding above and below the row so text flows normally afterwards
• is there a use case for 3-4 columns where the floating happens just on the first or last two cells?
• it's backwards incompatible. any existing sites would need a complicated upgrade step to move all floats into a row
• it effectively forces you to choose when you want to stop wrapping unless you move the whole page into the row. whereas other solutions by default you can just keep adding text and let it all wrap.

float filler block (better name?)

• similar to a separator but it floats next to the image filling the space. It would get smaller if new blocks are added above it
• pro: should be easy to click unless text fills all the space next to the image
• 

separator/spacer block

• could have settings to determine if its an HR, blank space or an invisible separator that takes up no space
• con: breaks WYSIWYG as it would have to be big enough to click on but you might not want an actual seperator adding space at the bottom of the image
• con: is it intuitive to look for a seperator when you don't actually want a separator?
• pro: already being used - https://github.com/kitconcept/volto-separator-block
• 

Clear above/full width setting on all blocks

• con: it's on all blocks creating clutter

On block menu

• ie some kind of mode you can put any block into
• con: we don't have the quanta block menu yet.

on slate editor toolbar

• con: this wouldn't work for anything other than text and all sorts of things can float up next to an image.
• con: its not a charachter style or something that can seen so wouldn't really work here

Headings always clear

Simpler solution with less control where certain blocks or headings clear so if you want to stop the wrapping you are forced to use a heading or row or something designed to always be full width below your image

Context

[tiberiuichim]

What about a divider block. In the editing interface you add the divider block and clearly have it delimited and editable, then just render it as hidden in view mode. As a bonus, the divider block could be used to delimit sections, if you implement variations for it.

[davisagli]

@tiberiuichim That's exactly what we've done in client projects. We have a separator block which clears floats. It has an alignment setting with several options (full, center, left) and an option to hide the line entirely.

https://github.com/kitconcept/volto-separator-block

[djay]

@davisagli @tiberiuichim The downside of a separator or divider is if you don't want to add space below the image. Even if it was the case the final rendered version added no space, the editor would have to show some space in order for you to be able to click on that block to select it It might be more intuitive for the user if there was a "filler" block that was placed below the text but floated next to the image and automatically took up the space until the bottom on the image. ie it would sit beside the image not below it. Not how CSS works and not so easy to do technically but at least it has block you can click on that isn't breaking WYSIWYG.

[davisagli]

@djay Feel free to create your own block! It's been working fine for our clients.

[djay]

@davisagli the bug report is not about creating our own block. of course we will. The bug report is that core plone 6 currently allows people to float images without providing any method to control this making for a shit UX and thus calling into question the Plone 6 editor has been well thought out and tested on real users. If the answer to every UX bug anyone ever brings up is tell them to go make your own block, or it's fine for some subset of users which might have very different training or technical ability, then I think the investment in switching plone to volto is wasted.

[tiberiuichim]

@djay I've tried to understand your requirements, but I couldn't. Could you make some schematic or some drawing explaining the problem?

I've tried to see what the Plone classic provides for this use case, and I could not find it. If we know the equivalent Plone classic functionality, maybe it's easier to replicate it.

In any case, my argument is that once we know what we want, it should be relatively easy to add it as functionality in the slate editor, either as a block setting or as an extra button in its toolbar.

[djay]

@tiberiuichim not really my requirements. I'm not ordering software. it's really up to the non existant Plone UX person to decide on the best solution for users. I've updated the solutions above with screenshots. Whatever the tinymce solution was it was likely crap. We should be aiming higher.

[tiberiuichim]

ok, so if we "parent" the "filler space control" to the image, we can provide the image block a way to control the paragraphs blocks.

Neat. I think we may have something workable here.

As a side note, to me, needing to specify clearings on paragraph blocks is a "smell". The floated image, as a whole concept, is something nasty in itself. If some text is supposed to sit next to an image, maybe a form of hero block would be better. Or maybe just declare in css that all headlines have clear.

[djay]

Not sure what you mean by parent. There is no containment relationship between image, text or filler .

Yes you could say all headings clear but then what if it's a teaser or something else?. What if it's a text block after with normal text that you want to be below the image not next to it..

Yes grids or rows will most likely fit most people's needs. But there is still some layouts where people want text to flow around an image. But getting rid of floats is certainly another solution.

[djay]

@tiberiuichim thinking out loud here and please don't shoot me for thinking of yet another way to solve this. Again I'm requiring anyone impliment anything. I'm mearly trying to work out what would be the optimal way to solve this for the end users to give them the best UX and again this would have to be verified and tested by a proper UX person rather than developers giving their opinions.

But. We could get rid of the alignment option for images/videos and instead make this an option for the Row Block. So a row in left float mode would take the left cell and merge it into the 2nd left cell so the 2nd left cell flowed around the left cell. Why this could be a good idea

• Lets you flip between side by side vs floated with a single click
• Don't have to know about the oddity of floats that the image has to be placed above the text
• Works automatically for any kind of block not just images and videos
• It's in a place that is perhaps more discoverable. The user creates a Row/Grid to put an image and text in sideby side mode and then thinks realises they really want the text wrapper around the image since the text is so much longer. If they looked at the image block for the alignment option it would do nothing and they would be confused. They would have to know everything now has to be moved out of the grid for it to work. So instead perhaps they would look at the style of Grid row and see the alignment option there and then it will just work.

[tiberiuichim]

I think having the "some column is floated" is a nice idea and could be implemented in the Row block.

I've been toying at some point with the idea of trying to optimize the editor's workflow: if they want to lay out something on the side, they need to create a row block, move the existing content to the block and so on. My idea was to replace the default text block with something that would allow the editors to click on the left / right side of the block and create new columns / placeholders. It's this thing, as a proof of concept, I don't know how well it would work with current Volto: https://github.com/tiberiuichim/volto-rail-block

[djay]

@tiberiuichim sounds nice but also sounds like it's just getting closer to mosaic and the generalised ability to move a block next to another block to create a row? Something I know that the original designers on volto were keen to avoid. I can't remember why but is true that the way this works in notion is bit of a pain because you find it happen when you don't want it.