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.
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.
In this post, we’ll cover what you need to know about WordPress custom blocks, including:
- An overview of WordPress blocks
- Why use a custom block?
- How to Make Custom Block Templates in WordPress
- How to Use Custom WordPress Blocks On Your Website
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
-Dec-02-2022-09-01-32-8644-PM.png?width=450&height=668&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-Dec-02-2022-09-01-32-8644-PM.png)
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
-2.png?width=450&height=743&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-2.png)
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
-Dec-02-2022-09-01-31-4635-PM.png?width=450&height=729&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-Dec-02-2022-09-01-31-4635-PM.png)
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
-Dec-02-2022-09-01-31-2722-PM.png?width=450&height=825&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-Dec-02-2022-09-01-31-2722-PM.png)
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
-Dec-02-2022-09-01-32-1275-PM.png?width=450&height=723&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-Dec-02-2022-09-01-32-1275-PM.png)
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:
- YouTube
- Video
- Spotify
- SoundCloud
-Dec-02-2022-09-01-32-4119-PM.png?width=450&height=691&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-Dec-02-2022-09-01-32-4119-PM.png)
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:
- 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:
-1.png?width=650&height=266&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-1.png)
Use the 'template' sub-array when adding the custom blocks to this template. Consider the following example:
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:
You can change the above details as per your requirements. When installed, this plugin will be added to the list of available plugins:
-Dec-02-2022-09-01-32-6545-PM.png?width=650&height=425&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-Dec-02-2022-09-01-32-6545-PM.png)
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.
.png?width=650&height=668&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post).png)
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.
-3.png?width=650&height=276&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-3.png)
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.
-4.png?width=450&height=79&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-4.png)
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.
-Dec-02-2022-09-01-31-7909-PM.png?width=650&height=281&name=How%20to%20Create%20Custom%20Blocks%20in%20WordPress%20(wp%20guest%20post)-Dec-02-2022-09-01-31-7909-PM.png)
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.
