Skip to content
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

Jump to bottom

Fix cover hover reveal style on touch devices #8376

Merged
merged 3 commits into from
Nov 7, 2024
+104 −1
Merged

Fix cover hover reveal style on touch devices #8376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d98036f
Fix warning if index does not exist
renatho Nov 6, 2024
4829723
Add script to add the in-viewport class
renatho Nov 6, 2024
137e5c1
Update styles to support in-viewport class
renatho Nov 6, 2024
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
22 changes: 22 additions & 0 deletions dalston/block-extends/extend-cover-block-script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
document.addEventListener( 'DOMContentLoaded', function () {
// Check if the device supports hover.
// In this case, the effect is through CSS `:hover` selectors.
if ( window.matchMedia( '(hover: hover)' ).matches ) {
return;
}

const observer = new IntersectionObserver( ( entries ) => {
entries.forEach( entry => {
if ( entry.isIntersecting ) {
entry.target.classList.add( 'dalston-in-viewport' );
} else {
entry.target.classList.remove( 'dalston-in-viewport' );
}
});
}, { threshold: 0.6 } ); // Trigger when 60% of the element is visible

// Observe the elements with the hover reveal style.
document.querySelectorAll( '.is-style-hover-reveal' ).forEach( element => {
observer.observe( element );
} );
} );
69 changes: 69 additions & 0 deletions dalston/block-extends/extend-cover-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,58 @@
opacity: 0;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-10:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-10:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-10:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:not(.has-background-gradient):hover:before {
opacity: .1;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-20:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-20:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-20:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:not(.has-background-gradient):hover:before {
opacity: .2;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-30:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-30:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-30:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:not(.has-background-gradient):hover:before {
opacity: .3;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-40:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-40:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-40:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:not(.has-background-gradient):hover:before {
opacity: .4;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-50:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-50:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim .wp-block-cover__gradient-background:hover,
Expand All @@ -48,34 +72,54 @@
opacity: .5;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-60:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-60:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-60:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:not(.has-background-gradient):hover:before {
opacity: .6;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-70:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-70:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-70:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:not(.has-background-gradient):hover:before {
opacity: .7;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-80:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-80:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-80:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:not(.has-background-gradient):hover:before {
opacity: .8;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-90:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-90:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-90:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:not(.has-background-gradient):hover:before {
opacity: .9;
}

#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,
#editor .wp-block-cover-image.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-100:not(.has-background-gradient):before,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,
#editor .wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-100:not(.has-background-gradient):before,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background:hover,
#editor .wp-block-cover-image.is-style-hover-reveal.has-background-dim.has-background-dim-100:not(.has-background-gradient):hover:before,
#editor .wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background:hover,
Expand Down Expand Up @@ -107,6 +151,7 @@
transition: opacity 0.2s ease-in-out;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport .wp-block-cover__inner-container,
.wp-block-cover.is-style-hover-reveal:hover .wp-block-cover__inner-container {
opacity: 1;
}
Expand All @@ -122,58 +167,82 @@
transition: opacity 0.2s ease-in-out;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-0:before,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

As described in the issue, the dim styles are not working and I created an issue to check this.

Anyway, I added .dalston-in-viewport to all the :hover styles to keep the styles consistent. And when that issue is fixed, it should work.

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-0.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-0.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: 0;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-10:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-10.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-10.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .1;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-20:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-20.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-20.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .2;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-30:before,
.wp-block-cover.is-style-hover-revea.dalston-in-viewport.has-background-dim.has-background-dim-30.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-30.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .3;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-40:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-40.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-40.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .4;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-50:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-50.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-gradient:hover .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-50.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .5;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-60:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-60.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-60.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .6;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-70:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-70.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-70.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .7;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-80:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-80.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-80.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .8;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-90:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-90.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-90.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: .9;
}

.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-100:before,
.wp-block-cover.is-style-hover-reveal.dalston-in-viewport.has-background-dim.has-background-dim-100.has-background-gradient .wp-block-cover__gradient-background,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100:hover:before,
.wp-block-cover.is-style-hover-reveal.has-background-dim.has-background-dim-100.has-background-gradient:hover .wp-block-cover__gradient-background {
opacity: 1;
Expand Down
Loading
Loading