With the arrival of WordPress 5.0, the CMS platform has provided tons of nifty features for all its users. From performance enhancements to bug fixes to tons of new nifty additions, you can enjoy them all with the installation of WordPress 5.0. Similarly, WordPress 5.0 also introduced a new Post/Page editor formerly named as “Gutenberg editor.” The newly named, WordPress Block editor, brings in a complete revamp to the usual post/page creation process which sets it strictly apart from the Classic editor.How to Use WordPress 5.0 Block Editor with Zakra Theme? Share it Now! #wordpress #wp #wordpress5 #gutenberg #Zakratheme #zakra #themegrill Click To Tweet
So, in order to help our readers to adapt to this complete change, ThemeGrill presents you an easy to understand guide on using the WordPress Block Editor.
Coinciding with the release of WordPress 5.0, we at ThemeGrill have released a Block editor compatible theme named Zakra. This free flexible theme is designed to make full use of Page builders as well as Gutenberg editor. You can learn about Zakra and all its wonderful features using this nifty video if you are interested.
For now, let’s take a look at both WordPress 5.0 as well as Zakra, a free theme with full WordPress custom Gutenberg block editor compatibility.
WordPress Block Editor:
WordPress 5.0 integrated Gutenberg editor to become one of its default content editor alongside the Classic TinyMCE editor. To learn more about the new changes introduced by WordPress 5.0 alongside the block editor, please consider reading this article.
The Gutenberg block editor introduces tons of nifty features alongside a revamped editing screen. This changes the entire game considering that the process of creating posts and pages has completely changed. The advantages the block editor holds over the classic editor are:
- Modularity due to the introduction of interchangeable and modifiable blocks.
- Block designs such as Post intros and block styles can be saved for reusability.
- Better Mobile compatibility and Mobile friendly design.
- A Medium styled/ WYSIWYG editor design.
- More user-friendly
If you want to learn more about Gutenberg block editor and its full range of features and advantages, consider checking out this nifty article!
Using the WordPress Block editor with Zakra theme:
Zakra is a free ThemeGrill WordPress theme designed to flexible, fast and highly responsive. The theme is also built to be completely compatible with Gutenberg as well as various other Page builders. So it seems fair to take this theme as the demonstration for using the block editor to create content for today’s guide.
So, to start, let’s go ahead and install and activate Zakra theme on your website first. To learn more about the process of installing WordPress themes, consider checking out this blog.
After you’ve gone ahead and installed Zakra on your WordPress website, you might have to change theme options to personalize your website and set up individual pages. This might take a considerable amount of time.
Fortunately for us, Zakra comes with a One-click demo import function. This lets you instantly download and install a Demo provided to you for free. To learn more about the Demo importer and the process to enable it, check out this video:
So by using the demo importer, we’ve gone ahead and installed this Demo on our local installation of WordPress. We’ll be using the Zakra Café theme demo as it fits a very flexible form of blog design.
A quick disclaimer, however, the demo might require you to install Everest forms plugin and the Elementor Page builder to fully realize its function. Once you’ve imported the demo, you should be ready to start using the Block editor.
Using the WordPress block editor
In order to start posting or blogging, you will have to create a new post, so go ahead and highlight over Posts on your Dashboard sidebar and click on Add New.
This should open your new post in the Block editor by default. However, before we start creating our post, let’s take a look at all the UI buttons and features WordPress Block editor comes with:
WordPress Block Editor and Its Post management features:
The Top bar lets you create new blocks, undo and redo any block changes, navigate around blocks. The top bar also comes with basic post editing functions such as Save to draft, preview post and publish a post. The block section on the right sidebar lets you change the settings of any block once you click on it. This essentially allows you to change the entire settings of any block and change features such as Font size, Drop caps and more. You can also choose to enable individual Background colors to each block and even enable additional CSS classes to each individual block.
The settings button lets you disable or enable the settings sidebar which lets you easily change the size of any block or item you click on the editing screen in the middle. Clicking on the Document button on the top of the sidebar lets you customize the settings of the entire post. This includes managing options such as Visibility, Permalink, Categories, Tags, Featured image, Post attributes, etc.
WordPress Block Editor and Its Page settings:
The handy WordPress Custom Gutenberg block editor also lets you customize individual page settings directly from the post editing page. Change Post layout, remove content margins, change sidebar settings, change header and menu settings and more using the Page settings section.
Adding Blocks on the WordPress Block Editor
The Blocks are the core areas of the Gutenberg block editor. You can create individual sections that serve different purpose using blocks and customizing them. To create a new block, simply click on the Add new block (the + button) on the top left of the post editor. This will give you a drop-down menu from which you can choose an appropriate type of block designed for specific purposes. You can also search for blocks that fit your needs using the search bar.
Furthermore, if you scroll down on the menu, you can choose blocks based on their basic functions. This includes Common blocks, Formatting, Widgets, and embeds. For this demonstration, we’ll be using the Paragraph block. To create a Paragraph block, you can either search Paragraph on the search bar or click on the Common blocks and then choose Paragraph.
Once you enter any text on the block, a hovering toolbar should be displayed to you. You can use this toolbar to perform editing functions such as aligning, bold/italic/strikethrough, linking and more. You can use the leftmost Change block type button to change the current block to a different type of block. For example, you can change this paragraph block to a Heading, Preformmated block, List, Quote or Verse using this change block button.
Rearranging the Blocks:
The WordPress Block editor also lets you easily rearrange the order of the blocks at any time. Simply hover on the left border/margin of any block. Here you can either click on the Arrow buttons to change the position of your current block. You can also drag and drop the block as well for easy arrangement.
Changing block settings:
To customize your block and distinguish it from the other blocks, you can customize it individually using the new WordPress block editor. Simply click on the block you want to customize and refer to the right sidebar settings. If the right sidebar settings don’t appear, simply click on the Settings icon on the right of the top bar and then click on Block.
Each block has its own individual settings for its block. For example, the paragraph block lets you change the Font size, background color and Text color collectively. This can be useful to individually distinguish blocks from each other and enable specific formatting style on individual yet similar blocks.
Adding specific types of Common blocks on WordPress Block Editor:
You can add more than Paragraphs using WordPress Block editor. So let’s take a look at how we can enable the most commonly used elements in WordPress and how to insert them using the Block editor.
Inserting an Image block:
If you want to insert an image onto a separate block, you can do so using the block editor. Simply click on the Add block button and then either scroll down on the Common blocks and choose Image. This should enable your Image block on your post. From here, you can either simply upload a new image from your computer or insert one directly from your website’s media gallery.
Similarly, you can insert an entire image gallery but using the Gallery block instead of the image block.
Inserting a Heading block:
To insert a Heading block, follow a similar process by clicking on Add block button and referring to the Common block section. Here click on the Heading option to insert a heading block.
By using the right Sidebar and the block settings or the Block toolbar, you can change the size of the heading. The block settings also let you change the alignment of the heading entirely as well.
Insert a Shortcode block:
The process to enable a shortcode block on block editor is similar but slightly different. Click on the Add block button again but instead of referring to the Common blocks section, click on Shortcode to insert a shortcode block. On this block, you can enter the correct shortcode to enable your 3rd party plugins or widgets.
Saving a block in the Block editor:
A newly added feature in the Gutenberg block editor is its ability to save entire blocks as templates. This lets you create basic text or image templates to reuse all over your website without recopying anything. This can be really helpful if you have a basic snippet that you want to add in multiple pages and posts on your website.
To use this feature, click on the far right Menu button on the Toolbar of any block and click on Add to Reusable block. Then you can name your reusable block appropriately. Next time you need to add this block, simply use the Add block button and search for the name or scroll down and click on the Reusable section to find your block.
Similarly, while you are adding a block, under the Reusable section you can click on the Manage all Reusable block option to move to the Block management page. The nifty thing about the Block editor is that it allows you to save Reusable blocks and also Export or Import them necessary. This way, your reusable blocks can be used on any WordPress website.
New Nifty blocks on the WordPress Block Editor:
The WordPress block editor also introduces some really useful blocks that are sure to make your blogging so much easier. Let’s check out some of the really convenient new blocks that you can use:
Cover Image block:
The Cover image block lets you easily add a custom block image to any of your posts or pages. Simple use the Search bar to find the Cover block or look under Common blocks to find it. The block also lets you add an overlay color to it as well.
Furthermore, to make your blogs look even more dazzling you can set the Cover image to be fixed. This lets you enable a parallax effect on your block.
Table block:
The table block what its name implies. Simply enable a fully customizable table with modifiable alignments, table styles and more. By using this block you don’t have to worry about using an external plugin or using CSS to enable tables on your WordPress blogs. Simply search the Table block while adding a new block and define the number of rows and columns on your table to start blogging using Table grids.
Media and Text block:
Media and Text block fixes a limitation with the older classic editor so that you can insert images right next to the text. This means you can insert text and media side by side in a cascaded fashion for your blogging purposes. To enable this block, simply use the Add block button and either search for Media and Text or scroll to the Layout elements section to find it.
Concluding:
Thus you can use tons of new nifty features block editor adds to WordPress for your benefits. The new block editor is definitely confusing and will require some time to get used to. But, we believe that this new change to the default WordPress editor will improve blogging on the WordPress platform as a whole.
However, if you don’t feel comfortable using the Block editor, you can always revert back to using the Classic editor as well. To learn more about this, check out this article.
If you want to learn more about features you can enable to improve your blogging, we recommend you check out some of our other articles:
![Zakra 3.0 | Zakra Pro 2.0 Release [Major Updates!]](https://i.ytimg.com/vi/g3rifl7kWvg/maxresdefault.jpg)