After a few weeks of building and tweaking, we are happy to announce our Aino 2.0 block theme update to you. After WordPress 5.8 was released with the first Full Site Editing features last month, we felt it was time to take up the challenge and get our Aino theme ready for the future of WordPress.
What is a block theme?
You might ask, what is she talking about, what is a block theme and how is this different from the current Aino theme? The Aino 2.0 update comes with a block-based header and footer this is the biggest change to the theme from the user experience. We also updated all other files under the hood, but I will talk about this in an extra post shortly.
It’s a big update with lots of changes and the new block header and footer. So I wanted to give you a heads up and a little guide on how to prepare for the update before you hit the update button in your dashboard.
First, you will need to install the free Gutenberg plugin before updating. The plugin is needed in order to use the Site Editor beta version. The Site Editor gives you the opportunity to make changes to your page templates and header and footer directly in the editor. It also gives you the opportunity to use the first version of the Global Styles.
Global Styles introduction
With Global Styles, you can choose your font family (we will add further font options shortly) and personalise the theme’s colour palette on a global or block-based level. You can access the Global Styles settings by clicking on Site Editor in the admin menu. Now you see the Aa button on the top right side of your editor menu. You can choose between changes on the ‘root’ level or ‘by Block Type’ level.
So you can either decide to make changes for all elements on your website at once (root level) or only change the settings of one particular block. We are working on an update for our colour palette, so you will have finer customisation options for colours on the block level.
Changing styles ‘per Block Type’ is a great way to choose your heading’s font-weight and decide if you want bold (which is the themes default setting) or regular headings. A lot of the new Global Styles settings replace the theme settings previously provided via the Customiser.
Yes, the Customiser gets retired
You heard right, the Customiser will be retired in the Full Site Editing WordPress world. All Customiser settings will be replaced with options within the Full Site editing features. With Aino 2.0 you can still deactivate the Site Editor (via Gutenberg/Experiments) and see the Customiser menu again, but you actually won’t need it any longer. All Aino theme settings can now be managed via Global styles or by editing the Page Templates or Templates Parts directly.
You can use a plugin like Simple Custom CSS in case you need any custom CSS. If you want to copy you custom CSS and you need access to the Customiser go to Gutenberg/Experiments in your WordPress menu and shortly disable the Site Editor in oder to gain access to the Customiser again. After you copied your CSS, you can activate the Site Editor again.
To add favicons for your website we recommend using a plugin like Favicon by RealFaviconGenerator. If gives you more advanced favicon settings compared to the Customiser option.
Your site logo will now be added your header using the new Site Logo block.
New block-based Header
Being able to customise the header via blocks is a huge improvement to WordPress and I love this new feature. At the moment you can choose from a standard light and dark header. After the Aino 2.0 update you will need to set up your header again, but you will also get a lot of new options to customise your header. You can also save multiple different Header templates. This way you can apply headers in multiple colours as we did here on the Aino website.
To set up your default header, you need to click on Site Editor in your WordPress menu. You get directed to the default blog page of your website, the index page. Here you can see the default block Header and Footer.
You can choose between the Header and Footer options by clicking on ‘Replace’ in the editor toolbar. We prepared the main Header navigation so that you can choose one of your previously set up menus. Alternatively you You can choose between the Header and Footer options by clicking on ‘Replace’ in the editor toolbar. We prepared the main Header navigation so that you can still apply your previously set up menus in the new Navigation block. Alternatively, you can create a new menu by adding ‘Page Link’ blocks via the editor.
You can find more infos in detailed tutorial on how to customize your block-based Header via the Site editor.
As with the Header, you will also need to set up your new block-based Footer in Aino 2.0. But again you have a lot more options to customise the Footer and we will add multiple cool new Footer designs to choose from over the next few days. For now, you can choose between a light or dark Footer. It’s now easier to customise your Footer content since you see your Footer in the editor.
Block Page Templates
Blocks themes come with multiple page templates. You can also save custom ones. This makes creating pages in WordPress so much more flexible. We were able to retire most of the old page templates since you can now build pages with the ‘Header and Footer’ Page template and apply wide and fullscreen blocks to your content. You might need to update your existing pages and choose a new Page Template from the Page Settings sidebar under Template.
Since page templates and page template editing is a complex and new WordPress feature, I will provide more a detailed tutorial on the blog in the next days.
Aino’s new Pattern library
And finally we worked on our new Foundation Pattern library to provide you with a set of flexible predesigned layouts you can use to build your pages.
The patterns are fully responsive and can be dragged and dropped onto any page (using the ‘Header and Footer’) Page template. Now you only need to change the content to your own by writing your texts and replacing the images with your own. It is possible to add to the patterns or delete elements you don’t need. We will update the pattern library regularly. It will be a growing library of design templates.
Questions and feedback
I know there are a lot of changes to be made for existing Aino theme users. We decided to switch Aino to a full block theme rather sooner than later. It’s the start of a new era for WordPress themes and we want to provide you with the latest WordPress themes have to offer. We hope you love the new changes and possibilities this update brings to themes. Since there will be a learning curve to get familiar with the new Site Editor, Page template and pattern options. We will provide plenty of tutorials going forward.
If you have any questions, feedback or bug reports, please let us know either in the comments or directly on GitHub. We love to hear from you.