Merge pull request #17 from boxuk/iconography/configurable-icon-sets

.turbo/turbo-build.log

@@ -2,10 +2,19 @@
 > iconography@1.0.0 build
 > wp-scripts build
 
-asset index.js 192 KiB [emitted] [minimized] (name: index)
-asset index.asset.php 205 bytes [emitted] (name: index)
-Entrypoint index 192 KiB = index.js 192 KiB index.asset.php 205 bytes
-orphan modules 197 KiB [orphan] 13 modules
-runtime modules 663 bytes 3 modules
-./src/index.ts + 13 modules 199 KiB [not cacheable] [built] [code generated]
-webpack 5.91.0 compiled successfully in 972 ms
+assets by path *.js 8.8 KiB
+  asset index.js 8.19 KiB [emitted] [minimized] (name: index)
+  asset 934.js 625 bytes [emitted] [minimized]
+asset block/block.json 1.33 KiB [emitted] [from: src/block/block.json] [copied]
+asset index.asset.php 208 bytes [emitted] (name: index)
+Entrypoint index 8.4 KiB = index.js 8.19 KiB index.asset.php 208 bytes
+orphan modules 8.47 KiB [orphan] 14 modules
+runtime modules 7.18 KiB 12 modules
+built modules 13.7 KiB [built]
+  modules by path ./src/ 13.7 KiB
+    ./src/index.tsx + 14 modules 10.8 KiB [not cacheable] [built] [code generated]
+    ./src/utils.ts 1.81 KiB [built] [code generated]
+    ./src/IconPanel.tsx 1.08 KiB [built] [code generated]
+  external "React" 42 bytes [built] [code generated]
+  external ["wp","components"] 42 bytes [built] [code generated]
+webpack 5.91.0 compiled successfully in 1480 ms

README.md

@@ -1,3 +1,82 @@
+# Box WordPress Iconography Support
+
+Add the ability to add icons inline to your content in the WordPress block editor.
+
+## Quick Start!
+Add this plugin to your WordPress site and include a configuration file and it's ready to use!
+
+If you're using composer, then it's as simple as `composer require boxuk/wp-iconography`.
+
+## Configuration
+
+Configuration files are based on a schema that allows you to quickly define the configuration.
+They're loaded automatically from `wp-content/themes/{theme_name}/icons/*.config.json`, or you can define any custom paths using the filter available:
+```php
+add_filter(
+	'boxuk_iconography_files',
+	function ( $config_files ) {
+		$config_files['example'] = __DIR__ . '/config/example.config.json';
+		return $config_files;
+	}
+);
+```
+
+There's also example configuration files included in the plugin, so if you want to load **Material Symbols** you can just load the config included using this snippet:
+```php
+add_filter(
+	'boxuk_iconography_files',
+	function ( $config_files ) {
+		$plugin_dir = WP_CONTENT_DIR . '/mu-plugins/wp-iconography'; // make sure this is valid for your project!
+
+
+		// Remove any unnecessary
+		$config_files['material-symbols-outlined']        = $plugin_dir . '/config/material-symbols-outlined.config.json';
+		$config_files['material-symbols-outlined-filled'] = $plugin_dir . '/config/material-symbols-outlined-filled.config.json';
+		$config_files['material-symbols-sharp']           = $plugin_dir . '/config/material-symbols-sharp.config.json';
+		$config_files['material-symbols-sharp-filled']    = $plugin_dir . '/config/material-symbols-sharp-filled.config.json';
+		$config_files['material-symbols-rounded']         = $plugin_dir . '/config/material-symbols-rounded.config.json';
+		$config_files['material-symbols-rounded-filled']  = $plugin_dir . '/config/material-symbols-rounded-filled.config.json';
+		return $config_files;
+	}
+);
+```
+
+There's loads of filters available to change the way icons load, so feel free to look through the source code at the available filters. And if there's function that doesn't work for you, PRs are always welcome!
+
+## Configuration Schema
+
+The Schema for configuration includes:
+ - **Title** - the name output in the editor.
+ - **Name** - the unique key/name for the icon set. I'd recommend `namespace/name` format.
+ - **Tag Name** - this is the HTML tag that will be used to generate the output for the icon.
+ - **Class Name** - this is used to generate the output for the icon
+ - **URL** - the CSS file to load
+ - **Additional CSS** - any inline CSS to include that might be relevant.
+ - **Icons** - an array of:
+	- **Label** - the value to use in the admin interface. Used for searches and is displayed on hover.
+	- **Content** - the content inside the HTML generated.
+
+Sample JSON file:
+```json
+{
+	"title": "Example",
+	"name": "boxuk/example",
+	"tagName": "span",
+	"className": "boxuk-icon-example",
+	"url": "...",
+	"additionalCSS": ".boxuk-icon-example { font-weight: 700; }",
+	"icons": [
+		{ "label": "Example", "content": "example-content" }
+	]
+}
+```
+
+Generated output:
+```html
+<span class="boxuk-icon-example">example-content</span>
+```
+
+## Contributing
 Please do not submit any Pull Requests here. They will be closed.
 ---
 

build/block/block.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "boxuk/icon",
+  "title": "Icon",
+  "category": "media",
+  "description": "Display an icon as a block.",
+  "icon": "star-filled",
+  "keywords": [
+    "icon",
+    "emoji",
+    "symbol"
+  ],
+  "textdomain": "boxuk",
+  "supports": {
+    "align": [
+      "wide",
+      "full"
+    ],
+    "alignWide": true,
+    "color": {
+      "background": true,
+      "text": true
+    },
+    "background": {
+      "backgroundImage": true,
+      "backgroundSize": true
+    },
+    "anchor": false,
+    "ariaLabel": true,
+    "className": true,
+    "customClassName": true,
+    "dimensions": {
+      "aspectRatio": false,
+      "minHeight": true
+    },
+    "filter": {
+      "duotone": false
+    },
+    "html": false,
+    "inserter": true,
+    "interactivity": false,
+    "layout": true,
+    "lock": true,
+    "multiple": true,
+    "position": {
+      "sticky": false
+    },
+    "renaming": true,
+    "reusable": true,
+    "shadow": false,
+    "spacing": {
+      "margin": true,
+      "padding": true
+    },
+    "typography": {
+      "fontSize": true,
+      "lineHeight": true,
+      "textAlign": true
+    }
+  },
+  "attributes": {
+    "className": {
+      "type": "string"
+    },
+    "tagName": {
+      "type": "string"
+    },
+    "iconContent": {
+      "type": "string"
+    }
+  },
+  "example": {}
+}

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-rich-text'), 'version' => '560515c205c4b8333598');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-rich-text'), 'version' => '2b50a1b034ba1bd23a01');

composer.json

@@ -1,25 +1,32 @@
 {
 	"name": "boxuk/wp-iconography",
 	"description": "Adds Material Icons to the Block Editor",
-	"type": "wordpress-muplugin",
+	"type": "wordpress-plugin",
 	"require-dev": {
 		"10up/wp_mock": "^1.0",
 		"automattic/vipwpcs": "^3.0",
 		"szepeviktor/phpstan-wordpress": "^1.3"
 	},
 	"scripts": {
-        "phpunit": "phpunit",
-        "phpstan": "phpstan analyse --memory-limit=1G",
-        "phpcs": "phpcs",
-        "phpcbf": "phpcbf"
-    },
+		"phpunit": "phpunit",
+		"phpstan": "phpstan analyse --memory-limit=1G",
+		"phpcs": "phpcs",
+		"phpcbf": "phpcbf"
+	},
 	"authors": [
 		{
 			"name": "BoxUK",
 			"email": "developers@boxuk.com"
 		}
 	],
-	"require": {},
+	"autoload": {
+		"psr-4": {
+			"Boxuk\\Iconography\\": "includes/"
+		}
+	},
+	"require": {
+		"swaggest/json-schema": "^0.12"
+	},
 	"config": {
 		"allow-plugins": {
 			"dealerdirect/phpcodesniffer-composer-installer": true