woocommerce/product-pricing-field should not be full-width #43134
Replies: 4 comments
-
Hi @leewillis77 ! Thanks for sharing your thoughts on this. I agree that the solution that you had to implement (using columns) is a bit cumbersome. I've made a note of this so that the team can look into simplifying this scenario in the future. |
Beta Was this translation helpful? Give feedback.
-
@j111q we would appreciate your thoughts on this, as this would require some design input.
At the moment our preference would be the first option, but curious if this will heavily impact the design? |
Beta Was this translation helpful? Give feedback.
-
Another option would be to keep the current solution (using columns), but make the insertion of nested blocks easier. @joshuatf is exploring some options in that regard. |
Beta Was this translation helpful? Give feedback.
-
@louwie17 @mattsherman IMO the ideal scenario is where developers can choose whether a field is max-width or 50% width, depending on the content and type of their field. That is how we structure it in our design components for all fields. For e.g., if they're showing a dropdown that has a long option name and long help text, maybe they'd want it to be max-width so the option name and help text is shown in full. But if they're showing a dropdown with options that are short, then it's a better UX for the field to be at half width. I'm not too sure which of @louwie17's two options would be best for that ideal scenario - I'm guessing option 2? |
Beta Was this translation helpful? Give feedback.
-
I'm currently looking at supporting the new product editor in some of our WooCommerce extensions. I've followed the articles linked from here and have fairly quickly managed to get fields added to the editor.
However, I feel that either the UX, or the developer experience is compromised by the default behaviour of the woocommerce/product-pricing-field field type. If you add the field to the product editor then by default it appears as full-width. E.g.
Example code:
This seems less-than-ideal from a UX point of view as the actual price is displayed so far away from the label making it difficult to scan. Even the standard fields ('List Price' & 'Sale Price' just above) seem wider than they could ideally be, although the effect there is lessened as they're embedded in a 2-column layout.
Obviously, it's possible to replicate the behaviour of those built in fields by embedding the price field into a two-column layout with an empty second column, but that seems hacky, and significantly complicates the code required to add the field. In order to create this layout:
the code now looks like:
I'm not quite sure what the actual solution would be, but it seems like the woocommerce/product-pricing-field should be sized appropriately based on the likely input field size required for a better UX and to avoid developers having to control it manually by embedding into columns.
Beta Was this translation helpful? Give feedback.
All reactions