Twenty Nineteen Theme Review

If you have updated to latest WordPress version (and you should have done that already), you probably have noticed there is a new default WordPress Theme: Twenty Nineteen.

I have played with the theme, reviewed its code and here you can check my thoughts about it and things that made a huge impression on me:

Minimalist Approach

Let’s start with tags defined in style.css, they are: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

There is no Sidebar. The only widget area available in theme is into the Footer. So, theme allows you to create very simple looking websites at first impression 🙂

Based on

The theme is based on Underscores and Gutenberg-Starter-Theme. Also, they style is built with SASS.

Gutenberg Support

The real power of the theme is the support of the new WP Editor Gutenberg. It allows you to build your website pages through the editor by inserting different types of blocks (paragraphs, headings, columns, and much more) instead of relying on themes, plugins, etc.

There is a new declaration of Gutenberg blocks support (added into the ‘after_setup_theme’ hook):

// Add support for Block Styles.
add_theme_support( 'wp-block-styles' );

and tons of HTML code in style.css and editor-style.css files supporting the WP blocks such as:

.entry .entry-content .wp-block-pullquote {
  border-color: transparent;
  border-width: 2px;
  padding: 1rem;
}

.entry .entry-content .wp-block-pullquote blockquote {
  color: #111;
  border: none;
  margin-top: calc(4 * 1rem);
  margin-bottom: calc(4.33 * 1rem);
  margin-right: 0;
  padding-left: 0;
}

.entry .entry-content .wp-block-pullquote p {
  font-size: 1.6875em;
  font-style: italic;
  line-height: 1.3;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

.entry .entry-content .wp-block-pullquote p em {
  font-style: normal;
}

@media only screen and (min-width: 768px) {
  .entry .entry-content .wp-block-pullquote p {
    font-size: 2.25em;
  }
}

.entry .entry-content .wp-block-pullquote cite {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  text-transform: none;
  color: #767676;
  /*
			 * This requires a rem-based font size calculation instead of our normal em-based one,
			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
			 */
  font-size: calc(1rem / (1.25 * 1.125));
}

In Twenty Nineteen the Gutenberg is not just supported by the theme, it is used to build the entire site with it.

And rest of the theme (if we can separate the Gutenberg related functionality) covers:

Header (with Thumbnails)

The Thumbnail (Feature) image is set as header image (covered with additional colors for better reading of the text).

Footer (Widgets)

Conclusion

Well, If I wasn’t a WordPress Theme developer and I was simply a WP user wanting to setup a website I probably would use the Twenty Nineteen theme for my project 🙂

The Gutenberg is still on early stage of its life-cycle but my prediction is that it will be a game changer: it probably will kill Plugins for building pages and will change the WordPress themes as well i.e. the user will rely more on WP core functionality to build their websites instead of themes customizations and features.