Notes: Open a full searchable emoji picker from the add-reaction button (stacked on #76767)

backport-changelog/7.0/10930.md

@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/10930
 
 * https://github.com/WordPress/gutenberg/pull/76767
+* https://github.com/WordPress/gutenberg/pull/78176

lib/compat/wordpress-7.2/class-gutenberg-rest-comment-controller-7-2.php

@@ -470,17 +470,39 @@ public function create_item( $request ) {
 				);
 			}
 
-			// Validate the reaction content against the allowed emoji list
-			// (filterable via `gutenberg_note_reaction_emojis`). Only a slug
-			// from that list is accepted: it is the one value the picker can
-			// render back as an emoji and label. Raw emoji bytes are rejected
-			// because the comments table is not guaranteed to be utf8mb4
-			// across all WordPress installs; clients submit the slug instead.
+			// Validate the reaction content. We accept either:
+			// - a curated slug (e.g. "heart") from the allowed emoji list
+			//   (filterable via `gutenberg_note_reaction_emojis`), or
+			// - a lowercase hex-codepoint sequence joined by `-` (e.g.
+			//   "1f44d" for 👍 or "1f468-200d-1f4bb" for 👨‍💻), which is how
+			//   the full emoji picker stores a pick outside that list.
+			// Raw emoji bytes are rejected because the comments table is
+			// not guaranteed to be utf8mb4 across all WordPress installs;
+			// clients normalize before submitting.
 			$emojis      = gutenberg_get_note_reaction_emojis();
 			$valid_slugs = wp_list_pluck( $emojis, 'value' );
 			$emoji_slug  = isset( $request['content'] ) ? wp_strip_all_tags( $request['content'] ) : '';
 
-			if ( ! in_array( $emoji_slug, $valid_slugs, true ) ) {
+			$is_curated_slug = in_array( $emoji_slug, $valid_slugs, true );
+			$is_hex_key      = (bool) preg_match(
+				'/^[0-9a-f]{2,6}(-[0-9a-f]{2,6}){0,15}$/',
+				$emoji_slug
+			);
+
+			// A hex-shaped slug must still be made of assignable Unicode code
+			// points: reject anything above U+10FFFF or in the UTF-16 surrogate
+			// range (U+D800–U+DFFF).
+			if ( $is_hex_key ) {
+				foreach ( explode( '-', $emoji_slug ) as $codepoint ) {
+					$value = hexdec( $codepoint );
+					if ( $value > 0x10FFFF || ( $value >= 0xD800 && $value <= 0xDFFF ) ) {
+						$is_hex_key = false;
+						break;
+					}
+				}
+			}
+
+			if ( ! $is_curated_slug && ! $is_hex_key ) {
 				return new WP_Error(
 					'rest_comment_invalid_reaction',
 					__( 'Invalid reaction emoji.', 'gutenberg' ),

lib/compat/wordpress-7.2/emojibase-data.php

@@ -0,0 +1,129 @@
+<?php
+/**
+ * Exposes a same-origin URL for the bundled Emojibase data, so the Notes
+ * emoji picker fetches its dataset without an external CDN.
+ *
+ * `tools/build-scripts/copy-emojibase-data.mjs` copies the files into
+ * `build/emojibase-data/{locale}/` at plugin build time.
+ *
+ * @package gutenberg
+ * @since   7.2.0
+ */
+
+/**
+ * Injects the Emojibase dataset URL and per-emoji label overrides into the
+ * block editor settings, where the Notes picker reads them. npm consumers
+ * of `@wordpress/editor` opt in by supplying the same two settings.
+ *
+ * @since 7.2.0
+ *
+ * @param array $settings Existing block editor settings.
+ * @return array Updated block editor settings.
+ */
+function gutenberg_add_emojibase_settings( $settings ) {
+	$settings['noteEmojibaseUrl']        = gutenberg_url( 'build/emojibase-data' );
+	$settings['noteEmojiLabelOverrides'] = gutenberg_get_emoji_picker_label_overrides();
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_add_emojibase_settings' );
+
+/**
+ * Convert an emoji character to Emojibase's uppercase `hexcode` form:
+ * Variation Selector-16 stripped and each code point padded to four
+ * digits (`00A9`, not `A9`).
+ *
+ * Decodes UTF-8 by hand because `mbstring` is recommended but not
+ * required by WordPress, and `mb_ord()` is not polyfilled on all
+ * supported versions.
+ *
+ * @since 7.2.0
+ *
+ * @param string $emoji Emoji character.
+ * @return string Uppercase four-digit-padded hex code-points joined by
+ *                `-`, or empty string.
+ */
+function gutenberg_emoji_to_hexcode( $emoji ) {
+	if ( ! is_string( $emoji ) || '' === $emoji ) {
+		return '';
+	}
+	$length = strlen( $emoji );
+	$parts  = array();
+	for ( $i = 0; $i < $length; ) {
+		$byte = ord( $emoji[ $i ] );
+		if ( $byte < 0x80 ) {
+			$codepoint = $byte;
+			$size      = 1;
+		} elseif ( 0xC0 === ( $byte & 0xE0 ) ) {
+			$codepoint = $byte & 0x1F;
+			$size      = 2;
+		} elseif ( 0xE0 === ( $byte & 0xF0 ) ) {
+			$codepoint = $byte & 0x0F;
+			$size      = 3;
+		} elseif ( 0xF0 === ( $byte & 0xF8 ) ) {
+			$codepoint = $byte & 0x07;
+			$size      = 4;
+		} else {
+			return '';
+		}
+		for ( $j = 1; $j < $size; $j++ ) {
+			if ( $i + $j >= $length || 0x80 !== ( ord( $emoji[ $i + $j ] ) & 0xC0 ) ) {
+				return '';
+			}
+			$codepoint = ( $codepoint << 6 ) | ( ord( $emoji[ $i + $j ] ) & 0x3F );
+		}
+		$i += $size;
+		// Skip Variation Selector-16 so qualified `❤️` (2764 FE0F)
+		// matches Emojibase's unqualified `2764` entry.
+		if ( 0xFE0F === $codepoint ) {
+			continue;
+		}
+		$parts[] = str_pad( strtoupper( dechex( $codepoint ) ), 4, '0', STR_PAD_LEFT );
+	}
+	return implode( '-', $parts );
+}
+
+/**
+ * Builds the per-emoji label override map exposed to the editor's picker.
+ *
+ * Emojibase translates labels for 28 locales only; the filter below lets
+ * sites fill the gap for the emojis they care about. Seeded with the
+ * curated reactions so both rows show the same label.
+ *
+ * @since 7.2.0
+ *
+ * @return array Map of `hexcode => translated label`.
+ */
+function gutenberg_get_emoji_picker_label_overrides() {
+	$defaults = array();
+	if ( function_exists( 'gutenberg_get_note_reaction_emojis' ) ) {
+		foreach ( gutenberg_get_note_reaction_emojis() as $entry ) {
+			if ( empty( $entry['emoji'] ) || empty( $entry['label'] ) ) {
+				continue;
+			}
+			$hex = gutenberg_emoji_to_hexcode( $entry['emoji'] );
+			if ( '' !== $hex ) {
+				$defaults[ $hex ] = $entry['label'];
+			}
+		}
+	}
+
+	/**
+	 * Filters the emoji label overrides exposed to the Notes picker.
+	 *
+	 * Keys are uppercase Emojibase `hexcode` values: each code point
+	 * zero-padded to four digits with U+FE0F stripped, e.g. `2764` for
+	 * ❤️ and `00A9` for ©️.
+	 *
+	 * @since 7.2.0
+	 *
+	 * @param array $overrides Map of `hexcode => translated label`.
+	 */
+	$overrides = apply_filters(
+		'gutenberg_emoji_picker_label_overrides',
+		$defaults
+	);
+
+	// A non-string label would crash `label.toLowerCase()` in searchEmojis().
+	$overrides = is_array( $overrides ) ? $overrides : array();
+	return array_filter( $overrides, 'is_string' );
+}

lib/load.php

@@ -68,6 +68,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/compat/wordpress-7.2/view-config-api.php';
 	require __DIR__ . '/compat/wordpress-7.2/class-gutenberg-rest-view-config-controller-7-2.php';
 	require __DIR__ . '/compat/wordpress-7.2/note-reactions.php';
+	require __DIR__ . '/compat/wordpress-7.2/emojibase-data.php';
 	require __DIR__ . '/compat/wordpress-7.2/class-gutenberg-rest-comment-controller-7-2.php';
 	require __DIR__ . '/compat/wordpress-7.2/rest-api.php';
 

packages/e2e-tests/plugins/note-emojibase-unavailable.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Note Emojibase Unavailable
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-note-emojibase-unavailable
+ */
+
+/**
+ * Drops the Emojibase dataset URL so the editor falls back to the curated
+ * quick row. Runs late to win over `gutenberg_add_emojibase_settings()`.
+ *
+ * @param array $settings Existing block editor settings.
+ * @return array Updated block editor settings.
+ */
+function gutenberg_test_remove_emojibase_url( $settings ) {
+	unset( $settings['noteEmojibaseUrl'] );
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_test_remove_emojibase_url', 20 );

packages/editor/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### New Features
 
 -   Notes: allow reacting to a note with an emoji. Reactions display as pill buttons on the note with per-emoji counts, backed by a new `reaction` comment type. The add-reaction trigger fades in on hover or focus in the note's top corner, so a note with no reactions costs no vertical space for the option ([#76767](https://github.com/WordPress/gutenberg/pull/76767)).
+-   Notes: the add-reaction popover now offers a full searchable emoji picker with a per-user skin tone preference, powered by a self-hosted Emojibase dataset configured via the `noteEmojibaseUrl` editor setting (with optional `noteEmojiLabelOverrides`) ([#78176](https://github.com/WordPress/gutenberg/pull/78176)).
 
 ### Enhancements
 

packages/editor/package.json

@@ -122,6 +122,7 @@
 		"@testing-library/user-event": "^14.6.1",
 		"@wordpress/block-library": "file:../block-library",
 		"deep-freeze": "^0.0.1",
+		"storybook": "^10.5.3",
 		"vitest": "^5.0.0",
 		"vitest-browser-react": "^2.3.0"
 	},