The Gutenberg feature is the block WordPress editor, which visually and interactively allows users to create content pages by integrating blocks such as text, image, and even buttons, as opposed to shortcodes or custom HTML.
If you tend to regularly repeat certain design features, creating custom blocks is ideal as it saves time, ensures consistency throughout the website, and improves user experience.
In this tutorial, we will take you through the process of creating custom blocks and configuring them for faster access in the future.
What Block Types Does Gutenberg Have and What Are Their Features?
Gutenberg blocks are pieces of content (text, images, links) that make up the WordPress block editor.
Each element of the block is made of a separate piece of content (blocks) that can be edited, structured, and styled independently. It gives flexibility and eases adding complex layouts without custom scripts.
Default vs. Custom Blocks
| Feature | Default Blocks | Custom Blocks |
| Availability | Comes pre-installed with WordPress | Created by developers or using plugins |
| Customization | Limited styling and structure options | Fully customizable (layout, style, function) |
| Use Case | Basic content like text, images, embeds | Specialized layouts, branding, dynamic content |
| Flexibility | Quick to use, but not highly flexible | Highly flexible, tailored to specific needs |
| Reusability | Can be saved but not deeply modified | Can be made fully reusable and dynamic |
Benefits of Reusable Blocks in WordPress
- Save time by reusing the same content layout across pages
- Ensure consistency in design and messaging
- Update content globally with a single edit
- Reduce chances of formatting errors or style mismatches
- Great for headers, CTAs, testimonials, or contact sections
- Improve workflow for teams managing multiple pages or clients
Creating a Simple Reusable Block
Reusable blocks in Gutenberg are a great way to save time and maintain consistency across your WordPress site. With just a few clicks, you can turn any block into a reusable component that can be used site-wide.
For Proper guidance, investing in WordPress Development Services Would be a Great move.
Steps to Create a Reusable Block
- Select the block or group of blocks you want to reuse.
- Click the three-dot menu (⋮) in the block toolbar.
- Choose “Add to Reusable blocks.”
- Enter a clear, descriptive name for the block.
- Click “Save” to store it in your reusable blocks library.
How to Access and Reuse a Saved Block
- Click the “+” icon to add a new block.
- Go to the “Reusable” tab in the block inserter.
- Search for your saved block by name or scroll through the list.
- Select it to insert into your post or page.
- It’s ready to be used like any other block.
Steps in Editing and Updating a Reusable Block
- Choose the reusable block you want to edit in the editor.
- To make edits to it, click on “Edit” on the toolbar.
- Modify as needed (text, layout, design).
- To remove all text changes from documents that share the block, click “save” instead.
CTAs, signup forms, and well-organized repetitive content are best for reusable blocks. They lessen repetitive tasks and make your site neater and professional.
Custom Block Development from the Ground Up
Having total control over custom blocks enables you to build content tailored specifically for your site. Unlike default blocks, custom blocks provide you with flexibility in design and control.
1. Prepare Your Development Environment
Preparation of your system is crucial if you want to build. A development environment optimizes block testing and building.
- Install package management along with build scripts, Node.js, and npm.
- Use XAMPP, MAMP, or Local Flywheel to set up a development environment on WordPress.
- Confirm that you can reach the plugin directory of your WordPress installation for testing purposes.
2. Use @wordpress/create-block to scaffold a Block
One of the simplest methods is to start with a scaffolding tool that comes with pre-made block code, which can be adjusted for your needs. This is a time-saver and gives you what you need right out of the box.
- Make sure to open your terminal or command prompt.
- Run npx @wordpress/create-block my-custom-block with the name you want for your block, or yank the quotations for command input.
- A plugin directory is created along with its required folders and pre-written example block files.
3. Understand the Block’s File Structure
Identifying the block’s core files allows you to navigate through customization and understand its working parts.
- The metadata for the block, such as name, title, category, and icon, resides inside block.json.
- edit.js governs the styling and functionality of the block within the editor.
- Saving the display of the block content on the front end is done by save.js.
- The registering of blocks and combination is usually done in index.js.
4. Customize the Block
Steps of uniqueness can be added to the block’s features after pre-structure block files are edited to fit your criteria.
- To manage controls for the build interface, edit edit.js.
- Ensure that save.js is adjusted for HTML outline and front-end view control.
- The dynamic content, block located state, and control attributes will need to be used.
- Make can be configured in block.json alongside the additional parameters left to it.
Making Custom Blocks Reusable
Custom blocks are even more powerful when they are reusable custom blocks. This enables users to add custom elements without using a template on different pages where they need the same elements.
How to Enable Reusability in Custom Blocks
Plan your custom block with appropriate content flexibility and reusability enhancements. The most important part is managing block attributes correctly.
- Use attributes in block.json to capture data and parameters.
- Make suitable changes to attributes in edit.js and propagate the changes in save.js.
- No value should be hardcoded. You should make all content through the block editor editable.
- Verify that changes to the attributes can be permanently stored and reused across posts without losing relevant configurations of the block.
Best Practices for Naming and Organizing Reusable Blocks
Well-organized blocks are far more useful in terms of management across big sites. Enhanced visibility also improves the likelihood that content authors are able to quickly interact with the set blocks.
- Use nonspecific distinguishing change classes that identify entities such as sponsors’ “green Hero Banner”
- alphabetize the names of blocks according to specific block types.
- Sort blocks of the same categories in plugins or categories.
- Share documentation for custom blocks with users, such as your team or clients.
Global Vs Local reusable blocks
It is very important to know how block instances work. Align block instances when a block is supposed to be kept in sync or outside.
Global Reusable Block
- Single time saving that can be repeated in various locations.
- Any changes made in one instance show everywhere.
Local Copy:
- Converts a reusable block into a regular block.
- Can be edited independently without affecting other pages.
Designing custom blocks with reusability in mind boosts consistency, saves time, and makes content management more efficient for everyone involved.
Advanced Custom Block Development
Advanced block development allows you to create dynamic, interactive, and highly customizable blocks. These blocks can adapt to user input, display flexible content, and follow your brand’s design system.
Adding Dynamic Content to Custom Blocks
Dynamic content makes your blocks more useful by responding to changes and storing user input. This is handled through well-defined attributes and render logic.
- Define attributes in block.json to store values like text, images, or settings.
- In edit.js, use those attributes to render and update block content in real-time.
- In save.js, ensure the same attributes are used to render saved output.
- Consider using InnerBlocks for nesting other blocks dynamically.
Using Block Attributes and Controls
Controls allow users to change block settings directly from the editor. WordPress provides a rich set of UI components for this.
- Use TextControl, TextareaControl, or RichText for input fields.
- Add ToggleControl, SelectControl, or RangeControl for block settings.
- Use InspectorControls to organize settings into a sidebar panel.
- Always keep the UI clean and intuitive for editors.
Styling Reusable Blocks with CSS/SCSS
Styling ensures your blocks match the rest of your site’s design. SCSS can help keep styles organized and scalable.
- Write styles in style.scss for front-end display and editor.scss for the block editor.
- Register both styles in block.json under style and editorStyle.
- Use variables and mixins in SCSS to maintain design consistency.
- Apply class names to your block wrapper for targeted styling.
Mastering these advanced techniques helps you build custom blocks that are dynamic, reusable, and visually consistent, enhancing both the editor experience and the final site output.
Advanced Custom Block Development
Advanced block development allows you to create dynamic, interactive, and highly customizable blocks. These blocks can adapt to user input, display flexible content, and follow your brand’s design system.
Adding Dynamic Content to Custom Blocks
Dynamic content makes your blocks more useful by responding to changes and storing user input. This is handled through well-defined attributes and render logic.
- Define attributes in block.json to store values like text, images, or settings.
- In edit.js, use those attributes to render and update block content in real-time.
- In save.js, ensure the same attributes are used to render saved output.
- Consider using InnerBlocks for nesting other blocks dynamically.
Using Block Attributes and Controls
Controls allow users to change block settings directly from the editor. WordPress provides a rich set of UI components for this.
- Use TextControl, TextareaControl, or RichText for input fields.
- Add ToggleControl, SelectControl, or RangeControl for block settings.
- Use InspectorControls to organize settings into a sidebar panel.
- Always keep the UI clean and intuitive for editors.
Styling Reusable Blocks with CSS/SCSS
Styling ensures your blocks match the rest of your site’s design. SCSS can help keep styles organized and scalable.
- Write styles in style.scss for front-end display and editor.scss for the block editor.
- Register both styles in block.json under style and editorStyle.
- Use variables and mixins in SCSS to maintain design consistency.
- Apply class names to your block wrapper for targeted styling.
Managing and Exporting Reusable Blocks
Reusable blocks are incredibly helpful when working across multiple WordPress sites. They save time and help maintain consistency in design and content. To export a reusable block, go to the block manager in the editor, select your block, and choose “Export as JSON.”
To import it on another site, go to the reusable block section and click “Import from JSON.” This makes it easy to move design elements between projects without rebuilding them.
For better control and organization, use plugins like EditorsKit, Block Visibility, or Block Manager. These tools let you group blocks, limit access based on user roles, and hide unused blocks for a cleaner interface.
If a reusable block is updated, changes are reflected everywhere it’s used. That’s great for consistency, but requires caution – test changes before updating widely used blocks.
Managing and syncing reusable blocks effectively ensures your WordPress content stays clean, consistent, and easy to scale.
Troubleshooting Common Issues
Reusable blocks may break if their underlying structure or attributes are changed. When a block shows as “Unavailable,” it often means the block has been deleted or modified incorrectly. You can usually fix this by editing the block’s code or restoring a previous version using the block manager or a backup plugin.
Conflicts between blocks can also occur, especially if two blocks use the same name or a plugin overrides functionality. To avoid this, use unique namespaces for custom blocks and test compatibility with popular plugins. For deeper issues, enable WordPress debug mode and check the browser console for script errors.
Conclusion
Reusable and custom Gutenberg blocks are powerful tools for creating consistent, flexible content in WordPress. Whether you’re saving a layout for future use or building a block from scratch, these features can greatly improve your workflow.
Take time to experiment with different block setups, attributes, and styles. Start small and gradually add complexity as you get more comfortable with the process.
If you’re looking to learn more, explore the WordPress Block Editor Handbook, developer forums, and plugin documentation. With practice and curiosity, you’ll unlock even more potential from the block editor.