Column with changes from % to px when you try and edit it

[gingerling]

Description

Okay, so it's a minor thing but actually really confusing initially.

• I have arranged some images and text in two columns*.
• I want to resize the column, because the image looks a small in the space
• So I click on the column area and see it's at 30**%**
• I start changing it to 40**%**
• Suddenly the image is tiny
• It's changed to 40px
• Because the px/% is so small it's not actually clear at first what has happened or how to fix it
• I spent a while trying to work out what px width I need but it doesn't seem right to be having fixed width columns on a mobile friendly design, so I look again
• Eventually I figure it out and change px back to %

related feature request #38350

Step-by-step reproduction instructions

create two columns
Put content in each
Click on one and try to change the size
See it change from % to px and column size is suddenly tiny

Screenshots, screen recording, code snippet

video: https://greencloud.gn.apc.org/index.php/s/Dtmp2s443ANA7gE

Environment info

wordpress 5.9

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[carolinan]

I have not been able to reproduce this with the "empty" theme and current Gutenberg trunk on WordPress 5.9.
The column variations that use %, stays as % when I change the numeric value of the setting.

-Does your active theme change the default spacing unit setting with theme support or theme.json?

[gingerling]

Hi, I'm just using twenty twenty two theme, well, a child theme of it with fairly minimal changes. Can you explain your question in more detail and I will try to answer, I don't quite understand it yet.

…

On Mon, 31 Jan 2022, 11:00 Carolina Nymark, ***@***.***> wrote: I have not been able to reproduce this with the "empty" theme and current Gutenberg trunk on WordPress 5.9. The column variations that use %, stays as % when I change the *numeric value* of the setting. -Does your active theme change the default spacing unit setting with theme support or theme.json? — Reply to this email directly, view it on GitHub <#38351 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVYRMAFRXEJNWYRDR7JUQ3UYZTTLANCNFSM5NEFLZYA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[carolinan]

Themes can use settings to decide the units that should be available.
The example in this guide removes the % unit:
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#settings

Twenty Twenty-Two does not remove the %, so we can exclude that from the list of possible causes.

[gingerling]

This is my .json, just to be sure I didn't break anything as I have made several edits.

{ "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ], "settings": { "appearanceTools": true, "color": { "duotone": [ { "colors": [ "#000000", "#ffffff" ], "slug": "foreground-and-background", "name": "Foreground and background" }, { "colors": [ "#000000", "#ffe2c7" ], "slug": "foreground-and-secondary", "name": "Foreground and secondary" }, { "colors": [ "#000000", "#f6f6f6" ], "slug": "foreground-and-tertiary", "name": "Foreground and tertiary" }, { "colors": [ "#1a4548", "#ffffff" ], "slug": "primary-and-background", "name": "Primary and background" }, { "colors": [ "#1a4548", "#ffe2c7" ], "slug": "primary-and-secondary", "name": "Primary and secondary" }, { "colors": [ "#1a4548", "#f6f6f6" ], "slug": "primary-and-tertiary", "name": "Primary and tertiary" } ], "gradients": [ { "slug": "vertical-secondary-to-tertiary", "gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--tertiary) 100%)", "name": "Vertical secondary to tertiary" }, { "slug": "vertical-secondary-to-background", "gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--background) 100%)", "name": "Vertical secondary to background" }, { "slug": "vertical-tertiary-to-background", "gradient": "linear-gradient(to bottom,var(--wp--preset--color--tertiary) 0%,var(--wp--preset--color--background) 100%)", "name": "Vertical tertiary to background" }, { "slug": "diagonal-primary-to-foreground", "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--primary) 0%,var(--wp--preset--color--foreground) 100%)", "name": "Diagonal primary to foreground" }, { "slug": "diagonal-secondary-to-background", "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--secondary) 50%,var(--wp--preset--color--background) 50%)", "name": "Diagonal secondary to background" }, { "slug": "diagonal-background-to-secondary", "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--secondary) 50%)", "name": "Diagonal background to secondary" }, { "slug": "diagonal-tertiary-to-background", "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--tertiary) 50%,var(--wp--preset--color--background) 50%)", "name": "Diagonal tertiary to background" }, { "slug": "diagonal-background-to-tertiary", "gradient": "linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--tertiary) 50%)", "name": "Diagonal background to tertiary" } ], "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#9ab53c", "name": "Primary" }, { "slug": "secondary", "color": "#bb6a49", "name": "Secondary" }, { "slug": "tertiary", "color": "#e2cb2e", "name": "Tertiary" }, { "slug": "fourth", "color": "#75adef", "name": "fourth" } ] }, "custom": { "spacing": { "small": "max(1.25rem, 5vw)", "medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))", "large": "clamp(4rem, 10vw, 8rem)", "outer": "var(--wp--custom--spacing--small, 1.25rem)" }, "typography": { "font-size": { "huge": "clamp(2.25rem, 4vw, 2.75rem)", "gigantic": "clamp(2.75rem, 6vw, 3.25rem)", "colossal": "clamp(3.25rem, 8vw, 6.25rem)" }, "line-height": { "tiny": 1.15, "small": 1.2, "medium": 1.4, "normal": 1.6 } } }, "spacing": { "units": [ "%", "px", "em", "rem", "vh", "vw" ] }, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Segoe UI\", Roboto", "name": "Roboto", "slug": "roboto" } ], "fontSizes": [ { "size": "1rem", "slug": "small" }, { "size": "1.125rem", "slug": "medium" }, { "size": "1.75rem", "slug": "large" }, { "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "x-large" } ] }, "layout": { "contentSize": "650px", "wideSize": "1000px" } }, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--font-size--medium)" } }, "core/post-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", "fontWeight": "300", "lineHeight": "var(--wp--custom--typography--line-height--tiny)", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" } }, "core/post-comments": { "spacing": { "padding": { "top": "var(--wp--custom--spacing--small)" } } }, "core/pullquote": { "border": { "width": "1px 0" } }, "core/query-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", "fontWeight": "300", "lineHeight": "var(--wp--custom--typography--line-height--small)", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" } }, "core/quote": { "border": { "width": "1px" } }, "core/site-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--system-font)", "lineHeight": "var(--wp--custom--typography--line-height--normal)", "fontSize": "var(--wp--preset--font-size--medium)", "fontWeight": "normal" } } }, "color": { "background": "var(--wp--preset--color--background)", "text": "var(--wp--preset--color--foreground)" }, "elements": { "h1": { "typography": { "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", "fontWeight": "300", "lineHeight": "var(--wp--custom--typography--line-height--tiny)", "fontSize": "var(--wp--custom--typography--font-size--colossal)" } }, "h2": { "typography": { "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", "fontWeight": "300", "lineHeight": "var(--wp--custom--typography--line-height--small)", "fontSize": "var(--wp--custom--typography--font-size--gigantic)" } }, "h3": { "typography": { "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", "fontWeight": "300", "lineHeight": "var(--wp--custom--typography--line-height--tiny)", "fontSize": "var(--wp--custom--typography--font-size--huge)" } }, "h4": { "typography": { "fontFamily": "var(--wp--preset--font-family--source-serif-pro)", "fontWeight": "300", "lineHeight": "var(--wp--custom--typography--line-height--tiny)", "fontSize": "var(--wp--preset--font-size--x-large)" } }, "h5": { "typography": { "fontFamily": "var(--wp--preset--font-family--system-font)", "fontWeight": "700", "textTransform": "uppercase", "lineHeight": "var(--wp--custom--typography--line-height--normal)", "fontSize": "var(--wp--preset--font-size--medium)" } }, "h6": { "typography": { "fontFamily": "var(--wp--preset--font-family--system-font)", "fontWeight": "400", "textTransform": "uppercase", "lineHeight": "var(--wp--custom--typography--line-height--normal)", "fontSize": "var(--wp--preset--font-size--medium)" } }, "link": { "color": { "text": "var(--wp--preset--color--foreground)" } } }, "spacing": { "blockGap": "1.5rem" } }, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

[Azragh]

Kinda same issue here. In my theme.json i got

    "spacing": {
      "blockGap": true,
      "margin": true,
      "padding": true,
      "units": [ "em", "%", "px" ]
    },

I assumed that the order here translates to the selectable values, but I always get px first:

Is there a way to change the default order?

[mrfoxtalbot]

Thank you for reporting this @gingerling.

I agree that the size of the px/% text is very small and can be confusing. I would also love to have a draggable size control for the columns (#15659).

That being said, I am not sure I can replicate the initial description you provided. You mentioned this:

Column with changes from % to px when you try and edit it #38351

I recorded a video but was unable to reproduce this "change from % to px" you described using Version 14.0.3 of the editor.

Screen.Capture.on.2022-09-13.at.08-23-57.mp4

I am going to close this but please feel free to open if necessary. thank you!

[mrfoxtalbot]

I assumed that the order here translates to the selectable values, but I always get px first

Thank you for raising this @Azragh. This is being discussed here #42168 I am going to close this in favor of that other pre-existing issue. Thank you!