Tweak components style (#56)

Author: t-hamano

src/components/controls/index.tsx

@@ -106,7 +106,7 @@ const Controls = ( { settings, piano, onChange }: Props ) => {
 	return (
 		<div className="piano-block-controls">
 			<RangeControl
-				className="piano-block-controls__control"
+				__nextHasNoMarginBottom
 				label={ __( 'Volume', 'piano-block' ) }
 				value={ volume || 0 }
 				min={ MIN_VOLUME }
@@ -117,7 +117,7 @@ const Controls = ( { settings, piano, onChange }: Props ) => {
 				onChange={ onVolumeChange }
 			/>
 			<BaseControl
-				className="piano-block-controls__control"
+				__nextHasNoMarginBottom
 				id="piano-block-control-octave"
 				label={ __( 'Octave Offset', 'piano-block' ) }
 			>
@@ -135,7 +135,7 @@ const Controls = ( { settings, piano, onChange }: Props ) => {
 				</ButtonGroup>
 			</BaseControl>
 			<SelectControl
-				className="piano-block-controls__control"
+				__nextHasNoMarginBottom
 				label={ __( 'Instrument', 'piano-block' ) }
 				value={ instrument }
 				options={ INSTRUMENTS.map( ( { label, value } ) => {
@@ -163,14 +163,14 @@ const Controls = ( { settings, piano, onChange }: Props ) => {
 				</div>
 			) }
 			<ToggleControl
-				className="piano-block-controls__control"
+				__nextHasNoMarginBottom
 				label={ __( 'Sustain Pedal', 'piano-block' ) }
 				checked={ useSustainPedal }
 				onChange={ onUseSustainPedalChange }
 				disabled={ instrument === 'synthesizer' }
 			/>
 			<SelectControl
-				className="piano-block-controls__control"
+				__nextHasNoMarginBottom
 				label={ __( 'Key Layout', 'piano-block' ) }
 				value={ keyLayout }
 				options={ KEYBOARD_LAYOUTS.map( ( { label, value } ) => {
@@ -180,7 +180,7 @@ const Controls = ( { settings, piano, onChange }: Props ) => {
 				size="compact"
 			/>
 			<SelectControl
-				className="piano-block-controls__control"
+				__nextHasNoMarginBottom
 				label={ __( 'Key Indicator', 'piano-block' ) }
 				value={ keyIndicator }
 				options={ KEY_INDICATORS.map( ( { label, value } ) => {
@@ -194,7 +194,7 @@ const Controls = ( { settings, piano, onChange }: Props ) => {
 				label={ __( 'Help', 'piano-block' ) }
 				icon={ help }
 				onClick={ () => setIsHelpOpen( true ) }
-				size="compact"
+				size="small"
 			/>
 			{ isHelpOpen && <HelpModal onClose={ () => setIsHelpOpen( false ) } /> }
 		</div>

src/components/controls/style.scss

@@ -1,3 +1,5 @@
+@import "../../variables";
+
 .piano-block-controls {
 	position: relative;
 	box-sizing: border-box;
@@ -6,7 +8,7 @@
 	gap: $grid-unit-20;
 	align-items: flex-start;
 	width: calc(100% - $grid-unit-40);
-	max-width: 818px;
+	max-width: $white-key-width * $white-key-count - $grid-unit-40;
 	padding: $grid-unit-10 $grid-unit-60 $grid-unit-10 $grid-unit-20;
 	margin: 0 auto;
 	background: #fff;
@@ -20,23 +22,7 @@
 		}
 	}
 
-	.components-base-control__label {
-		display: block;
-		font-size: 11px;
-		font-weight: 500;
-		line-height: 1.4;
-	}
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
-
-	.components-select-control__input:focus {
-		outline: none;
-	}
-
 	.components-toggle-control {
-		margin-bottom: 0;
 
 		.components-flex {
 			flex-flow: column-reverse;
@@ -50,10 +36,6 @@
 			line-height: 1.4;
 			text-transform: uppercase;
 		}
-
-		.components-form-toggle {
-			display: inline-flex;
-		}
 	}
 
 	.piano-block-controls__synthesizer-toggle {
@@ -66,4 +48,9 @@
 		top: $grid-unit-10;
 		right: $grid-unit-10;
 	}
+
+	// Backwards compatible styles for WordPress 6.6 and below
+	.components-base-control:has(.components-button-group) .components-base-control__label {
+		display: block;
+	}
 }

src/components/keyboard/style.scss

@@ -1,7 +1,4 @@
-$black-key-width: $grid-unit-40;
-$white-key-width: $grid-unit-50;
-$white-key-height: $grid-unit-10 * 24;
-$white-key-count: 17;
+@import "../../variables";
 
 .piano-block-keyboard {
 	position: relative;

src/components/synthesizer-setting/index.tsx

@@ -7,6 +7,7 @@ import {
 	Button,
 	RangeControl,
 	SelectControl,
+	__experimentalGrid as Grid,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
@@ -122,8 +123,9 @@ const SynthesizerSetting = ( { synthesizerSetting, onChange }: Props ) => {
 	};
 
 	return (
-		<VStack className="piano-block-synthesizer-setting">
+		<VStack className="piano-block-synthesizer-setting" spacing={ 4 }>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'Oscillator Type', 'piano-block' ) }
 				autoComplete="off"
 				value={ oscillator?.type || DEFAULT_OSCILLATOR_TYPE }
@@ -134,9 +136,10 @@ const SynthesizerSetting = ( { synthesizerSetting, onChange }: Props ) => {
 				onChange={ onOscillatorTypeChange }
 				size="compact"
 			/>
-			<div className="piano-block-synthesizer-setting__envelope">
+			<Grid columns={ 2 }>
 				{ EMVELOPE_CONTROLS.map( ( { label, parameter, max } ) => (
 					<RangeControl
+						__nextHasNoMarginBottom
 						key={ parameter }
 						label={ label }
 						value={ envelope[ parameter ] ?? DEFAULT_ENVELOPE[ parameter ] }
@@ -147,12 +150,12 @@ const SynthesizerSetting = ( { synthesizerSetting, onChange }: Props ) => {
 						onChange={ ( value ) => onEnvelopeChange( parameter, value ) }
 					/>
 				) ) }
-			</div>
+			</Grid>
 			<canvas ref={ ref } className="piano-block-synthesizer-setting__graph" />
 			<Button
 				className="piano-block-synthesizer-setting__reset"
 				isDestructive
-				isSmall
+				size="small"
 				onClick={ onEnvelopeReset }
 			>
 				{ __( 'Reset envelope', 'piano-block' ) }

src/components/synthesizer-setting/style.scss

@@ -5,30 +5,11 @@
 	padding: $grid-unit-20;
 	overflow: hidden;
 
-	.components-base-control__field {
-		margin: 0;
-	}
-
-	.piano-block-synthesizer-setting__envelope {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0 $grid-unit-20;
-
-		.components-range-control {
-			width: calc(50% - $grid-unit-10);
-		}
-
-		.components-base-control__label {
-			display: block;
-			margin-bottom: 0;
-		}
-	}
-
 	.piano-block-synthesizer-setting__graph {
 		display: block;
 		width: 100%;
 		height: $grid-unit-10 * 10;
-		border: $border-width solid var(--wp-admin-theme-color, #007cba);
+		border: $border-width solid $gray-600;
 	}
 
 	.piano-block-synthesizer-setting__reset {

src/edit.tsx

@@ -33,6 +33,7 @@ export default function Edit( { attributes, setAttributes }: BlockEditProps< Blo
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'piano-block' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display on the front end', 'piano-block' ) }
 						checked={ settings.showOnFront }
 						onChange={ ( value ) => onChange( { showOnFront: value } ) }

src/variables.scss

@@ -0,0 +1,4 @@
+$black-key-width: $grid-unit-40;
+$white-key-width: $grid-unit-50;
+$white-key-height: $grid-unit-10 * 24;
+$white-key-count: 17;