M Asif Rahman

Rupok

WPDeveloper

Md Monir Hossain

Md. Tasnim Alam

<p>Share all your posts and content on popular social platforms seamlessly with one click using <strong>Social Share</strong> Gutenberg block.</p>
<p>With this stunning plugin, you can add social share buttons on your post or page any place you want. In addition, you can share your posts on Facebook, Twitter, LinkedIn, Pinterest, and any other social media platform you prefer. Without any coding, you will get full control in the block’s design & customizations.</p>
<p><strong>Note:</strong> Plugin will not work on local server. You should have an online website for the plugin to function properly.</p>
<h3>Why Should You Get Social Share Block:</h3>
<ul>
<li>No configuration needed</li>
<li>Direct share to chosen social platforms</li>
<li>Add as many custom platform icons as you want</li>
<li>Floating social share buttons with scrolling effect</li>
<li>Include custom shapes, alignments, hover effects, margins, padding, etc</li>
</ul>
<p><strong>Completely Customizable:</strong> You can customize Social Share Block just the way you want.</p>
<p><strong>Super Light-weight:</strong> No extra resources are used and it’s highly optimized for super fast loading & instant live editing.</p>
<p><strong>Dedicated Support:</strong> We have an extraordinary support team ready to help you. Ask your questions in the support forum, we’ll get back to you immediately.</p>
<h3>🚀 BACKED BY A TRUSTED TEAM</h3>
<p>This Block is brought to you by <a href="https://wpdeveloper.com" rel="nofollow ugc">WPDeveloper</a>, the team behind the most popular elements library <a href="https://wordpress.org/plugins/essential-addons-for-elementor-lite/" rel="ugc">Essential Addons for Elementor</a> (used by almost 1 million+ happy users from 180+ countries).</p>
<h3>👨‍💻 DOCUMENTATION AND SUPPORT</h3>
<ul>
<li>For documentation and tutorials go to our <a href="https://essential-blocks.com/docs/" rel="nofollow ugc">documentation</a></li>
<li>To report issue and contribution visit <a href="https://github.com/EssentialBlocks/social-share-block" rel="nofollow ugc">Github</a>.</li>
<li>If you have any more questions, visit our support on the <a href="https://wordpress.org/support/plugin/social-share-block" rel="ugc">Plugin’s Forum</a>.</li>
<li>For more information about features, FAQs and documentation, check out our website at <a href="https://wpdeveloper.com/" rel="nofollow ugc">WPDeveloper</a>.</li>
</ul>
<h3>🙌 JOIN THE COMMUNITY</h3>
<p>🎦 Subscribe to our <a href="https://www.youtube.com/wpdevelopernet/?sub_confirmation=1" rel="nofollow ugc">Youtube Channel</a> to watch video tutorials on WordPress.</p>
<p>🤝 Join our <a href="https://www.facebook.com/groups/wpdeveloper.net/" rel="nofollow ugc">Facebook Community</a> & get connected with expert web creators like yourself.</p>
<p>🧡 LOVED Social Share Block? Rate us on <a href="https://wordpress.org/support/plugin/social-share-block/reviews/#new-post" rel="ugc">WordPress Repository</a></p>
<p>🔥 GET FREEBIES FOR YOUR WORDPRESS SITE</p>
<p>Consider checking out our other WordPress solutions & boost your WordPress website:</p>
<p>🔝 <a href="https://wordpress.org/plugins/essential-addons-for-elementor-lite/" rel="ugc">Essential Addons For Elementor</a>: Most popular Elementor addons with 70+ widgets & ready blocks</p>
<p>☁ <a href="https://wordpress.org/plugins/templately/" rel="ugc">Templately</a>: Free templates library for Elementor & Gutenberg along with the cloud collaboration for WordPress</p>
<p>🔔 <a href="https://wordpress.org/plugins/notificationx/" rel="ugc">NotificationX</a>: Best Social Proof & FOMO Marketing Solution to increase conversion rates</p>
<p>📚 <a href="https://wordpress.org/plugins/betterdocs/" rel="ugc">BetterDocs</a>: Best Documentation & Knowledge Base Plugin for WordPress reduce manual support tickets & improve user experience.</p>
<p>⏰ <a href="https://wordpress.org/plugins/wp-scheduled-posts/" rel="ugc">WP Scheduled Posts</a>: Advanced editorial calendar & complete solution for WordPress Post Scheduling, social sharing, missed scheduled alerts and more.</p>
<p>⭐ <a href="https://wordpress.org/plugins/reviewx/" rel="ugc">ReviewX</a>: WooCommerce Product review plugin that allows users to submit product reviews with multiple criteria, photos, video and more</p>
<p>⚡ <a href="https://wordpress.org/plugins/flexia" rel="ugc">Flexia</a>: Most lightweight, customizable & multi purpose theme for WordPress</p>
<p>Visit <a href="https://wpdeveloper.com/" rel="nofollow ugc">WPDeveloper</a> to learn more about how to do better in WordPress with <a href="https://wpdeveloper.com/blog" rel="nofollow ugc">Help Tutorial, Tips & Tricks</a>.</p>


Social Share Block

Enable one-click social sharing option to grow your audience

Shafayat Hossain

<p>Circle Progress Bar Block is a modern Gutenberg block plugin that adds beautiful circular progress indicators to your WordPress site. Perfect for displaying progress, statistics, or metrics in a visually appealing way.</p>
<h3>Source Code</h3>
<p>All uncompiled source code is included in this plugin. The production code in <code>build/index.js</code> is compiled from:</p>
<h4>Main Source File</h4>
<p>Located at <code>src/index.js</code>, this is the complete React source code for the block:</p>
<pre><code>`javascript
</code></pre>
<p>import { registerBlockType } from ‘@wordpress/blocks’;<br />
import { InspectorControls } from ‘@wordpress/block-editor’;<br />
import {<br />
    PanelBody,<br />
    RangeControl,<br />
    ColorPicker,<br />
    TextControl,<br />
    SelectControl,<br />
} from ‘@wordpress/components’;</p>
<p>registerBlockType(‘circle-progress-bar/progress’, {<br />
    title: ‘Circle Progress Bar’,<br />
    icon: ‘chart-pie’,<br />
    category: ‘widgets’,<br />
    description: ‘A customizable circle progress bar.’,<br />
    keywords: [‘progress’, ‘circle’, ‘chart’],<br />
    supports: { html: false },<br />
    attributes: {<br />
        percentage: { type: ‘number’, default: 75 },<br />
        size: { type: ‘number’, default: 100 },<br />
        strokeColor: { type: ‘string’, default: ‘#00aaff’ },<br />
        bgColor: { type: ‘string’, default: ‘#e6e6e6’ },<br />
        text: { type: ‘string’, default: ‘Progress’ },<br />
        useShadow: { type: ‘boolean’, default: false },<br />
        useGradient: { type: ‘boolean’, default: false },<br />
        strokeWidth: { type: ‘number’, default: 10 },<br />
        fontSize: { type: ‘number’, default: 20 },<br />
        fontColor: { type: ‘string’, default: ‘#333’ }<br />
    },</p>
<pre><code>// Full source code available in src/index.js
// See GitHub repository for complete implementation
</code></pre>
<p>});<br />
    <code></code></p>
<h4>Build Tools</h4>
<p>The production code is generated using standard WordPress tools:<br />
* <code>@wordpress/scripts</code> – For development and build<br />
* Webpack – For module bundling<br />
* Babel – For modern JavaScript compatibility</p>
<h4>Building from Source</h4>
<ol>
<li>The source is in <code>src/index.js</code></li>
<li>Build tools are configured in <code>package.json</code></li>
<li>To compile:<br />
   <code>bash<br />
npm install<br />
npm run build</code></li>
<li>Output goes to <code>build/index.js</code></li>
</ol>
<h4>Directory Structure</h4>
<p>To work with the source code:<br />
1. Clone the GitHub repository: <a href="https://github.com/jqsafi/circle-progress-bar" rel="nofollow ugc">https://github.com/jqsafi/circle-progress-bar</a><br />
2. Install dependencies: <code>npm install</code><br />
3. Start development server: <code>npm start</code><br />
4. Build production version: <code>npm run build</code></p>
<h4>Features</h4>
<ul>
<li>
<p><strong>Fully Customizable Design</strong></p>
<ul>
<li>Adjustable circle size and stroke width</li>
<li>Custom colors for progress bar, background, and text</li>
<li>Optional gradient effects</li>
<li>Configurable font size and text</li>
<li>Shadow effects available</li>
</ul>
</li>
<li>
<p><strong>Block Editor Integration</strong></p>
<ul>
<li>Easy to use block controls</li>
<li>Live preview in editor</li>
<li>Works with Full Site Editing (FSE)</li>
<li>Multiple instances support</li>
</ul>
</li>
<li>
<p><strong>Performance Optimized</strong></p>
<ul>
<li>Lightweight SVG-based rendering</li>
<li>No external dependencies</li>
<li>Optimized for modern browsers</li>
</ul>
</li>
</ul>
<h3>Usage</h3>
<h4>Basic Configuration</h4>
<ol>
<li>After adding the block, set your desired percentage (0-100) in the block settings panel</li>
<li>Customize the appearance:
<ul>
<li>Change circle size using the “Size” slider</li>
<li>Adjust stroke width using the “Thickness” slider</li>
<li>Set colors for the progress bar, background, and text</li>
<li>Enable/disable gradient effect</li>
<li>Add custom text above or below the percentage</li>
</ul>
</li>
</ol>
<h4>Advanced Features</h4>
<ul>
<li><strong>Shadow Effects</strong>: Enable and customize shadow effects in the “Effects” panel</li>
<li><strong>Text Options</strong>: Configure font size, weight, and position</li>
</ul>
<h3>Development</h3>
<p>The Circle Progress Bar Block is developed using modern JavaScript and follows WordPress coding standards. The source code is available on GitHub:</p>
<ul>
<li>GitHub Repository: <a href="https://github.com/jqsafi/circle-progress-bar" rel="nofollow ugc">https://github.com/jqsafi/circle-progress-bar</a></li>
</ul>
<h4>Building from Source</h4>
<ol>
<li>Clone the repository</li>
<li>Install dependencies:<br />
   <code>npm install</code></li>
<li>For development with live reload:<br />
   <code>npm start</code></li>
<li>For production build:<br />
   <code>npm run build</code></li>
</ol>
<p>The plugin uses the following build tools:<br />
* @wordpress/scripts for development and build processes<br />
* webpack for bundling<br />
* Babel for JavaScript transpilation<br />
* ESLint and Prettier for code formatting</p>
<p>Source files are located in:<br />
* <code>src/</code> – Uncompiled JavaScript source code<br />
* <code>build/</code> – Compiled and minified production code</p>


Circle Progress Bar Block

A customizable circle progress bar Gutenberg block for displaying progress, statistics, or metrics in a visually appealing way.

Social Share Block vs Circle Progress Bar Block