Extending Blocksify: hooks overview

Blocksify exposes PHP and JavaScript extension surfaces for CSS, loops, forms, editor controls, dashboards, and runtime UI. This map is for third-party and Blocksify Pro developers.

The compatibility promise in docs/FOUNDATION.md is additive: shipped hooks keep signatures, public keys are not removed or renamed without deprecation, and new extension points are added alongside existing ones. Pre-release builds used dotted names such as blocksify.css.output; every release from 1.0.0 uses the underscore names, and there is no compatibility shim for the old names.

PHP filters and actions

Trait registry

Hook	Runs when	You can change
blocksify_traits	Building the trait registry.	Add or remove trait classes.

CSS pipeline

The CSS pipeline filters control whether CSS is generated at all, how it is printed, and file-mode caching. They change the output described in How Blocksify keeps your site fast.

Hook	Runs when	You can change
blocksify_css_enabled	Starting frontend CSS.	Enable or disable CSS generation.
blocksify_css_page_id	Resolving the page ID.	Set the page ID to scan.
blocksify_css_print_method	Selecting output mode.	Choose file or inline output.
blocksify_css_collected_blocks	Finishing block collection.	Edit the collected block list.
blocksify_css_attrs	Preparing block attributes.	Edit attributes before generation.
blocksify_css_static_block	Loading a block’s static CSS.	Edit that block type’s base CSS.
blocksify_css_block	Generating a block’s CSS.	Edit that instance’s generated CSS.
blocksify_css_output	Completing the CSS pool.	Transform the final stylesheet.
blocksify_css_cache_generation	Reading cache generation.	Override the cache generation number.
blocksify_css_inline_threshold	Choosing file or inline output.	Set the inline byte threshold.
blocksify_css_conditional_blocks	Building conditional CSS.	Transform the conditional CSS.
blocksify_css_file_owner_post_types	Checking file ownership.	Set eligible CSS-file post types.

Append final CSS.

add_filter(
    'blocksify_css_output',
    function ( $css ) {
        return $css . "\n/* Extension CSS. */\n";
    }
);

Content Loop and Product Loop

Content Loop hooks cover queries, card wrappers and regions, empty states, and WooCommerce integration.

Hook	Runs when	You can change
blocksify_cl_query_args	Building query arguments.	Modify query arguments before execution.
blocksify_cl_query_filters	Applying REST query filters.	Modify REST query arguments.
blocksify_cl_inherit_query	Before an inherited query runs.	Mutate the inherited query with $query->set().
blocksify_cl_card_classes	Rendering a card wrapper.	Add or remove card classes.
blocksify_cl_before_card	Before card content.	Print markup before card content.
blocksify_cl_before_media	Before card media.	Print markup before card media.
blocksify_cl_before_body	Before card body.	Print markup before card body.
blocksify_cl_after_body	After card body.	Print markup after card body.
blocksify_cl_after_card	After card content.	Print markup after card content.
blocksify_cl_link_href	Resolving a loop link.	Replace the final link URL.
blocksify_cl_empty_state	Building empty-state markup.	Replace the configured empty-state HTML.
blocksify_cl_no_results	Finding no query items.	Print extra markup; Blocksify captures it and places it first inside the loop’s empty-state wrapper. The action receives the query, merged attributes, and block, and returns nothing.
blocksify_woo_loop_item_hooks	Toggling WooCommerce item hooks.	Enable or disable WooCommerce item hooks.

Insert card body output.

add_action(
    'blocksify_cl_before_body',
    function ( $object, $attrs ) {
        echo '<span class="example-badge">Featured</span>';
    },
    10,
    2
);

Forms

Form hooks cover integrations, validation, submissions, redirects, and email output.

Hook	Runs when	You can change
blocksify_form_integrations	Registering form integrations.	Add or remove integrations.
blocksify_form_field_default	Resolving a field default.	Replace a field’s default value.
blocksify_form_validation_errors	Finishing submission validation.	Add or revise validation errors.
blocksify_form_submitted	After submission actions run.	Run code after success, such as logging or CRM sync. The action passes the submission object and returns nothing.
blocksify_form_action_failed	When a form action fails.	Log or surface the failure. The action passes the action slug, result array, and submission object, and returns nothing.
blocksify_form_redirect_url	Preparing a redirect URL.	Replace the validated redirect URL.
blocksify_form_email_to	Building email recipients.	Modify email recipients.
blocksify_form_email_subject	Building an email subject.	Rewrite the email subject.
blocksify_form_email_body	Building an email body.	Rewrite the email body.
blocksify_form_email_headers	Building email headers.	Modify email headers.

Dynamic Data, templates, and admin surfaces

Hook	Runs when	You can change
blocksify_data_providers, blocksify_data_kinds	Building Dynamic Data registries.	Modify providers and data kinds.
blocksify_data_allowed_post_types, blocksify_data_allowed_providers	Limiting Dynamic Data access.	Allow or deny data sources.
blocksify_data_background_binding	Resolving a background binding.	Replace the resolved binding.
blocksify_tb_free_post_types, blocksify_tb_free_taxonomies	Checking free template coverage.	Modify types and taxonomies supported by Free.
blocksify_template_pro_active, blocksify_template_duplicated	Checking Pro or duplicating.	Override the Pro check or react after duplication.
blocksify_design_library_enabled	Starting the Design Library.	Enable or disable the library.
blocksify_dashboard_capability, blocksify_dashboard_settings_schema, blocksify_dashboard_settings_sanitized	Preparing dashboard settings.	Set capability, schema, or sanitized settings.
blocksify_abilities_enabled, blocksify_mcp_exposure	Preparing Abilities and MCP.	Enable Abilities or limit MCP exposure.

JavaScript filters

JavaScript extensions use wp.hooks. For block-edit wrapping, use editor.BlockEdit; Blocksify has no edit/save wrapper filter.

Filter	Runs when	You can change
blocksify.traits	Building the JS trait registry.	Modify JavaScript trait definitions.
blocksify.cl.inspector.tabs, blocksify.cl.inspector.panels	Building the Content Loop inspector.	Modify inspector tabs and panels.
blocksify.cl.inspector.general_footer, blocksify.cl.inspector.general_disabled_in_hover	Rendering its General panel.	Replace footer nodes or hover-mode state.
blocksify.control.background.field-hint	Rendering Background controls.	Add or replace a field hint.
blocksify.interactions.catalog, blocksify.interactions.effects, blocksify.interactions.easings	Building interaction choices.	Modify interaction choices.
blocksify.styling-repeater.groups, blocksify.styling-repeater.props, blocksify.styling-repeater.selector-overrides	Building Styling Repeater controls.	Modify groups, properties, or selectors.
blocksify.visibility.rows.after	Rendering Visibility controls.	Append visibility-control rows.
blocksify.renderConditions	Building render conditions.	Modify condition definitions.
blocksify.tabs.source_editor	Rendering the Tabs source editor.	Replace the source editor node.
blocksify.form.actions, blocksify.form.allowed_blocks	Building Form editor registries.	Modify actions or allowed inner blocks.
blocksify.data.providers, blocksify.data.kinds	Building Dynamic Data registries.	Modify providers and data kinds.
blocksify.data.allowed_post_types, blocksify.data.allowed_providers, blocksify.data.background_binding, blocksify.data.editor_context	Resolving Dynamic Data context.	Modify allowed data, bindings, or context.
blocksify.dashboard.boot, blocksify.dashboard.tabs, blocksify.dashboard.tabs.locked, blocksify.dashboard.routes	Starting the dashboard app.	Extend boot data, tabs, or routes.
blocksify.dashboard.welcome.sections, blocksify.dashboard.welcome.checklist, blocksify.dashboard.settings.panels, blocksify.dashboard.settings.field-types, blocksify.dashboard.changelog.sources, blocksify.dashboard.version-label	Rendering dashboard tabs.	Modify dashboard tab content.

Add a background field hint.

wp.hooks.addFilter(
    'blocksify.control.background.field-hint',
    'example/background-image-hint',
    function ( node, args ) {
        if ( ! args || args.field !== 'image' ) {
            return node;
        }

        return wp.element.createElement(
            'span',
            { className: 'example-field-hint' },
            'Dynamic source available'
        );
    }
);

Editor UI runtime bag

The editor UI runtime bag exposes curated components and helpers through window.blocksify.editor. Version 2 includes SegmentedTabs and responsive helpers. Use it instead of bundling copies of Free’s editor UI.

Related articles

• CSS pipeline filters deep dive
• Editor UI runtime bag
• Content Loop block
• Form block