Gutenberg, the new WordPress block editor, allows you to customize the markup of your blocks by accessing and modifying block wrapper classes.
When you insert a block in Gutenberg, WordPress automatically generates some markup and classes around that block. This includes a main wrapper div with a class like “wp-block-gallery” or “wp-block-quote”.
These block wrapper classes allow you to target specific blocks in your CSS and customize their styling. In this post, I’ll explain how to access block wrapper classes in Gutenberg and how to modify them.
Let’s start from the beginning.
What are Block Wrapper Classes?
Block wrappers are structural HTML elements wrapped around your blocks that allow for styling, scripting, and customization. Every block will generate its own parent wrapper when rendered.
In the classic WordPress editor, your content was written in a single flow without many containers or markup surrounding it. But Gutenberg takes a more structured, sectioned approach with its use of blocks.
Blocks allow you to split up your content into discrete sections. And each block generates some HTML markup around your content when rendered on the front end.
Specifically, most blocks have a main parent <div> that wraps around them. This is referred to as the block wrapper.
For example, a paragraph block might render like this:
<div class=”wp-block-paragraph”> <p>This is inside a paragraph block!</p> </div>
The main wrapper <div> has a class identifying the type of block. In this case “wp-block-paragraph”.
This parent wrapper class is incredibly useful. By targeting the class, you can:
- Style specific blocks in your CSS files
- Identify blocks to manipulate with JavaScript
- Assign custom IDs and classes
In Gutenberg, it’s important to understand the concept of block wrappers, as they are central to how blocks are rendered and allow for customizations.
On top of the main class, blocks can also have additional classes assigned, like alignment classes. We’ll explore more about how to work with these classes later on.
Why Access Block Wrapper Classes?
Wrapper classes open up tons of styling possibilities and consistency without cluttering your actual content markup.
Before we dive into how to modify block wrapper classes, let’s discuss why you would want to do this in the first place. There are a few key reasons:
Custom Styling
The main reason is for custom styling and layouts. By adding your own classes to blocks, you can target them specifically in your CSS files.
For example, you may want your image galleries to have a different max-width from your video embeds. Or have special styling for quote blocks that appear in sidebars. The possibilities are endless.
Without wrapper classes, you’d have to rely on generic tags and class names which may conflict with other plugins and theme styling. But with custom wrapper IDs, you can style blocks discretely.
Consistency
Wrapper classes also help when building custom Gutenberg templates. If you want all galleries within a certain template to have the same style or layout, you can assign a shared class to their block wrappers.
This allows for consistent styling within post and page templates in the editor.
Spacing and Wrappers
Finally, classes come in handy for adding additional wrappers and spacing to blocks. You can use class names to target blocks and wrap them in divs or spans to tune spacing and alignment.
Instead of adding extra unnecessary markup, you can keep your markup clean and use CSS classes for styling wrappers and space
How to Access Block Wrapper Classes in Gutenberg
You can access the block wrapper classes by inspecting a block in the Gutenberg editor. For example, insert a Gallery block and open your browser’s inspector tools.
You’ll see a wrapper div with a class like:
<div class=”wp-block-gallery”> …</div>
This is the main wrapper added by Gutenberg. You can use this class to target Galleries in your CSS.
There may also be additional classes, like alignment classes:
<div class=”wp-block-gallery has-text-align-center”> …</div>
These are automatically added based on the block settings.
How to Modify Wrapper Classes
Now let’s look at how to modify these classes. There are a couple of ways to do this:
Using the Block Settings Sidebar
You’ll see a sidebar with the block settings when you click on a block. At the bottom is an “Additional CSS Class” field where you can add custom classes.
For example, you could add a class like “my-custom-gallery”.
This will get the following output on the block wrapper:
You can then target this class in your CSS files to perform necessary styling. I prefer this approach as it’s much easier and convenient.
Via Code (Block Filters)
You can also modify classes using block filters in your theme or plugins.
For example:
This code will add the class “my-custom-gallery” to all your Gallery blocks.
Conclusion
Now you know how to access block wrapper classes in Gutenberg and the straightforward process of modifying them. Just remember to use the inspector to view default classes, and use the sidebar or block filters to add your own.
This allows for granular CSS styling and customization without extra markup. Give it a try on your next Gutenberg project!
