Page Builder Gutenberg Blocks – Kioken Blocks

Last Updated on

A block suite that includes claims certainly includes custom queries for post lists and which does extend Gutenberg in two interesting ways: custom inline color and fonts.

If you need to display Custom Post Types I also would recommend you take a look at Archive Mapping and Post Selector in general or Product Blocks in the case of WooCommerce products.

This is a suite of blocks, like many others, but I am particularly interested in the “Kinetic Posts” Block.

This block allows you to create a post list with the following settings:

Unfortunately the plugin currently only offers choosing between posts & pages, there is not option to select other Post Types.

The plugin DOES offer the possibility of selecting any other registered post (as long as they are `’show_in_rest’ => true`), but at the moment excludes WooCommerce products specifically, as they want to build something more appropriate for them.

You can see JetPack’s Testimonials CPT shown here inside the “Kinetic Posts” block:

Quibusdam nihil reprehenderit voluptas in. Vel magnam eaque id alias. Ab beatae ab rerum dolores est. Id natus quos in. Laborum voluptas consequatur et et excepturi At omnis aspernatur tempora reicien…

Hic occaecati nulla nulla officiis vitae nisi. Reiciendis quos officiis id quaerat tempora officiis dolorum. Fugiat sed earum ea quaerat mollitia non deleniti. Alias animi aut laboriosam rerum distinc…

Sed dolorem qui facilis odio. Occaecati delectus neque accusamus eos aliquid laborum distinctio minima. Exercitationem eveniet accusantium dolore voluptatum sint ipsam. Rerum accusantium inventore err…

See it in action

One of the beauties of Gutenberg is that it creat…

Simple Shortcode Block

This simple plugin will allow you to preview the … This i…

Advanced Gutenberg Blocks………

There are several post design option including a post carrousel option, which is not too common:

And this is what the post carousel looks like in action. It does not seem to offer a full-width block option.

Extending Gutenberg’s features: Inline colors and custom fonts

This plugin suite also extends Gutenberg’s basic text editing features by adding the possibility to edit part of the text in a given block.

You can then select the color, opacity, letter spacing and text transform for that part of the text only:

This is what it looks like in action:

I can change the color of each word separately.

I can also change opacity if I want.

This plugins also allows your to change the typography of any block inside the editor, choosing from a Google Fonts list, as well as adjusting size, line height, letter spacing and more.

The full list of blocks (author’s own description)

  • Container Row Block: With the Container Row’s vast number of options, the layout possibilites are almost endless.Create grid layouts, add borders, border radiuses, click events to columns or the container itself(or both), or add parallax effects both to the container and the columns.
  • Kinetic Wrapper Block: The swiss knife block of Kioken Blocks. It is a single column container block with multifunctional features to enrich your content. Place any content in it, and add beautiful animations, custom borders, border radiuses, paddings, shadows and backgrounds.
  • Icon Block: 1500+ beautiful SVG icons available with custom line strengths for line icons, and custom icon and background color options.
  • Kinetic Posts Block: Show any post types with custom taxonomies, in 3 unique awesome layout views: Slider, Grid and Columns.
  • Tabs Block: Create tabbed content placing any block inside each tab. Custom options include tab buttons and content hover and normal state colors, borders, backgrounds and more.
  • Features Block: Create icon boxes in your content with multiple column view, or use imagery and any other content to display your product or business features. Animated shadows and backgrounds available.
  • Fancy Buttons Block: Create single or multiple buttons, with custom gradient, border, shadow, border radius and custom typography options.
  • Testimonials Carousel Block: Create single or multiple beautifully designed testimonials in a carousel/slider.
  • Split Headings Block: Create animated headings with reveal or curtain effect.
  • Divider Plus Block: Choose from 8 advanced styles for your spacer/divider. Styles include vertical line, full width, custom, with icon or text and animated options.
  • Google Maps Block: Place Google Maps with 6 predefined custom map designs.
  • Visual List Block: Place Google Maps with 6 predefined custom map designs.
  • Image Box Block: Create advanced images with custom text and typography, with stunning animation effects to create call to actions or just to show off a feature!
  • Numbers Counter Block: Create animated counting numbers with custom font sizes, suffix and content.
  • Open Table Form Block: If you have a restaurant or venue, you can get reservations and booking with our Open Table block. It has 3 beautiful form styles to choose from.

Published by Alvaro Gómez Velasco

Alvaro is widely known for his skills at copy-pasting code, activity at which he has excelled since 1997. After ten years freelancing as a WordPress consultant and teacher Alvaro currently works as a Happiness Engineer at Automattic. It is said that in another life he was a professional photographer. Bilbaíno and father of Julia & Clara.

Join the Conversation


    1. Thank you for your comment, Onur, and congrats on a great block suite! I have WooCommerce installed on this site, are WooCommerce products “Gutenberg Ready” (‘show_in_rest’ => true)?. If not, I am curious as to how this other plugin does manage to show Woo products in its settings. Looking forward to hearing from you!

      1. Ah, got it. We intentionally disabled WooCommerce products from post type listing for now(it’s the only post type we disable listing in the block).

        The reason is we want to provide a more accurate and stylish design if Kinetic Posts is set to display WC products and the work on that is not fully ready 🙂

        Thank you!

      2. Makes sense, thank you for taking the time to clarify this. I have tested this with Jetpacks’s Testimonial CPT and it works like a charm. I updated the post accordingly to reflect this. Looking forward to seeing a WooCommerce-ready version of your block!

Leave a comment

Leave a Reply

%d bloggers like this: