Core Extensions

Extends targeted core WordPress blocks with Method’s responsive spacing and typography system. Not a block — a module that hooks into existing blocks via WordPress filters.

• Module path: lib/blocks/method-core-extensions/
• Type: Block filter module (not a standalone block)
• Target blocks: core/paragraph, core/heading, core/list

Overview

Core Extensions bridges Method’s responsive design system into WordPress’s built‑in blocks. Rather than replacing core blocks, it uses WordPress’s register_block_type_args and editor.BlockEdit filters to attach a responsiveSettings attribute and inject Method’s responsive controls into the Inspector panel.

A key design principle: base styling is owned entirely by WordPress core’s native block controls. Method only generates CSS for responsive breakpoints (mobile, tablet, wide), ensuring zero conflict with core’s built‑in spacing and typography.

How It Works

1. Attribute Registration (PHP + JS)

Both PHP and JavaScript register a responsiveSettings attribute on targeted blocks:

PHP (register_block_type_args filter):

$args['attributes']['responsiveSettings'] = array(
    'type'    => 'object',
    'default' => method_core_extensions_get_defaults(),
);

$args['attributes']['responsiveSettings'] = array(
    'type'    => 'object',
    'default' => method_core_extensions_get_defaults(),
);

JS (blocks.registerBlockType filter):

attributes: {
    ...settings.attributes,
    responsiveSettings: {
        type: 'object',
        default: RESPONSIVE_DEFAULTS,
    },
},

attributes: {
    ...settings.attributes,
    responsiveSettings: {
        type: 'object',
        default: RESPONSIVE_DEFAULTS,
    },
},

2. Editor Controls (JS)

A createHigherOrderComponent wrapper (withMethodResponsiveControls) injects Method’s responsive tab UI into each targeted block’s Inspector:

Block Inspector
├── [Core's native controls]
└── Method Responsive Overrides
    ├── Mobile tab
    │   ├── MethodSpacingControls
    │   └── MethodTypographyControls
    ├── Tablet tab
    │   ├── MethodSpacingControls
    │   └── MethodTypographyControls
    └── Wide tab
        ├── MethodSpacingControls
        └── MethodTypographyControls

Block Inspector
├── [Core's native controls]
└── Method Responsive Overrides
    ├── Mobile tab
    │   ├── MethodSpacingControls
    │   └── MethodTypographyControls
    ├── Tablet tab
    │   ├── MethodSpacingControls
    │   └── MethodTypographyControls
    └── Wide tab
        ├── MethodSpacingControls
        └── MethodTypographyControls

A MethodStyleTag with excludeBase={true} generates scoped editor CSS for responsive breakpoints only.

3. Frontend CSS (PHP)

The render_block filter intercepts each targeted block’s output, checks for enabled responsive breakpoints, generates a unique ID, injects it onto the block’s root HTML element, and pipes the responsive settings through method_get_block_responsive_styles() / method_collect_css().

Configuration

The method_core_extensions_get_config() function defines which blocks are targeted and what CSS properties each supports:

Default responsiveSettings

{
  "base":   { "enabled": true },
  "mobile": { "enabled": false, "customSpacing": false, "customType": false, "allowNegative": false },
  "tablet": { "enabled": false, "customSpacing": false, "customType": false, "allowNegative": false },
  "wide":   { "enabled": false, "customSpacing": false, "customType": false, "allowNegative": false }
}

{
  "base":   { "enabled": true },
  "mobile": { "enabled": false, "customSpacing": false, "customType": false, "allowNegative": false },
  "tablet": { "enabled": false, "customSpacing": false, "customType": false, "allowNegative": false },
  "wide":   { "enabled": false, "customSpacing": false, "customType": false, "allowNegative": false }
}

Each responsive breakpoint also supports padding, margin, fontSize, lineHeight, and textAlign when enabled.

Control Sets

Filters

Example: Adding responsive controls to core/quote

add_filter('method_core_extensions_config', function($config) {
    $config['core/quote'] = array(
        'cssargs' => array(
            'padding-top',
            'padding-bottom',
            'margin-top',
            'margin-bottom',
            'fontSize',
            'lineHeight',
        ),
    );
    return $config;
});

add_filter('method_core_extensions_config', function($config) {
    $config['core/quote'] = array(
        'cssargs' => array(
            'padding-top',
            'padding-bottom',
            'margin-top',
            'margin-bottom',
            'fontSize',
            'lineHeight',
        ),
    );
    return $config;
});

Note: Adding a block to the PHP config alone won’t add editor controls — the JS blockConfig object in src/config.js must also be updated with matching spacing, typography, and editorCssMap entries for the editor UI to appear.

Frontend Rendering

Core Extensions doesn’t replace the block’s render output. It intercepts it via render_block, injects a unique ID, and appends CSS to the page via Method’s CSS collector:

Original:  <p class="has-large-font-size">Hello</p>
Processed: <p id="method-ce-abc123" class="has-large-font-size">Hello</p>
           + @media (max-width: 767px) { #method-ce-abc123 { font-size: 1.25rem; } }

Original:  <p class="has-large-font-size">Hello</p>
Processed: <p id="method-ce-abc123" class="has-large-font-size">Hello</p>
           + @media (max-width: 767px) { #method-ce-abc123 { font-size: 1.25rem; } }

The ID injection uses a regex that targets the first HTML tag and avoids overwriting any existing id attribute.