Thursday, November 28, 2019

How to Get the Most Out of the New WordPress Block Editor

If youve been using WordPress for a while now, youre probably already familiar with the new WordPress Block Editor. Its a powerful tool, and an intuitive system. However, since were talking about WordPress, you know theres always room for growth if you dont mind making a few tweaks.To get the most out of the Block Editor, youll want to learn how to add new elements to it. You can do this with plugins or even by creating your own custom blocks, so you have plenty of options.In this article, were going to talk about how you can use the default Block Editor setup efficiently. Then well teach you how to build on it by adding new blocks, both using plugins, and making your own. Lets talk blocks! your theme plays nicely with it. While the Block Editor works with any theme at a basic level, having a theme with built-in compatibility lets you take advantage of all the new functionality.The core of the new editor experience is based on a simple block system. Your pages are divided into rows, and you can place any block you want on each one:You can also use columns for better control of the location of each element:This system should feel remarkably familiar if youve ever used a page builder plugin. The overall result is that the WordPress page building experience is now a lot more visual.To get the most out of the editor, youll want to get acquainted with all of the default elements it includes. You have plenty of familiar options here, including lists, paragraphs, quotes, and more:If youre getting used to the new system, theres a particular category of blocks you should pay attention to, called  Layout Elements. Using these blocks, you can add columns to your pages, as well as  Read More  elements, separators, page breaks, and spacers:By combining these, youll have full control over your page and post layouts, so play around with them until you feel comfortable. Then, when youre fully acquainted with the default blocks, its time to throw some new elements into th e mix.ðŸ”Å' Three plugins to add new blocks to the WordPress editorAs soon as the Block Editor came onto the WordPress communitys radar, it didnt take long for developers to start tinkering with it. Even though it hasnt been too long since its launch, there are already plenty of plugins you can use to add new blocks.Weve collected some of our favorite block plugins here, but these are three of the standouts1. Atomic Blocks Atomic Blocks Gutenberg Blocks Collection Author(s): atomicblocksCurrent Version: 2.1.0Last Updated: September 11, 2019atomic-blocks.2.1.0.zip 90%Ratings 271,718Downloads WP 5.0+Requires Atomic Blocks is the most popular WordPress block plugin so far. It adds 11 new blocks to the editor, which may not sound like much, but its selection opens up a lot of exciting design possibilities.As soon as you activate the Atomic Blocks plugin, youll see a new tab when adding a block:Some of these need no explanation, such as  AB Button  and  AB Testimonial. However, others such as  AB Post Grid  and  AB Spacer  are pretty fun to use, and offer ways to alter the page layout not currently possible with the default block collection.Key Features:Adds 11 new blocks to the editor.Lets you fully customize the style and content of each new block.2. Stackable Stackable Gutenberg Blocks Author(s): Gambit Technologies, IncCurrent Version: 1.17.3Last Updated: September 13, 2019stackable-ultimate-gutenberg-blocks.1.17.3.zip 98%Ratings 182,250Downloads WP 4.8+Requires Stackable adds over 20 new blocks to the WordPress editor, making it the best choice if you want a lot of new elements to play with. Among those blocks, you have several simple options, such as buttons, dividers, and containers:However, Stackable also offers more advanced blocks to play with. Some of our favorites include  Team Member  and  Pricing Box  sections:Its also worth noting Stackable enables you to pick and choose which blocks you want to add to the editor. This means you can remove options you dont need, and makes finding relevant blocks easier.Key Features:Adds over 20 new options to the WordPress Block Editor.Enables you to customize each block using a wealth of options.Lets you enable and disable blocks from the editor.3. Gutenberg Blocks and Template Library by Otter Gutenberg Blocks and Template Library by Otter Author(s): ThemeIsleCurrent Version: 1.2.5Last Updated: September 10, 2019otter-blocks.zip 96%Ratings 113,328Downloads WP 5.0+Requires Gutenberg Blocks and Template Library by Otter is our own plugin that adds both new blocks for you to play with, as well as premade templates built with the WordPress Block Editor that you can easily import into your site.Once you install and activate the plugin, you can start using the blocks from the new  Otter section in the  Add Block interface:You can also insert templates from the  Section block:Key Features:Adds over 12 new elements to the WordPress Block Edito r.Includes Gutenberg-compatible templates that you can insert right from the Block Editor.🠏â€"ï ¸  How to create custom blocks (two plugins to help you get started)When it comes to creating new blocks, you can either take the  manual approach  or use plugins. The former gives you more control, but does require some development experience. However, its the latter well discuss now. This section will focus on two tools that enable you to put together simple custom blocks with ease.1. Block Lab Block Lab Author(s): Block LabCurrent Version: 1.4.1Last Updated: September 11, 2019block-lab.zip 98%Ratings 25,652Downloads WP 5.0+Requires When you boil it down, blocks are basically collections of custom fields. The difference lies in what fields and types of values you use for each block. With Block Lab, you can add new blocks to the editor and assign a category to them:For each block, you can add almost as many custom fields as you want, choosing from a broad range of pres ets:However, although the plugin does most of the heavy lifting, youll still need to know how to put together simple HTML templates to customize each blocks layout. Heres a guide that outlines the process, so you have an idea of what to expect.2. Lazy Blocks Lazy Blocks Gutenberg Blocks Constructor Author(s): nKCurrent Version: 1.8.0Last Updated: October 3, 2019lazy-blocks.1.8.0.zip 98%Ratings 13,071Downloads 4.9.0Requires Overall, the Lazy Blocks experience is pretty similar to that of Block Labs. You can put together custom blocks using predetermined fields, and arrange them in practically any order you want:The primary difference here is that Lazy Blocks enables you to modify your blocks template from within the dashboard, so you dont have to use a text editor:Its a different flavor, but not necessarily superior to Block Labs, so feel free to go with whichever of the two approaches you prefer!Go to topâÅ'› ConclusionThe WordPress Block Editor is a significant change f rom the classic way of doing things. However, this change brings with it a lot of exciting opportunities. The block system is pretty easy to use, and the selection of elements it includes out of the box is nothing to scoff at.However, to get the most out of the WordPress Block Editor, youll want to figure out how to add new items to it. You can do this using plugins such as Atomic Blocks, Stackable, and Gutenberg Blocks and Template Library by Otter. Block Lab and Lazy Blocks.Do you have any questions about how to use the WordPress Block Editor? Lets talk about them in the comments section below!Free guide5 Essential Tips to Speed Up Your WordPress SiteReduce your loading time by even 50-80% just by following simple tips.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.