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

1. Download the latest version of the plugin
2. Extract the archive to the /wp-content/plugins/ folder
3. 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

1. Open the Gutenberg block editor on a post
2. Add a Post Sharing Button block (search for "Post Sharing" in the Widgets category)
3. 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
4. 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

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

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the project
2. Create a branch for your feature (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. 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

• WordPress Block Editor Documentation
• WordPress Coding Standards
• Block API Reference
• Web Share API (MDN)

📝 Changelog

See CHANGELOG.md for the full version history.

---

Developed with ❤️ by Be API