Shared Assets #
New in v1.2.0
DDLS Core registers several JavaScript and CSS assets that extensions can use without bundling their own copies. Using shared assets reduces page weight and ensures visual consistency between Core and extension UI.
Chart.js #
Core bundles Chart.js and registers it under the handle dmsilm-chartjs. To use Chart.js in your extension, declare it as a dependency of your own script:
wp_enqueue_script(
'my-ext-charts',
MY_EXT_URL . 'assets/js/my-ext-charts.js',
array( 'dmsilm-chartjs' ),
MY_EXT_VERSION,
true
);
Do not bundle your own copy of Chart.js in your extension. Using the shared handle avoids loading Chart.js twice and guarantees version compatibility with Core’s charts.
CSS Design Tokens #
Core’s admin stylesheet (dmsilm-admin.css) defines CSS custom properties at :root that represent DDLS’s visual design system. Use these tokens in your extension’s CSS to match Core’s visual style automatically:
.my-ext-card {
background-color: var(--dmsilm-color-surface);
border: 1px solid var(--dmsilm-color-border);
border-radius: var(--dmsilm-border-radius);
padding: var(--dmsilm-spacing-md);
color: var(--dmsilm-color-text);
font-size: var(--dmsilm-font-size-base);
}
Available token categories:
| Category | Prefix | Examples |
|---|---|---|
| Colors | --dmsilm-color- | surface, border, text, primary, danger |
| Spacing | --dmsilm-spacing- | xs, sm, md, lg, xl |
| Typography | --dmsilm-font- | size-base, size-sm, weight-bold |
| Border | --dmsilm-border- | radius, radius-sm |
Because these tokens are defined by Core, they automatically pick up any theme changes Core ships in future versions, keeping your extension visually in sync without code changes on your part.
Enqueue Timing #
Both Chart.js and dmsilm-admin.css are enqueued by Core on DDLS admin shell pages. Your extension scripts and styles that depend on them should also be enqueued on DDLS admin pages only (check get_current_screen() or the page query parameter) to avoid loading them on unrelated admin pages.
Related Topics #
- [Admin Shell Integration](#)
- [Extension Architecture Overview](#)
