Anant Sites

<p>🎨 Build modern WordPress websites faster with <strong>Gutenwave Blocks</strong> – a lightweight collection of customizable Gutenberg blocks and starter templates. Designed for speed, flexibility, and Full Site Editing (FSE) support, Gutenwave makes page building simple without adding bloat.</p>
<h3>Why Choose Gutenwave?</h3>
<ul>
<li>📦 10+ Free Essential Blocks (Info Box, Section, Columns, Team, Price Table, Buttons, Advanced Image, Dual Heading, and more)  </li>
<li>⚡ Lightweight & Performance-First – optimized code, no extra scripts, instant loading  </li>
<li>📱 100% Responsive – blocks adapt to mobile, tablet, and desktop automatically  </li>
<li>🔧 Block Control – enable only the blocks you need to keep your site fast  </li>
<li>🌍 Works with Any Theme – no theme lock-in or compatibility issues  </li>
<li>🖼️ Starter Sites – import ready-made layouts for business, blogs, and agency sites</li>
</ul>
<h3>Starter Sites – Build a Website in Minutes</h3>
<p>Choose from pre-designed templates to launch your site quickly:<br />
✅ Business Websites<br />
✅ Consulting Websites<br />
✅ Digital Marketing Sites<br />
✅ Personal & Lifestyle Blogs<br />
✅ Portfolio & Creative Sites<br />
✅ And more to come!</p>
<h3>Lightweight & Developer-Friendly</h3>
<p>Gutenwave is built with clean, optimized code following WordPress coding standards. It only loads resources for the blocks you activate, ensuring blazing-fast performance and smooth editing inside the block editor.</p>
<h3>Get Started Easily</h3>
<ol>
<li>Install and activate Gutenwave Blocks.  </li>
<li>Choose your blocks or import a starter template.  </li>
<li>Customize and publish – no coding required.  </li>
</ol>
<p>📖 <a href="https://anantsites.com/docs/" rel="nofollow ugc">Documentation</a> | 💬 <a href="https://wordpress.org/support/plugin/gutenwave-blocks/" rel="ugc">Support</a></p>
<h3>Why Choose Gutenwave Blocks Over Other Block Plugins?</h3>
<p>There are many Gutenberg block libraries available, but Gutenwave focuses on what matters most: performance, flexibility, and simplicity.</p>
<ul>
<li>🚀 <strong>Lightweight & Fast</strong> – no bloat, only loads what you use  </li>
<li>🎨 <strong>Design Freedom</strong> – fully customizable blocks with advanced styling options  </li>
<li>🔧 <strong>Block Control</strong> – enable/disable blocks individually to keep your site lean  </li>
<li>🖼️ <strong>Starter Sites</strong> – ready-to-import templates for quick launches  </li>
<li>🌍 <strong>Theme Independent</strong> – works with any WordPress theme, classic or block-based  </li>
<li>🧩 <strong>Built for FSE</strong> – compatible with Full Site Editing so you can design headers, footers, and templates  </li>
<li>📱 <strong>Mobile Ready</strong> – 100% responsive on all devices  </li>
<li>✅ <strong>Future-Proof</strong> – built to follow WordPress standards and coding best practices  </li>
</ul>
<p>With Gutenwave, you get the essential building blocks you need—without the extra weight that slows down your website.</p>
<h3>Key Features</h3>
<p>✨ Gutenwave comes with a growing library of blocks and features designed for flexibility, speed, and modern website building.</p>
<h3>✅ Essential Gutenberg Blocks</h3>
<ul>
<li><strong>Section & Columns</strong> – build flexible layouts with responsive grid controls  </li>
<li><strong>Advanced Image Block</strong> – add styled images with overlays and hover effects  </li>
<li><strong>Dual Color Heading</strong> – create eye-catching titles with gradient or dual tones  </li>
<li><strong>Paragraph & Creative Button</strong> – improve typography and call-to-action designs  </li>
<li><strong>Info Box</strong> – highlight features, services, or key information  </li>
<li><strong>Team Member Block</strong> – showcase your team with photos, roles, and social links  </li>
<li><strong>Price Table Block</strong> – display pricing in a clean, responsive layout  </li>
<li><strong>Icon Block</strong> – add scalable icons to any section  </li>
</ul>
<h3>⚡ Performance & Customization</h3>
<ul>
<li><strong>Lightweight & Fast</strong> – optimized code, no unnecessary scripts  </li>
<li><strong>Block Control Panel</strong> – activate only the blocks you need  </li>
<li><strong>100% Responsive</strong> – looks perfect on desktop, tablet, and mobile  </li>
<li><strong>Works with Any Theme</strong> – no theme lock-in, compatible with block & classic themes  </li>
<li><strong>Full Site Editing (FSE) Support</strong> – design headers, footers, and templates with ease  </li>
</ul>
<h3>🎯 Use Cases</h3>
<ul>
<li>Business websites  </li>
<li>Consulting & agency sites  </li>
<li>Blogs & personal websites  </li>
<li>Portfolios & creative showcases  </li>
<li>Landing pages & startup sites</li>
</ul>
<h3>Some of the Plugins by Anant Sites</h3>
<ul>
<li><a href="https://wordpress.org/plugins/ananta-sites/" rel="ugc"><strong>Anant Sites</strong></a> – Readymade Template Kits Library  </li>
<li><a href="https://wordpress.org/plugins/anant-addons-for-elementor/" rel="ugc"><strong>Anant Addons for Elementor</strong></a> – Addons for Elementor  </li>
<li><a href="https://wordpress.org/plugins/post-extra/" rel="ugc"><strong>Post Extra</strong></a> – Advanced post enhancements for WordPress  </li>
<li><a href="https://wordpress.org/plugins/anant-team-member/" rel="ugc"><strong>Anant Team Member</strong></a> – Showcase your team with style</li>
</ul>


Gutenwave Blocks – Gutenberg Page Builder Blocks for Block Editor & FSE

Build stunning websites with Gutenberg. Free responsive blocks, starter templates & full site editing support in one lightweight plugin.

K. Adam White

<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" rel="nofollow ugc">CSS media queries</a> let us style elements based on the size of the screen. What if we wanted to style them based on the size of their <strong>container</strong>? A widget or block should often look different if it’s full-width or constrained within a column or sidebar, but we didn’t have any way to write <strong>container queries</strong> to style those elements based on their on-screen width… until now!</p>
<p>This plugin loads a small JavaScript file that conditionally applies classes to elements based on how wide those elements are in the browser. This can be used by other themes and plugins to write container-specific styles for editor blocks or widgets, so that they will display correctly wherever they are placed in the page.</p>
<p>The script works on the frontend and in the block editor — see your responsive styles live while you’re composing your post, and trust that your widgets and blocks will look their best whether they’re full-width or in the narrowest sidebar.</p>
<h3>Usage</h3>
<p>If you have a block or widget in your site that you wish to use as a responsive container, add the <code>data-responsive-container</code> attribute to that block’s container element. For example, the parent <code><div></code> for a calendar block might look like this:</p>
<pre><code><div class="calendar-block" data-responsive-container>
</code></pre>
<p>By adding that data-attribute and nothing more, your container will now be tagged with additional classes based on how big they appear:<br />
– No special class if the container is below 420px (style for this narrow context as your default).<br />
– <code>container-sm</code> if the container is 420px wide or more,<br />
– <code>container-md</code> if it is wider than 600px,<br />
– <code>container-lg</code> if it is wider than 720px, and<br />
– <code>container-xl</code> for any element 960px or wider.</p>
<p>These are default values and therefore somewhat arbitrary, so you may also provide your own custom theme- or plugin-specific breakpoint values using the <code>data-responsive-container</code> attribute. When rendering your element or block in PHP, pass an array of <strong>class names</strong> and the <strong>minimum width</strong> at which each class should be applied. These class names can be generic like the default <code>.container-*</code> classes, or they may be specific to the element being styled:</p>
<pre><code>echo sprintf(
  '<div class="myblock" data-responsive-container="%s">',
  esc_attr( wp_json_encode( [
    'myblock--2-column' => 600,
    'myblock--3-column' => 900,
  ] )
);
</code></pre>
<p>In this example your container would receive the <code>.myblock--2-column</code> class from 600px up, and <code>.myblock--3-column</code> at or above 900px.</p>
<p>Note that in this case the <code>.myblock</code> element receives no custom class below 600px. We don’t apply any class names below your specified minimum because we assume styles are written narrow-context-first, but you may ensure your smallest class is always applied by providing a minimum width of <code>0</code>:</p>
<pre><code>echo sprintf(
  '<div class="myblock" data-responsive-container="%s">',
  esc_attr( wp_json_encode( [
    'myblock--1-column' => 0, // Will apply in all circumstances.
    'myblock--2-column' => 600,
    'myblock--3-column' => 900,
  ] )
);
</code></pre>
<h3>From within WordPress</h3>
<ol>
<li>Visit ‘Plugins > Add New’</li>
<li>Search for ‘Responsive Containers’</li>
<li>Activate the Responsive Containers plugin from your Plugins page.</li>
<li>Start using <code>data-responsive-container</code> attributes within your theme or plugin.</li>
</ol>
<h3>Manually</h3>
<ol>
<li>Upload the <code>responsive-containers</code> folder to the <code>/wp-content/plugins/</code> directory</li>
<li>Activate the Responsive Containers plugin from your Plugins page.</li>
<li>Start using <code>data-responsive-container</code> attributes within your theme or plugin.</li>
</ol>
<h3>License & Attribution</h3>
<p>This plugin is licensed under the terms of the <a href="./license.txt" rel="nofollow ugc">GNU General Public License</a> (or “GPL”). It is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.</p>
<p>It was created by K. Adam White at <a href="https://humanmade.com" rel="nofollow ugc">Human Made</a>, based on a concept popularized by <a href="https://philipwalton.com/" rel="nofollow ugc">Philip Walton</a>.</p>
<p>This plugin utilizes the <a href="https://www.npmjs.com/package/resize-observer-polyfill" rel="nofollow ugc"><code>resize-observer-polyfill</code> library</a> by Denis Rul, released under the MIT license and © 2016 Denis Rul.</p>


Responsive Containers

Responsive Containers provides a framework for applying styles to blocks & widgets based on how large they appear on screen.

Gutenwave Blocks – Gutenberg Page Builder Blocks for Block Editor & FSE vs Responsive Containers