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