We love Gutenberg and we hope you do too. We built this plugin to extend Gutenberg blocks to a level only achievable by using premium page builders. Today we are going to have a look at what Kioken Blocks has to offer for you.
Before we start, if you haven’t downloaded the Kioken Blocks yet, grab it from the WordPress repo, because awesomeness await!
What is Kioken Blocks about?
Kioken Blocks is a plugin adding functional and versatile Gutenberg blocks to your editor, boosting your capabilities to build a website with the new editor, very easily. It is the ultimate toolkit for your page building experience with WordPress.
Each block is carefully crafted to meet your content editing needs. And when using each block, you will notice nifty features that are maximizing your productivity. Now lets have a look at some of them:
Kioken Elements
When you create a Container Row block for the first time, it will welcome you with the number of columns and layouts to start with, and the access to Kioken Elements:
Kioken Elements is a growing number of free and premium prebuilt designs and templates that will speed up your page building experience. With each update, we add new designs and layouts to the elements. You can place hero areas, features, call to actions and well designed rich content in a single click. Here is how they look like:
Clicking on a template will instantly place that chosen element to your page. After that, you can customize the look and feel for the inserted template, editing the options of the blocks inside. Each template has various blocks prebuilt for the purpose of it’s title.
For example, the following is a good template for welcoming your visitors on a page:
Placing a template doesn’t mean you are limited with the template’s content. Feel free to edit the contents, add more blocks and customize the design. We prepared each template to follow certain styles, so that inserting multiple templates can build a good visual language for your page.
Here’s how our placed hero template looks on this current post:
Kioken Blocks is Sick!
Kioken elements will boost your creative freedom. There are currently 15+ free and 50+ premium designed templates bundled with Kioken Blocks.
Nice yeah? 🙂 So we just inserted a nice intro area to our page with a parallax background effect, and a CTA button to engage our visitors, all happening within a minute.
Kioken Elements are categorized according to your needs. You can filter them either by searching by name or selecting a category such as features, or hero etc.
Extensions for default Gutenberg Blocks
Gutenberg and it’s core blocks are amazing. However sometimes you want to be able to change the color of a selected text, change it’s typography, or adjust the top and bottom margin of a paragraph. For that, Kioken Blocks has utilities for core blocks(and the block of the plugin) to enable highlighting text, changing spacings of blocks responsively, and apply custom Google typography for the selected block.
Google Fonts for Core Blocks
Custom Google typography is available for paragraphs, headings, buttons and lists. Simply choose the block you want to change typography, and assign your favorite Google font to it. You can also adjust line height, custom font size and letter spacing:
At the moment the number of Google Fonts you can choose for Gutenberg blocks is limited to 50 most popular fonts. It should be more than enough for you choose from. But don’t you worry, the blocks of Kioken Blocks have the full list of them available.
Blocks such as Imagebox and Fancy Buttons has the full list of Google Fonts to choose from.
You can also set up which Google Fonts to use in your editor from the Kioken Blocks Options in the sidebar. Setting a certain number of Google Fonts to use with your blocks will increase your editor performance when editing those blocks.
We are also working on making all typography options fully responsive capable. So we should be seeing an update on that in one of the coming releases.
Adjusting Margins
When you select a paragraph, list, image or heading block, you will notice an Override Spacings option in the settings sidebar. From there you can zero out top or bottom margin of a block, or assign custom values.
This utility becomes really useful to override your theme’s or editor’s default spacings added to elements by default. Once a custom spacing override applied, you can also disable or zero out spacing for different device sizes as well.
Visual Aids
Kioken Blocks delivers precise and hard worked tiny details to provide you the best experience you can get from Gutenberg editor in general.
One of them is the change indicators for block settings. Whenever you change an option in a block, the block settings highlight the section made changes for:
Those tiny blue dots you see on the setting of the selected column indicate you have applied a column background with visibility hidden on default view, and has a default screen spacings.
One other thing that helps you when building your page is the block highlighters with blocks on dark colored backgrounds. Kioken Blocks highlight the selected block in a lighter color if you choose a dark color for background on a Container row, Features, or Kinetic Wrapper Block:
Notice how this selected block is highlighted in white instead of darker default Gutenberg color? Kioken Blocks know when you have a dark background color or image, and applies helpers necessary.
Getting rid of Pro version notices
We know, it’s stupid promoting what’s cool with Pro version of Kioken Blocks, while we don’t even provide a way to purchase yet! We just wanted to give you a glimpse of what’s to come for future paid users. But no worries, turning them off is super easy.
Just head on over to the Kioken Blocks Options sidebar and turn off Pro notices.
How do you like it so far? Have any questions? Hit us up on our Twitter, or shoot your question in our support forum. We’re here for you!
We can’t wait for you to build kick ass websites with Kioken Blocks. Show us off if you have anything so far. Cheers.
