♻️ Shorten generic CSS class names

modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss

@@ -11,7 +11,7 @@
 		gap: 6px 0;
 	}
 
-	.ppcp-r-settings-block__header {
+	.ppcp--header {
 		display: flex;
 		flex-direction: column;
 		gap: 6px;
@@ -21,7 +21,7 @@
 		}
 	}
 
-	.ppcp-r-settings-block__title {
+	.ppcp--title {
 		@include font(11, 22, 600);
 		color: var(--color-text-title);
 		display: block;
@@ -42,14 +42,14 @@
 		}
 	}
 
-	.ppcp-r-settings-block__title-wrapper {
+	.ppcp--title-wrapper {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
 
 	&.ppcp-r-settings-block__feature {
-		.ppcp-r-settings-block__title {
+		.ppcp--title {
 			@include font(13, 20, 600);
 			color: var(--color-text-main);
 			text-transform: none;
@@ -72,7 +72,7 @@
 		}
 	}
 
-	.ppcp-r-settings-block__description {
+	.ppcp--description {
 		@include font(13, 20, 400);
 		margin: 0;
 		color: var(--color-text-description);
@@ -90,7 +90,7 @@
 		}
 	}
 
-	.ppcp-r-settings-block__supplementary-title-label {
+	.ppcp--title-extra {
 		@include font(13, 20, 400);
 		color: var(--color-text-teriary);
 		text-transform: none;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Action.js

@@ -1,5 +1,5 @@
 const Action = ( { children } ) => (
-	<div className="ppcp-r-settings-block__action">{ children }</div>
+	<div className="ppcp--action">{ children }</div>
 );
 
 export default Action;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Content.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 const Content = ( { children, asCard = true, className = '', id = '' } ) => {
-	const elementClasses = classNames( 'ppcp-r-settings-content', className, {
+	const elementClasses = classNames( 'ppcp--content', className, {
 		'ppcp--is-card': asCard,
 	} );
 

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Description.js

@@ -6,10 +6,7 @@ const Description = ( { children, className = '' } ) => {
 		return null;
 	}
 
-	const elementClasses = classNames(
-		'ppcp-r-settings-block__description',
-		className
-	);
+	const elementClasses = classNames( 'ppcp--description', className );
 
 	if ( 'string' !== typeof children ) {
 		return <span className={ elementClasses }>{ children }</span>;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Header.js

@@ -5,10 +5,7 @@ const Header = ( { children, className = '' } ) => {
 		return null;
 	}
 
-	const elementClasses = classNames(
-		'ppcp-r-settings-block__header',
-		className
-	);
+	const elementClasses = classNames( 'ppcp--header', className );
 
 	return <div className={ elementClasses }>{ children }</div>;
 };

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js

@@ -5,14 +5,10 @@ const Title = ( { children, noCaps = false, big = false, className = '' } ) => {
 		return null;
 	}
 
-	const elementClasses = classNames(
-		'ppcp-r-settings-block__title',
-		className,
-		{
-			'ppcp--no-caps': noCaps,
-			'ppcp--big': big,
-		}
-	);
+	const elementClasses = classNames( 'ppcp--title', className, {
+		'ppcp--no-caps': noCaps,
+		'ppcp--big': big,
+	} );
 
 	return <span className={ elementClasses }>{ children }</span>;
 };

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleExtra.js

@@ -3,11 +3,7 @@ const TitleExtra = ( { children } ) => {
 		return null;
 	}
 
-	return (
-		<span className="ppcp-r-settings-block__supplementary-title-label">
-			{ children }
-		</span>
-	);
+	return <span className="ppcp--title-extra">{ children }</span>;
 };
 
 export default TitleExtra;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleWrapper.js

@@ -1,5 +1,5 @@
 const TitleWrapper = ( { children } ) => (
-	<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
+	<span className="ppcp--title-wrapper">{ children }</span>
 );
 
 export default TitleWrapper;

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ControlToggleButton.js

@@ -2,15 +2,19 @@ import { ToggleControl } from '@wordpress/components';
 import { Action, Description } from '../Elements';
 
 const ControlToggleButton = ( { label, description, value, onChange } ) => {
+	const descriptionContent = description ? (
+		<Description>{ description }</Description>
+	) : null;
+
 	return (
 		<Action>
 			<ToggleControl
-				className="ppcp-r-settings-block__toggle-control"
+				className="ppcp--control-toggle"
 				__nextHasNoMarginBottom={ true }
 				checked={ value }
 				onChange={ onChange }
 				label={ label }
-				help={ <Description>{ description }</Description> }
+				help={ descriptionContent }
 			/>
 		</Action>
 	);