-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Panel Layout breaks if the Control label is short #41671
Comments
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. |
Try the below in the sidebar panel content and you can see the issue.
|
Have fixed this issue in PR 41768. |
Sorry for the delay in checking. I think the fundamental problem is that the 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
Additionally, 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,
} ); |
Thank you @t-hamano for the details! Actually I think that will work fine for me to just remove my panel row. |
@namithj As mentioned in this comment, I think the problem is not with the sidebar or the panel component, but with how |
@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. |
@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. |
@gaambo Yes, if you feel that the current documentation is insufficient, please feel free to submit a PR. You will receive more reviews.
I compared wrapping it with a Detailsfunction 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 🤔 |
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
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
The text was updated successfully, but these errors were encountered: