Tutorial on building a "hover reveal" pattern

[bph]

Discussed in https://github.com/WordPress/developer-blog-content/discussions/203

^{Originally posted by **justintadlock** January 11, 2024} There's been a lot of discussion around building a specific layout with the block editor. Specifically, something like this (shown in a hover card style):  This is a pretty popular web design pattern, and it'd be great to show how it's possible with the block editor and can be shipped in a theme as a pattern. Some of the community discussion and responses: - https://www.youtube.com/watch?v=g8YxdSIq-uk - https://twitter.com/pootlepress/status/1737444341910479103 - https://www.briancoords.com/the-block-editor-is-still-not-a-page-builder/ - https://twitter.com/justintadlock/status/1745212928259690782 Responses to my tweet (last link above) have been overwhelmingly positive and ask for a tutorial. Thus, this proposal. ## The Proposal Write a tutorial that covers a lot of ground that is geared toward theme creators. This would be: - How to build this layout in the WordPress editor (no custom CSS or plugins necessary!). - How to ship this layout in a block pattern. - How to make this pattern even more awesome with custom block styles: - Add a "hover reveal" block style for the Cover block. - Add a "flip card" block style for the Cover block (haven't tested this yet but am pretty sure it'll work). - Add a "grid auto" option for improved Columns block responsiveness. ## The Code I've done some preliminary code work and am just backing it up here. _Note: some of the below will have classes and such from my personal theme, so it'll need to be translated to TT4._ **`assets/css/blocks/core/columns.scss`:** ```scss // Grid style. .wp-block-columns-is-layout-flex.is-style-grid-auto { display: grid !important; grid-template-columns: repeat( 1, 1fr ); @media ( min-width: 40rem ) { grid-template-columns: repeat( 2, 1fr ); } @media ( min-width: 64rem ) { &:has( > :where( .wp-block-column:nth-child( 5 ), .wp-block-column:nth-child( 6 ) ) ) { grid-template-columns: repeat( 3, 1fr ); } } @media ( min-width: 80rem ) { grid-auto-columns: minmax( 0, 1fr ); grid-auto-flow: column; } } ``` **`assets/css/blocks/core/cover.scss`:** ```scss // Hover reveal block style. .wp-block-cover.is-style-hover-reveal { position: relative; border-radius: var( --wp--custom--defaults--border-radius ); box-shadow: var( --wp--custom--defaults--shadow ); // The cover background (used for the overlay), needs to have its // opacity set to `1` so that we have a background when the image is // hidden for the reveal. .wp-block-cover__background { transition: opacity 0.5s ease-in-out; } // Only set the opacity if we're not hovered/focused. &:where( :not( :hover, :focus-within ) ) .wp-block-cover__background { opacity: 1; } // By default, we zero out the background image's opacity. Then, we // reveal it on hover/focus. .wp-block-cover__image-background { opacity: 0; transition: all 0.5s ease-in-out; } &:hover, &:focus-within { .wp-block-cover__image-background { opacity: 1; transform: scale( 1.3 ); } } // Remove text decoration for links. a { text-decoration: none; outline: none; } // This will technically take all links and position them over the // entire Cover block container. However, the last link will win out. // We're also making sure that we don't target this when in the editor. &:where( :not( [class*=block-editor] ) ) a:after { content: ""; z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } } ``` **`patterns/hero-cards.php`:** ```php

```

[colorful-tones]

Just wanted to say that I think this will be super useful. 🚀

[colorful-tones]

I'm going to chip away at this in the coming weeks. Expect progress reports. 🕺