From 2f79a9fe4d81df0b511874ecc7ab546b5d289464 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Wed, 22 Jan 2025 15:30:49 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Fix=20CSS=20class=20of=20ButtonS?=
 =?UTF-8?q?ettingsBlock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReusableComponents/SettingsBlock.js       | 30 +++++++++++++++++--
 .../SettingsBlocks/ButtonSettingsBlock.js     |  2 +-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js
index f5a512707..b80d8f253 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js
@@ -1,11 +1,37 @@
 import classNames from 'classnames';
+import { Description, Header, Title, TitleExtra, Content } from './Elements';
 
-const SettingsBlock = ( { className, children, separatorAndGap = true } ) => {
+const SettingsBlock = ( {
+	className,
+	children,
+	title,
+	titleSuffix,
+	headerDescription,
+	description,
+	horizontalLayout = false,
+	separatorAndGap = true,
+} ) => {
 	const blockClassName = classNames( 'ppcp-r-settings-block', className, {
 		'ppcp--no-gap': ! separatorAndGap,
+		'ppcp--horizontal': horizontalLayout,
 	} );
 
-	return <div className={ blockClassName }>{ children }</div>;
+	return (
+		<div className={ blockClassName }>
+			<Header>
+				<Title>
+					{ title } <TitleExtra>{ titleSuffix }</TitleExtra>
+				</Title>
+				<Description>{ headerDescription }</Description>
+			</Header>
+
+			<Content asCard={ false }>
+				{ children }
+
+				<Description>{ description }</Description>
+			</Content>
+		</div>
+	);
 };
 
 export default SettingsBlock;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
index 812ae0d3d..9e01078cf 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
@@ -8,7 +8,7 @@ const ButtonSettingsBlock = ( { title, description, ...props } ) => (
 		title={ title }
 		headerDescription={ description }
 		horizontalLayout={ true }
-		className="ppcp-r-settings-block__button"
+		className="ppcp--button-block"
 		{ ...props }
 	>
 		<Action>