Configurable Icon Sets

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true§

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

docs/editor-tools/index.md

@@ -1,33 +1,13 @@
 # Box WordPress Editor Tools
 
-A collection of tools for modifying the WordPress Editor. 
-
-## Quick Start!
-
-The tools here don't load automatically, so you need to get them going. 
-The quickest way would be to add to `functions.php`: 
-```php
-( new \Boxuk\BoxWpEditorTools\BlockLoader() )->init(); // loads all block.json from /wp-content/themes/{theme}/build/**/*/block.json
-( new \Boxuk\BoxWpEditorTools\Comments() )->init(); // disables comments
-( new \Boxuk\BoxWpEditorTools\EditorCleanup() )->init(); // Cleans the block-editor to prevent loading plugins
-( new \Boxuk\BoxWpEditorTools\PostTypes() )->init(); // registers post-types defined in /wp-content/themes/{theme}/post-types.json
-( new \Boxuk\BoxWpEditorTools\TemplatePersistence() )->init(); // saves template changes to disk, not to the database. 
-( new \Boxuk\BoxWpEditorTools\Security\Security() )->init(); // Enables security hardening.
-```
-There's more options than that, so checkout the links below: 
+A collection of tools for modifying the WordPress Editor.
 
 ## Features
 
  - [Asset Loader](./docs/AssetLoader.md) - help load assets generated by [wp-scripts](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/).
  - [Block Loader](./docs/BlockLoader.md) - auto-loads blocks to the editor.
  - [Comment Disablement](./docs/Comments.md) - disables comments.
  - [Editor Cleanup](./docs/EditorCleanup.md) - removes some unnecessary bits from the block editor.
- - [Post Type Registrations](./docs/PostTypes.md) - speeds up post-type registration with a single JSON file. 
- - [Template Persistence](./docs/TemplatePersistence.md) - speeds up template modifications by saving to disk instead of the database. 
+ - [Post Type Registrations](./docs/PostTypes.md) - speeds up post-type registration with a single JSON file.
+ - [Template Persistence](./docs/TemplatePersistence.md) - speeds up template modifications by saving to disk instead of the database.
  - [Security](./docs/Security.md) - Adds security hardening.
-
-## Contributing
-
-The dependancies include [WordPress Stubs](https://github.com/php-stubs/wordpress-stubs), so your IDE should automatically include type information for all WP core functions. If they're not, it's likely a mis-configuration of your IDE. There's helper guides in the WordPress Stubs repo. 
-
-Working on the repo requires packaging this into a functioning WordPress installation. A ready-to-go solution is yet to be developed so a PR is welcome, preferrably where Docker is the only dependancy. 

docs/iconography/index.md

@@ -1,16 +1,77 @@
 # Box WordPress Iconography Support
 
-Add the ability to add icons inline to your content in the WordPress block editor. 
+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 off you go! If you're using composer, then
-it's as simple as `composer require boxuk/wp-iconography`.~
+Add this plugin to your WordPress site and include a configuration file and it's ready to use!
 
-We need to setup packaging this as a plugin to be distrubutable, so watch this space - for now you'll need to include this repo and build the assets yourself using `npm run build`. 
+If you're using composer, then it's as simple as `composer require boxuk/wp-iconography`.
 
-## Contributing
-Working on the repo requires packaging this into a functioning WordPress installation. A ready-to-go solution is yet to be developed so a PR is welcome, preferrably where Docker is the only dependancy. 
+## Configuration
 
-This package doesn't necessarily require composer dependancies to be installed, so `npm install` and `npm run start` should get you started. 
+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;
+ }
+);
+```
 
-The composer dependancies include [WordPress Stubs](https://github.com/php-stubs/wordpress-stubs), so your IDE should automatically include type information for all WP core functions if you need to edit the PHP file. If they're not, it's likely a mis-configuration of your IDE. There's helper guides in the WordPress Stubs repo. 
+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>
+```

packages/iconography/composer.json

@@ -8,18 +8,25 @@
  "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