editor styling

src/edit.js

@@ -6,7 +6,7 @@ import {
 	InspectorControls,
 } from "@wordpress/block-editor";
 import { useSelect } from "@wordpress/data";
-import { ColorPicker } from "@wordpress/components";
+import { ColorPicker, Panel, PanelBody, PanelRow } from "@wordpress/components";
 
 import "./editor.scss";
 
@@ -26,21 +26,30 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 	return (
 		<>
 			<InspectorControls>
-				<ColorPicker
+				<Panel>
-					color={attributes.backgroundColor}
+					<PanelBody title="Settings" initialOpen={ true }>
-					onChange={(color) => setAttributes({ backgroundColor: color })}
+						<PanelRow>
-					enableAlpha
+						<legend className="blocks-base-control__label">
-					defaultValue="#000"
+								{ __( 'Background Color', 'red-orbital' ) }
-				/>
+						</legend>
+						</PanelRow>
+							<ColorPicker
+								color={attributes.backgroundColor}
+								onChange={(color) => setAttributes({ backgroundColor: color })}
+								enableAlpha
+								defaultValue="#000"
+							/>
+					</PanelBody>
+				</Panel>
 			</InspectorControls>
 
-			<div
+			<div {...useBlockProps()}>
-				{...useBlockProps({
+				<div
-					style: {
+					className="orbiter-bg"
+					style={{
 						backgroundColor: attributes.backgroundColor,
-					},
+					}}
-				})}
+				/>
-			>
 				<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
 			</div>
 		</>

src/editor.scss

@@ -5,12 +5,24 @@
  */
 
 .block-list .wp-block-red-block-red-orbiter {
+	z-index: 10;
+	position: relative;
 	display: flex;
 	align-items: center;
 	list-style: none;
 	margin-bottom: 1px;
 	padding: 8px;
 
+	&::before {
+		position: absolute;
+		content: '';
+		top: 0;
+		left: 72px;
+		width: calc(100% - 90px);
+		height: 1px;
+		background-color: #e8e8e8;
+	}
+
 	.block-editor-inner-blocks > .block-editor-block-list__layout {
 		display: flex;
 		align-items: center;
@@ -26,4 +38,18 @@
 			max-width: 240px;
 		}
 	}
+
+	.orbiter-bg {
+		position: relative;
+		width: 60px;
+		height: 60px;
+		margin-right: 16px;
+	}
+
+	&.has-child-selected,
+	&.is-selected {
+		.block-editor-inner-blocks > .block-editor-block-list__layout > * {
+			max-height: none;
+		}
+	}
 }

src/style.scss

@@ -7,7 +7,6 @@
 
 .wp-block-red-block-red-orbiter {
 	--duration__feature-hover: 0.3s;
-	--duration__pulse: 1.5s;
 
 	.orbiter-bg {
 		position: absolute;
@@ -61,7 +60,9 @@
 	}
 }
 
-.wp-block-red-block-red-orbital.pulse {
+.orbiters.pulse {
+	--duration__pulse: 1.5s;
+
 	.orbiter:hover {
 		> .orbiter-bg {
 			animation-play-state: paused;