WordPress Twenty Twenty Two theme review

I switched to the WordPress Twenty Twenty Two theme this week and have been working hard to get it functional. I waited until Twentig was compatible with it. To be honest, I could not have made it work without Twentig. This is by far, the most ambitious upgrade of WordPress that I have ever seen and it is not for the feignt of heart.

You might be thinking, “Why are you doing this? It’s clearly not ready for prime time!” And you would be right. However, I am addicted to beta software. I’ve been a beta tester of almost every piece of software I have ever used. Anyway, here is my review after a week of trying to make it work.

Full site editing

The biggest change is the full site editing. It is incredibly intimidating upon first use. There is a ton of missing functionality and learning to use it has a steep learning curve.

Full Site Editor

One thing that I didn’t understand was how important that tree on the left is. Without it, the page is really difficult to understand. The tree helps organize the blocks so you know what you are editing.

Show nav

It took me several days of trial and error to discover how to edit. For some reason, they have 3 different headers in the template. I still can’t tell you why there are three or what they are for.

Limited options for styling

The out of the box styling options are very limited or just very hard to discover. It’s not like I wanted a full Divi experience with all kinds of cool effects. My main styling needs are:

  • Header
    • Pin header to the top
    • Manage the menus
    • Style the header with color and a shadow
    • Make sure search works
  • Home page posts
    • Show as cards in two columns
    • Style the cards a little (shadow, corners, etc)
    • Make a cool hover effect
    • Make the whole card clickable
      Make titles a nicer Google Font
  • Footer Calendar
    • Put a post calendar in there that doesn’t look dumb
    • Mark today
    • Mark days with posts
  • Other pages
    • Follow the basic style of the home

I had problems with almost every bullet point. This theme didn’t allow me to have custom CSS, which is one of the features of Twentig. I ended up with pretty extensive file.

Show CSS
@import url('https://fonts.googleapis.com/css?family=Special+Elite&display=swap');

body { 
  background: url("/wp-content/uploads/2021/01/wallpaper-min.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

H1,H2,H3,H4,H5,H6,.wp-block-site-title {font-family: "Special Elite" !important}

h3.comment-reply-title,
.wp-block-post-comments{
	margin-top: 0px;
}

h1 {
	margin-bottom: 0px !important
}

.wp-block-post
{
	background: white;
  border-radius: 8px;
	padding: 1em;
	border: 1px solid #ccc;
				box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);}

.wp-block-post:hover {transform:rotate(-3deg);
transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);  background-color: #F7FBF8;
}

header a {
	 text-shadow: 0px 0px 8px #00000050;

}


.MainHeader    {
	width: 100%;
  z-index:999;
  position:fixed;
}


#wp-calendar * {
	border: 0px;
}

#wp-calendar thead th {
	font-size: 90%;
	font-weight: bold;
	padding: 0.25rem;
	background: rgba(192,205,205,0.5);
	text-transform: uppercase;
	text-align: center;
}

#wp-calendar tbody td {
	position: relative;
	padding: 0.25rem;
	text-align: center;
	background: #ffffff;
}

#wp-calendar tbody td.pad {
	opacity: 0.7;
}

#wp-calendar tbody td#today {
	font-weight: bold;
}

#wp-calendar tbody td#today:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 10px solid #999;
	border-left: 10px solid transparent;
}

#wp-calendar tbody td a {
	display: block;
	background: #fec971;
	border-radius: 20px;
	padding: 0px 8px
}

#wp-calendar tbody td a:hover {
	background: #3299bb;
	color: #fff;
}


#wp-calendar a{
	background-color: #d50139;
	color:white;
	width: 100%;
	position: relative;
	float:left;
	border-radius: 8px;
	text-decoration:none
}

#wp-calendar a:hover{
	filter: brightness(120%);
	transition: filter 0.15s linear;
}

#wp-calendar caption,
.wp-calendar-nav a{
	color:white;
	font-weight:bold
}


blockquote {
	background-color: rgba(255,255,255,0.5);
	border-radius: 10px;
	padding: 40px 20px 20px 20px !important;
			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	 border: 1px solid #ccc !important;
}

blockquote * {
	
	font-family: "Special Elite" !important;
	font-weight: 500;
	padding: 0px 10px 0px 10px;
}


p.has-background,
.wp-block-image img,
#site-content .hentry,
.footer-widgets-outer-wrapper
{
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	border-radius: 8px
}

.wp-block-embed-spotify iframe {max-height:350px}

div.nextprev .wp-block-column {
	border-radius: 4px;
	margin-top: 12px;
	background-color: #fec971;
	font-family: "Special Elite"
}

.has-background, .wp-block-image img, #site-content .hentry, .footer-widgets-outer-wrapper {
   border: 1px solid #B0C1CA; 
	background-color: #ffffff80
}
.powerPointEmbed iframe {width: 600px}

Blocks

The whole zeitgeist of the system is blocks. As I write this, you can see the blocks on the left (if you open the menu).

Post editor

The entire theme works this way. Everything is a block. I am discovering a new world of block plugins. Historically, I think of a plugin as something that works across the entire application, but block plugins are smaller and more targeted. The CSS accordion above is a block plugin. I tried a few, but managing them is a little annoying. They all show up in the plugins page.

There are so many kinds of blocks. This is another intimidating thing. It’s very easy to install block plugins using this search:

How easy it is to install new blocks

However, getting rid of them is much harder. I want there to be a playground where I can install a block and then decide to uninstall it quickly. I just tried a few and I had to go to plugins and deactivate and then uninstall each one. All I want is a solid collapsible section for the Show CSS. Some of the plugins seemed way too complicated for my needs. The one above is simple, but I wish it animated. I left a ticket in the plugin author’s support forum.

Will it get better?

I’m sure that it will. WordPress is one of the most important pieces of software in the world powering a massive number of websites. They can’t just leave it like this. This upgrade leaves me with many questions:

  • Should I give up using the Twenty Twenty X themes and just use a paid one like Divi or other?
  • Should I play with lots of plugins and find ones I like or just keep my plugin directory clean and simple?
  • Will they allow me to get rid of my CSS and have built in options for design specifics?

Top 10 feature suggestions

These are suggestions for WordPress to support out of the box, in order of priority to me:

  1. Better guidance for intermediate users
    1. Why are there 3 headers?
    2. Which things should you edit?
    3. Which blocks do what?
    4. What are patterns for?
  2. Custom CSS for site
  3. Allow any Google font to be used for headers and support that in the post/page editor
  4. Allow pinning of the top header
  5. Make grid layout an option
  6. Background styling
  7. Shadow and border styling on all objects
  8. A collapsible (show/hide) block
  9. A nicely styled calendar block
  10. Advanced hover effects

I don’t think these are terribly hard. Most of them are just some CSS options. This is an influential and important upgrade of WordPress. I believe it will improve over time.

Comments

One response to “WordPress Twenty Twenty Two theme review”

  1. […] 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 […]

Whatya think?

%d bloggers like this: