first commit

wp-includes/blocks/icon/block.json

@@ -0,0 +1,70 @@
+{
+	"apiVersion": 3,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"name": "core/icon",
+	"title": "Icon",
+	"category": "media",
+	"description": "Insert an SVG icon.",
+	"keywords": [ "icon", "svg" ],
+	"textdomain": "default",
+	"attributes": {
+		"icon": {
+			"type": "string",
+			"role": "content"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"ariaLabel": {
+			"__experimentalSkipSerialization": true
+		},
+		"align": [ "left", "center", "right" ],
+		"html": false,
+		"color": {
+			"background": true,
+			"text": true,
+			"__experimentalSkipSerialization": true
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": false,
+				"radius": false,
+				"style": false,
+				"width": false
+			}
+		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"__experimentalSkipSerialization": [ "padding" ],
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"dimensions": {
+			"width": true,
+			"__experimentalSkipSerialization": [ "width" ],
+			"__experimentalDefaultControls": {
+				"width": true
+			}
+		}
+	},
+	"selectors": {
+		"root": ".wp-block-icon svg",
+		"css": ".wp-block-icon",
+		"spacing": {
+			"margin": ".wp-block-icon"
+		}
+	},
+	"style": "wp-block-icon",
+	"editorStyle": "wp-block-icon-editor"
+}

wp-includes/blocks/icon/editor-rtl.css

@@ -0,0 +1,97 @@
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.wp-block[data-align=center] > .wp-block-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.wp-block-icon__inserter {
+  padding: 0 24px;
+  margin: 0 -24px;
+}
+
+.wp-block-icon__inserter-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.wp-block-icon__inserter-grid-icons-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+
+.wp-block-icon__inserter-grid-no-results {
+  display: flex;
+  justify-content: center;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item {
+  display: flex;
+  flex-direction: column;
+  height: auto !important;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item-icon {
+  padding: 12px;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item-title {
+  font-size: 12px;
+  padding: 4px 4px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wp-block-icon__toolbar-content {
+  width: 250px;
+}
+
+.wp-block-icon__placeholder {
+  backdrop-filter: blur(100px);
+}

wp-includes/blocks/icon/editor-rtl.min.css

@@ -0,0 +1 @@
+.wp-block[data-align=center]>.wp-block-icon{display:flex;justify-content:center}.wp-block-icon__inserter{margin:0 -24px;padding:0 24px}.wp-block-icon__inserter-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.wp-block-icon__inserter-grid-icons-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.wp-block-icon__inserter-grid-no-results{display:flex;justify-content:center}.wp-block-icon__inserter-grid-icons-list-item{display:flex;flex-direction:column;height:auto!important}.wp-block-icon__inserter-grid-icons-list-item-icon{padding:12px}.wp-block-icon__inserter-grid-icons-list-item-title{font-size:12px;overflow:hidden;padding:4px 4px 8px;text-overflow:ellipsis;white-space:nowrap}.wp-block-icon__toolbar-content{width:250px}.wp-block-icon__placeholder{backdrop-filter:blur(100px)}

wp-includes/blocks/icon/editor.css

@@ -0,0 +1,97 @@
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.wp-block[data-align=center] > .wp-block-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.wp-block-icon__inserter {
+  padding: 0 24px;
+  margin: 0 -24px;
+}
+
+.wp-block-icon__inserter-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.wp-block-icon__inserter-grid-icons-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+
+.wp-block-icon__inserter-grid-no-results {
+  display: flex;
+  justify-content: center;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item {
+  display: flex;
+  flex-direction: column;
+  height: auto !important;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item-icon {
+  padding: 12px;
+}
+
+.wp-block-icon__inserter-grid-icons-list-item-title {
+  font-size: 12px;
+  padding: 4px 4px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wp-block-icon__toolbar-content {
+  width: 250px;
+}
+
+.wp-block-icon__placeholder {
+  backdrop-filter: blur(100px);
+}

wp-includes/blocks/icon/editor.min.css

@@ -0,0 +1 @@
+.wp-block[data-align=center]>.wp-block-icon{display:flex;justify-content:center}.wp-block-icon__inserter{margin:0 -24px;padding:0 24px}.wp-block-icon__inserter-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.wp-block-icon__inserter-grid-icons-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.wp-block-icon__inserter-grid-no-results{display:flex;justify-content:center}.wp-block-icon__inserter-grid-icons-list-item{display:flex;flex-direction:column;height:auto!important}.wp-block-icon__inserter-grid-icons-list-item-icon{padding:12px}.wp-block-icon__inserter-grid-icons-list-item-title{font-size:12px;overflow:hidden;padding:4px 4px 8px;text-overflow:ellipsis;white-space:nowrap}.wp-block-icon__toolbar-content{width:250px}.wp-block-icon__placeholder{backdrop-filter:blur(100px)}

wp-includes/blocks/icon/style-rtl.css

@@ -0,0 +1,20 @@
+/**
+ * Editor and frontend styles for the Icon Block.
+ */
+/* Icon Block styles. */
+.wp-block-icon {
+  line-height: 0;
+}
+.wp-block-icon.aligncenter {
+  display: flex;
+  justify-content: center;
+}
+.wp-block-icon svg {
+  box-sizing: border-box;
+  fill: currentColor;
+}
+
+:where(.wp-block-icon) svg {
+  width: 100%;
+  height: 100%;
+}

wp-includes/blocks/icon/style-rtl.min.css

@@ -0,0 +1 @@
+.wp-block-icon{line-height:0}.wp-block-icon.aligncenter{display:flex;justify-content:center}.wp-block-icon svg{fill:currentColor;box-sizing:border-box}:where(.wp-block-icon) svg{height:100%;width:100%}

wp-includes/blocks/icon/style.css

@@ -0,0 +1,20 @@
+/**
+ * Editor and frontend styles for the Icon Block.
+ */
+/* Icon Block styles. */
+.wp-block-icon {
+  line-height: 0;
+}
+.wp-block-icon.aligncenter {
+  display: flex;
+  justify-content: center;
+}
+.wp-block-icon svg {
+  box-sizing: border-box;
+  fill: currentColor;
+}
+
+:where(.wp-block-icon) svg {
+  width: 100%;
+  height: 100%;
+}

wp-includes/blocks/icon/style.min.css

@@ -0,0 +1 @@
+.wp-block-icon{line-height:0}.wp-block-icon.aligncenter{display:flex;justify-content:center}.wp-block-icon svg{fill:currentColor;box-sizing:border-box}:where(.wp-block-icon) svg{height:100%;width:100%}