Third-Party-Boxes

The Boxes plugin itself can be extended by plugins. Plugins have the opportunity to register custom Boxes, which then are available in the Boxes editor.

Building a Boxes plugin

Building a Boxes plugin is very simple. Create a standard October Plugin, place your boxes in a partials directory of the plugin and register the new partials path inside the Plugin's boot method:

plugins/
  your-vendor/
    your-plugin/
      partials/
        some-partial.htm
        some-partial.yaml

<?php
namespace YourVendor\YourPlugin;

class Plugin extends PluginBase
{
    public $require = ['OFFLINE.Boxes'];

    public function register()
    {
        \Event::listen(
            \OFFLINE\Boxes\Classes\Events::REGISTER_PARTIAL_PATH,
            fn () => ['$/plugins/your-vendor/your-plugin/partials']
        );
    }
}

INFO

You can register multiple path's from a single plugin.

Including Assets

Your plugin might require custom JS or CSS assets. Use October's cms.page.init event to include these assets on every page.

Make sure to add a setting to disable this behaviour in case a user wants to use their own asset versions.

<?php
namespace YourVendor\YourPlugin;

class Plugin extends PluginBase
{
    public $require = ['OFFLINE.Boxes'];

    public function register()
    {
        Event::listen('cms.page.init', function (Controller $controller) {
            // Include Twitter Bootstrap, if config is enabled.
            if (config('yourvendor.yourplugin::config.include_assets')) {
                $controller->addJs('https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js', [
                    'integrity' => 'sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2',
                    'crossorigin' => 'anonymous',
                    'async' => 'async',
                ]);
                $controller->addCss('https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css', [
                    'integrity' => 'sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor',
                    'crossorigin' => 'anonymous',
                ]);
                $controller->addCss('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css');
            }
        })
    }
}

Example implementation

See the oc-bootstrap-boxes-plugin for an example implementation of a Boxes plugin.