Panel Layout breaks if the Control label is short

[namithj]

Description

Add a text control in a sidebar panel as below
<TextControl label={'Title'} value={postMeta._header_banner_heading} onChange={(value) => setPostMeta({ _header_banner_heading: value })} />

Now add another textcontrol underneath it with a longer label

<TextControl label={'Longer Label'} value={postMeta._header_banner_heading} onChange={(value) => setPostMeta({ _header_banner_heading: value })} />

The first control will break layout and not be full width as all the other controls. The Label should be such that it should be atleast 42px in length for the input field underneath to display correctly as full width.

Step-by-step reproduction instructions

1. Create a block plugin with a sidebar panel.
2. Add multiple text controls to it.
3. Any control with a label where the combined length of character is less than 42px in width wont align with the other controls

Screenshots, screen recording, code snippet

Environment info

Wordpress 6.0 Default Theme and Plugins

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

Yes

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

Yes

[akasunil]

Tried with new block with TextControl and dont see this issue in block configuration panel in sidebar. It would be great if you can provide sample code to regenerate this issue.

[namithj]

Try the below in the sidebar panel content and you can see the issue.

<PluginDocumentSettingPanel title={'Header Banner'} initialOpen="false"> <PanelBody> <PanelRow> <TextControl label={'Title'} value={postMeta._header_banner_heading} onChange={(value) => setPostMeta({ _header_banner_heading: value })} /> </PanelRow> </PanelBody> <PanelBody> <PanelRow> <TextareaControl label={'Description'} value={postMeta._header_banner_description} onChange={(value) => setPostMeta({ _header_banner_description: value })} /> </PanelRow> </PanelBody> </PluginDocumentSettingPanel>

[akasunil]

Have fixed this issue in PR 41768.

[t-hamano]

Sorry for the delay in checking.

I think the fundamental problem is that the PanelRow component expects a Flex layout.

So I believe that changing the width of the child element depending on the length of the label is expected behavior. If there is only one component inside the PanelRow component, there should be no need to use the PanelRow component in the first place.

<PluginDocumentSettingPanel title={'Header Banner'} initialOpen="false"> <PanelBody> <PanelRow> <TextControl label={'Title'} value={postMeta._header_banner_heading} onChange={(value) => setPostMeta({ _header_banner_heading: value })} /> </PanelRow> </PanelBody> <PanelBody> <PanelRow> <TextareaControl label={'Description'} value={postMeta._header_banner_description} onChange={(value) => setPostMeta({ _header_banner_description: value })} /> </PanelRow> </PanelBody> </PluginDocumentSettingPanel>

Additionally, PluginDocumentSettingPanel has a PanelBody inside, so there is no need to explicitly add a PanelBody component. Using the PanelBody component will introduce unintended spaces. You only need to define the components you want to render.

In other words, it will look like this: It can also be run from the browser console.

function MyDocumentSettingPlugin() {
    return wp.element.createElement(
        wp.editPost.PluginDocumentSettingPanel,
        {
			title: 'Header Banner',
			initialOpen: "false",
			name: 'my-custom-panel',
		},
        wp.element.createElement(wp.components.TextControl, { label: 'Title' }),
        wp.element.createElement(wp.components.TextareaControl, { label: 'Description' })
    );
}

wp.plugins.registerPlugin( 'my-document-setting-plugin', {
	render: MyDocumentSettingPlugin,
} );

[helgatheviking]

Thank you @t-hamano for the details! Actually I think that will work fine for me to just remove my panel row.

[t-hamano]

@namithj As mentioned in this comment, I think the problem is not with the sidebar or the panel component, but with how PluginDocumentSettingPanel is used. I'd like to close this issue, but if there's anything I've missed, please feel free to comment.

[gaambo]

If there is only one component inside the PanelRow component, there should be no need to use the PanelRow component in the first place.

@t-hamano That's very interesting and good to know, thanks! Might it be worth to add that to the component documentation? I can open a PR.
It was my understanding that one should always use Panel > PanelBody > PanelRow also because the Row adds some vertical margin between controls. And I've had this happen a few times, where a control didn't take up the full width.

[namithj]

@t-hamano Removing the Panel Row Component makes the particular section look out of place (different padding) compared to everything else. Since this can be easily fixed via css and aids in pursuing design uniformity irrespective on number of child components, incorporating the fix looks like a good idea. Since the issue occurs only when the label is short, I personally havent come across this issue since I reported it two years back.

[t-hamano]

@gaambo Yes, if you feel that the current documentation is insufficient, please feel free to submit a PR. You will receive more reviews.

@namithj

Removing the Panel Row Component makes the particular section look out of place (different padding) compared to everything else.

I compared wrapping it with a PanelRow component and not wrapping it with a PanelRow component. Below is the code I used for testing.

Details

function MyDocumentSettingPlugin() {
	return wp.element.createElement(
		wp.editPost.PluginDocumentSettingPanel,
		{
			title: 'Header Banner',
			initialOpen: "false",
			name: 'my-custom-panel',
		},
		wp.element.createElement(wp.components.TextControl, { label: 'Title' }),
		wp.element.createElement(wp.components.TextareaControl, { label: 'Description' }),
		wp.element.createElement(
			wp.components.PanelRow,
			{},
			wp.element.createElement(wp.components.TextControl, { label: 'Title' }),
		),
		wp.element.createElement(
			wp.components.PanelRow,
			{},
			wp.element.createElement(wp.components.TextareaControl, { label: 'Description' }),
		),
	);
}

wp.plugins.registerPlugin( 'my-document-setting-plugin', {
	render: MyDocumentSettingPlugin,
} );

There doesn't seem to be any difference in padding or margins, at least in the sidebar 🤔

[namithj]

@t-hamano You have to add just one control to reproduce the issue. Remove everything but the first title input field and you can see the probem.

you can also see it in the screenshots in the related issue #60515 opened by @gaambo