search

measuredco / puck

The visual editor for React
https://puckeditor.com
MIT License
5.26k stars 318 forks source link

Handling `display: inline` blocks #94

Closed tobias-edwards closed 3 months ago

tobias-edwards commented 1 year ago

Blocks that are dragged into view are always visualised as block-level even if they have display: inline which leads to a different looking UI when published.

I suppose they're called "blocks" for a reason, and perhaps this is a constraint on the tool and we may instead need to rely on multi-column layouts to achieve inline elements, but this feels very rigid - like Grid layouts.

Thoughts on this?

chrisvxd commented 1 year ago

Hi @tobias-edwards! I've never tried inlining elements before. Regardless of whether or not we support it, or it's possible via the #37, we should aim to render consistently between the Puck and Render components. That's a bug we should fix.

The rigidity here is somewhat deliberate, should be made easier using #37 (you can start to use flex).

I don't think we can ever support different display values on a per-block basis, but I think it's interesting to consider horizontal DropZones (not least because react-beautiful-dnd supports it). This would have the effect of making each element inside it inline (or flex).

Something like:

<DropZone zone="my-horizontal-zone" direction="horizontal" />;

What do you think?

tobias-edwards commented 1 year ago

I think https://github.com/measuredco/puck/pull/37 should help alleviate inline styling but not solve it completely e.g. for elements that are inline and line break onto a new line:

<p>Hello, <span>Really long name that wraps onto a new line</span>! How are you?</p>

If each element's draggable region was calculated from it's containing box, I think this could be fine until the inner span line breaks, consequently causing irregular draggable areas to form. This could turn the whole experience into a game of Tetris as blocks are calculated whether they fit onto the same line or not?

I think it would be good to state this constraint somewhere, and even go as far as outputting a warning if display: inline elements are used?

jschniper commented 3 months ago

I've run into this as well and I think the horizontal dropzone would be a great addition.

chrisvxd commented 3 months ago

@jschniper If you just need horizontal, see #520. There is a temporary fix proposed in the comments that might act as a viable workaround for you.

chrisvxd commented 3 months ago

Closing this in favour of #455