Responsive Controls in Spectra Blocks

WordPress 7.1 introduced its own way of styling blocks for desktop, tablet, and mobile. Spectra Blocks 1.0.7 builds on that instead of running a separate system beside it, so the widths where tablet and mobile begin, the way values carry between devices, and the place where you edit them are now the same for Spectra blocks and for core blocks.

This guide walks you through what changed, how to edit a block for a specific device, and what to expect on pages you built before the update. Let us start with the two changes you will notice first.

What Changed in Spectra Blocks 1.0.7

Two things are different from earlier versions. Spectra now uses the responsive widths that WordPress defines, and per device editing happens through the Responsive styles option in the WordPress editor rather than through a separate Spectra toggle. Everything that switches on device inside Spectra follows the same widths, including block styling, Hide on Desktop, Tablet, and Mobile, the Slider block, and popups.

Spectra Blocks 1.0.7 and Spectra Blocks Pro 1.0.4 were released together. If you use Pro, update both plugins, since Pro 1.0.4 pairs with Spectra Blocks 1.0.7.

Where Tablet and Mobile Start Now

Spectra used to decide its own device widths. It now reads them from WordPress, and the WordPress defaults are narrower than the earlier Spectra ones. Here is how the two compare:

Device	From Spectra Blocks 1.0.7	Up to Spectra Blocks 1.0.6
Desktop	783 px and wider	1024 px and wider
Tablet	481 px to 782 px	768 px to 1023 px
Mobile	Up to 480 px	Up to 767 px

Most phones held upright are under 480 px and are still treated as mobile. A standard iPad held upright is 768 px and is still treated as a tablet. The widths that change are large phones turned sideways and small tablets, which now use tablet styling instead of mobile, and larger tablets or half width browser windows between 783 px and 1023 px, which now use desktop styling instead of tablet.

If you want different widths, WordPress lets a theme define its own tablet and mobile breakpoints in its theme settings, and Spectra follows whatever the theme sets. Astra, Spectra One, and the default WordPress themes do not set custom widths, so they use the values above.

How to Edit a Block for Tablet or Mobile

Per device editing in WordPress 7.1 is a two step idea. You pick a device to look at, and you decide whether your edits apply to that device only or to every device. The switch between those two modes is called Responsive styles.

Here is how to use it:

• Open the page in the editor and select the Spectra block you want to change.
• Click the device icon in the top toolbar to open the View menu.
• Turn on Responsive styles. The menu shows a check mark next to it once it is on.
• In the same menu, choose Tablet or Mobile. The canvas resizes, and a Tablet or Mobile badge appears under the block name in the sidebar.
• Change the settings you want. Each change applies to the selected device only, and the canvas shows the result right away.
• Switch back to Desktop when you are done, or leave Responsive styles on for the rest of your session.

Responsive styles is remembered per user, so once you turn it on, it stays on for you across pages until you turn it off.

Previewing Without Editing

When Responsive styles is off, Tablet and Mobile in the View menu are previews only. The canvas shows the desktop design in a narrower frame, and any change you make while previewing applies to every device, exactly as it does for core WordPress blocks.

Spectra reminds you of this. When you preview Tablet or Mobile with Responsive styles off, a blue note appears at the top of the Spectra style panels with a Turn On link. Clicking it switches Responsive styles on for you.

Which Settings You Can Change Per Device

While Responsive styles is on and you are on Tablet or Mobile, the sidebar shows only the style panels that can hold a different value for each device. The Settings and Styles tabs are replaced by this list of panels:

• Typography for font, size, line height, letter spacing and text alignment.
• Color for text and link colours where the block offers them per device.
• Background for background image, size, position and overlay.
• Dimensions for padding, margin, width, height and gap. Block Position from Spectra Blocks Pro also lives here.
• Border and Shadow for border width, radius and shadow.
• Layout for direction, justification and alignment on Container and similar blocks.
• Elements for styles applied to elements inside the block, such as links or buttons.

Settings that hold a single value for all devices, such as the HTML tag of a Text block or the block’s Global Styles class, are not shown on Tablet or Mobile. Switch back to Desktop to change them.

How Values Carry Between Devices

Desktop is the base. Any value you set on Desktop applies everywhere unless a device has its own value. Tablet fills in anything you have not set from Desktop, and Mobile does the same. Mobile no longer takes its value from Tablet.

Take a Container with padding of 45 px on Desktop and 20 px on Tablet, with nothing set on Mobile. Mobile shows 45 px because it falls back to the desktop value. If you want 20 px on phones too, set it on Mobile directly. Each panel carries a short reminder, “Values inherit from Desktop on reset”, so this is easy to remember while you work.

What Happens to Pages Built Before This Update

You do not need to rebuild anything. Pages created with earlier versions keep their saved values and their look. Where an older page relied on a tablet value carrying down to mobile, Spectra keeps that behaviour for that page, so nothing shifts when you open it. Your content is converted to the new format only when you edit a page and save it again.

The one change you may notice on existing pages is the width where tablet and mobile styling begins, described above. If a section looks different at a width between 481 px and 1023 px, check which device that width now belongs to and adjust the values for that device.

If You Are Still on WordPress 7.0

Spectra Blocks 1.0.7 works on WordPress 7.0 as well as 7.1. On WordPress 7.0, the responsive controls work as they did before, with the desktop, tablet and mobile icons on each Spectra setting, and tablet values continue to carry down to mobile. The Responsive styles option and the per device panels described in this guide appear once you update to WordPress 7.1.

The new tablet and mobile widths apply on WordPress 7.0 too, so the table above is the reference for both versions.

A Quick Example

Imagine a hero section with a Container set to a horizontal layout and 80 px of padding on Desktop. On a phone, you want the columns to stack and the padding to shrink. Turn on Responsive styles, choose Mobile, open the Layout panel and switch the direction to vertical, then open Dimensions and set the padding to 24 px. Switch back to Desktop and the original layout is untouched. Tablet still shows the desktop design until you give it values of its own.

Frequently Asked Questions

I changed padding on Tablet and Desktop changed too. Why?

Responsive styles were off, so Tablet was only a preview and your change applied to every device. Turn on Responsive styles from the View menu and try again.

Where did half of my settings go on Tablet?

With Responsive styles on, Tablet and Mobile show only the settings that can differ per device. Switch to Desktop for the rest.

Can I change the breakpoints in Spectra?

Spectra follows the widths defined by WordPress and your theme. Themes can set their own tablet and mobile widths, and Spectra will use them. There is no separate setting inside Spectra.

Hide on Tablet is not hiding my block at 900 px?

At 900 px, the block is now treated as desktop, so Hide on Desktop is the option that applies there.

Do I have to update Spectra Blocks Pro as well?

Yes. Spectra Blocks Pro 1.0.4 is built for Spectra Blocks 1.0.7. Update the free plugin first, then Pro.

Wrapping Up

Responsive editing in Spectra Blocks now works the same way it does across the rest of the WordPress editor, so the skills you learn here apply to every block on your site. If anything on your pages looks different after the update or you are not sure which device a width belongs to, reach out to our support team, and we will be glad to help.