WordPress Block editor

Jul 30, 2021

WordPress Block Editor – Blocks Plugin with Dynamic Content by Kadence


WordPress Block Editor

Introduction

The Gutenberg Blocks editor in WordPress has been in place since release 5.0. This article will also refer to it as either the WordPress Block editor or simply as the WordPress Block.

The WordPress Block editor has fundamentally changed how we create content in WordPress. It’s the new native editor. However, you can still install the previous classic editor as a plugin.


Many people have mixed feelings about WordPress Block because they want something that feels like writing instead of feeling more like coding. The WordPress Block editor will feel different than what you’re used to, and it’s important to remember the new editor is a work in progress. Since the initial release, the WordPress editor has improved a lot, and I think now is the time to switch.


What is the WordPress Block Editor?


WordPress Blocks are designed to replace many features that previously required shortcodes or plugins, making content creation more complicated than it needed to be because you had different tools interacting awkwardly on your page.

When you use WordPress Block editor, everything is in blocks – paragraphs, headlines, list, Icon list, price list. All of these can be manipulated with familiar keyboard shortcuts or quick gestures on touch screens. For example, type ‘p’ to create a new paragraph block and then press enter twice to add two blank paragraph blocks below it so that you have space to write your content without running off the page!

Gutenberg Block allows content creators to create beautiful layouts with nothing but text! With Gutenberg, list items come as powerful blocks rather than just being an option under Paragraphs (or Headings), so you can style them differently from lists inside other block types such as Advanced Heading. The background can also easily change based on your current design theme or color scheme through simple options menus within Gutenberg Blocks.



Why Use the WordPress Block Editor?

Gutenberg Blocks are ideal because they allow authors to arrange the layout more flexibly than with the classic editor. The WordPress Block editor includes all the advanced Blocks one needs to design blog design beautifully.

Gutenberg Blocks are still a work in progress but has significantly improved since it was introduced with WordPress 5.0



How does the WordPress Block editor differ from other editors?

Although with WordPress 5.8, new design blocks were introduced, there are still some ways to go until it can replace traditional page builders like Elementor or Divi. The visual editors in Elementor and Divi are still easier to handle than the WordPress editor. WordPress Blocks are more challenging to learn, but it’s a joy to work on once you get the hang of them. Currently, I recommend a combination of a traditional page editor like Elementor or Divi with Gutenberg editor. I create my pages and templates with the page builder and use the WordPress Block editor for posts.



No Coding Required

Blocks are easier than coding HTML. The new editor makes this process even faster by allowing users without any design or code experience to customize their layouts with reusable content while still maintaining control over how the layout looks on different devices. Gutenberg is an excellent solution if you’re looking for something that lets you create beautiful designs quickly without having advanced web development skills.


Gutenberg Blocks allow users without coding experience to customize layouts by moving and aligning blocks where needed. The Gutenberg Blocks library includes powerful blocks for any project!


Reusable Block


Reusable blocks in Gutenberg Editor allow content creators to reuse the content as blocks. This content is then able to be styled, rearranged, and configured as needed for various pages. Reusable Block is handy if you want to save complex blocks and reuse them on other web pages. For example, a call to action with a button the text “Sign Up” with an associated link within it.

Although reusable blocks may seem like a good idea at first glance, there are some limitations when it comes to making changes to these blocks when they’ve already been in use on your pages. For example, if you want to change the color of a button’s text from red to green for one instance but not all instances on your page. You would need to convert the reusable Block first to a regular block. If you don’t convert it first, the change will apply globally. You can easily miss this and ruin your website.


WordPress 5.8 tries to fix it with a untick box not applying the change to the reusable Block.



Best Gutenberg Blocks plugins for Your WordPress Site

There is now a market for third-party blocks plugin. Some are free plugins with a Pro (paid) version.


Here is a list of some powerful blocks plugin

  • Genesis Blocks
  • Ultimate Addons for Gutenberg
  • Kadence Blocks
  • Ultimate Blocks
  • Stackable

My favorite block plugin – Kadence Blocks

Gutenberg Blocks by Kadence is the best addon because they’re easy to use, and I love how you can create your reusable content. With the blocks plugin by Kadence Blocks, I quickly built my website’s home page without any hassle or limitations using their custom blocks like section, row layout, and columns. Websites designed with Blocks load faster and have less bloat.
Kadence Blocks is available in two editions Free and Pro (paid)


Let me introduce to your first some individual blocks in the free version.


Layout


The Row / Layout generates an advanced editing experience in the Gutenberg Editor. Row Block is your base container when you need any special layout or content. When you add the Block into Gutenberg, it automatically has preset layouts different from what offers in traditional WYSIWYG.


Post Layouts


Display a neat grid of posts on any part of your website significant for your home page where you can tease new blog posts

Advanced Heading


Our system can take your headings and make them advanced headings that are customized to meet your needs for font family (including google fonts), size, style, and word-highlighting

Table Of Contents


An effective way to navigate through long posts is using the Table of Contents Block. You can choose which heading levels to take into account. Smooth scrolling to anchor is an option. An excellent feature of this Block is that it can be added to a sticky sidebar and has a scroll spy so that you can see to which heading you are currently scrolling. The Block does not have to be part of the post content but can move in a sticky or modal area.

Advanced Gallery

Make stunning WordPress photo galleries, carousels, and sliders! Various caption location options are available, including font, background, etc. There are settings for image filters, border-radius, box shadows, and more in each gallery style! It’s easy to create custom links to other pages or websites, as well as an integrated lightbox. Furthermore, you can choose which image size to use for your thumbnail and lightbox images for optimal performance. It is the best Gallery Block for WordPress that I have ever come across.

Advanced Buttons


Gutenberg provides a powerful way to create buttons. Multiple buttons per line can be easily styled with text size, padding, border-radius, border width, color, background, border, and hover styles for the color, background, and border.

Countdown


With this countdown block, you can decorate your banner by adding a countdown timer. You can use it to boost your marketing sales or display how much time is left for an event.

Testimonials

Show off beautiful, unique testimonials to build trust in your brand or product. Grids and carousels are both options. A total of four built-in preset styles are available. Then you can edit the fonts, colors, border, shadow, etc. It is straightforward to use and very versatile.


Spacer/Divider


Simple Block with optional divider options and height adjustment can set the color, size, and width of the divider. Depending on the screen size, you can also assign customized heights to your design to be perfectly responsive.


Other features in the Free version


Responsive Controls


Different screen sizes should be taken into account when designing a scalable design. While previewing in the Gutenberg editor, you can edit tablet and mobile settings.


Intelligent Loads

Exactly when you need CSS or JavaScript for your blocks, Kadence Blocks loads it.


Layout Controls


Our row/layout-block allows you to design any layout you can imagine, whatever the size.


Configurable Defaults


It’s a breeze to develop. When you set the default settings for a block, they will automatically be applied each time you add a new block.

SVG icons


It is possible to adjust everything, from size to color to stroke width. Additionally, icons load fast because no font family is loaded!


Typography, color, and background controls


Make your site look its best with Google fonts. Choose from 900+ options. The following type of background color is available: gradients, overlays, blends, parallax backgrounds, borders, etc. You have total control over the design!


Premium Custom Blocks by Kadence (paid version only)


Image overlay


It lets you create links and hover settings for a cover image with ease using the Image Overlay. This Block provides a great alternative to image overlays inside the columns and a fullwidth and wide.

Post Grid / Carousel


You’ll get all the flexibility you need when it comes to displaying your blog posts beautifully with the Post Grid/Carousel. Besides the layout, you can customize the excerpt title and footer. By individually selecting particular posts, you can even design a blog grid specifically for you.


Portfolio Grid / Carousel

When it comes to beautifully displaying your posts in a portfolio (image-focused) style, the Portfolio Grid/Carousel gives you all the flexibility you could ever need. You can customize the design to get the exact portfolio look you want.


Video Popup

Display an overlaying video thumbnail with hovering effects and a link to the video on click. It works with local or external videos!


Advanced Slider


Make beautiful sliders with features such as overlay layers and animation right in the block editor. As an alternative to a separate slider plugin, this slider is lightweight and ideal.

Form


By using the Kadence form in the editor, you can create simple contact or marketing forms.


Split Content

You can use this Block to create beautiful feature columns on your website. Using two columns, you can create a two-column row that features an image or video in one column, drag to adjust the media column width, and input any desired content in the second column.


Wireframing / NEW

Assume you need to create a new page design for your client. A new set of WordPress blocks called Wireframing gives you prebuilt, clean sections for building your site from within your native WordPress editor. By providing a wireframe mockup directly within WordPress, you no longer need to use a separate app or tool. Maybe you’d like to add an FAQ section to your page. By importing a FAQ wireframe directly from the Wireframing tab, you will not need to create a row layout or experiment with different blocks to find out how best to structure this.



Premium features in PRO (paid)

Animate on Scroll


Create a beautiful experience for your visitors by adding on-scroll animation to help them find your content.


More custom Icons


Easily create your custom icon or a set of icons with custom icons.

Dynamic Content

Powerful site control with dynamically populated custom fields. Especially useful for hooked elements.

Design Library

The starter sites and items in the design library will speed up your development process.


Specify scripts

Now you can add a tracking script to a single post or page right in the editor tools.


A list of often asked questions


Conclusion


The Kadence blocks plugin for WordPress feels like a visual editor that makes it easy and fun to build your website. You’ll get all the design controls you need: in-depth typography control, background overlays or parallax backgrounds, color schemes from 900+ Google fonts, SVG icons with size, stroke widths, colors, etc. You can also choose from post layouts and customize them any way you wish.

And if these features are not enough – there’s more!

With premium Blocks by Kadence (paid version only), animated on scroll animation functionality will be added to create an engaging visitor experience when scrolling through web content. More custom Icons feature allows you to create custom icon sets of your own easily. Dynamic content will allow you to dynamically populate custom fields in the WordPress editor with content such as article metadata, date of publication, or even a specific hook triggered on page load.


For more information about Kadence Blocks and their features, please click here


Another product in the Kadence portfolio is the Kadence theme. Learn more here.

Kadence offers more plugins like Woo Extras. A must-have plugin if you have a Woocommerce store.


Honestly, with the free version of Kadence Blocks, you can already do a lot, and probably for a personal website, it is all you need. Pro is required for Dynamic fields with ACF or hooks. In the Kadence world, hooks are elements.
Kadence has some great products. The complete bundle is the best option when it decides what to buy. The Full Bundle includes all future plugins too. A new plugin Kadence Conversion, is in the works for the end of year release.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *