You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
// 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: opacity0.5sease-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: all0.5sease-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%;
}
}
Discussed in #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:
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:
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
:assets/css/blocks/core/cover.scss
:patterns/hero-cards.php
:The text was updated successfully, but these errors were encountered: