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:
parent
76752dfedb
commit
218e47f37a
|
@ -156,10 +156,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Despite the guideline suggests that the state class should be named like "...--is-active"
|
.wc-block-woocommerce-product-gallery__pager-item--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 {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,7 +111,7 @@ class ProductGalleryPager extends AbstractBlock {
|
||||||
$pager_item = sprintf(
|
$pager_item = sprintf(
|
||||||
'<li class="wc-block-product-gallery-pager__item %2$s">%1$s</li>',
|
'<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,
|
'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 );
|
$p = new \WP_HTML_Tag_Processor( $pager_item );
|
||||||
|
|
||||||
|
@ -129,7 +129,7 @@ class ProductGalleryPager extends AbstractBlock {
|
||||||
'actions.woocommerce.handleSelectImage'
|
'actions.woocommerce.handleSelectImage'
|
||||||
);
|
);
|
||||||
$p->set_attribute(
|
$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'
|
'selectors.woocommerce.isSelected'
|
||||||
);
|
);
|
||||||
$html .= $p->get_updated_html();
|
$html .= $p->get_updated_html();
|
||||||
|
|
Loading…
Reference in New Issue