Move misplaced style imports to editor.css

[m-e-h]

Description

Currently there's this in the front-end style.css:

.block-editor-block-list__layout .reusable-block-edit-panel {
	align-items: center;
	background: #f8f9f9;
	border: 1px dashed rgba(145, 151, 162, 0.25);
	border-bottom: none;
	color: #555d66;
	display: flex;
	flex-wrap: wrap;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans,
		Ubuntu, Cantarell, Helvetica Neue, sans-serif;
	font-size: 13px;
	margin: 0 -14px;
	padding: 8px 14px;
	position: relative;
	top: -14px;
}
.block-editor-block-list__layout .block-editor-block-list__layout .reusable-block-edit-panel {
	margin: 0 -14px;
	padding: 8px 14px;
}
.block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__spinner {
	margin: 0 5px;
}
.block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__info {
	margin-right: auto;
}
.block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__label {
	font-weight: 600;
	margin-right: 8px;
	white-space: nowrap;
}
.block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__title {
	flex: 1 1 100%;
	font-size: 14px;
	height: 30px;
	margin: 4px 0 8px;
}
.block-editor-block-list__layout .reusable-block-edit-panel .components-button.reusable-block-edit-panel__button {
	flex-shrink: 0;
}
@media (min-width: 960px) {
	.block-editor-block-list__layout .reusable-block-edit-panel {
		flex-wrap: nowrap;
	}
	.block-editor-block-list__layout .reusable-block-edit-panel .reusable-block-edit-panel__title {
		margin: 0;
	}
	.block-editor-block-list__layout .reusable-block-edit-panel .components-button.reusable-block-edit-panel__button {
		margin: 0 0 0 5px;
	}
}
.editor-block-list__layout .is-selected .reusable-block-edit-panel {
	border-color: rgba(66, 88, 99, 0.4) rgba(66, 88, 99, 0.4)
		rgba(66, 88, 99, 0.4) transparent;
}
.is-dark-theme .editor-block-list__layout .is-selected .reusable-block-edit-panel {
	border-color: hsla(0, 0%, 100%, 0.45) hsla(0, 0%, 100%, 0.45)
		hsla(0, 0%, 100%, 0.45) transparent;
}
.block-editor-block-list__layout .reusable-block-indicator {
	background: #fff;
	border: 1px dashed #e2e4e7;
	color: #555d66;
	height: 30px;
	padding: 4px;
	position: absolute;
	right: -14px;
	top: -14px;
	width: 30px;
	z-index: 1;
}

I've moved the imports

@import "./block/edit-panel/style.scss";
@import "./block/indicator/style.scss";

from style.scss to editor.scss.

Other changes may be desired.

• Should the filenames for the individual stylesheets be changed from style.scss to editor.scss?
• Do these even belong in block-library/?

[m-e-h]

This PR and #14648 should, from what I can see, finish off this issue. #11668

[jorgefilipecosta]

Thank you for this change. I think given that these styles are styles for internal components used by the "block" block (reusable blocks), their name makes sense and they are being imported in the right file. I would only not import them in the middle of the file and I would add them at the end of the file with a comment saying: "Import styles from internal components used by the blocks.

[gziolo]

They should be also renamed to editor.scss if they belong to this group of styles.

[jorgefilipecosta]

The rename was applied.

[gziolo]

Awesome thanks