[Experimental] Utilize WP generated class names to style interactivity stock filter block. (#44073)

plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/stock-filter/edit.tsx

@@ -80,13 +80,9 @@ const Edit = ( props: BlockEditProps< BlockProps > ) => {
 					<Inspector { ...props } />
 					<Disabled>
 						<div
-							className={ classnames(
+							className={ classnames( `style-${ displayStyle }`, {
-								'wc-block-stock-filter',
+								'is-loading': false,
-								`style-${ displayStyle }`,
+							} ) }
-								{
-									'is-loading': false,
-								}
-							) }
 						>
 							{ displayStyle === 'dropdown' ? (
 								<>

plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/stock-filter/style.scss

@@ -9,168 +9,6 @@
 	h6 {
 		text-transform: inherit;
 	}
-}
-
-.wc-block-stock-filter {
-	&.is-loading {
-		@include placeholder();
-		margin-top: $gap;
-		box-shadow: none;
-		border-radius: 0;
-	}
 
 	margin-bottom: $gap-large;
-
-	.wc-block-stock-filter-list {
-		margin: 0;
-
-		li {
-			label {
-				cursor: pointer;
-			}
-
-			input {
-				cursor: pointer;
-				display: inline-block;
-			}
-		}
-	}
-
-	&.style-dropdown {
-		@include includeFormTokenFieldFix();
-		position: relative;
-		display: flex;
-		gap: $gap;
-		align-items: flex-start;
-
-		.wc-block-components-filter-submit-button {
-			height: 36px;
-			line-height: 1;
-		}
-
-		> svg {
-			position: absolute;
-			right: 8px;
-			top: 50%;
-			transform: translateY(-50%);
-			pointer-events: none;
-		}
-	}
-
-	.wc-blocks-components-form-token-field-wrapper {
-		flex-grow: 1;
-		max-width: unset;
-		width: 0;
-		height: max-content;
-
-		&:not(.is-loading) {
-			border: 1px solid $gray-700 !important;
-			border-radius: 4px;
-		}
-
-		&.is-loading {
-			border-radius: em(4px);
-		}
-
-		.components-form-token-field {
-			border-radius: inherit;
-		}
-	}
-
-	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
-		@include reset-color();
-		@include reset-typography();
-		border: 0;
-		padding: $gap-smaller;
-		border-radius: inherit;
-
-		.components-form-token-field__input {
-			@include font-size(small);
-
-			&::placeholder {
-				color: $black;
-			}
-		}
-
-		.components-form-token-field__suggestions-list {
-			border: 1px solid $gray-700;
-			border-radius: 4px;
-			margin-top: $gap-smaller;
-			max-height: 21em;
-
-			.components-form-token-field__suggestion {
-				color: $black;
-				border: 1px solid $gray-400;
-				border-radius: 4px;
-				margin: $gap-small;
-				padding: $gap-small;
-			}
-		}
-
-		.components-form-token-field__token,
-		.components-form-token-field__suggestion {
-			@include font-size(small);
-		}
-	}
-
-	.wc-block-components-product-rating {
-		margin-bottom: 0;
-	}
-}
-
-.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
-	padding: $gap-smallest 30px $gap-smallest $gap-smaller;
-
-	.components-form-token-field__token-text {
-		background-color: $white;
-		border: 1px solid;
-		border-right: 0;
-		border-radius: 25px 0 0 25px;
-		padding: em($gap-smallest) em($gap-smaller) em($gap-smallest) em($gap-small);
-		line-height: 22px;
-	}
-
-	> .components-form-token-field__input {
-		margin: em($gap-smallest) 0;
-	}
-
-	.components-button.components-form-token-field__remove-token {
-		background-color: $white;
-		border: 1px solid;
-		border-left: 0;
-		border-radius: 0 25px 25px 0;
-		padding: 1px em($gap-smallest) 0 0;
-
-		&.has-icon svg {
-			background-color: $gray-200;
-			border-radius: 25px;
-		}
-	}
-}
-
-.wc-block-stock-filter__actions {
-	align-items: center;
-	display: flex;
-	gap: $gap;
-	justify-content: flex-end;
-	margin-top: $gap;
-
-	// The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop.
-	button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button {
-		margin-left: 0;
-		margin-top: 0;
-		@include font-size(small);
-	}
-
-	.wc-block-stock-filter__button {
-		margin-top: em($gap-smaller);
-		padding: em($gap-smaller) em($gap);
-		@include font-size(small);
-	}
-}
-
-.editor-styles-wrapper .wc-block-stock-filter .wc-block-stock-filter__button {
-	margin-top: em($gap-smaller);
-	padding: em($gap-smaller) em($gap);
-	@include font-size(small);
 }

plugins/woocommerce-blocks/packages/interactivity-components/checkbox-list/style.scss

@@ -1,3 +1,33 @@
 //  Import styles we need to render the checkbox list and checkbox control.
 @import "../../../packages/components/checkbox-list/style";
 @import "../../../packages/components/checkbox-control/style";
+
+.wc-block-stock-filter-list {
+	margin: 0;
+
+	li {
+		label {
+			cursor: pointer;
+		}
+
+		input {
+			cursor: pointer;
+			display: inline-block;
+		}
+	}
+
+	.wc-block-components-checkbox-list {
+		margin: 0;
+
+		li {
+			label {
+				cursor: pointer;
+			}
+
+			input {
+				cursor: pointer;
+				display: inline-block;
+			}
+		}
+	}
+}

plugins/woocommerce/changelog/44073-dev-unify-class-naming-stock-filter

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+[Experimental] Unify class naming in new interactivity stock filter block.

plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterStockStatus.php

@@ -136,13 +136,8 @@ final class ProductFilterStockStatus extends AbstractBlock {
 		);
 
 		return sprintf(
-			'<div %1$s>
+			'<div %1$s>%2$s</div>',
-				%2$s
-				<div class="wc-block-stock-filter__controls">%3$s</div>
-				<div class="wc-block-stock-filter__actions"></div>
-			</div>',
 			$wrapper_attributes,
-			$content,
 			$this->get_stock_filter_html( $stock_status_counts, $attributes ),
 		);
 	}

plugins/woocommerce/src/Blocks/InteractivityComponents/CheckboxList.php

@@ -35,11 +35,11 @@ class CheckboxList {
 		<div data-wc-interactive='<?php echo esc_attr( $namespace ); ?>'>
 			<div data-wc-context='<?php echo esc_attr( wp_json_encode( $checkbox_list_context ) ); ?>' >
 			<div class="wc-block-stock-filter style-list">
-					<ul class="wc-block-checkbox-list wc-block-components-checkbox-list wc-block-stock-filter-list">
+					<ul class="wc-block-components-checkbox-list">
 						<?php foreach ( $items as $item ) { ?>
 							<?php $item['id'] = $item['id'] ?? uniqid( 'checkbox-' ); ?>
 							<li>
-								<div class="wc-block-components-checkbox wc-block-checkbox-list__checkbox">
+								<div class="wc-block-components-checkbox">
 									<label for="<?php echo esc_attr( $item['id'] ); ?>">
 										<input 
 											id="<?php echo esc_attr( $item['id'] ); ?>"