Stergos Zamagias

FirePlugins

Tassos Marinos

FirePlugins Gutenberg Blocks Team

<p>FireBlocks is a collection of WordPress Blocks powering up your editing experience with Gutenberg. It helps you create stunning posts, pages, and landing pages in no time. Each block is meticulously crafted with respect to performance, accessibility, and extensibility. No code is required.</p>
<h3>Blocks Collection</h3>
<p>FireBlocks currently includes the following blocks:</p>
<ul>
<li>Countdown – <a href="https://www.fireplugins.com/fireblocks/blocks/countdown/" rel="nofollow ugc">View Demo</a></li>
<li>Notification – <a href="https://www.fireplugins.com/fireblocks/blocks/notification/" rel="nofollow ugc">View Demo</a></li>
<li>Video – <a href="https://www.fireplugins.com/fireblocks/blocks/video/" rel="nofollow ugc">View Demo</a></li>
<li>Map – <a href="https://www.fireplugins.com/fireblocks/blocks/map/" rel="nofollow ugc">View Demo</a></li>
<li>AI Text – <a href="https://www.fireplugins.com/fireblocks/blocks/ai/" rel="nofollow ugc">View Demo</a></li>
<li>Star Rating – <a href="https://www.fireplugins.com/fireblocks/blocks/star-rating/" rel="nofollow ugc">View Demo</a></li>
</ul>
<h3>Roadmap</h3>
<p>We have big plans for FireBlocks. Below you can find a list of blocks we are planning to implement.</p>
<ul>
<li>WooCommerce Products</li>
<li>Posts</li>
<li>FAQ</li>
<li>Tabs</li>
<li>Accordion</li>
<li>Google Map</li>
<li>OpenStreet Map</li>
<li>DailyMotion</li>
<li>Self hosted video</li>
<li>Social Share</li>
<li>Table of Contents</li>
<li>Testimonials</li>
<li>Progress Bar</li>
<li>Count up</li>
<li>Gallery</li>
<li>Divider</li>
<li>Video</li>
</ul>
<p>Do you have a suggestion? <a href="https://www.fireplugins.com/contact" rel="nofollow ugc">Let us know</a>.</p>
<h3>More Info About the Blocks</h3>
<p><strong>Countdown Block</strong><br />
Add an accurate countdown timer in your post/pages. Create a sense of urgency to drive sales or conversions. Perfect for flash sales, event pages, special promotions, birthdays, weddings, one-time offers, and more.</p>
<p><strong>AI Text Block</strong><br />
Unleash the Power of AI to Craft Engaging and Unique Content for Your WordPress Site with Tools like OpenAI and ChatGPT.</p>
<p><strong>Video Block</strong><br />
Embed highly performant videos from Youtube and Vimeo anywhere on your page. Make your product page or front page hero stand out with video blocks.</p>
<p><strong>Map Block</strong><br />
Help visitors find your business location with an interactive map powered by OpenStreetMap. Make your product page or front page hero stand out with video blocks.</p>
<p><strong>Star Rating Block</strong><br />
Boost sales and trust with the Star Rating Gutenberg block – A fully customizable rating system that visually showcases the quality of your products or services, capturing and displaying user feedback to boost your online reputation.</p>
<p><strong>Notification Block</strong><br />
Display notifications and alert messages to your visitors. It offers multiple options to customize the block like headline fonts, sizes, colors, background colors, and many more.</p>
<h3>Join Us To Get Updates and Resources</h3>
<ul>
<li><a href="https://www.fireplugins.com" rel="nofollow ugc">Visit FirePlugins Website</a></li>
<li><a href="https://twitter.com/firepluginsdev" rel="nofollow ugc">Follow us on Twitter</a></li>
<li><a href="https://www.facebook.com/fireplugins" rel="nofollow ugc">Follow us on Facebook</a></li>
</ul>


Gutenberg Blocks – YouTube, Vimeo, OpenStreetMap, Countdown Timer, OpenAI – FireBlocks

Enhance your WordPress site with powerful Gutenberg Blocks for OpenStreetMap, YouTube, Vimeo, OpenStreetMap, Countdown, Notification, and more.

bozdoz

hupe13

Gerald

remigr

<p>Add a map generated with <a href="http://leafletjs.com/" rel="nofollow ugc">LeafletJS</a>: an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through <a href="http://www.openstreetmap.org/" rel="nofollow ugc">OpenStreetMap</a>, or <a href="https://www.mapquest.ca/" rel="nofollow ugc">MapQuest</a> (with an app key).  Can be set per map with shortcode attributes or through the dashboard settings.</p>
<h4>Maps</h4>
<p>Simply create a <strong>map</strong> with:</p>
<pre><code>[leaflet-map]
</code></pre>
<p>Lookup an address with:</p>
<pre><code>[leaflet-map address="chicago"]
</code></pre>
<p>Know the latitude and longitude of a location? Use them (and a zoom level) with:</p>
<pre><code>[leaflet-map lat=44.67 lng=-63.61 zoom=5]
</code></pre>
<p>Add a <strong>marker</strong> under your map shortcode, like so:</p>
<pre><code>[leaflet-map]
[leaflet-marker]
</code></pre>
<p>Want more? Make more (and fit the map to contain all of them):</p>
<pre><code>[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]
[leaflet-marker address="oslo"]
[leaflet-marker address="cairo"]
[leaflet-marker address="toronto"]
</code></pre>
<p>You can even add <strong>popups</strong> (to any shape) with their names:</p>
<pre><code>[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]Tokyo[/leaflet-marker]
[leaflet-marker address="oslo"]Oslo[/leaflet-marker]
...
</code></pre>
<p>Add a link to the popup messages the same way you would add any other link with the WordPress editor.</p>
<h4>Other Shapes, GeoJSON, and KML</h4>
<p>Add a line to the map by adding <code>[leaflet-line]</code>. You can specify the postions with a list separated by semi-colon <code>;</code> or bar <code>|</code> using lat/lng: <code>[leaflet-line latlngs="41, 29; 44, 18"]</code> or addresses: <code>[leaflet-line addresses="Istanbul; Sarajevo"]</code>, or x/y coordinates for image maps.</p>
<p>Add a circle to the map by adding <code>[leaflet-circle]</code>. You can specify the position using <code>lat</code> and <code>lng</code> and the radius in meters using <code>radius</code>. You can also customize the style using <a href="https://leafletjs.com/reference.html#path-option" rel="nofollow ugc">Leaflet’s Path options</a>. Example: <code>[leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1]</code>.</p>
<p>Or you can add a geojson shape via a url (make sure you are allowed to access it if it’s not hosted on your own server): <code>[leaflet-geojson src="https://example.com/path/to.geojson"]</code>.  Add custom popups with field names; try out the default src file and fields like so:</p>
<pre><code>[leaflet-map fitbounds]
[leaflet-geojson]{name}[/leaflet-geojson]


name is a property on that GeoJSON, and it can be accessed with curly brackets and the property name.
</code></pre>
<h4>Image Maps</h4>
<p>Alternatively, you could use a plain image for visitors to zoom and pan around with <code>[leaflet-image src="path/to/image/file.jpg"]</code>.  See screenshots 3 – 5 for help setting that up.</p>
<h4>More</h4>
<p>Check out other examples on the Shortcode Helper page in the Leaflet Map admin section.</p>
<p>Check out the <strong>source code</strong> and <strong>more</strong> details on <a href="https://github.com/bozdoz/wp-plugin-leaflet-map" rel="nofollow ugc">GitHub</a>!</p>


Leaflet Map

Leaflet Map permet l’intégration facile et rapide de cartes OSM et est suffisamment flexible pour s’adapter à tous les projets. Je recommande !

Excellent plugin !

works like a charm, support on top notch!

Excelent plugin, amazing support


The folks behind the Leaflet Map plugin treated me fairly and squarely. I needed an additional functionality to be able to display a gallery shortcode inside the leaflet popup and they were kind enough to assist me and add support for this feature.


Great Plugin, Outstanding Support

Interactive maps and markers on your posts and pages with simple shortcodes.

Gutenberg Blocks – YouTube, Vimeo, OpenStreetMap, Countdown Timer, OpenAI – FireBlocks vs Leaflet Map