TZM Responsive Block Controls
TZM Responsive Block Controls lets you customize blocks for different screen sizes. Control visibility, alignment, font size, spacing, and much more.
Plugin info
Maintenance & Compatibility
Maintenance score
Actively maintained • Last updated 63 days ago • 1 reviews
Is TZM Responsive Block Controls abandoned?
Likely maintained (last update 63 days ago).
Compatibility
Similar & Alternatives
Explore plugins with similar tags, and compare key metrics like downloads, ratings, updates, support, and WP/PHP compatibility.
Description
While the (Gutenberg) Block Editor has brought a lot of amazing and powerful tools to web design, it still falls short in one crucial aspect: Responsive controls
TZM Responsive Block Controls is here to fill the gap!
This plugin enhances the Block Editor by adding a dedicated Responsive controls panel right inside your block’s settings tab.
The provided options allow you to customize how your blocks appear on different devices. No more need for complicated workarounds or custom CSS!
- Hide Blocks: Easily hide blocks on specific devices to create tailored, clutter-free layouts.
- Adjust Block Widths: Set custom block widths per device, ensuring your content looks great on all screen sizes.
- Reverse Direction: Reverse the direction/order of blocks (like ‘Columns’ or ‘Row’ blocks) for optimized layouts.
- Justify Blocks: Ensure fluid layouts by adjusting block justification across different devices.
- Optimize Focal Points: Fine-tune focal points for background images and other media on different screen sizes.
- Align Media and Text: Control horizontal alignment of media and text for consistent appearance across devices.
- Font Size Adjustments: Adjust font sizes for each device to ensure optimal readability and maintain visual hierarchy.
- Control Padding and Margins: Set custom padding and margins for each device to achieve perfect spacing.
- Adjust Block Gaps: Define custom spacing between blocks to maintain flow and balance on all device types.
- Customize Block Heights: Set different block heights across devices to maintain consistent layouts.
- Refine Border Radius: Customize the border-radius to achieve consistent rounded corners across different devices.
With such an extensive and exclusive feature set, TZM Responsive Block Controls provides everything you need to create stunning and visually appealing designs across different devices.
Source Code
The source code for TZM Responsive Block Controls is now available on GitHub!
Follow the development, report issues, and get involved in improving the plugin. We welcome contributions, feedback, and feature requests from the community.
Installation
-
Upload the plugin files to the
/wp-content/plugins/tzm-responsive-block-controlsdirectory, or install the plugin through the WordPress plugins screen directly. -
Activate the plugin through the ‘Plugins’ screen in WordPress
Frequently Asked Questions
TZM Responsive Block Controls applies responsive styles to your blocks using a combination of CSS classes and inline styles with CSS variables.
CSS Classes: For features like hiding or reversing blocks, the plugin assigns CSS classes to the block’s element. Examples include:
.tzm-responsive__hidden__phone – Hides the block on phone-sized screens.
.tzm-responsive__reverse__desktop – Reverses the block’s flow direction on desktop screens.
Inline Styles with CSS Variables: For features that require specific values, such as font size, padding, or margins, the plugin dynamically injects inline styles using CSS variables:
–tzm-responsive–font-size–tablet – Controls the font size on tablet-sized screens.
–tzm-responsive–padding-top–laptop – Adjusts the padding for laptop-sized screens.
Note: This plugin relies on !important declarations to ensure styles are applied correctly. While the use of !important is typically discouraged, it is necessary in certain cases to achieve consistent, responsive behavior across devices. Please keep this in mind.
While it is primarily designed to target WordPress core blocks, most responsive features should also work with third-party blocks. However, third-party blocks may not always behave the same way as core blocks, which can lead to unexpected results or prevent the responsive controls from taking effect.
Yes, you can easily customize the default breakpoints used by TZM Responsive Block Controls. Simply add the following code to your theme’s functions.php file:
function override_responsive_block_controls_breakpoints( $breakpoints ) {
$breakpoints['phone'] = '781px';
$breakpoints['tablet'] = '1024px';
$breakpoints['laptop'] = '1366px';
return $breakpoints;
}
add_filter('tzm_responsive_block_controls_breakpoints', 'override_responsive_block_controls_breakpoints');
This will override the default breakpoints and allow you to use your own custom values.
If you prefer to use your own custom CSS for styling blocks, you can disable the plugin’s default CSS output by adding this code to your theme’s functions.php file:
function enqueue_responsive_block_controls_css( $bool ) {
return false;
}
add_filter('tzm_responsive_block_controls_output_css', 'enqueue_responsive_block_controls_css');
Review feed
Screenshots
The Responsive Controls panel provides an extensive and easy-to-use feature set (Desktop/Mobile comparison view)
Preview responsive adjustments instantly (Desktop view)
Preview responsive adjustments instantly (Phone/Mobile view)
Changelog
1.2.1
- Replaced deprecated components
- Minor bugfixes & improvements
1.2.0
- Fixed “Display hidden blocks” when content is not iframed
- More bugfixes & improvements
- Added responsive “Border-Radius” support
- Hook for load_textdomain changed to “init”
- Added an option to toggle visibility of hidden blocks
- Bugfix regarding some styles not being added correctly
- Bugfix regarding “reverse” and “block width” settings
1.1.0
- Minor visual UI improvements
- Added more flexible “Width” controls, replacing “Full width”
- Added “Focal Point” control for media
- Blocks now remember their last selected device
- More bugfixes & improvements
- Added “Justification” and “Reverse” support for “Social Links” block
- Added changelog.txt
- Migrated source code to GitHub
1.0.0
- Initial release 🙂