Sheikh Ashrafuzzman

<p><strong>Block Responsive</strong> is the ultimate WordPress plugin for creating mobile-friendly, responsive websites with Gutenberg blocks. This comprehensive responsive design tool gives you complete control over how your content appears across all devices, making it easy to build responsive layouts without any coding knowledge.</p>
<p>Perfect for creating <strong>mobile-responsive websites</strong>, this plugin automatically adds responsive breakpoints and device-specific styling options to every core WordPress block. Whether you’re optimizing for mobile SEO, improving tablet user experience, or fine-tuning desktop layouts, Block Responsive provides the responsive web design tools you need.</p>
<h3>Key Features</h3>
<h3>📱 <strong>Display Controls</strong></h3>
<p>Hide/show blocks on specific devices (mobile, tablet, desktop)<br />
Simple toggle controls with device-specific icons<br />
Visual feedback for hidden blocks</p>
<h3>🎨 <strong>Responsive Styling Options</strong></h3>
<p><strong>Alignment Controls</strong>: Block alignment settings for different screen sizes<br />
<strong>Colors Controls</strong>: Text color, background color, and link color with device-specific settings<br />
<strong>Background Image Controls</strong>: Responsive background image settings<br />
<strong>Typography Controls</strong>: Font size, line height, letter spacing, and text transform for each device<br />
<strong>Dimensions Controls</strong>: Padding, margin, width, and height controls for responsive layouts<br />
<strong>Border & Shadow Controls</strong>: Border radius, border width, and shadow effects per device</p>
<h3>How It Works</h3>
<ol>
<li><strong>Block Inspector Integration</strong>: Responsive controls appear in the block inspector panel</li>
<li><strong>Device-Specific Settings</strong>: Configure different styles for mobile, tablet, and desktop</li>
<li><strong>Real-time Preview</strong>: See changes immediately in the editor</li>
<li><strong>Frontend Rendering</strong>: Automatically generates and applies responsive CSS</li>
</ol>
<h3>Have feedback, suggestions, or feature ideas?</h3>
<p>Feel free to share them with me at <strong><a href="mailto:hello@ashrafuzzaman.com" rel="nofollow ugc">hello@ashrafuzzaman.com</a>.</strong> I’d love to hear your thoughts!</p>


Block Responsive – Make Editor Blocks Responsive Easily


Tested it for a few minutes, and I can already picture all the different ways this can be used - job well done, really !


This should be in the core.

Transform any WordPress block into a fully responsive element with device-specific controls for mobile, tablet, and desktop optimization.

Alex Prokopenko / JustCoded

<p>This plugin controls the TinyMce “style_formats” parameter. It allows adding custom formatters to the Wysiwyg editor.</p>
<p>This is only a user interface to the standard feature, which is disabled by default and explained in the official<br />
documentation on codex.wordpress.org: https://codex.wordpress.org/TinyMCE_Custom_Styles</p>
<h4>Features</h4>
<ul>
<li>Load Settings from DB or .json file from theme</li>
<li>Enable/Disable some style_format features for more clean formatting</li>
<li>Nice interface to quickly add your formats</li>
<li>Ability to apply custom editor css for each rule separately</li>
<li>You can group your styles for more clear usage</li>
<li>Bootstrap preset: pre-defined bootstrap styles for editor.</li>
</ul>
<h4>Example: Custom link class</h4>
<p>For example, you can define an addition dropdown option of the css classes for the link tag.<br />
To do so, create such row formatter:.</p>
<ul>
<li>Title: My Link Style</li>
<li>Selector: a</li>
<li>Classes: my-link-style</li>
<li>Editor CSS: a.my-link-style { color:red; }</li>
</ul>
<h4>Plugin Demo</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/fljkfet52eg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Presets</h4>
<p>We added special feature called “Presets” – these are pre-defined styles included inside the plugin.<br />
You can import them to your site with a single click.</p>
<p>With presets we plan to add popular CSS framework classes to be able to use them inside the editor.<br />
We started with a Bootstrap preset, because it’s one of the most popular CSS framework right now.</p>
<h4>ISSUES TRACKER</h4>
<p>If you have any feedbacks or bugs found, please write to our GitHub issues tracker:<br />
https://github.com/justcoded/just-tinymce-custom-styles/issues</p>


Just TinyMCE Custom Styles

Easy to use plugin and created for WP developers

Easy to use and developer friendly

Adds dropdown options for custom css classes and attributes for tags in WordPress TinyMCE Editor.

Block Responsive – Make Editor Blocks Responsive Easily vs Just TinyMCE Custom Styles