@automattic/jetpack-shared-extension-utils 0.12.5 → 0.12.6

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.12.6] - 2023-11-08
+### Fixed
+- Mobile: Fix a regression preventing correct block registration on mobile. [#33890]
+
 ## [0.12.5] - 2023-11-03
 ### Changed
 - Update dependencies.
@@ -276,6 +280,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.12.6]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.5...0.12.6
 [0.12.5]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.4...0.12.5
 [0.12.4]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.3...0.12.4
 [0.12.3]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.12.2...0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.12.5",
+	"version": "0.12.6",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/shared-extension-utils/#readme",
 	"bugs": {

package/src/get-block-icon-from-metadata.native.js

@@ -0,0 +1,37 @@
+/* eslint-disable jsdoc/no-undefined-types */
+import { SvgXml } from '@wordpress/primitives';
+import getIconColor from './get-icon-color';
+
+/**
+ * Generate an icon as a React component from the SVG markup defined in a block.json metadata file.
+ * This prevents us from duplicating the markup in various places.
+ *
+ * Note: using an `img` tag and passing the SVG markup as a data URI doesn't allow us to
+ * dynamically set the icon color later on.
+ *
+ * @param {object} metadata - Block.json content
+ * @returns {JSX.Element|string} Icon component
+ */
+export function getBlockIconComponent( metadata ) {
+	// If the SVG has been passed as a string, use SvgXml to correctly parse it.
+	if ( typeof metadata.icon === 'string' && metadata.icon.startsWith( '<svg' ) ) {
+		return <SvgXml xml={ metadata.icon } />;
+	}
+	return metadata.icon || '';
+}
+
+/**
+ * A block icon needs to be redefined on the front end as a React component, since a string - even
+ * SVG markup - is interpreted as a dashicon. This function returns the object that must be passed
+ * to the `icon` attribute when registering the block in the front end. It also sets the color
+ * of the icon.
+ *
+ * @param {object} metadata - Block.json content
+ * @returns {object} Icon property for client registration
+ */
+export function getBlockIconProp( metadata ) {
+	return {
+		src: getBlockIconComponent( metadata ),
+		foreground: getIconColor(),
+	};
+}