packages/edit-widgets/src/blocks/widget-area/editor.scss - trunk - githubmirror/gutenberg

packages/edit-widgets/src/blocks/widget-area/editor.scss

76 строк2 KB

Riad Benguella

Build v2: Migrate edit-* packages to the new build script (#72354)

15 окт 2025, 15:43

15 окт 2025, 15:4335ba775

@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

$panel-title-height: 48px;

.wp-block[data-type="core/widget-area"] {
	max-width: $widget-area-width;
	margin-left: auto;
	margin-right: auto;

	.components-panel__body > .components-panel__body-title {
		font-family: $default-font;
		margin: 0;
		height: $panel-title-height;
		// Create a stacking context and make sure it's higher is than the content.
		// Since the inner blocks will be stretched to cover the whole panel,
		// we still want the title to be interactive.
		position: relative;
		z-index: 1;
		background: $white;
		// z-index should be enough to create a new stacking context,
		// unfortunately, Safari needs this to stop it from flickering while dragging.
		// The reason behind that is still unknown, probably a bug in the browser.
		transform: translateZ(0);

		// Remove default hover background in panel title. See #25752.
		&:hover {
			background: $white;
		}
	}

	.block-list-appender.wp-block {
		width: initial;
		position: relative;
	}

	// Override theme custom widths for blocks.
	.editor-styles-wrapper .wp-block.wp-block.wp-block.wp-block.wp-block {
		max-width: 100%;
	}

	.components-panel__body.is-opened {
		padding: 0;
	}
}

.blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper {
	margin: 0;
	padding: 0;

	> .block-editor-block-list__layout {
		// Stretch the inner-blocks container to cover the entire panel,
		// so that dragging onto anywhere in it works.
		margin-top: -$panel-title-height;
		// Add some spacing above the inner blocks so that the block toolbar doesn't
		// overlap the panel header.
		padding: ($panel-title-height + $grid-unit-30) $grid-unit-20 $grid-unit-20;

		// Ensure the widget area block lists have a minimum height so that it doesn't
		// collapse to zero height when it has no blocks. When that happens the block
		// can't be used as a drop target.
		min-height: $grid-unit-40;
	}
}

.wp-block-widget-area__highlight-drop-zone {
	outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
}

// Prevent "dragenter" event from firing when dragging onto the title component.
body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title {
	&,
	* {
		pointer-events: none;
	}
}