#6945: add a props block to sync mentions to wp.org

mu-plugins/blocks/props/index.php

@@ -0,0 +1,106 @@
+<?php
+/**
+ * Block Name: Notice Block
+ * Description: Add a color-coded notice to your post.
+ */
+
+namespace WordPressdotorg\MU_Plugins\Props;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+add_action( 'save_post', __NAMESPACE__ . '\handle_save_post', 10, 2 );
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type( __DIR__ . '/build' );
+}
+
+/**
+ * Handles syncing the props to WordPress.org when publishing/updating a post with the props block in it
+ *
+ * @param int      $post_id The post id that is saved.
+ * @param \WP_Post $post The post object with the new data.
+ */
+function handle_save_post( $post_id, $post ) {
+	if ( 'publish' !== $post->post_status ) {
+		return;
+	}
+
+	if ( ! has_block( 'wporg/props', $post ) ) {
+		return;
+	}
+
+	$existing_handled_props = get_post_meta( $post_id, '_wporg_props', true );
+	if ( empty( $existing_handled_props ) ) {
+		$existing_handled_props = array();
+	}
+
+	$props_blocks = search_props_block( parse_blocks( $post->post_content ) );
+
+	$props_to_handle = array();
+	foreach ( $props_blocks as $block ) {
+		$props           = parse_props( $block['innerHTML'] );
+		$props_to_handle = array_merge( $props_to_handle, $props );
+	}
+
+	// TODO: does not remove props.
+	$new_props  = array_diff( $props_to_handle, $existing_handled_props );
+	$post_link  = get_permalink( $post_id );
+	$post_title = get_the_title( $post_id );
+	foreach ( $new_props as $prop_user ) {
+		WordPressdotorg\Profiles\add_activity(
+			/* translators: link to post the user has received props in */
+			sprintf( __( 'Received props in %s', 'wporg' ), '<a href="' . esc_url( $post_link ) . '">' . esc_html( $post_title ) . '</a>' ),
+			'', // TODO: which type?
+			$prop_user
+		);
+	}
+
+	$handled_props = array_unique( array_merge( $existing_handled_props, $new_props ) );
+	update_post_meta( $post_id, '_wporg_props', $handled_props );
+}
+
+/**
+ * Search for top-level and nested props blocks in an array of blocks
+ *
+ * @param mixed $blocks An array of blocks to search in (eg from parse_blocks or nested innerBlocks).
+ * @return array All found blocks of the props blockType.
+ */
+function search_props_block( $blocks ) {
+	$props_blocks = array();
+	foreach ( $blocks as $block ) {
+		if ( 'wporg/props' === $block['blockName'] ) {
+			$props_blocks[] = $block;
+			continue;
+		}
+		if ( ! empty( $block['innerBlocks'] ) ) {
+			$nested_blocks = search_props_block( $block['innerBlocks'] );
+			$props_blocks  = array_merge( $props_blocks, $nested_blocks );
+		}
+	}
+
+	return $props_blocks;
+}
+
+/**
+ * Parses props (=user mentions) from the HTML block content
+ *
+ * Regex for parsing taken from bbPress: bbp_find_mentions
+ *
+ * @param string $block_content The innerHTML from the block.
+ * @return string[]
+ */
+function parse_props( $block_content ) {
+	if ( function_exists( 'bbp_find_mentions' ) ) {
+		return bbp_find_mentions( $block_content );
+	}
+	$pattern = '/[@]+([A-Za-z0-9-_\.@]+)\b/';
+	preg_match_all( $pattern, $block_content, $usernames );
+	$usernames = array_unique( $usernames[1] );
+	return $usernames;
+}

mu-plugins/blocks/props/src/block.json

@@ -0,0 +1,60 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/props",
+	"version": "0.1.0",
+	"title": "Props Block",
+	"category": "design",
+	"icon": "awards",
+	"description": "Tag wp.org users so they receive props for helping.",
+	"supports": {
+		"anchor": true,
+		"className": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"__experimentalSelector": "p",
+		"__unstablePasteTextInline": true
+	},
+	"attributes": {
+		"align": {
+			"type": "string"
+		},
+		"content": {
+			"type": "string",
+			"source": "html",
+			"selector": "p",
+			"default": "",
+			"__experimentalRole": "content"
+		}
+	},
+	"example": {
+		"attributes": {
+			"content": "<p>Props to @exampleuser</p>"
+		}
+	},
+	"textdomain": "wporg",
+	"editorScript": "file:./index.js"
+}

mu-plugins/blocks/props/src/edit.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+export default function Edit( { attributes, setAttributes } ) {
+	const { content, align } = attributes;
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} ),
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ align }
+					onChange={ ( newAlign ) =>
+						setAttributes( {
+							align: newAlign,
+						} )
+					}
+				/>
+			</BlockControls>
+			<RichText
+				identifier="content"
+				tagName="p"
+				{ ...blockProps }
+				onChange={ ( newContent ) =>
+					setAttributes( { content: newContent } )
+				}
+				value={ content }
+			/>
+		</>
+	);
+}

mu-plugins/blocks/props/src/index.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save,
+} );

mu-plugins/blocks/props/src/save.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { content, align } = attributes;
+
+	const className = classnames( {
+		[ `has-text-align-${ align }` ]: align,
+	} );
+
+	return (
+		<p { ...useBlockProps.save( { className } ) }>
+			<RichText.Content value={ content } />
+		</p>
+	);
+}

mu-plugins/loader.php

@@ -22,6 +22,7 @@
 require_once __DIR__ . '/blocks/latest-news/latest-news.php';
 require_once __DIR__ . '/blocks/link-wrapper/index.php';
 require_once __DIR__ . '/blocks/notice/index.php';
+require_once __DIR__ . '/blocks/props/index.php';
 require_once __DIR__ . '/blocks/sidebar-container/index.php';
 require_once __DIR__ . '/blocks/screenshot-preview/block.php';
 require_once __DIR__ . '/blocks/site-breadcrumbs/index.php';

package.json

@@ -64,5 +64,7 @@
 			"selector-class-pattern": null
 		}
 	},
-	"dependencies": {}
+	"dependencies": {
+		"classnames": "^2.3.1"
+	}
 }