Gutenberg is the new block editor for WordPress CMS which has been included in WordPress core as a default editor with a goal to replace old TinyMCE editing experience in WordPress.

What is the block editor?

Within the WordPress version 5.0 release, the editing experience of the posts and pages have been rebuilt to offer a genuine solution for creating media-rich content and control the layout with ease.

The block editor takes all the worrying about the alignment and organization of content, quotes, and images, etc. and offers a flexible experience based on blocks so you can focus on creating engaging content instead.

An Introduction to Gutenberg by WP101

The fact that every single element in the page has its own block won’t change the way any of your content looks to your visitors preferably this feature enables you to insert any type of component or multimedia and move, edit, or even customize each one of them super fast.

CONJ PowerPack offers tons of built-in blocks, and while maintaining a consistent look and feel of your page, it displays visual elements the way they’ll look on your actual site. This lets you save more of your time, which you may have previously spent previewing and double-checking your content before hitting the publish or update button.

How does the block editor work?

The block editor uses blocks to turn a single document into a collection of discrete elements with explicit, easy-to-tweak structure and CONJ PowerPack’s set of built-in blocks opens up a path of exploration and imagination when it comes to solving user interface needs.

The new editor brings with it a modern, effortless page and post building experience. With blocks, you can quickly add and customize multiple media and visual elements that used to require shortcodes, custom HTML code, and embeds.

Adding a block

Having CONJ PowerPack installed on your WordPress setup will offer you many block types to choose from, which you’ll see organized by category and by most recent use.

Since each of any block has its own wrapper, you are free to edit or move each block independently of other blocks, and individual blocks usually come with their own formatting or styling settings for even greater control over layout and function.

The following steps will show a few available ways to add a block and choose the block type you need:

add-block-editor
Adding block to the editor
  1. Click  at the left of any empty block.
  2. Click  at the top left corner of the editor toolbar.

In addition to the above, inserting a new block can also be done by clicking on the icon at the top or bottom center of an existing block.

insert-block-before-after-existing-block
Inserting block before or after an existing block

The default block type is a paragraph which you’ll mostly use for regular text or outputting raw content; however, you may choose a different block type from any of the  buttons.

You can also search for a block by typing a forward slash followed by the block name or slug, as an example, typing /conj will list all the available block types that are coming with CONJ PowerPack out of the box.

shortcut-to-block-type
Shortcut to block type

Moving a block

You can also drag blocks around by clicking and holding the six-dot-grid icon near the top-left corner of each block, or use the up and down arrows to bump a block one spot in the direction you want.

moving-editor-blocks
Drag blocks around by clicking and holding the six-dot-grid icon

Removing a block

To remove a block, select the block and click the three dots right above it in the toolbar. Among the settings there you’ll see the option to remove or delete the chosen block.

remove-editor-block
Click the three dots right above it in the toolbar to delete the block

Transforming a block type

You can transform most of the blocks to another similar or related block type. As an example, a paragraph block can be transformed into a heading block or vice versa.

transform-editor-block-type
Transform an existing block to another similar block type

Last updated: 3 months ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept