From 214d3fb839f0a3b20f31b75ee4d37afe30aee877 Mon Sep 17 00:00:00 2001
From: paul sealock <psealock@gmail.com>
Date: Wed, 29 May 2024 17:24:19 +1200
Subject: [PATCH] content layout

---
 .../client/settings/components/checkbox.js        |  6 +++---
 .../woocommerce-admin/client/settings/content.js  |  8 +++++++-
 .../woocommerce-admin/client/settings/style.scss  | 15 +++++++++++++++
 .../admin/settings/class-wc-settings-page.php     |  9 ++++++++-
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/plugins/woocommerce-admin/client/settings/components/checkbox.js b/plugins/woocommerce-admin/client/settings/components/checkbox.js
index 7ada257a9f6..955f7ae2f9e 100644
--- a/plugins/woocommerce-admin/client/settings/components/checkbox.js
+++ b/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>
 	);
diff --git a/plugins/woocommerce-admin/client/settings/content.js b/plugins/woocommerce-admin/client/settings/content.js
index 64faa174611..913028601d1 100644
--- a/plugins/woocommerce-admin/client/settings/content.js
+++ b/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
diff --git a/plugins/woocommerce-admin/client/settings/style.scss b/plugins/woocommerce-admin/client/settings/style.scss
index f14ed2ddeae..c77aa56c963 100644
--- a/plugins/woocommerce-admin/client/settings/style.scss
+++ b/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;
+	}
+}
diff --git a/plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php b/plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php
index e0793264c86..c8b6993b683 100644
--- a/plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php
+++ b/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(