DateTimePicker: Layout issues

[dashkevych]

Description

In WordPress 6.2, it seems like DateTimePicker comes with broken layout when displayed in editor sidebar.

Step-by-step reproduction instructions

1. Import components and controls:

import { InspectorControls } from '@wordpress/block-editor';
import { DateTimePicker, PanelBody, PanelRow } from '@wordpress/components';

2. Add components to edit.js in block:

<InspectorControls>
	<PanelBody title="Date">
		<PanelRow>
			<DateTimePicker
				currentDate={ dateTime }
				onChange={ updateDate }
				is12Hour={ true }
			/>
		</PanelRow>
	</PanelBody>
</InspectorControls>

Screenshots, screen recording, code snippet

Environment info

• WordPress: 6.2
• Chrome, Firefox, Safari
• macOS

Also, tried with Gutenberg and without it, but result remains the same.

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

[t-hamano]

@dashkevych

Thank you for the report. I was able to reproduce it.

Sample code to add DateTimePicker to the block sidebar

const withInspectorControls = wp.compose.createHigherOrderComponent( function (
	BlockEdit
) {
	const el = wp.element.createElement;

	return function ( props ) {
		return el(
			wp.element.Fragment,
			{},
			el( BlockEdit, props ),
			el(
				wp.blockEditor.InspectorControls,
				{},
				el(
					wp.components.PanelBody,
					{},
					el(
						wp.components.PanelRow,
						{},
						el(
							wp.components.DateTimePicker,
							{},
						)
					)
				)
			)
		);
	};
},
'withInspectorControls' );

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

I think it is due to the fact that the margin style in the block inspector is applied inside the DateTimePicker component:

One solution would be to apply a style that resets the margin, as shown below:

.block-editor-block-inspector .components-datetime .components-base-control {
	margin-bottom: 0;
}

However, I would like to leave the issue open as I believe this is a temporary fix and there are more reasonable approaches at the component level.

[mirka]

One solution would be to apply a style that resets the margin, as shown below:

.block-editor-block-inspector .components-datetime .components-base-control {
	margin-bottom: 0;
}

However, I would like to leave the issue open as I believe this is a temporary fix and there are more reasonable approaches at the component level.

Architecturally, the margin-bottom: 24px is a problem inflicted by @wordpress/block-editor itself, so we will not be addressing it at the @wordpress/components level.

Similar to your suggestion, we are starting to counteract it in certain components like so:

gutenberg/packages/block-editor/src/components/block-inspector/style.scss

Lines 21 to 27 in 405f52a

	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
	.components-focal-point-picker-control,
	.components-query-controls {
	.components-base-control {
	margin-bottom: 0;
	}
	}

☝️ Feel free to add DateTimePicker and other affected components to this!

[t-hamano]

@mirka

Thank you for the advice! I summarized this issue in #49796.

[t-hamano]

Let's close this issue as part of #49796