New Block: Icon Block

docs/reference-guides/core-blocks.md

@@ -426,6 +426,15 @@ Add custom HTML code and preview it as you edit. ([Source](https://github.com/Wo
 -	**Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~
 -	**Attributes:** content
 
+## Icon
+
+Insert an SVG icon or graphic. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/icon))
+
+-	**Name:** core/icon
+-	**Category:** media
+-	**Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding), ~~html~~
+-	**Attributes:** height, icon, iconName, label, linkRel, linkTarget, linkUrl, title, width
+
 ## Image
 
 Insert an image to make a visual statement. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/image))
@@ -516,7 +525,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
 
 -	**Name:** core/navigation
 -	**Category:** theme
--	**Allowed Blocks:** core/navigation-link, core/search, core/social-links, core/page-list, core/spacer, core/home-link, core/site-title, core/site-logo, core/navigation-submenu, core/loginout, core/buttons
+-	**Allowed Blocks:** core/navigation-link, core/search, core/social-links, core/page-list, core/spacer, core/home-link, core/icon, core/site-title, core/site-logo, core/navigation-submenu, core/loginout, core/buttons
 -	**Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~
 -	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
 

packages/block-library/package.json

@@ -81,6 +81,7 @@
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
+		"html-react-parser": "^5.2.6",
 		"memize": "^2.1.0",
 		"remove-accents": "^0.5.0",
 		"uuid": "^9.0.1"

packages/block-library/src/editor.scss

@@ -21,6 +21,7 @@
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";
 @import "./html/editor.scss";
+@import "./icon/editor.scss";
 @import "./image/editor.scss";
 @import "./latest-posts/editor.scss";
 @import "./media-text/editor.scss";

packages/block-library/src/icon/block.json

@@ -0,0 +1,77 @@
+{
+	"apiVersion": 3,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"name": "core/icon",
+	"title": "Icon",
+	"category": "media",
+	"description": "Insert an SVG icon or graphic.",
+	"keywords": [ "icon", "svg" ],
+	"attributes": {
+		"icon": {
+			"type": "string",
+			"source": "html",
+			"selector": ".icon-container",
+			"default": "",
+			"__experimentalRole": "content"
+		},
+		"iconName": {
+			"type": "string",
+			"__experimentalRole": "content"
+		},
+		"label": {
+			"type": "string"
+		},
+		"title": {
+			"type": "string"
+		},
+		"linkUrl": {
+			"type": "string"
+		},
+		"linkRel": {
+			"type": "string"
+		},
+		"linkTarget": {
+			"type": "string"
+		},
+		"width": {
+			"type": [ "string", "number" ]
+		},
+		"height": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"align": true,
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalSelector": ".icon-container",
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": false,
+				"radius": false,
+				"style": false,
+				"width": false
+			}
+		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		}
+	},
+	"textdomain": "icon-block",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor.css",
+	"style": "file:./style.css"
+}