Skip to content

fix (posts block): change hover selector for portfolio, portfolio-2, and image-card #3667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bfintal merged 1 commit into from
Feb 18, 2026
Merged

fix (posts block): change hover selector for portfolio, portfolio-2, and image-card #3667

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/block/posts/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,19 @@ Image.addStyles( blockStyles, {
}
return selector
},
hoverSelectorCallback: getAttribute => {
const className = getAttribute( 'className' )
const blockStyle = getBlockStyle( variations, className )

if ( [ 'portfolio', 'portfolio-2' ].includes( blockStyle?.name ) ) {
return `${ itemSelector }:hover .stk-img-wrapper img`
}

if ( [ 'image-card' ].includes( blockStyle?.name ) ) {
return `.stk-block-posts__image-card-container:hover img`
}
return '.stk-img-wrapper:hover img'
},
Comment on lines +310 to +322

@coderabbitai coderabbitai Bot Dec 16, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# Read the full context around the hoverSelectorCallback
sed -n '265,330p' src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 2494

🏁 Script executed:

# Check the dependencies array and understand the pattern
sed -n '272,280p' src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 439

🏁 Script executed:

# Look at the other hover callbacks mentioned (lines 127-129, 145-147)
sed -n '120,160p' src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 1540

🏁 Script executed:

# Search for how className is used in other callbacks in Image.addStyles
sed -n '273,332p' src/block/posts/style.js | head -60

Repository: gambitph/Stackable

Length of output: 2228

🏁 Script executed:

# Check the variations.js file for portfolio, portfolio-2, and image-card definitions
find . -name "variations.js" -path "*/block/posts/*" | head -5

Repository: gambitph/Stackable

Length of output: 93

🏁 Script executed:

# Check the variations.js file for portfolio, portfolio-2, and image-card
cat src/block/posts/variations.js | grep -A 10 "portfolio\|image-card" | head -50

Repository: gambitph/Stackable

Length of output: 1635

🏁 Script executed:

# Look for imageHoverStateInContainer usage in Image callbacks
rg -n "imageHoverStateInContainer" src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 139

🏁 Script executed:

# Check how dependencies are declared in other Image.addStyles blocks in the codebase
rg -B5 "Image.addStyles" src/block/posts/style.js | head -30

Repository: gambitph/Stackable

Length of output: 231

🏁 Script executed:

# Understand the itemSelector variable definition
sed -n '25,35p' src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 383

🏁 Script executed:

# Check if imageHoverStateInContainer is used anywhere in Image callbacks
rg -n "getAttribute.*imageHoverStateInContainer" src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 44

🏁 Script executed:

# Look at the full Image.addStyles block to see if imageHoverStateInContainer is used elsewhere
sed -n '269,345p' src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 2745

🏁 Script executed:

# Check how the hover pattern is typically implemented elsewhere in the file
rg -B2 -A2 "hoverStateInContainer" src/block/posts/style.js | head -30

Repository: gambitph/Stackable

Length of output: 796

🏁 Script executed:

# Verify that className attribute is accessible via getAttribute for all Image callbacks
rg -n "getAttribute.*className" src/block/posts/style.js | wc -l

Repository: gambitph/Stackable

Length of output: 63

🏁 Script executed:

# Check if there are any tests for this hoverSelectorCallback
find . -name "*.test.js" -o -name "*.spec.js" | xargs grep -l "hoverSelectorCallback\|portfolio\|image-card" 2>/dev/null | head -5

Repository: gambitph/Stackable

Length of output: 44

🏁 Script executed:

# Look for other Image.addStyles blocks in the codebase to see if this pattern is consistent
rg -B2 "Image.addStyles" --type=js | head -40

Repository: gambitph/Stackable

Length of output: 679

🏁 Script executed:

# Check if className should be in dependencies - look for how other callbacks handle it
rg -B3 "dependencies.*className" --type=js | head -20

Repository: gambitph/Stackable

Length of output: 1039

🏁 Script executed:

# Check the Image.addStyles in other blocks to see how they handle dependencies with callbacks
cat src/block/card/style.js | grep -A 30 "Image.addStyles"

Repository: gambitph/Stackable

Length of output: 875

🏁 Script executed:

# Search for how imageHoverStateInContainer is actually used - maybe it's in props or not used at all
rg "imageHoverStateInContainer" src/block/posts/ --type=js

Repository: gambitph/Stackable

Length of output: 284

🏁 Script executed:

# Check the full Image.addStyles block to see if imageHoverStateInContainer is truly never used
sed -n '269,350p' src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 3037

🏁 Script executed:

# Check if className should be in dependencies - examine the line 294 case more closely
sed -n '290,310p' src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 726

🏁 Script executed:

# Look at how the hoverSelectorCallback for Typography uses hoverStateInContainer
sed -n '127,160p' src/block/posts/style.js | grep -A 15 "hoverSelectorCallback"

Repository: gambitph/Stackable

Length of output: 1188

🏁 Script executed:

# Verify if imageHoverStateInContainer is documented or used elsewhere
rg -A3 -B3 "imageHoverStateInContainer" src/block/posts/schema.js

Repository: gambitph/Stackable

Length of output: 168

🏁 Script executed:

# Double-check if there are any CSS or template files that show the HTML structure for these variations
find . -path "*/posts/*" \( -name "*.scss" -o -name "*.css" -o -name "*.php" \) | head -10

Repository: gambitph/Stackable

Length of output: 148

🏁 Script executed:

# Look for where stk-block-posts__image-card-container is defined/used
rg "stk-block-posts__image-card-container" --type=scss --type=css --type=php --type=js | head -10

Repository: gambitph/Stackable

Length of output: 90

🏁 Script executed:

# Search for stk-block-posts__image-card-container in all files
rg "stk-block-posts__image-card-container" --type-list | head -20

Repository: gambitph/Stackable

Length of output: 451

🏁 Script executed:

# Search without type restrictions
rg "stk-block-posts__image-card-container"

Repository: gambitph/Stackable

Length of output: 147

🏁 Script executed:

# Check the index.php template to see the HTML structure
cat src/block/posts/index.php | head -100

Repository: gambitph/Stackable

Length of output: 3691

🏁 Script executed:

# Look for stk-img-wrapper in the template
rg "stk-img-wrapper" src/block/posts/

Repository: gambitph/Stackable

Length of output: 551

🏁 Script executed:

# Check if className should be in dependencies by looking for the pattern elsewhere
rg "dependencies.*\[.*className" src/block/posts/style.js

Repository: gambitph/Stackable

Length of output: 111

🏁 Script executed:

# Look at the full context to understand how imageHoverStateInContainer should be used
sed -n '120,175p' src/block/posts/style.js | grep -A 10 "hoverSelectorCallback"

Repository: gambitph/Stackable

Length of output: 788

Add className to dependencies and check imageHoverStateInContainer for consistency.

The new hoverSelectorCallback uses getAttribute( 'className' ) but this attribute is not listed in the dependencies array on line 272. Other callbacks in this same Image.addStyles block also use className, and there is precedent in this file (line 294) showing className should be declared in dependencies when used: dependencies: [ 'imageWidthUnit', 'className' ].

Additionally, imageHoverStateInContainer is already in the dependencies but the callback does not check it. Other hover callbacks in this file (lines 127-129, 145-147) use a similar pattern to conditionally choose between container-level hover (:hover on container) and element-level hover (:hover on element). For consistency, consider whether imageHoverStateInContainer should influence the selector choice, or if these specific block styles intentionally override that setting.

🤖 Prompt for AI Agents 
In src/block/posts/style.js around lines 310 to 322, the hoverSelectorCallback
reads getAttribute('className') but className is not listed in the
Image.addStyles dependencies (near line 272) and the callback also ignores
imageHoverStateInContainer which is declared as a dependency; add 'className' to
the dependencies array and update hoverSelectorCallback to read
imageHoverStateInContainer from getAttribute and branch the returned selector
the same way other hover callbacks do (use container-level :hover when
imageHoverStateInContainer is truthy, otherwise use element-level :hover),
preserving the existing special-case selectors for the portfolio/portfolio-2 and
image-card block styles.

widthStyleRuleCallback: getAttribute => {
const className = getAttribute( 'className' )
const blockStyle = getBlockStyle( variations, className )
Expand Down
Loading