Last week a client asked us to revamp a product page. They wanted tabbed content for specs and reviews, and there was one legacy widget that needed some inline JavaScript and styling for a specific animation. My first instinct was to build a custom block for the tabs, or worse, reach for one of those heavy tab plugins. For the custom JS and CSS in that widget, I was bracing to either enqueue a whole new stylesheet or inject it through a shortcode function. That is a pain to maintain, trust me.
Then I remembered Gutenberg 22.1 had landed, and this got a lot cleaner. The updated Gutenberg HTML block and the new core/tabs block are a real help if you write custom code in WordPress.
Tabs without an extra plugin
For years, if a client wanted tabs on a page you had two options: find a plugin that added a shortcode, or build your own. Both had drawbacks. Plugins tended to drag in their own baggage, extra CSS, JavaScript, and features you did not need, which slowed the page down. Rolling your own was a time sink, and not many developers enjoy building tab interfaces from scratch every time.
With Gutenberg 22.1 there is now a native core/tabs block. It is experimental for now, so you have to turn on the “Blocks: add experimental blocks setting” to try it, but it already works well. That means less reliance on third-party code for common UI elements and more consistency inside the editor, which is the direction the WordPress core team has been working toward.
JavaScript and CSS in the HTML block
The bigger change is to the HTML block. Before 22.1, dropping custom CSS or JavaScript straight into an HTML block was hit or miss. It often got stripped out or was just awkward to manage, so you usually ended up enqueueing files or using PHP hooks even for small, isolated snippets. That was a real slog when all you needed was a bit of interactivity or styling tied to one custom HTML element in the content.
Not anymore. The HTML block now lets you add and edit CSS and JavaScript directly. That is handy for small, self-contained components that need their own styling or behavior without cluttering your global stylesheets or script files. Think of a custom animation on a hero section, or a script for a third-party embed: you can keep it all in one place. It is a practical option for focused, block-level customization, and it is covered in the official release notes at make.wordpress.org/core.
<!-- wp:html -->
<div class="bbioon-custom-animation">
<p>This content has a special effect.</p>
</div>
<style>
.bbioon-custom-animation {
background-color: #f0f0f0;
padding: 20px;
border-left: 5px solid #0073aa;
opacity: 0;
transition: opacity 1s ease-in-out;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const bbioonAnimationDiv = document.querySelector('.bbioon-custom-animation');
if (bbioonAnimationDiv) {
setTimeout(() => {
bbioonAnimationDiv.style.opacity = 1;
}, 500);
}
});
</script>
<!-- /wp:html -->This snippet shows how you can keep the HTML, CSS, and JavaScript for a single component inside the block itself. No more editing theme files for a tiny tweak, and the code stays organized and close to where it is used.
The takeaway
What Gutenberg 22.1 gives you is more control and fewer awkward workarounds. A native tabs block and a more capable HTML block mean you can build richer content right in the editor, lean less on extra plugins, and keep sites lighter and faster.
This stuff gets complicated fast. If you are tired of debugging someone else’s mess and just want your site to work, drop my team a line. We have probably seen it before.
