Tutorial on building a "hover reveal" pattern

bph commented 10 months ago

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): ![image](https://github.com/WordPress/developer-blog-content/assets/1816309/27bd5695-cddd-4dce-879c-21df7a5042b7) 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 commented 8 months ago

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

colorful-tones commented 5 months ago

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

colorful-tones commented 4 months ago

I had a pretty solid demo on my local, but then logged in today and saw there were WP Updates, including three default themes. So, I updated and then I realized I had my custom CSS in the TT4's functions.php file, which was overwritten by the updates. 🤦 😢

colorful-tones commented 4 months ago

Never mind - I think I've managed to get some of it back. Crisis averted thanks to VS Code's Timeline view

colorful-tones commented 4 months ago

Here are general outline for post:

Create a block card-style layout with WP 6.6. Grid block ('Auto' layout type seems most reliable).
Register a block style with register_block_style() and use inline CSS to apply animation. Here is the CSS so far (may need a bit of cleanup)
Save as a pattern. Also, provide link to final published patter on Pattern Directory.

https://github.com/user-attachments/assets/2671822a-7d3b-40eb-91df-360b1945eb05

justintadlock commented 4 months ago

Overall, this looks like a good plan of action, @colorful-tones.

The one thing I'd suggest is using a block stylesheet over PHP for the CSS, which I feel like would be more realistic for real projects where you'd want syntax highlighting in your code editor: https://developer.wordpress.org/themes/features/block-stylesheets/

I wasn't sure if that was the direction you were going or just using PHP to quickly show the example code via Gist.

colorful-tones commented 4 months ago

This is ready for a first review. https://docs.google.com/document/d/1eVRZSE-d4l6akFNId6-ZzJW5nRvsVVwC-lTNl-Q4cws/edit?usp=sharing

ironnysh commented 4 months ago

Hey @colorful-tones, what a great tutorial! I'm gonna use this pattern the first chance I get :-)

I tested the code, and made what looks like a lot of suggestions, though it's mostly shifting things around.

Hope it all makes sense. Let me know if you have any questions.

First review done 🥳

colorful-tones commented 4 months ago

@ironnysh thanks for the very thorough review. I've applied most of your feedback. However, there are a few items I left open for discussion. Would you mind taking a peak at the remaining items please, and let me know if we're good to move forward to 2nd draft or if you desire further collaboration? the draft

colorful-tones commented 4 months ago

@bph this is ready for a 2nd review.

One thing I wanted to point out is that it might be good to consider having a code-style guide for writers/contributors to the Dev Blog. CSS nesting came up, and @ironnysh and I had a good discussion about whether we should nest our CSS examples. I also did some outreach on Twitter/X and a few different Slack spaces, and it seems clear that nesting CSS code examples have more potential for misleading and perhaps encouraging poor practices, and we should likely refrain from doing so in tutorials.

ironnysh commented 4 months ago

My pleasure, @colorful-tones! 💫 And thanks for mentioning the “code-style guide” discussion.

@bph, I thought we might add it to the next editorial meeting agenda, see how people feel about it.

bph commented 4 months ago

I am done with the 2nd review with minimal comments.

It's a great tutorial. Thank you, Damon.

bph commented 4 months ago

@colorful-tones Once you are through with the feedback on the reviews, here are the checklists. As a member of the repo, you should be able to check each line item off.

Pre-publishing checklist: (updated 1/29/2024)

[x] Post Title and subheaders in sentence case
[x] Are Category or Categories selected?
[x] Are Tags identifies?
[x] Is there an explicit Excerpt?
[x] Are all images files uploaded to the media library
[x] Do all images have an alt-text?
[x] For TOC us the Pattern under Developer Blog > Table of contents
[x] Assign or upload a featured image
[x] Props added? (See Guidelines)
[x] add copy for a social post as comment to this issue (example) 🙌 Publish! 📗

Post-publishing checklist

[x] add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
[x] Add the label "post to social" to the issue
[x] close the issue with a comment to link to the published post
[x] close the accompanying discussion with the link to the published post.

colorful-tones commented 4 months ago

Copy for social post:

Learn to use the Grid block and Cover block to create cards with a 'hover reveal' effect. https://developer.wordpress.org/news/2024/07/30/building-a-card-layout-with-a-hover-reveal-effect

colorful-tones commented 4 months ago

This is ready for pre-publish preview: https://developer.wordpress.org/news/?p=3934&preview=1&_ppp=0018834fc2

colorful-tones commented 4 months ago

Final published resource: https://developer.wordpress.org/news/2024/07/30/building-a-card-layout-with-a-hover-reveal-effect/

juanmaguitar commented 4 months ago

Social schedule on Tue, Aug 13, 2024

WordPress / developer-blog-content