Handle different field's value for each breakpoint

[axelpezzo]

Hello guys, first of all: great work!

There is any chance to add the support to handle the responsive to the Puck Editor?

I mean, could be great have this two options:

• Adding at the top of the editor the capabilities to change the render screen size chosing between desktop, tablet and smartphone.

• Add for each component's fields the capabilities to add breakpoints in order to save different data for each one (e.g. padding or margin)? E.g.: for the component X I have the padding field but I want to have different values for desktop, tablet and smartphone.

[chrisvxd]

Thanks @axelpezzo!

Viewport switching has been on our radar for some time (#6), but it's non trivial without the use of iframe. Puck doesn't use an iframe because of the numerous trade-offs, not least because it makes it very difficult to do drag-and-drop.

In terms of responsive data, this is most likely a user-land problem, but there's nothing stopping you doing that now with something like this:

fields: {
  paddingMobile: { type: "string" },
  paddingDesktop: { type: "string" },
},
defaultProps: {
  paddingMobile: 'medium',
  paddingMobile: 'large',
}
render: ({ paddingMobile, paddingDesktop }) => {
  return (<div className={classNames({
    `padding-mobile--${[paddingMobile]}`: !!paddingMobile,
    `padding-desktop--${[paddingDesktop]}`: !!paddingDesktop
  })}>
    Hello, world
  </div>);
}

This will render the following by default

<div class="padding-mobile--medium padding-desktop--large">
  Hello, world
</div>

[axelpezzo]

Thanks for the response.

About the viewport switching, it just a suggestion, maybe could be just a max-width size set by a button? Maybe it's too simple and I'm not considering all the entire picture.

Beside, the solution proposed for the handling of the mobile padding could be Ok if I have just few of it properties.

If I have multiple css properties there is any chance to have a collapsable tab in order to organize the fields?

Something like:

• tab: Content (all the fields related to the "data" component)
• tab: Style - Desktop (all the fields related to the css properties for the desktop).
• tab: Style - Tablet
  ...and so on

[chrisvxd]

Unfortunately setting max width doesn't work because it doesn't trigger responsive media queries in CSS - these are based on the viewport size (which are distinct in an iframe).

One solution is simply to resize your window (although Puck doesn't currently go full screen)

In regards to collapsible tabs, absolutely - we're tracking that in #64 .

[chrisvxd]

Moving to discussions

[ri0ter]

@chrisvxd is this topic still on your radar?

I was thinking about a solution and came up with the following:

1. Making props an array of props (where each element of an array is responsible for breakpoint), and for backward compatibility allowing it to be an object. There is one problem though - currently, the id of a field is nested within the prop object - which would need to be moved outside of the object.

2. Using a specific field for tablet/mobile props. In this case the problem would be the fact, that some people might be using
   those fields, so it would be breaking change for them.

I'm not sure if it can be implemented in a non-breaking way. Maybe creating some new property in the root of the object,
for example "overrides", which could be referred by "id"?

[jeroenrinzema]

I am right now thinking of grabbing the current view port from the internal Puck API. This allows me to set the values for that given viewport within the custom field.

const viewport = usePuck((s) => s.appState.ui.viewports.current);

[napter]

What about a viewport preview in an iframe that is for viewing only? It wouldn't have to support drag and drop and could be independent of the editor.