feat: Add BlockEditor component for managing block styles and properties in the simulation dashboard.

app/src/components/SimulationDashboard/components/block/BlockEditor.tsx

@@ -305,6 +305,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
 
                 <div className="design-section appearance">
                     <div className="section-header">Appearance</div>
+
                     <div className="design-datas-wrapper">
                         {currentBlock.positionType === "absolute" && (
                             <>

app/src/styles/components/simulationDashboard/_simulationDashBoard.scss

@@ -709,6 +709,22 @@
             }
         }
 
+
+        .appearance {
+            .design-datas-wrapper {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 16px 16px;
+
+                .value-field-container {
+                    label {
+                        width: 80%;
+                        text-wrap: nowrap;
+                    }
+                }
+            }
+        }
+
         &.element-editor-panel {
             right: 20px;
             top: 50px;
@@ -722,21 +738,6 @@
             top: 80px;
             right: 40px;
 
-            .appearance {
-                .design-datas-wrapper {
-                    display: grid;
-                    grid-template-columns: repeat(2, 1fr);
-                    gap: 16px 16px;
-
-                    .value-field-container {
-                        label {
-                            width: 80%;
-                            text-wrap: nowrap;
-                        }
-                    }
-                }
-            }
-
             .swap-button {
                 text-align: center;
                 color: #ccacff;