The need for third-party blocks

So far, we have built a great website with a good-looking static Homepage and a blog.

Because we used the default WordPress Block Editor for our static Homepage, it loads super fast too.

But as you have experienced for yourself, the Block Editor does have a fair amount of shortcomings.

For example, there was no way to explicitly set the width of a particular block, such as 400px, 600px, etc.

We can’t set the custom width to any default block inside the Block Editor by default.

Because of this, we couldn’t make the main heading of our Homepage wrap into two lines in a natural way.

We manually broke the heading into two lines using the keyboard shortcut. shift + enter (this causes a line break).

But this is a bad practice in terms of the mobile viewer experience because the single headline now appears like two separate headlines on mobile:

Honestly, we should never use manual line breaks if you care about your mobile visitors.

But how do we wrap the headline into two lines without the manual line break?

As I mentioned before, The best solution is to use CSS code like:

.home h1{
  max-width:400px;
  margin:0 auto;
}

But assuming that you don’t know CSS, there is only one other option left.

And that is using custom WordPress Blocks created by plugin developers.

The plugin developers know the shortcomings of the Block Editor very well.

They faced the same problem that we are facing right now.

So, they created custom blocks to fix some of the common problems we face with the Block Editor.

And those custom blocks are being shared in the form of plugins.

Awesome, right?

Currently, many free and premium plugins out there provide us with custom blocks for our Block Editor:

Feel free to try any of these plugins and see how their custom blocks work.

Anyway, let’s see how to use custom blocks to our advantage.

In fact, let’s use the free version of the GenerateBlocks plugin to perform an exercise.

The GenerateBlocks plugin provides us with some high-quality blocks that fix the shortcomings of the Block Editor.

For example, it provides a “Headline” block that behaves exactly like the default “Heading” block but allows us to enter an explicit width for the heading.

So this will fix the width problem we are facing with the Homepage’s primary headline.

Similarly, it provides us with a “Container” block that behaves exactly like the “Group” block, but it overcomes the shortcomings of the “Group” block with more advanced options.

And the best part is, once the plugin is installed, you can access these blocks just like any other blocks from within the Block Editor.

Haha, sorry about that. But I didn’t want you to rely heavily on third-party plugins.

I wanted you to understand the true capabilities of the WordPress Block Editor.

We built a pretty-good landing page without many issues using just the default functionality of the Block Editor.

If I had introduced the GenerateBlocks or a similar plugin earlier, you would have depended on it for things that even default blocks can do perfectly.

And this unnecessary plugin dependency makes your site unreliable and error-prone in the long run.

Even though GenerateBlocks is a good plugin, at the end of the day, it is a plugin.

So, even a minor update from the plugin developer will take your website down, or something worse, like losing the content, could happen.

Anyway, let’s perform an exercise in the next lesson.