I’ve been using WordPress 6.0 with Twenty Twenty Two theme for a little while now. I had a particular vision of how I wanted my homepage to look and work. This is a breakdown of how I achieved the effect along with thoughts on the new Full Site Editing in WordPress 6. It’s been an adventure.

Full Site Editing

Overall, the full site editor has been pretty difficult to understand. It is not always logical or consistent. There are not good instructions and it seems random why some things work and others don’t. Block editing can make sense in a post, but when you are working on the site design, it can be very confusing.

The biggest problem is the inconsistency with block styling support. Just take something simple; I can not change the background through the UI. How is this possible? How can the background not be controlled through the interface. Sometimes, I have access to padding controls and sometimes I don’t. Why? I have no idea.

Additionally, there is not a way to add additional CSS. They can’t have it both ways. Either let me do it in the editor or let me make CSS custom. I had to add Twentig to allow me to add custom CSS.

The Homepage Effect

My goal was to have a two column results page with a cool hover effect. When the page is smaller, it should stack.

The first thing to understand is the query loop. It’s a weird block. It is sort of like a FOR EACH loop, but it doesn’t say what it is iterating on. It just looks at the children. Inside that I have the Post Template block. Again, weird. It doesn’t actually have anything in it. Finally, the new children has something useful.

The group is the card. It is the thing with the white background. I gave it an advanced setting of a custom CSS class called “glen-cover”. I could not style it enough through the UI so I had to add the following custom CSS.

.glen-cover {
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
  transition: all .3s ease-in-out;
  height: 100%;
}

.glen-cover:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -1px, 0px);
  transform: rotate(-1deg);
  background-color: #ffffffB3 ;
}

Mainly, this is just the fancy shadow and the hover tilt effect.

This Cover Block has a key feature which I needed, but it was quite difficult to understand. Ultimately, it’s a special kind of “Group” that can have an image as the background. It also has a specific feature called Stretch Link.

Why do I need this? Simple. I want the entire card to be clickable. Not just the H1. They don’t have this built in for some bizarre reason. It’s just simple UX. Make the entire post excerpt clickable.

They have a Post Excerpt block. It’s right there. Obviously, this would be an easy property.

The problem with the Stretch Link feature is that takes the very last link. Notice I have the tags and the date in there. If I use the Cover Block in the wrong way it makes the entire block clickable to the wrong place.

All of these things were learned purely through trial and error. A normal person would just give up with this nonsense. It’s powerful, but who is the designer? It doesn’t have to be purely intuitive, but it has to be easy to learn and remember. Right now, it is hard to learn.

Summary

This has the potential to be great. However, it needs a serious amount of work. Mainly, each block needs more properties. It surprises me that so many blocks do not have more already. The blog post also states that they are rethinking the annual theme cadence. I actually think it would be smart for them to just keep this theme and make it better and better rather than switch to an entirely new theme.

Anyway, I think the effect works for me for now.