🚧 Fix CSS class of ButtonSettingsBlock

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;

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>