Blockparty — Post Sharing

A WordPress plugin that adds a Gutenberg block to copy and share the current post URL in one click.

📋 Description

Blockparty Post Sharing is a WordPress plugin that lets editors add sharing actions to posts via the block editor. Visitors can copy the article link to the clipboard or open the native share sheet of their device when supported.

✨ Features

Native Gutenberg block: Full integration with the WordPress block editor
Copy link: Copies the current post permalink to the clipboard with visual and screen reader feedback
Native share: Uses the Web Share API when available
Editable labels: Customize button text inline with RichText
Copied state label: Configure the label shown after a successful copy
Icons: Default icons rendered with CSS mask-image, overridable via CSS custom properties
Icon settings: Show or hide icons and position them left or right
Responsive display: Show or hide each button independently on desktop and mobile
Dynamic rendering: Server-side output with post URL and title context
Internationalized: Multilingual support with translation files
View script: Frontend script handles copy, share, and copied-state UI

🔧 Requirements

WordPress: Version 6.8 or higher
PHP: Version 8.1 or higher
PHP Extension: ext-json

📦 Installation

Installation via Composer

composer require beapi/blockparty-post-sharing

Manual Installation

Download the latest version of the plugin
Extract the archive to the /wp-content/plugins/ folder
Activate the plugin from the WordPress "Plugins" menu

Development Installation

# Clone the repository
git clone https://github.com/BeAPI/blockparty-post-sharing.git
cd blockparty-post-sharing

# Install PHP dependencies
composer install

# Install JavaScript dependencies
npm install

# Build the assets
npm run build

🚀 Usage

Open the Gutenberg block editor on a post
Add a Post Sharing Button block (search for "Post Sharing" in the Widgets category)
Customize the block:
- Copy link and Share button labels directly in the editor
- Display: choose desktop or mobile viewport and toggle each button visibility
- Copy Button: set the label displayed after the link is copied
- Icon: show or hide icons and choose left or right position
On the frontend:
- Copy link copies the current post URL
- Share opens the native share dialog when the browser supports it

Responsive breakpoint

The desktop/mobile breakpoint defaults to 600px. Themes and plugins can override it with:

add_filter( 'blockparty_post_sharing_breakpoint', function () {
	return 782;
} );

Filter name: blockparty_post_sharing_breakpoint
Parameters: int — Breakpoint width in pixels.
Default: 600

Share networks (fallback menu)

When the Web Share API is unavailable, the Share button opens a menu of social networks. Themes and plugins can customize the list with:

add_filter( 'blockparty_post_sharing_networks', function ( $networks, $url, $title, $post_id ) {
	// Remove WhatsApp.
	$networks = array_values(
		array_filter(
			$networks,
			static function ( $network ) {
				return ( $network['id'] ?? '' ) !== 'whatsapp';
			}
		)
	);

	// Add Mastodon.
	$networks[] = [
		'id'    => 'mastodon',
		'label' => 'Mastodon',
		'url'   => 'https://mastodon.social/share?text=' . rawurlencode( $title . ' ' . $url ),
	];

	return $networks;
}, 10, 4 );

Filter name: blockparty_post_sharing_networks
Parameters:
- array $networks — List of networks (id, label, url)
- string $url — Post permalink
- string $title — Post title
- int $post_id — Post ID
Default: Facebook, X, Bluesky, LinkedIn, WhatsApp

Icon and menu customization

Default icons and the share fallback menu are exposed as CSS custom properties on .wp-block-blockparty-post-sharing-button:

.wp-block-blockparty-post-sharing-button {
	--wp-block-blockparty-post-sharing-button-copy-icon: url( '/path/to/link.svg' );
	--wp-block-blockparty-post-sharing-button-share-icon: url( '/path/to/share.svg' );
	--wp-block-blockparty-post-sharing-button-check-icon: url( '/path/to/check.svg' );
	--wp-block-blockparty-post-sharing-button-icon-size: 1.25rem;
	--wp-block-blockparty-post-sharing-button-icon-color: currentColor;

	/* Share fallback menu */
	--wp-block-blockparty-post-sharing-button-menu-offset: 0.5rem;
	--wp-block-blockparty-post-sharing-button-menu-min-width: 12rem;
	--wp-block-blockparty-post-sharing-button-menu-padding: 0.5rem;
	--wp-block-blockparty-post-sharing-button-menu-gap: 0.25rem;
	--wp-block-blockparty-post-sharing-button-menu-border-width: 1px;
	--wp-block-blockparty-post-sharing-button-menu-border-style: solid;
	--wp-block-blockparty-post-sharing-button-menu-border-color: currentColor;
	--wp-block-blockparty-post-sharing-button-menu-border-radius: 0.25rem;
	--wp-block-blockparty-post-sharing-button-menu-bg: #fff;
	--wp-block-blockparty-post-sharing-button-menu-color: currentColor;
	--wp-block-blockparty-post-sharing-button-menu-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
	--wp-block-blockparty-post-sharing-button-menu-link-padding: 0.5rem 0.75rem;
	--wp-block-blockparty-post-sharing-button-menu-link-border-radius: 0.125rem;
	--wp-block-blockparty-post-sharing-button-menu-link-hover-bg: rgba(0, 0, 0, 0.06);
	--wp-block-blockparty-post-sharing-button-menu-link-gap: 0.5rem;
	--wp-block-blockparty-post-sharing-button-menu-icon-size: 1.25rem;
	--wp-block-blockparty-post-sharing-button-menu-icon-color: currentColor;
	--wp-block-blockparty-post-sharing-button-menu-facebook-icon: url( '/path/to/facebook.svg' );
	--wp-block-blockparty-post-sharing-button-menu-x-icon: url( '/path/to/x.svg' );
	--wp-block-blockparty-post-sharing-button-menu-bluesky-icon: url( '/path/to/bluesky.svg' );
	--wp-block-blockparty-post-sharing-button-menu-linkedin-icon: url( '/path/to/linkedin.svg' );
	--wp-block-blockparty-post-sharing-button-menu-whatsapp-icon: url( '/path/to/whatsapp.svg' );
}

🛠️ Development

Project Structure

blockparty-post-sharing/
├── src/                              # Block sources
│   └── blockparty-post-sharing/
│       ├── block.json                # Block configuration
│       ├── edit.js                   # Edit component
│       ├── index.js                  # Entry point
│       ├── view.js                   # Frontend copy/share logic
│       ├── img/                      # Default SVG icons
│       ├── editor.scss               # Editor styles
│       └── style.scss                # Frontend and editor styles
├── includes/                         # PHP classes
│   ├── BlockRenderer.php             # Dynamic block rendering
│   ├── ResponsiveDisplay.php         # Responsive visibility rules
│   └── ShareNetworks.php             # Share fallback networks (filterable)
├── build/                            # Compiled assets (blocks-manifest.php, etc.)
├── languages/                        # Translation files
├── .wordpress-org/blueprints/        # WordPress Playground blueprint
├── blockparty-post-sharing.php       # Main plugin file
├── composer.json                     # PHP dependencies
└── package.json                      # JavaScript dependencies

Available Scripts

JavaScript

# Development with hot reload
npm start

# Production build
npm run build

# JavaScript linter
npm run lint:js

# CSS linter
npm run lint:css

# Code formatting
npm run format

# Generate POT file
npm run make-pot

# Generate JSON translation files
npm run make-json

# Create plugin ZIP archive
npm run plugin-zip

# Start local development environment
npm run start:env

# Stop local development environment
npm run stop:env

PHP

# Check code with PHP_CodeSniffer
composer cs

# Automatically fix code
composer cb

# Run unit tests
composer phpunit

Coding Standards

The project follows WordPress coding standards:

WPCS (WordPress Coding Standards) for PHP
ESLint with WordPress rules for JavaScript
GrumPHP to automate pre-commit checks

Development Environment Setup

The plugin uses @wordpress/env to create a local WordPress development environment:

# Start the environment
npm run start:env

# Access WordPress
# URL: http://localhost:8888
# Default credentials: admin / password

# Stop the environment
npm run stop:env

🔍 Code Quality

The project integrates several quality tools:

PHP_CodeSniffer: PHP coding standards verification
PHPCompatibility: PHP compatibility verification
PHP Parallel Lint: PHP syntax error detection
GrumPHP: Pre-commit checks automation

🌍 Internationalization

The plugin is fully internationalized (text domain: blockparty-post-sharing). Translation files are available in the languages/ folder.

Available Languages

English (default)
French (when translation files are provided)

Adding a Translation

Use the languages/blockparty-post-sharing.pot file as a base
Create your .po and .mo files
Place them in the languages/ folder

🤝 Contributing

Contributions are welcome! To contribute:

Fork the project
Create a branch for your feature (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Make sure your code:

Follows WordPress coding standards
Passes all quality tests (PHPCS, ESLint)
Is properly documented
Includes translations if necessary

📄 License

This plugin is distributed under the GPL-2.0-or-later license.

👥 Authors

Be API Technical Team

Email: technical@beapi.fr
Website: https://beapi.fr

🔗 Useful Links

📝 Changelog

See CHANGELOG.md for the full version history.

Developed with ❤️ by Be API

Navigation Menu

Uh oh!

Blockparty — Post Sharing

📋 Description

✨ Features

🔧 Requirements

📦 Installation

Installation via Composer

Manual Installation

Development Installation

🚀 Usage

Responsive breakpoint

Share networks (fallback menu)

Icon and menu customization

🛠️ Development

Project Structure

Available Scripts

JavaScript

PHP

Coding Standards

Development Environment Setup

🔍 Code Quality

🌍 Internationalization

Available Languages

Adding a Translation

🤝 Contributing

📄 License

👥 Authors

🔗 Useful Links

📝 Changelog

Uh oh!

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

Blockparty — Post Sharing

📋 Description

✨ Features

🔧 Requirements

📦 Installation

Installation via Composer

Manual Installation

Development Installation

🚀 Usage

Responsive breakpoint

Share networks (fallback menu)

Icon and menu customization

🛠️ Development

Project Structure

Available Scripts

JavaScript

PHP

Coding Standards

Development Environment Setup

🔍 Code Quality

🌍 Internationalization

Available Languages

Adding a Translation

🤝 Contributing

📄 License

👥 Authors

🔗 Useful Links

📝 Changelog