Is it possible to have full support for breakpoints so that particular fields will affect only the selected canvas size?
#Full breakpoints support
unreal nest
viscid pendant
Hey @unreal nest! Puck is pretty unopinionated about this. When it comes to applying the values to your components, you can use the same methods you would with any other React component (media queries, styling libraries, etc.). The only difference is that you need to define the fields for each of your breakpoints.
How you design and display those fields will depend on your requirements. For example, you could define an object field for the responsive values, and inside that object include fields like "mobile", "tablet", and "desktop", or "s", "m", and "l".
In the past I did this by using a custom field that grouped all the responsive properties in an accordion.
The nice thing about this approach is that you can then reuse it anywhere you need responsive sizes.
Does that make sense?
unreal nest
Yes, makes sense. BTW, can we get the selected canvas size in resolveFields? Or from some kind of context? The idea is to build it similar to plasmic where you have a Record button, and when it's selected, your properties will be applied only to a specific canvas size 🙂
restive fable
If you use all custom fields, your value can be an object with all breakpoint values in said object, in the custom field, retrieve the active breakpoint and only read that value and update that value, obviously changing breakpoint will allow you to set the next value, pretty simple concept
viscid pendant
What @restive fable said should work. Basically, you want to use createUsePuck to access the Puck API and the currently selected viewport size inside the custom field. Based on that, you can then show and update only its value.