Phi Phan

<p>A simple, lightweight, accessibility-ready icon separator block.</p>
<h3>Key Features</h3>
<ul>
<li>Customize the icon width, spacing, color and position.</li>
<li>Customize the separator width, style, color and position.</li>
<li>Accessibility ready with ‘separator’ role.</li>
<li>Simple and easy to use but included full settings even with responsive width and responsive vertical margin.</li>
<li>An icon library included icons from “Bootstrap Icons”, “Ionicons”, “Dashicons” and new “WordPress Icons”.</li>
</ul>
<p>Please take a look at <a href="https://boldpatterns.net/keywords/separator?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Icon+Separator" rel="nofollow ugc">these custom block patterns</a> that use this block to see how it can be applied to real-world sites.</p>
<p>If this plugin is useful for you, please do a quick review and <a href="https://wordpress.org/support/plugin/icon-separator/reviews/#new-post" rel="ugc">rate it</a> on WordPress.org to help us spread the word. I would very much appreciate it.</p>
<p>Please check out my other plugins if you’re interested:</p>
<ul>
<li><strong><a href="https://wordpress.org/plugins/content-blocks-builder" rel="ugc">Content Blocks Builder</a></strong> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.</li>
<li><strong><a href="https://wordpress.org/plugins/display-a-meta-field-as-block" rel="ugc">Meta Field Block</a></strong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.</li>
<li><strong><a href="https://wordpress.org/plugins/svg-block" rel="ugc">SVG Block</a></strong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.</li>
<li><strong><a href="https://wordpress.org/plugins/breadcrumb-block" rel="ugc">Breadcrumb Block</a></strong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.</li>
<li><strong><a href="https://wordpress.org/plugins/block-enhancements" rel="ugc">Block Enhancements</a></strong> – Adds practical features to blocks like icons, box shadows, transforms, etc.</li>
<li><strong><a href="https://wordpress.org/plugins/counting-number-block" rel="ugc">Counting Number Block</a></strong> – A block to display numbers with a counting effect</li>
<li><strong><a href="https://wordpress.org/plugins/better-youtube-embed-block" rel="ugc">Better YouTube Embed Block</a></strong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.</li>
</ul>
<p>The plugin is developed using @wordpress/create-block.</p>


Icon Separator

A simple, lightweight, accessibility-ready icon separator block.

Kevin Batdorf

<p>Generate and add a simple wavy divider to anywhere on your page, giving you the ability to separate blocks of content with an impressive, professional-looking design element.</p>
<ul>
<li>Follow <a href="https://twitter.com/kevinbatdorf" rel="nofollow ugc">@kevinbatdorf</a> on Twitter</li>
<li>View on <a href="https://github.com/KevinBatdorf/wavy-divider" rel="nofollow ugc">GitHub</a></li>
</ul>
<h4>Features</h4>
<ul>
<li>Color settings, including opacity.</li>
<li>Choose between wide, normal, and full width</li>
<li>Choose between rounded edges and stright lines</li>
<li>Fine tune curves and lines with built-in controls</li>
<li>Supports top or bottom shapes</li>
<li>Stack multiple dividers with group block (see below)</li>
<li>Gradients – easy to use (see below)</li>
<li>Control height, number of points, and direction</li>
<li>Use a single, smooth point to give you a curved divider</li>
</ul>
<h4>Gradients</h4>
<p>To use a gradient, you need to wrap the wavy divider in a group block and apply the gradient to the group block. After that, create a wavy shape and apply a color that matches your content background (e.g. white). You can then switch the direction of the divider (under settings) to give a mirrored effect. This way the gradient is applied to the group block and the wavy divider acts as a mask.</p>
<h4>Group Block</h4>
<p>If nesting the wavy divider in a group block, you may want to remove the padding and margins so that the wavy divider will not have spacing around it. To handle this, select the group block, and under “Advanced” (at the bottom of the settings area) add these two classes:</p>
<ul>
<li><code>wavy-divider-remove-margin</code></li>
<li><code>wavy-divider-remove-padding</code></li>
</ul>
<h4>Patterns</h4>
<p>Within the block inserter, under the Patterns tab, select ‘Wavy Divider’ from the dropdown menu to view some example patterns.</p>


Wavy Divider

A colorful, fun, lightweight divider block to energize your website with character and pizazz

Icon Separator vs Wavy Divider