Introducing: Live Responsive Editing

Introducing: Live Responsive Editing

In this update, we’re proud to say that Stackable is fully compatible with WordPress 5.5. We also bring you a new amazing feature: Live Responsive Editing, now you can both preview and edit your designs in tablet and mobile views! Upgrade to version 2.9.0 now.

What’s New in WordPress 5.5?

Our newest update makes Stackable fully compatible with WordPress 5.5. But before we jump into the details of our update, let’s see what new things are included in 5.5.

WordPress 5.5 includes a lot of improvements to Gutenberg. I’ll run through them a bit, but feel free to skip this section.

  • There’s a new Block Directory – you can search for a block and install them right away without having to leave the Block Editor.
  • Block Patterns – these are groups of blocks that are pre-designed that you can quickly add.
  • The native image block now comes with some cropping and scaling controls.
  • The interface got a bit of a facelift – has more contrast, better accessibility, easier to click and drag things.
  • You can select multiple blocks of the same type and edit them all at once.
  • You can now toggle between Desktop, Tablet and Mobile views.

We’re pretty excited about the last improvement in particular (at least in this update). Here’s why..

Responsive Designs in Stackable Blocks

In Stackable blocks, you can assign different values for Desktop, Tablet and Mobile in some block properties. You can click on the circular Responsive Toggle to switch between the different values.

This is a great tool and allows you to tailor fit your designs for smaller screens – a must have in today’s world.

The downside with this is that in order to see what the tablet and mobile values did to your design, you’d have to preview your page and resize your browser. It wasn’t a good editing experience.. until now.

Live Responsive Editing for Tablet and Mobile

With the latest Stackable update and WordPress 5.5, you can now preview your blocks in Tablet and Mobile, and better yet, you can edit them live!

Here is live responsive editing in action, where I adjust tablet-only and mobile-only block styles:

If you didn’t get what was happening, let me explain what I did in the video above.

You can now toggle Gutenberg to preview the page in Tablet and Mobile views, just click on the Preview button beside Publish. (Note that your page has to have a block first, or else the Preview button can’t be clicked)

I clicked on Tablet and Mobile preview modes, and it resized the Block Editor. The block’s design adjusted to Tablet or Mobile mode too.

Afterwards, I adjusted my block’s content alignment and paddings to better suit smaller screens. Notice also that the Responsive Toggles in Stackable also changed to indicate that I was editing for Tablets or Mobile devices.

Video is choppy because of the video capturing process.

Once I had my tablet and mobile block settings set, I toggled back to desktop view.

If you toggle again between the different device previews, you’ll see that all the tablet and mobile settings you set would show up in your view. Sweet!

Toggle Between Different Screen Sizes

To make the tablet and mobile editing experience seamless, we’ve integrated our Responsive Toggles with the Gutenberg Preview Mode picker. It’s really an amazing page builder-like experience.

Here it is in action:

Edit Multiple Blocks at the Same Time

You can now also select multiple blocks of the same kind and adjust their settings in the inspector at the same time. This is a time saver and allows you to perform some fine tuning across multiple blocks easier.

Here I am highlighting multiple Column blocks (shift + click), then adjusting the styles of both blocks simultaneously.

When Does WordPress 5.5 Come Out?

So all of the new things above are only available once WordPress 5.5 comes out.

The new version of WordPress should arrive on August 11, 2020, so you’ll have to wait until then to use these new features. They’re worth the wait!

There is a way if you want to try it out now. If you have a staging site or a local development site (never try it out in your actual live site), you can use the WordPress Beta Tester plugin to install the Beta or Release Candidate for WordPress 5.5. There’re some instructions here on how to set it up.

New Admin Settings Design

Lastly, our new settings area has been said to be too.. lively 😁

So, we also took this time to further improve how our admin settings pages look. Now our pages are more fitting to WordPress and rocks a more neutral design.

New design for Stackable settings pages

Final Words

Aside from those we also fixed a few bugs. More notably we fixed an issue a few users have pointed out regarding a PHP warning notice about register_setting being used incorrectly.

Those are all the new updates for Stackable 2.9. Comment below if you have any thoughts about this update. If you want to discuss, be sure to join our Stackable Community in Facebook.

1 thought on “Introducing: Live Responsive Editing

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.