How to Create Custom Blocks in WordPress

Download Now: Free WordPress Website Guide + Checklist
Mohammed Noufal
Mohammed Noufal

Updated:

Published:

Blocks offer a new approach to customizing content and the appearance of your WordPress website. Site owners can use these blocks to add and change content elements such as paragraphs, photos, and widgets.

person using custom wordpress blocks on a laptop

Currently, WordPress has over 90 default WordPress blocks. Additionally, compared to the standard editor, the Gutenberg block editor offers drag-and-drop functionality and a better visual display of the content.

This new block-based editing strategy offers a more user-friendly editing experience and more choices than the classic editor. A WordPress block plugin can add even more content possibilities if you wish to extend the capabilities of the block-based editor.

Download Now: How to Launch a WordPress Website  [Free Guide + Checklist]

In this post, we’ll cover what you need to know about WordPress custom blocks, including:

Overview of WordPress Blocks

The most recent WordPress version offers over 90 blocks, broken down into six categories: text, media, design, widgets, theme, and embeds. Let's go over all of the blocks in the WordPress block editor and their main customization options.

Text Blocks

You can add headings, paragraphs, and other text components to the content using text blocks. Some of the most common text blocks are as follows.

  • Paragraph
  • Heading
  • List
  • Quote
  • Pullquote
  • Classic
  • Preformatted
  • Code
  • Table
  • Verse

a menu of text blocks in wordpress

Some text blocks also allow you to display the text in a variety of ways. For instance, a quote block can be used to highlight a passage from a text document, and a table block can be used to present and contrast any type of data with ease. Other blocks, such as code and preformatted, let you highlight code snippets.

Media Blocks

You can embed files from your media library in your content using media blocks. Seven media blocks are available:

  • Image
  • Gallery
  • Audio
  • Cover
  • File
  • Media and text
  • Video

a menu of media blocks in wordpress

The most common media blocks are image and gallery blocks. The gallery block lets you construct a collection of images, whereas the image block only displays one image at a time.

Design Blocks

Design blocks change the content layout in the WordPress block editor. This block type does not add content, but it does influence how the content will appear to visitors. There are eight available design building blocks:

  • Buttons
  • Columns
  • Group
  • Row
  • More
  • Page break
  • Separator
  • Spacer

a menu of design blocks in wordpress

Widget Blocks

Widgets are available as blocks that may be placed anywhere on the page, including the footer and sidebars. The Gutenberg editor includes 12 widget blocks:

  • Archives
  • Calendar
  • Categories
  • Custom HTML
  • Latest comments
  • Latest posts
  • Page list
  • RSS
  • Search
  • Shortcode
  • Social icons
  • Tag Cloud

a menu of widget blocks in wordpress

Theme Blocks

Theme blocks related to the site and theme design. The majority of theme blocks are dynamic, displaying items like post content, query loop, and post comments on the site. The site logo, site title, and site tagline are a few that are also necessary to display the site's identity. The available theme blocks are:

  • Navigation
  • Site logo
  • Site title
  • Site Tagline
  • Header
  • Footer
  • Template part
  • Login/out

Additionally, there are blocks that pull blog post data for their content:

  • Post title
  • Post excerpt
  • Post featured image
  • Post content
  • Post author
  • Post date
  • Post categories
  • Post tags
  • Next post
  • Previous post

a menu of theme blocks in wordpress

Embeds Blocks

By simply copying and pasting URLs, the new block editor makes it simple to include external material. There is a specific section, for instance, for embedding YouTube videos. WordPress offers a handful of embed blocks:

  • Twitter
  • YouTube
  • Video
  • Spotify
  • SoundCloud
  • Pinterest

a menu of embeds blocks in wordpress

Use the embed area and paste the URL to embed the media if you can't find the correct platform.

Why use a custom block?

The old WordPress editor (also known as the “classic” editor) was a TinyMCE-based text editor. There were no visual features to provide a page or post preview, therefore the interface resembled a text editing program.

With the block editor that comes with WordPress today, you can quickly and easily construct posts and pages by adding content and layout components as blocks. In general, editing material is easier using the new WordPress editor. Additionally, it provides new users with a more user-friendly platform to learn WordPress.

WordPress includes some commonly used blocks by default. WordPress plugins may also include their own blocks for use. However, there may come a time when you want to design your own custom block to do something unique that works for you.

How to Make Custom Block Templates in WordPress

Making custom WordPress blocks templates can be done in one of two ways. Keep in mind that both methods require some WordPress development knowledge.

Register Gutenberg Blocks

The first method requires developing custom WordPress block templates that can be used to create pre-populated blocks. Add the following code to your site’s functions.php file:

add_action( 'init', function() { $args = array( 'public' => true, 'label' => 'News', 'show_in_rest' => true, 'template_lock' => 'all', 'template' => array( array( 'core/paragraph', array( 'placeholder' => 'Breaking News', ) ), array( 'core/image', array( 'align' => 'right', ) ), ), ); register_post_type( 'news', $args ); } );
  • core/paragraph : The array parameter controls the block's content.
  • core/image: You can upload images by using the array parameter. You have three options for uploading the images: directly, from the media library, or by embedding a URL.
  • Show_in_rest: This custom block should be able to be retrieved using the WordPress REST API, according to the parameter, which tells the WordPress core.
  • Template_lock: When it is set to "all," this argument prevents the custom blocks from being added or removed from the template.

Here is how the custom Gutenberg block template would appear when it is being used:

the custom block tempalte in the gutenberg editor

Use the 'template' sub-array when adding the custom blocks to this template. Consider the following example:

'template' => array( array( 'core/heading', array( 'level' => '4', 'content' => 'Heading' ) ), array( 'core/paragraph' ), )

Create a Gutenberg Plugin

The location of this plugin will be in the wp-content/plugins directory, which contains individual folders for each plugin installed on the website.

To create the Gutenberg plugin, to go to the wp-content/plugins directory and create a new folder for the plugin. The name of the folder should be the same as the name of the custom Gutenberg template plugin. The plugin name in this article is "My custom blocks" and the folder name is "custom-blocks."

Create a file called custom_blocks.php in this folder and add the following code to it:

/** * Plugin Name: My custom blocks * Description: Add custom blocks using Advanced Custom Fields (ACF) * Version: 1.0.0 */ add_action( 'init', function() { $args = array( 'public' => true, 'label' => 'News', 'show_in_rest' => true, 'template_lock' => 'all', 'template' => array( array( 'core/paragraph', array( 'placeholder' => 'Breaking News', ) ), array( 'core/image', array( 'align' => 'right', ) ), ), ); register_post_type( 'news', $args ); } );

You can change the above details as per your requirements. When installed, this plugin will be added to the list of available plugins:

plugin list in wordpress with the my custom blocks plugin visible

How to Use Custom WordPress Blocks On Your Website

By default, WordPress uses the Gutenberg block editor to create posts and pages. When utilizing a block-based theme, the block editor is also available for complete site editing.

The editor will automatically include a paragraph block when you add a new blog post or page so you can get writing right away. The paragraph block becomes the default new block when you press Enter, simplifying the writing process.

The plus (+) button in the content area can also be used to add a new block. The six most recent blocks and a search bar will show up in a small pop-up. Find a custom block using the search bar, then click on it to add it to the content.

the blocks menu in the wordpress gutenberg editor

The block inserter can also be accessed by selecting the plus (+) sign in the top-left corner of the screen. All the available blocks will be displayed in a new panel that will appear on the left.

To find the desired option, use the search bar. The block can then be added to the content by clicking on it.

the gutenberg editor with the block search bar open

The WordPress block editor includes a drag-and-drop feature for rearranging blocks. Choose any block, click the drag icon on its toolbar, and then drop it where you want it to be. Alternatively, use the block's toolbar up and down arrows.

Different tools are available for configuring WordPress content blocks. Select a block and open the block settings panel by clicking the settings button in the top-right corner of the screen to configure it.

the gutenberg editor with the block settings menu open

The Bottom Line on Custom WordPress blocks

Now you know how to use WordPress blocks across your website, and how to create custom blocks too. It’s just another way that anyone can use the open source platform with almost limitless potential for customization.

As you go about customizing your WordPress site, consider going with a fully managed hosting provider that’s optimized for WordPress, like Nexcess. Hosts that are optimized for WordPress help you capitalize on everything the platform has to offer, while providing dedicated customer support, advanced caching, and more. That way your site is taken care of so you can focus on creating custom WordPress blocks, or whatever else your site needs.

wp

Related Articles

Launch your WordPress website with the help of this free guide and checklist.

    CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

    START FREE OR GET A DEMO