Progressively widening TextControl Components

[mattyrob]

Description

The sidebar inspector seems to implement TextControls that get progressively wider

This issue seems visually worst in Chrome, is slightly better in Safari and hardly noticeable in Firefox. (Screen grab below is from Safari)

Step-by-step reproduction instructions

Deploy a block with multiple TextCrontol elements.

Expected behaviour

Text Controls should all be the same width

Actual behaviour

TextControls get progressively wider further down the page.

Screenshots or screen recording (optional)

Code snippet (optional)

( function( blocks, i18n, element, components, editor ) {
    var el               = element.createElement,
        Fragment         = element.Fragment,
        PanelBody        = components.PanelBody,
        PanelRow         = components.PanelRow,
        TextControl      = components.TextControl;

    blocks.registerBlockType(
        'gutenberg/progressive-box-size',
        {
            title: i18n.__( 'Progressive Box Sizes'),
            icon: 'hammer',
            category: 'widgets',
            edit: function( props ) {
                var title         = props.attributes.title || i18n.__( 'Title'),
                    width         = props.attributes.width || '82',
                    height        = props.attributes.height || '24',
                    font          = props.attributes.font || '11';

                return el(
                    Fragment,
                    {},
                    el(
                        editor.InspectorControls,
                        { key: 'gutenberg/progressive-box-size' },
                        el(
                            PanelBody,
                            {
                                title: i18n.__( 'Title And Sizes'),
                                initialOpen: true
                            },
                            el(
                                PanelRow,
                                {},
                                el(
                                    TextControl,
                                    {
                                        type: 'string',
                                        label: i18n.__( 'Title'),
                                        value: title,
                                    }
                                )
                            ),
                            el(
                                PanelRow,
                                {},
                                el(
                                    TextControl,
                                    {
                                        type: 'number',
                                        label: i18n.__( 'Width'),
                                        value: width,
                                    }
                                )
                            ),
                            el(
                                PanelRow,
                                {},
                                el(
                                    TextControl,
                                    {
                                        type: 'number',
                                        label: i18n.__( 'Height'),
                                        value: height,
                                    }
                                )
                            ),
                            el(
                                PanelRow,
                                {},
                                el(
                                    TextControl,
                                    {
                                        type: 'number',
                                        label: i18n.__( 'Font Size'),
                                        value: font,
                                    }
                                )
                            )
                        )
                    )
                );
            }
        }
    );
} )(
    window.wp.blocks,
    window.wp.i18n,
    window.wp.element,
    window.wp.components,
    window.wp.blockEditor
);

WordPress information

• WordPress version: 5.8-alpha-50941
• Gutenberg version: 5.8-alpha-50941 and also Gutenberg 10.6.2
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Twenty Twenty-One

Device information

• Device: Desktop
• Operating system: MacOS 11.3.1
• Browser: Safari 14.1, Chrome 90, Firefox 88

[stokesman]

Hi @mattyrob, thanks for the code snippet. It made testing this easy. It turns out the widths are progressive because those labels happen to be of progressive lengths. See this screenshot where I made the first label longer and the second shorter.

This does seem like an styling oversight and it could warrant a tweak to the component styles in Gutenberg. To workaround a bit of CSS could be added to the editor styles of your block. I think the simplest bit of css would be:

.my-block-panel .components-base-control {
    flex: 1;
}

The .my-block-panel in the selector is just to make sure it wouldn't somehow have side effects in other parts of the UI. Of course, it'd have to be added in the PanelBody props.

[mattyrob]

@stokesman

Thanks for the tip, I'll work on fixing this issue in my code with some CSS.