Product Gallery > Pager block: Fix classname to adhere to the Coding Guidelines (https://github.com/woocommerce/woocommerce-blocks/pull/11035)

* Improve regex for directive parsing

* Fix classname when page is selected and active

* Remove unnecessary commit
This commit is contained in:
Alexandre Lara 2023-09-29 09:42:05 +02:00 committed by GitHub
parent 76752dfedb
commit 218e47f37a
2 changed files with 3 additions and 6 deletions

View File

@ -156,10 +156,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
cursor: pointer;
}
// Despite the guideline suggests that the state class should be named like "...--is-active"
// this is not possible due to limitations in the Interactivity API that does not allow
// to use the "--" (double dash) in the class name.
.wc-block-woocommerce-product-gallery-pager-item-is-active {
.wc-block-woocommerce-product-gallery__pager-item--is-active {
font-weight: bold;
color: $black;
}

View File

@ -111,7 +111,7 @@ class ProductGalleryPager extends AbstractBlock {
$pager_item = sprintf(
'<li class="wc-block-product-gallery-pager__item %2$s">%1$s</li>',
'dots' === $pager_display_mode ? $this->get_dot_icon( $is_first_pager_item ) : $key + 1,
$is_first_pager_item ? 'wc-block-woocommerce-product-gallery-pager-item-is-active' : ''
$is_first_pager_item ? 'wc-block-woocommerce-product-gallery__pager-item--is-active' : ''
);
$p = new \WP_HTML_Tag_Processor( $pager_item );
@ -129,7 +129,7 @@ class ProductGalleryPager extends AbstractBlock {
'actions.woocommerce.handleSelectImage'
);
$p->set_attribute(
'data-wc-class--wc-block-woocommerce-product-gallery-pager-item-is-active',
'data-wc-class--wc-block-woocommerce-product-gallery__pager-item--is-active',
'selectors.woocommerce.isSelected'
);
$html .= $p->get_updated_html();