Apply Stack layout for settings modal

t-hamano · Mar 7, 2024 · f6183f9 · f6183f9
1 parent 8e0e7b6
commit f6183f9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/synthesizer-setting/index.tsx b/src/components/synthesizer-setting/index.tsx
@@ -3,7 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
-import { Button, RangeControl, SelectControl } from '@wordpress/components';
+import {
+	Button,
+	RangeControl,
+	SelectControl,
+	// @ts-ignore: has no exported member
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -109,7 +115,7 @@ const SynthesizerSetting = ( { synthesizerSetting, onChange }: Props ) => {
 	};
 
 	return (
-		<div className="piano-block-synthesizer-setting">
+		<VStack className="piano-block-synthesizer-setting">
 			<SelectControl
 				label={ __( 'Oscillator Type', 'piano-block' ) }
 				autoComplete="off"
@@ -146,7 +152,7 @@ const SynthesizerSetting = ( { synthesizerSetting, onChange }: Props ) => {
 			>
 				{ __( 'Reset envelope', 'piano-block' ) }
 			</Button>
-		</div>
+		</VStack>
 	);
 };
 

diff --git a/src/components/synthesizer-setting/style.scss b/src/components/synthesizer-setting/style.scss
@@ -13,7 +13,6 @@
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0 $grid-unit-20;
-		margin-top: $grid-unit-10;
 
 		.components-range-control {
 			width: calc(50% - $grid-unit-10);
@@ -29,12 +28,10 @@
 		display: block;
 		width: 100%;
 		height: $grid-unit-10 * 10;
-		margin: $grid-unit-10 0;
 		border: $border-width solid var(--wp-admin-theme-color, #007cba);
 	}
 
 	.piano-block-synthesizer-setting__reset {
-		display: block;
 		margin-left: auto;
 	}
 }