The absolute positioning of the element does not work with Twenty Twenty-Four because the immediate parent is not a positioned element in this theme.
The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
For this reason we need to detect the new parent .wp-block-post.product and unset position values. We are sill leaving the absolute label to keep the button stacked over the image on hover.
Screenshots:
Detailed test instructions:
Switch to Twenty Twenty-Four
Hover over a produc
Pin button should be visible an clickable
Repeat with Storefront to confirm that there is no regression
Changes proposed in this Pull Request:
Closes #973 .
The absolute positioning of the element does not work with Twenty Twenty-Four because the immediate parent is not a positioned element in this theme.
From https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute
For this reason we need to detect the new parent
.wp-block-post.productand unset position values. We are sill leaving theabsolutelabel to keep the button stacked over the image on hover.Screenshots:
Detailed test instructions: