Click on the button below to reveal a dialog window.
\n\n\n\n\nUse the buttons below to copy this article URL or share it with your device.
\n\n\n\n\n\n\n\n\n\nJohannes Gensfleisch zur Laden zum Gutenberg (c. 1393–1406 – 3 February 1468) was a German inventor and craftsman who invented the movable-type printing press. His invention enabled a much faster rate of printing and later spread across the world, leading to an information revolution and the unprecedented mass-spread of literature throughout Europe.
\n\n\n\nSource : Wikipedia
\n\nBLOCKPARTY_POST_SHARING_MARKUP_EOF;\n\n$post_id = wp_insert_post(\n\tarray(\n\t\t'post_title' => 'Blockparty Post Sharing',\n\t\t'post_name' => 'blockparty-post-sharing-demo',\n\t\t'post_content' => $post_content,\n\t\t'post_status' => 'publish',\n\t\t'post_type' => 'post',\n\t)\n);\necho 'Post created with ID: ' . $post_id;\n?>" } ] } diff --git a/.wp-env.json b/.wp-env.json index 459d5e9..dafab87 100644 --- a/.wp-env.json +++ b/.wp-env.json @@ -1,5 +1,5 @@ { "plugins": [ - "./" + "." ] } diff --git a/README.md b/README.md new file mode 100644 index 0000000..23ff1d0 --- /dev/null +++ b/README.md @@ -0,0 +1,274 @@ +# Blockparty — Post Sharing + +[](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/BeAPI/blockparty-post-sharing/refs/heads/develop/.wordpress-org/blueprints/blueprint.json) + +[](https://www.gnu.org/licenses/gpl-2.0) +[](https://wordpress.org/) +[](https://php.net/) + +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](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) 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 + +```bash +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 + +```bash +# 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: + +```php +add_filter( 'blockparty_post_sharing_breakpoint', function () { + return 782; +} ); +``` + +- **Filter name:** `blockparty_post_sharing_breakpoint` +- **Parameters:** `int` — Breakpoint width in pixels. +- **Default:** `600` + +### Icon customization + +Default icons are exposed as CSS custom properties on `.wp-block-blockparty-post-sharing-button`: + +```css +.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; +} +``` + +## 🛠️ 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 +├── 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 + +```bash +# 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 + +```bash +# 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: + +```bash +# 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:- { __( - 'Blockparty Post Sharing – hello from the editor!', - 'blockparty-post-sharing' - ) } -
+ <> +- { 'Blockparty Post Sharing – hello from the saved content!' } -
- ); -} diff --git a/src/blockparty-post-sharing/style.scss b/src/blockparty-post-sharing/style.scss index 41c4d37..d31a033 100644 --- a/src/blockparty-post-sharing/style.scss +++ b/src/blockparty-post-sharing/style.scss @@ -1,12 +1,82 @@ /** * The following styles get applied both on the front of your site * and in the editor. - * - * Replace them with your own styles or remove the file completely. */ -.wp-block-create-block-blockparty-post-sharing { - background-color: #21759b; - color: #fff; - padding: 2px; +.wp-block-blockparty-post-sharing-button { + --wp-block-blockparty-post-sharing-buttons-direction: row; + --wp-block-blockparty-post-sharing-buttons-align: stretch; + --wp-block-blockparty-post-sharing-buttons-gap: 0.5rem; + --wp-block-blockparty-post-sharing-button-gap: 0.5rem; + --wp-block-blockparty-post-sharing-button-icon-size: 1.25rem; + --wp-block-blockparty-post-sharing-button-icon-color: currentColor; + --wp-block-blockparty-post-sharing-button-copy-icon: url("./img/link.svg"); + --wp-block-blockparty-post-sharing-button-share-icon: url("./img/share.svg"); + --wp-block-blockparty-post-sharing-button-check-icon: url("./img/check.svg"); + + &__actions { + display: flex; + flex-wrap: wrap; + align-items: var(--wp-block-blockparty-post-sharing-buttons-align, stretch); + flex-direction: var(--wp-block-blockparty-post-sharing-buttons-direction, row); + gap: var(--wp-block-blockparty-post-sharing-buttons-gap, 0.5rem); + } + + &__copy, + &__share { + display: inline-flex; + align-items: center; + gap: var(--wp-block-blockparty-post-sharing-button-gap, 0.5rem); + cursor: pointer; + } + + &.has-icon-position-right &__copy, + &.has-icon-position-right &__share { + flex-direction: row-reverse; + } + + &.has-no-icons &__icon { + display: none; + } + + &__icon { + display: block; + flex-shrink: 0; + width: var(--wp-block-blockparty-post-sharing-button-icon-size, 1.25rem); + height: var(--wp-block-blockparty-post-sharing-button-icon-size, 1.25rem); + background-color: var( + --wp-block-blockparty-post-sharing-button-icon-color, + currentColor + ); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } + + &__copy .wp-block-blockparty-post-sharing-button__icon { + mask-image: var(--wp-block-blockparty-post-sharing-button-copy-icon); + } + + &__copy.is-copied .wp-block-blockparty-post-sharing-button__icon { + mask-image: var(--wp-block-blockparty-post-sharing-button-check-icon); + } + + &__share .wp-block-blockparty-post-sharing-button__icon { + mask-image: var(--wp-block-blockparty-post-sharing-button-share-icon); + } + + &__status { + margin: 0.5rem 0 0; + } + + .sr-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } } diff --git a/src/blockparty-post-sharing/view.js b/src/blockparty-post-sharing/view.js index 0ca2133..c869765 100644 --- a/src/blockparty-post-sharing/view.js +++ b/src/blockparty-post-sharing/view.js @@ -1,25 +1,149 @@ /** - * Use this file for JavaScript code that you want to run in the front-end - * on posts/pages that contain this block. - * - * When this file is defined as the value of the `viewScript` property - * in `block.json` it will be enqueued on the front end of the site. + * Front-end behavior for the post sharing block. + */ +import { __ } from '@wordpress/i18n'; + +/** + * Copy text to the clipboard with a fallback for older browsers. * - * Example: + * @param {string} text Text to copy. + */ +async function copyToClipboard( text ) { + if ( navigator.clipboard?.writeText ) { + await navigator.clipboard.writeText( text ); + return; + } + + const textarea = document.createElement( 'textarea' ); + textarea.value = text; + textarea.setAttribute( 'readonly', '' ); + textarea.style.position = 'absolute'; + textarea.style.left = '-9999px'; + document.body.appendChild( textarea ); + textarea.select(); + const copied = document.execCommand( 'copy' ); + document.body.removeChild( textarea ); + + if ( ! copied ) { + throw new Error( 'Unable to copy to clipboard.' ); + } +} + +/** + * Temporarily update the copy button and screen reader status after success. * - * ```js - * { - * "viewScript": "file:./view.js" - * } - * ``` + * @param {HTMLElement} copyButton Copy button element. + * @param {HTMLElement} statusEl Screen reader status element. + * @param {string} copiedLabel Label to display after copy. + */ +function showCopySuccess( copyButton, statusEl, copiedLabel ) { + const labelEl = copyButton.querySelector( + '.wp-block-blockparty-post-sharing-button__label' + ); + + if ( ! labelEl ) { + return; + } + + const originalLabel = labelEl.textContent; + + labelEl.textContent = copiedLabel; + copyButton.classList.add( 'is-copied' ); + statusEl.textContent = copiedLabel; + statusEl.hidden = false; + + window.setTimeout( () => { + labelEl.textContent = originalLabel; + copyButton.classList.remove( 'is-copied' ); + statusEl.textContent = ''; + statusEl.hidden = true; + }, 3000 ); +} + +/** + * Show a temporary status message. * - * If you're not making any changes to this file because your project doesn't need any - * JavaScript running in the front-end, then you should delete this file and remove - * the `viewScript` property from `block.json`. + * @param {HTMLElement} statusEl Status element. + * @param {string} message Message to display. + */ +function showStatus( statusEl, message ) { + statusEl.textContent = message; + statusEl.hidden = false; + + window.setTimeout( () => { + statusEl.textContent = ''; + statusEl.hidden = true; + }, 3000 ); +} + +/** + * Initialize a single post sharing block instance. * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script + * @param {HTMLElement} block Block wrapper element. */ +function initBlock( block ) { + const url = block.dataset.url; + const title = block.dataset.title; + const copyButton = block.querySelector( '[data-action="copy"]' ); + const status = block.querySelector( '[data-role="status"]' ); + + if ( ! url || ! copyButton || ! status ) { + return; + } + + const shareButton = block.querySelector( '[data-action="share"]' ); + const copiedLabel = + block.dataset.copiedLabel || + __( 'Link copied', 'blockparty-post-sharing' ); + + if ( ! navigator.share && shareButton ) { + shareButton.hidden = true; + } + + copyButton.addEventListener( 'click', async () => { + try { + await copyToClipboard( url ); + showCopySuccess( copyButton, status, copiedLabel ); + } catch { + showStatus( + status, + __( 'Unable to copy link', 'blockparty-post-sharing' ) + ); + } + } ); + + if ( shareButton && navigator.share ) { + shareButton.addEventListener( 'click', async () => { + try { + const shareData = { url }; + + if ( title ) { + shareData.title = title; + } + + if ( navigator.canShare && ! navigator.canShare( shareData ) ) { + showStatus( + status, + __( 'Unable to share', 'blockparty-post-sharing' ) + ); + return; + } + + await navigator.share( shareData ); + } catch ( error ) { + if ( error?.name === 'AbortError' ) { + return; + } + + showStatus( + status, + __( 'Unable to share', 'blockparty-post-sharing' ) + ); + } + } ); + } +} -/* eslint-disable no-console */ -console.log( 'Hello World! (from create-block-blockparty-post-sharing block)' ); -/* eslint-enable no-console */ +document + .querySelectorAll( '.wp-block-blockparty-post-sharing-button' ) + .forEach( initBlock );