Components
Reusable CSS components with no page builder or theme dependency.
Overview
Define reusable CSS components as selector and rules pairs, then use those classes anywhere: block editor, page builder, theme template, or a shortcode. No page builder dependency and no theme lock-in.
How It Works
- Add a component with a selector (for example
.callout-box) and its CSS rules. - The plugin sanitizes the CSS and writes a single stylesheet to
wp-content/uploads/functionalities/components.css. - That file is enqueued site-wide, and the same CSS is injected into the block editor canvas so components look identical while you edit.
The editor canvas is an iframe. Component CSS reaches it through the editor styles setting rather than an inline style handle, which does not reliably cross the iframe boundary. This works whether or not the generated file exists on disk.
CSS Sanitization
Rules pass through a shared sanitizer before they are written. Declarations that could execute script or pull in remote resources are stripped, so a component cannot become an injection vector.
Developer Filters
| Filter | Purpose |
|---|---|
functionalities_components_items | Add or modify components in code |
functionalities_components_css | Filter the final generated stylesheet |
functionalities_components_file_path | Change where the stylesheet is written |
functionalities_components_enabled | Disable the module conditionally |