davidfcarr

<p>Creates a Gutenberg block displayed float right or float left relative to other content. You may set padding, margins, background color or background image, border style and border color.</p>
<p><iframe loading="lazy" title="Floating Callout Plugin for the New WordPress Editor" width="750" height="422" src="https://www.youtube.com/embed/Wayzhve-g1g?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>Useful for creating an information sidebar, such as an About the Author block within an article, or a callout such as an invitation to register for your webinar within an article on the same topic.</p>
<p>Source code at <a href="https://github.com/davidfcarr/floating-callout" rel="nofollow ugc">https://github.com/davidfcarr/floating-callout</a></p>
<p>Borrows from techniques used in the Wrapper component of the <a href="https://wordpress.org/plugins/editor-blocks/" rel="ugc">Editor Blocks</a> plugin. Created using <a href="https://github.com/ahmadawais/create-guten-block" rel="nofollow ugc">Create Guten Block</a>.</p>
<h3>Credits</h3>
<pre><code>Floating Callout
Copyright (C) 2018 David F. Carr

This program 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 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

See the GNU General Public License at <http://www.gnu.org/licenses/gpl-2.0.html>.
</code></pre>


Floating Callout

Creates a Gutenberg block displayed float right or float left relative to other content. You may set padding, margins, background color or background  …

Roel Magdaleno

<p>The callout box includes an icon, and the post content. This plugin uses <a href="https://heroicons.com" rel="nofollow ugc">Heroicons</a> and  <a href="https://github.com/roelmagdaleno/php-heroicons" rel="nofollow ugc">php-heroicons</a> PHP package.</p>
<h3>Icons</h3>
<p>A callout box includes an icon that describes what’s the purpose of the callout box.</p>
<p>The plugin is using <a href="https://heroicons.com" rel="nofollow ugc">Heroicons</a> so you can go to its website and see what icons are available to use within this plugin.</p>
<p>You can use <code>solid</code> and <code>outline</code> icons.</p>
<h3>Types</h3>
<p>A callout box can have multiple types:</p>
<ul>
<li><code>primary</code></li>
<li><code>success</code></li>
<li><code>danger</code></li>
<li><code>warning</code></li>
</ul>
<p>By default, the callout box is <code>primary</code>.</p>
<h3>Icon Methods</h3>
<p>The icon method can be 2 types:</p>
<ul>
<li><code>solid</code></li>
<li><code>outline</code></li>
</ul>
<p>By default, for shortcodes and Gutenberg the icon method is <code>solid</code>.</p>
<h3>Shortcode</h3>
<p>For WordPress Classic Editor or even Gutenberg, you can use the shortcode:</p>
<pre><code>[wp-callout icon="check-circle" type="primary" method="solid"]
Welcome to WordPress. This is the post content.
[/wp-callout]
</code></pre>
<p>The shortcode supports 3 attributes:</p>
<ul>
<li><code>icon</code>. The icon to show in the callout box. (Default: <code>check-circle</code>)</li>
<li><code>type</code> Callout box type. (Default: <code>primary</code>)</li>
<li><code>method</code> (Default: <code>solid</code>)</li>
</ul>
<h3>Gutenberg Block</h3>
<p>For Gutenberg users, you can use <strong>Callout Box</strong> block.</p>
<p>Every Gutenberg Callout Box, you can change the icon, type and method using the block properties.</p>
<p>Those properties are the same for the shortcode.</p>
<p>Then, you just type your callout box content inside the Gutenberg block.</p>
<h3>Block Presets</h3>
<p>When you insert a new Gutenberg Block Callout you can select 1 of the 4 presets installed in the plugin:</p>
<ul>
<li>Information</li>
<li>Success</li>
<li>Danger</li>
<li>Warning</li>
</ul>
<p>After you select one preset, your callout box will change its background color and icon.</p>


Callout Boxes

Insert callout boxes in your posts and pages using shortcodes and Gutenberg blocks.

Floating Callout vs Callout Boxes