content layout

plugins/woocommerce-admin/client/settings/components/checkbox.js

@@ -5,12 +5,12 @@ import { CheckboxControl } from '@wordpress/components';
 
 export const SettingsCheckbox = ( { setting } ) => {
 	return (
-		<div>
-			<h3>{ setting.title }</h3>
+		<div className="woocommerce-settings-element">
+			<h4>{ setting.title }</h4>
 			<CheckboxControl
 				label={ setting.desc }
 				onChange={ () => console.log( 'change' ) }
-				selected={ true }
+				checked={ 'yes' === setting.value }
 			/>
 		</div>
 	);

plugins/woocommerce-admin/client/settings/content.js

@@ -6,12 +6,18 @@ import { SettingsCheckbox } from './components';
 export const Content = ( { data } ) => {
 	const { settings } = data;
 
+	console.log( settings );
+
 	return (
 		<div>
 			{ settings.map( ( setting ) => {
 				switch ( setting.type ) {
 					case 'title':
-						return null;
+						return (
+							<div className="woocommerce-settings-element">
+								<h3>{ setting.title }</h3>
+							</div>
+						);
 					case 'checkbox':
 						return (
 							<SettingsCheckbox

plugins/woocommerce-admin/client/settings/style.scss

@@ -56,3 +56,18 @@
 		padding: 20px 12px;
 	}
 }
+
+.woocommerce-settings-element {
+	display: flex;
+	justify-content: space-between;
+	margin: 16px 0px;
+
+	h4 {
+		margin: 0;
+		width: 200px;
+	}
+
+	.components-base-control {
+		flex: 1;
+	}
+}

plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php

@@ -95,9 +95,16 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
 			$sections = $this->get_sections();
 			$sections_data = array();
 			foreach ( $sections as $section_id => $section_label ) {
+				$section_settings = $this->get_settings_for_section( $section_id );
+				$section_settings_data = array();
+
+				foreach( $section_settings as $section_setting ) {
+					$section_setting['value'] = get_option( $section_setting['id'], $section_setting['default'] );
+					$section_settings_data[] = $section_setting;
+				}
 				$sections_data[ $section_id ] = array(
 					'label'   => html_entity_decode( $section_label ),
-					'settings' => $this->get_settings_for_section( $section_id ),
+					'settings' => $section_settings_data,
 				);
 			}
 			$pages[ $this->id ] = array(