5th Feb 2022

Introducing Twenty Twenty-Two – first default block theme!

Wordpress

Written By, Shivangi Majithiya

Overview

The WordPress default theme twenty twenty-two with WordPress 5.9 was released on 25th January 2022. This release is adding a lot more features to the site editing experience. These features make editing easier so we don’t need to do any changes in files for structure and styling. So let’s take a look at the features.

What’s new in the theme?

Twenty Twenty-two has been designed for the most flexible, customizable first block default theme of WordPress. As a block theme, you can set your own block styling for each block. You can set your typography, customize the templates from the backend without do any changes in files code.

  • Folder structure
  • Modifications in Dashboard
  • Editor Beta
    • Templates
    • Templates Part
    • Customization for each block
  • Theme.json file & Global Style settings
  • Newly added blocks
    • Navigation Block
  • New block settings options
  • New Block patterns

Folder structure:

There are lots of modifications in the folder structure of the theme. In twenty twenty-one you saw archive.php, page.php & config files were there but, in Twenty Twenty-two we can see the new folder structure, there is one parts directory and templates directory with all the .html files instead of .php and the archive file is in the templates directory with the .html file extension.
In the inc folder, there is one patterns directory, in that we see many pattern files, also in 2021 theme in wp-includes > block in any block there is only block.json available but in 2022 for each block folder there are block’s own styling files is there.

new-wordpress-2022-theme-blogimage6

new-wordpress-2022-theme-blogimage1

New Modifications in Dashboard:

  1. In appearance, there are themes and editor options. Widgets, Customize, Menus, Background all have been removed in the new WordPress theme, and Editor (Beta) option is there, from there we can customize templates.
  2. In Tools, There are 2 options added, first one is Theme File editor which is a part of appearance in previous versions of the theme. and the second is the Plugin file editor.

Editor (Beta) :

Editor (Beta) is the main feature of this new theme, Now we can edit/add all the templates and template parts from here itself without doing any changes in the files.

2022 theme provides 11 templates and 4 templates parts also we can set typography, color, and layout for that particular individual template.

Also, you can clear customization by clicking (︙), and also from here, we can make our custom template from the right-top side “add new” button.

Same as templates we can customize our template parts also from template-part lists.

Customization for each block

We can style blocks from the editor also. There is 37 block in 2022 themes and we can customize all of them as per our requirement. Here is the short video.

Theme.json file :

To fully understand the 2022 theme, let’s take a glance at the new styling mechanism from the theme.json file structure.
Here is an initial file structure of the theme.json file.

Version describes specific version, which is now 2 in theme.json
The setting part describes global settings but we can individually block set from the backend editor as above mention.
In settings, there are global color, custom, spacing, typography. The layout is already set, we can change the color palette as we need in our project.

Newly added blocks :

In the new version, there are 8 new blocks available for full site editing in WordPress 5.9

  1. Navigation
  2. Template Part
  3. Header
  4. Footer
  5. Previous Post
  6. Next Post
  7. Term Description
  8. Post Author

Navigation block & its settings options

There are many options available like the following :
Justification
Fonts styles
Navigation selection
Menu items ranking
Add custom links & remove link
Add social icons listing

New options in block settings

Social Icons and Buttons :
More options are available for social links like styles, layout, and custom palettes for social media.
With previous versions of WordPress, it was a bit difficult to access controls of the parent and child blocks when working with social icons and particular icons of the list

Headings Controls :
The headings block now allows you to select a heading level from a vertical dropdown menu. You also have more typography, design, margin, and spacing options for your headings.

Link Preview :
Now link preview is also available for the links new version

Image duotone effect :
We can now give two-color effects to the image by using duotones also we can customize shadows & highlight color.

New Block patterns

As this theme comes with Immense control over every aspect, Here is one more ready-made feature of the new release, there are so many various block patterns are ready to use with the 9 categories including header, footer, text & buttons also.

Conclusion

I hope this article will help you to understand theme 2022 functionality in wordpress. Stay connected to know more topics like how to make custom template & how to add 2 different header from the backend itself without doing a single code in header file in this theme.

Written By,

Web Designer at Yudiz Solutions Ltd