Kubio – the kickstart

Find out how you can use Kubio for designing the website you envision.

How to work with blocks

Blocks in WordPress, also called Gutenberg blocks are website items that can serve various purposes: headings, images, lists, tables, etc.

Inside the WordPress editor, there are some already existing blocks. You can use them from any page or post level. Kubio will add some extra Gutenberg blocks in the blocks panel. If you go to the “+” sign in the upper-left corner, you’ll see the block inserter. The default WordPress blocks have black icons, while the Kubio ones have blue & green icons. The Kubio blocks are shown first.

The block inserter

The Kubio free Gutenberg blocks are structured into:

Kubio – Basic

Here you’ll find the following Gutenberg blocks: image, video, spacer, row, link group, buttons, heading, paragraph icon, and divider.

Kubio – Components

The components are more advanced blocks: image gallery, shortcode, map, posts list, social icons, icon lists, dropdown menu, tabs, accordion, dropdown menu, and accordion menu

Kubio – Site Data

These are the elements that shape your identity or allow users to browse your site for specific content: Copyright, Search, Logo, Page title, and Home Button.

Kubio – Blog components

Older WordPress users might recognize some of these blocks as the former WordPress widgets: Widget Area, Pagination, Pagination Nav Button, Pagination numbers, Post title, Post excerpt, Post featured image, Post tags, Post categories, Post metadata, Post comments, Post comment form, and Read more button.

Kubio – Layout

You can add a new section using the Section block.

Template Parts

  • Header
  • Footer
  • Sidebar

Now, you can drag from the block inserter your Gutenberg block in your desired spot on the page or post. You can also find the “+” sign inside your page content, after clicking on certain elements. Now, every block has some basic editing options in a toolbar. They show up when you select the block on the page you’re working on. The options in the toolbar vary slightly from block to block. All blocks share the following basic editing options:

  • Positioning
basic editor

When you select the 6 dots, you will have the option to drag and drop the block where you want;

When you select the up and down arrows, you will move the block up and down.

Some blocks (eg: buttons block) have left and right allows, that allow you to move the block to the left or right.

  • Options. Inside options, there are several actions that you can take:

Duplicate. This allows you to clone your current block.

Insert before. This allows you to insert a new block before the current one. 

Insert after. This allows you to insert a new block after the current one. 

Group. This allows you to group more blocks so that you can reposition/drag and drop them together whenever you need.

Remove block. This is how you delete the block you’re currently on.

There are also advanced editing options available for every block, like the ones you could notice when editing sections or columns. The moment a Gutenberg block is selected, a block editing panel will be available on the right with the following options: content, style, and advanced. Inside these options, the settings will vary depending on the chosen block. We’ll explain all the options at the level of each block.