@automattic/jetpack-shared-extension-utils 0.11.5 → 0.12.0

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.0] - 2023-09-19
+### Added
+- Helpers functions for block icons [#32698]
+
 ## [0.11.5] - 2023-09-13
 ### Changed
 - Updated package dependencies. [#33001]
@@ -252,6 +256,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.12.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.11.5...0.12.0
 [0.11.5]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.11.4...0.11.5
 [0.11.4]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.11.3...0.11.4
 [0.11.3]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.11.2...0.11.3

package/index.js

@@ -17,3 +17,4 @@ export { default as isCurrentUserConnected } from './src/is-current-user-connect
 export { default as useAnalytics } from './src/hooks/use-analytics';
 export { default as useModuleStatus } from './src/hooks/use-module-status';
 export { default as JetpackEditorPanelLogo } from './src/components/jetpack-editor-panel-logo';
+export { getBlockIconComponent, getBlockIconProp } from './src/get-block-icon-from-metadata';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.11.5",
+	"version": "0.12.0",
 	"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": {
@@ -18,7 +18,7 @@
 	},
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^0.1.27",
-		"@automattic/jetpack-components": "^0.42.3",
+		"@automattic/jetpack-components": "^0.42.4",
 		"@automattic/jetpack-connection": "^0.29.10",
 		"@wordpress/api-fetch": "6.38.0",
 		"@wordpress/compose": "6.18.0",
@@ -38,11 +38,11 @@
 		"react-dom": "18.2.0",
 		"jetpack-js-tools": "workspace:*",
 		"@automattic/jetpack-webpack-config": "workspace:*",
-		"@wordpress/babel-plugin-import-jsx-pragma": "4.24.0",
 		"@testing-library/dom": "8.19.1",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.4.3",
-		"@babel/plugin-transform-react-jsx": "7.22.15"
+		"@babel/plugin-transform-react-jsx": "7.22.15",
+		"@wordpress/babel-plugin-import-jsx-pragma": "4.24.0"
 	},
 	"exports": {
 		".": "./index.js"

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

@@ -0,0 +1,56 @@
+/* eslint-disable jsdoc/no-undefined-types */
+import { createElement } from '@wordpress/element';
+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 {React.Component} Icon component
+ */
+export function getBlockIconComponent( metadata ) {
+	// Set default values
+	const attrs = {};
+	let tagName = 'span';
+	let markup = metadata.icon;
+
+	// Convert SVG from string to HTML element
+	const placeholder = document.createElement( 'div' );
+	placeholder.innerHTML = metadata.icon;
+	const svg = placeholder.querySelector( 'svg' );
+
+	// Get SVG attributes and content
+	if ( svg ) {
+		tagName = 'svg';
+		markup = svg.innerHTML;
+
+		Array.from( svg.attributes ).forEach(
+			( { nodeName, nodeValue } ) => ( attrs[ nodeName ] = nodeValue )
+		);
+	}
+
+	return createElement( tagName, {
+		...attrs,
+		dangerouslySetInnerHTML: { __html: markup || '' },
+	} );
+}
+
+/**
+ * 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(),
+	};
+}

package/src/get-icon-color.js

@@ -0,0 +1,23 @@
+import { isAtomicSite, isSimpleSite } from './site-type-utils';
+
+/**
+ * Constants
+ */
+const JETPACK_GREEN_40 = '#069e08';
+
+/**
+ * Returns the icon color for Jetpack blocks.
+ *
+ * Green in the Jetpack context, otherwise black for Simple sites or Atomic sites.
+ *
+ * @returns {string} HEX color for block editor icons
+ */
+export default function getIconColor() {
+	if ( isAtomicSite() || isSimpleSite() ) {
+		// Return null to match core block styling
+		return null;
+	}
+
+	// Jetpack Green
+	return JETPACK_GREEN_40;
+}