Iconography - Configurable Icon Sets

bin/start

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+./bin/composer install
+docker-compose up -d wordpress
+./bin/npm install
+./bin/npm run start

composer.json

@@ -18,6 +18,7 @@
         }
     ],
     "require": {
+        "swaggest/json-schema": "^0.12",
         "symfony/validator": "^7.0 || ^6.0"
     },
     "scripts": {
@@ -44,6 +45,10 @@
             "Boxuk\\BoxWpEditorTools\\": [
                 "packages/editor-tools/src",
                 "plugins/editor-tools/src/"
+            ],
+            "Boxuk\\Iconography\\": [
+                "packages/iconography/includes/",
+                "plugins/iconography/includes/"
             ]
         }
     },

docker/wordpress/Dockerfile

@@ -1 +1,6 @@
 FROM wordpress:6.5.3
+
+COPY ./wp-config.php /var/www/html/wp-config.php
+COPY ./db.php /var/www/html/wp-content/db.php
+COPY ./mu-plugins /var/www/html/wp-content/mu-plugins
+COPY ./themes /var/www/html/wp-content/themes

docker/wordpress/wp-config.php

@@ -34,7 +34,7 @@
 /**#@-*/
 $table_prefix = 'wp_'; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
 define( 'WP_DEBUG', true );
-define( 'WP_SCRIPT_DEBUG', true );
+define( 'SCRIPT_DEBUG', true );
 
 /** Absolute path to the WordPress directory. */
 if ( ! defined( 'ABSPATH' ) ) {

docs/index.md

@@ -2,4 +2,4 @@
 
 Contents: 
 - [Editor Tools](../packages/editor-tools/README.md)
-- [Iconography](./iconography/index.md)
+- [Iconography](../packages/iconography/README.md)

packages/editor-tools/composer.json

@@ -1,6 +1,6 @@
 {
     "name": "boxuk/wp-editor-tools",
-    "type": "wordpress-muplugin",
+    "type": "wordpress-plugin",
     "autoload": {
         "psr-4": {
             "Boxuk\\BoxWpEditorTools\\": "src"

packages/iconography/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.
 ---
 

packages/iconography/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