WordPress 7 and S-Tier Framework 2

Intro

WordPress 7 is here, and it changes how the editor works. The simplified version is that the editor now runs in an iFrame, so editable fields cannot exist in the editor canvas anymore.
We prepared for this change and built S-Tier Framework 2 around it. Here’s what’s new, what it means for your site, and why it’s a good thing.

A better editing experience

WordPress 7 brings a change that will make the editor show your content exactly as it appears on your live site – same fonts, same layout, same spacing. What you see while editing will match what your visitors see – hopefully.

Older Gutenberg blocks (API v2) were written assuming they’d always run directly on the page – but inside an iFrame, the editor has its own separate environment, which will cause them to break or behave unexpectedly. Updating to API v3 means each block works within its own context, making it reliable in both the old and new editor.

This change is being rolled out in stages, to give everyone enough time to prepare:

How it works in WordPress 7.0: 

The improved editor turns on automatically for any page where all the blocks are built to the current standard(v3). If a page contains an outdated block(v2) – it stays on the old editor for that page. Full and forced rollout of the editor to everyone comes with WordPress 7.1, and the older blocks will not work properly or at all.

Since all S-Tier blocks are already updated, your site will get the improved editing experience right away – without waiting for 7.1.

Functionality

Blocks built for the new editor

We rebuilt all of our blocks to meet the new WordPress standard. But we didn’t stop at just making them compatible – we took the chance to make editing experience much better too for your content team and our developers.

Styled block previews

Each block now shows you exactly how it will look on your site, right there in the editor. No more switching to preview mode to check.

Main WordPress sidebar

Common settings are always visible on the side. Quick changes – text, images, links – without opening anything extra.

Expanded editor

Need more control? Open the full editor for a complete set of options. It’s there when you need it, out of the way when you don’t.

Together, these changes mean less time switching between editing and previewing, and more time actually building.

Design (UX & UI)

We kept the block tab layout you’re used to, but tidied it up. The tabs are now at the top of the panel instead of the side, and there’s less distractions in the editor.
It’s easier to find what you’re looking for without feeling overwhelmed.

The goal was to keep the interface out of your way so you can focus on the content. Less clicking around, more getting things done.

Performance

Every S-Tier block is self-contained — it has its own PHP, CSS, and JavaScript code, and none of that code loads unless that block is actually used on the page. If a page has three blocks on it, only those three blocks load their code. Everything else stays out of the way.

This is a big deal for page speed. Websites often slow down because they load a pile of code that most pages never use. With S-Tier Framework based themes and the new WordPress approach, that doesn’t happen. Each page loads the minimum it needs to display correctly – nothing more.

The result is a faster and easier to use website for your visitors, and better scores on performance tools like Google PageSpeed.

Productivity

On top of the functionality and design changes that affect WordPress editor and greatly help improve productivity and content population when the website is already in client hands, we created a few new tools for internal usage to help our developers deliver final product/website to our clients – faster.

Creating a fresh theme for a new project

We built NPM Package for setting up a new S-Tier theme with everything in place. One command, and the project is ready to go.

New Gutenberg Block creation

NPM Package for creating a new Gutenberg Block with the all the necessary files customized and placed to appropriate location – including the new WordPress standard and editor support.

		npx new-s-block

	

Setting up a new website or creating a new block used to involve a lot of repetitive, manual work. These tools do that work automatically, so our development team can skip the manual setup and get straight to building.

Automation

For years we used WPGulp – a popular tool that handles a lot of the repetitive background tasks in WordPress development – and we loved it. Things like compiling CSS, processing JavaScript, optimising images, and watching for file changes while you work. It saved a lot of time, and it did its job well.

With all the changes coming to WordPress 7 and S-Tier Framework 2 we felt that WPGulp is not aligning anymore with the intended workflow, so we decided to create our own tool for this purpose.

We built STGulp, designed specifically for S-Tier Framework 2. It does everything WPGulp did, but it runs on modern Node.js versions, and is faster.
More importantly, it knows how S-Tier projects are structured, so it works out of the box with no extra configuration needed.

The main difference is in how files are handled. WPGulp usually combines all CSS into one file and all JavaScript into one file. STGulp compiles assets into their proper locations, so block-specific CSS and JavaScript stay with their blocks, while only truly global assets are added to the main files.

What this means for your website

Think about the last time you needed a change on your website – from the moment you had the idea, to briefing your team, to seeing it live.
S-Tier Framework 2 is built to make every step of that journey shorter.

The editor looks and works the way your site actually does, so there are fewer surprises after publishing.
Your content team spends less time second-guessing what things will look like. And your development team has better tools, so new features get built and delivered faster.

Last, but not least – better performance and smoother user experience of your visitors.