BorderBlockControl component label is partially hidden by the input field

[gschaub]

Description

I have created a BorderBoxControl for a custom block and the label is not visible (or only partially depending on configuration). Please see the screenshot. I have looked through the css in the Chrome Development Tools and it appears that the issue is related to container margins, but it all appears to be associated with the compenent itself. Additionally, my markup doesn't include any custom css.

Step-by-step reproduction instructions

Here is the applicable markup for the component. Note that the markup outside of the BorderBoxControl has been condensed: There are other Panel and PanelBody blocks.

     _... multiple PanelRow components_

     **<PanelRow>
        <BorderBoxControl
           label="Borders"
           hideLabelFromVision="false"
           isCompact="true"
           colors={borderBoxColors}
           value={bodyBorder}
           onChange={(e) => onBodyBorder(table, e)}
        />
     </PanelRow>**

     _... multiple PanelRow components_

  </PanelBody>

Screenshots, screen recording, code snippet

Environment info

• Wordpress 6.7.1, Gutenberg 19.9.0 running on Local by Flywheel
• Windows 11 desktop with Chrome 131.0.6778.266

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[SainathPoojary]

Hey @gschaub,
Thanks for sharing the issue, I could replicate the issue on my local

[t-hamano]

Below is the code to reproduce the issue. You can run it from the browser console:

Code

const { createElement: el, Fragment } = wp.element;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, PanelRow, BorderBoxControl } = wp.components;
const { addFilter } = wp.hooks;

function withMyPluginControls( BlockEdit ) {
	return function ( props ) {
		return el(
			Fragment,
			{},
			el(
				InspectorControls,
				{},
				el(
					PanelBody,
					{
						title: 'My Panel Body',
						initialOpen: true,
					},
					el(
						PanelRow,
						{},
						el( BorderBoxControl, {
							label: 'My Border Control',
							className: 'my-border-control',
						} )
					)
				)
			),
			el( BlockEdit, props )
		);
	};
}

addFilter(
	'editor.BlockEdit',
	'my-plugin/with-inspector-controls',
	withMyPluginControls
);

Unfortunately, the block sidebar has several styles for laying out the controls that can sometimes cause unintended issues.

I think this issue is related to #65191.

It's not ideal, but for now the following CSS will work around it:

.my-border-control {
	width: 100%;
}

.my-border-control .components-base-control {
	margin-bottom: 0;
}

[SainathPoojary]

Hey @t-hamano,

I tested the suggested workaround, and it’s working well:

Should we raise a PR to include this style in the component?

[t-hamano]

Should we raise a PR to include this style in the component?

This style is only a temporary workaround and is probably not the best. Perhaps we should follow the suggestions in #65191 to explore a suitable approach.

[gschaub]

All - I have created a class called "border-box-workaround" and successfully applied the workaround. Thank you all for your help. I will continue to monitor this issue for the resolution.