WordPress 5.0 is just around the corner, and many of us feel excited and worried at the same time. Gutenberg brings a great change in how we use WordPress, and there is definitely some concern regarding what will happen to our websites if we should update our installations without previously testing it. But don’t worry, we have a post about how to disable the Gutenberg WordPress Editor (even if it’s just temporarily) in order to prevent unsupported themes and plugins from breaking our websites.
You may be surprised to know that we are already using WordPress 5.0. Actually, we are! As Matt stated on Make WordPress blog:
If we keep the 5.0 release to strictly 4.9.8 + Gutenberg, we will have a release that is both major and a non-event in terms of new code. It’s all battle-tested. In some ways, 5.0 is already de facto out in the wild, with some forward-looking hosts already installing and activating Gutenberg for new installs.
This means that we already have WordPress 5.0 running on our servers: it’s just WordPress 4.9.8, with Gutenberg in the core. Actually, that’s not all, because WordPress 5.0 comes with an additional entry, which is the brand new Twenty Nineteen default theme.
So let’s dive in and see what’s new.
- About Gutenberg and Twenty Nineteen
- Installing Twenty Nineteen
- The Look and Feel of Twenty Nineteen
- Theming for Gutenberg: A Developer’s Approach
About Gutenberg and Twenty Nineteen
Some of you may dislike Gutenberg. Moreover, the debate over the new editor is far from being over, but consider the declared scope of Gutenberg:
These custom blocks change how users, developers, and hosts interact with WordPress for building rich web content easier and more intuitive, democratizing publishing and work for everyone, regardless of technical ability.
This is what Gutenberg aims to, and Twenty Nineteen brings things a step forward, being built with Gutenberg and for Gutenberg. It’s a minimal, typography-driven blogging theme with a single-column layout, and can be used to build a wide range of websites, going from personal blogs to small business websites.
Writing about Twenty Nineteen mostly means we are writing about Gutenberg. In Twenty Nineteen Gutenberg allows users not only to create rich content but even to build their entire websites in the editor. According to Allan Cole on Make WordPress blog,
Gutenberg grants users an unprecedented level of freedom to customize their site’s layout and design. In order to fully achieve their vision, users will need a new generation of flexible themes, built to take advantage of the creative freedom that Gutenberg offers.
With that in mind, WordPress 5.0 will launch with a brand new default theme: Twenty Nineteen
In the Twenty Nineteen theme, Gutenberg is more than a content builder, it’s a site builder, and WordPress users will be allowed to build their entire websites taking advantage of blocks. And if Gutenberg isn’t your thing yet, most of the popular page builder plugins are also adding support for Gutenberg.
(Suggested reading: An Introduction to the Twenty Twenty Theme)
Installing Twenty Nineteen
Twenty Nineteen should follow the release plan of the new WordPress major release. However, WordPress 5.0 should be released on November 19th, and it’s possible that a working version of Twenty Nineteen won’t be ready by that date. See all possible release dates for WordPress 5.0. Anyway, the theme is available for download on Github, and will stay there until it’s merged into core.
Twenty Nineteen is based on both the _s and gutenberg-starter-theme and comes with Sass inside. Once you’ve got the .zip package, extract the theme and upload/move the theme folder onto the /wp-content/themes directory of your development installation. You can also upload it from your WordPress dashboard.
Kinsta clients can install it on their staging environments. If you’re not with Kinsta, you can still install it on your local machine.
The Look and Feel of Twenty Nineteen
The single-column layout emphasizes the content and best fits to full and wide width blocks. The theme now supports a footer sidebar and comes with three navigation menus: the Primary menu and the Social Links Menu, both positioned in the page header, and the Footer Menu, located in the footer.
The blog page looks like a regular blog page with featured images enabled. Single posts and pages show best the potential of the current version of Gutenberg as site builder.
Since it is totally based on Gutenberg, Twenty Nineteen’s features mostly depend on Gutenberg’s development cycle and on the availability of blocks. We can add widget blocks, shortcode blocks, galleries, HTML code, and so on. However, all these blocks are far from covering all our needs. But luckily we have several plugins that allow us to add new blocks to Gutenberg, like Atomic Blocks, Advanced Gutenberg and Stackable. There are even projects like the Gutenberg Cloud which have sprouted up.
If you’d think that the theme looks too minimal, consider that Twenty Nineteen is still a work in progress. We’re not sure whether it will be merged into the core by the time WordPress 5.0 will be released, and we can expect several additions and bug resolutions in the next future. Moreover, there are a lot of issues that are still unresolved, and features that need to be implemented. Now Twenty Nineteen supports submenus but not Custom Headers and Video Headers. Anyway, we may expect additional features to be added in a reasonable lapse of time.
If you’re interested in the state of the theme, check out the full list of issues on Github.
Theming for Gutenberg: A Developer’s Approach
Out of the box, Gutenberg provides basic support for block styles in themes, and theme developers are free to override Gutenberg’s default styles with their custom styles. But developers can also completely omit custom styles and decide to rely exclusively on Gutenberg to style blocks on the front of the site.
Having an editor that looks and feel like the resulting content improves the writing experience of the author, and allows everybody to feel comfortable with the UI.
Anyway, some Gutenberg’s styles and presentational features require themes to expressly add support for them, and this can be done by calling add_theme_support in the functions.php file when the after_setup_theme action is triggered. Here is an example of a feature implementation:
function mytheme_setup() {
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Below is listed a selection of these Gutenberg features, some of which are also supported by Twenty Nineteen. You’ll find the full list of features in Gutenberg Handbook.
Adding Support for Gutenberg Block Presentation Styles
One of the goals of the team behind Gutenberg was to build a flexible system for styling within themes, and to get as close as possible “to visual parity between front-end and the editor”. The purpose is to give the user an accurate preview of the content as it will look like on the front-site.
To achieve that goal, the team had to separate presentational styles and structural styles. By default, presentational styles are not loaded on the front-end, in order to avoid to affect the site appearance. Anyway, new themes can take advantage of Gutenberg’s presentational styles by simply enabling them with the following registration (see the Handbook for further details):
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );As you may expect, Twenty Nineteen supports Gutenberg’s block styles. The single post page looks on the front-end much like the editing post page, with the sole difference of the featured image, which displays on a desktop as a background image covering the whole viewport. The image below shows Gutenberg in action on the back-end.
And here is the same post on the front site.
Wide and Full Alignments
Gutenberg also provides two additional alignment options: wide and full-width alignment, but you can select Wide or Full-width alignment only if your theme supports them. If it does, Gutenberg shows two additional alignment icons.
The image below shows Align center, Wide width and Full-width images in Twenty Nineteen.
Theme developers can add support for Wide and Full-width alignments by enabling them in the functions file with a single statement:
// Add support for full and wide align images
add_theme_support( 'align-wide' );Once we’ve added support for Wide and Full-width alignments, we should provide the CSS declarations for two additional CSS classes: alignfull and alignwide. Twenty Nineteen provides the following styles:
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Note: Be careful when using this option, because it may cause issues if you switch theme (read more on this topic on Github).
Editor Style
The Editor Style is a feature introduced with WordPress 3.0 allowing theme developers to add custom styles to the TinyMCE editor. Gutenberg also supports this feature, but it works differently from the Classic Editor, which loads styles directly into the iframe of the editor. Gutenberg adds specific CSS selectors, as it doesn’t use an iframe.
We can add support for editor styles as follows:
// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );This feature is also supported by Twenty Nineteen. You can dive deeper into this topic in Editor Style in Gutenberg.
Block Color Palettes
Gutenberg provides a generic color selector in the editor’s Color Settings panel. Theme developers can enhance this tool by adding custom color palettes allowing users to quickly pick up the right color for block background and text. This is a two-step process:
First, we have to provide an array of colors:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Then we have to declare the corresponding styles in the theme’s stylesheet:
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}Class names start with has-, followed by the color slug in kebab case, and ending with the context, which can be color or background-color. Currently, Twenty Nineteen doesn’t support block color palettes, but we can easily change this with a child theme.
Instead, if you’d want to disable a custom color palette, you have to add the following line to your theme’s or child theme’s functions file:
add_theme_support( 'disable-custom-colors' );Block Font Sizes
A theme can also override Gutenberg’s default set of font sizes. Here is an example of the code you should add to the functions file:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );The new font sizes will be added to the font size picker in Gutenberg’s Text Settings.
Following, we have to declare the corresponding styles in the theme’s stylesheet. The class name should begin with has-, followed by the the font size name in kebab case, and ending with -font-size.
.has-huge-font-size {
font-size: 56px;
}Twenty Nineteen does not provide specific font sizes and relies on Gutenberg’s defaults.
Note: Remember that, in order to make all this code work, you should hook it through the after_setup_theme action.
Summary
Twenty Nineteen could work well for personal blogs, and you could think of it more like a white canvas than a fully functional WordPress theme. A so minimal approach could be a bit limiting when it comes to building websites for business and e-commerce, but don’t worry: new features should be implemented shortly, and we could see a more powerful version of Twenty Nineteen soon.
In the meanwhile, you could also have a look at some themes that are already supporting Gutenberg. Atomic Blocks, GeneratePress, Gutentype, and Divi to name a few, but many others should come soon. With WordPress 5.0 approaching so fast, supporting Gutenberg is not an option, and theme developers should embrace the new WordPress editor as soon as possible to keep ahead of the competition.
Have you installed Twenty Nineteen or any theme supporting Gutenberg? We’d love to hear your thoughts in the comments below.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
You mentioned this being a “site builder” three times, but nowhere in the article did I see anything to back that up. Perhaps we have different ideas about what “site builder” means but at the very least it would mean creating a header, a footer, and a sidebar, I would think. Nothing here suggests this theme has any of those capabilities. Or did I miss something?
Hi Donna, thank you for your comment.
I think there’s no precise definition of what a site-builder is. Wikipedia defines site builders as “tools that typically allow the construction of websites without manual code editing” and “the more complex of these may also be described as Content Management Systems”.
Gutenberg can be safely considered a page-builder. But could we consider it as a site-builder? I think that with Twenty Nineteen we can. Twenty Nineteen does not support sidebars, and both header and footer are reduced to a bare minimum, leaving wide room to the content area, and this means that we can build almost the entire page layout with Gutenberg.
In tandem with Gutenberg, Twenty Nineteen is the first in a new generation of themes aiming to “allow the construction of websites without manual code editing”. This is the reason why WordPress 5.0 is so revolutionary, and I’m personally excited about the new scenario.
@Donna, WordPress 5.0 is still in its relative infancy. I think over time the interface will improve, but right now I’m sticking to disabling the new editor and using the old one while everyone else is the guinea pigs. There are a lot of themes and plugins which fell asleep at the wheel and did not keep up and are now dealing with the fallout. I think there will be some teething pains for the time being, but in the end, I think WordPress will get up to speed and create a worthy “site builder” (so to speak) which will negate the need to pay extra $$ buying other themes and page builder plugins. Let’s hope they get it going sooner than later!
Hi! Thanks for sharing this article. Gutenberg is very much in trend these days. But I think it is not preferred by developers.
Hi Sam. Thank you for your comment. Actually, I think that developers will appreciate Gutenberg sooner or later (maybe later). But first, I think we have to change our tools, our skills and definitely our minds. Gutenberg introduces new technologies (React), a new logic, a new interface. Actually, I’m excited about Gutenberg. It changes WordPress a lot, but what a change… I can’t wait to build my custom blocks, customize theme layouts, and hack anything I put my hands on. I’m sure that we’ll have a lot of fun ;-)
Thank for that brilliant introduction to twenty nineteen!
I’m just wondering how to customize twenty nineteen the ‘right’ way? Fonts, colors, etc… I mean, should I just enqueue my custom.css file like I did before or is there a more elegant way to do that? Can I make use of the “SASS inside” mentioned above?
And another thing: Is there a way to set the primary theme color as hex value? Only having the color slider makes it difficult to keep colors consistent throughout the theme.
Again, thank you
Michael
Actually, you should be able to customize the twenty nineteen exactly the same way you are used to doing with previous themes.
Anyway, twenty nineteen is a barebones theme, and you should add your own customization with a child theme.
But I’ve recently discovered this plugin: https://wordpress.org/plugins/options-for-twenty-nineteen/. it might be worth checking.
Something weird is going on with the twenty nineteen theme.
I’m completely unable to edit the header.php file. Tried adding Google Tag manager code to it, but… I can’t. tried child theme, and in the parent theme, and even renaming the header.php file but the source is completely unchanged.
So now I’m spending 4 hours on something that should take two minutes. ugh.
Hi,
Is a while now since I played with this theme. As an article website is awesome and is easy to use.
I like the fancy way we can add a big image to your article but is not the same when is about the homepage.
We can’t do the same thing with the homepage. And the look is not nice on the homepage when we have 1 or 2 or 3 or more articles on the homepage. Is look ugly. I mean it.
If I set up a page or article as a homepage, is nice, but I do not want to do that. Want to have a custom homepage if possible.
Best regards.
I totally agree, Twenty Nineteen lacks a lot of functionalities and I think that it’s quite difficult to use it on a production website unless you are a skilled theme developer and decide to build child themes on top of it. Anyway, I would suggest to have a look at this plugin: https://wordpress.org/plugins/options-for-twenty-nineteen/. It adds a good number of customization options
I’m super impressed with this editor and template!
However, even though I’ve center aligned the blocks they still display to the left.
What is the best way to truly center align all blocks please including images, titles, paragraphs, quotes, videos etc?
Thank you :-)
Has anyone seen the plugin for this theme “Options for Twenty Nineteen“?
The author will take on user’s requests for options and features!
Thanks for your comment, Amelia. I suggested the same plugin in some comments (sorry, I didn’t realize you had already suggested it). Hope some readers would leave their opinions about the plugin here
I have a site with 100 pages and posts, but it functions on Twenty Fourteen. What will happen to my layout and content, if I upgrade to Twenty Nineteen?
Hey Keith!
All your content will still be there, but the layout/look might change. I would recommend you use a staging site to test this. With a few clicks, you could preview how it would look without impacting your production site. https://kinsta.com/docs/wordpress-hosting/staging-environment/
Also, the new Twenty Twenty theme is out. https://kinsta.com/blog/twenty-twenty-theme/