agencenous/blocss

CSS editor for elements in Wordpress blocks

0.2.0 2025-12-02 14:40 UTC

Requires (Dev)

• agencenous/bump-version: dev-main

GPL-3.0-or-later

• Bastien Ho

README

CSS editor for elements in Wordpress blocks

{
    "attributes": {
        "boxStyle":  {
            "type": "object",
            "default": {
                "fontSize": "1em",
                "backgroudColor": "#ff0000"
            }
        },
        "itemStyle":  {
            "type": "object",
            "default": {
                "fontSize": "1em",
                "color": "#ffffff"
            }
        }
    }
}

In the editor, use the npm library

npm install @agencenous/blocss

const { InspectorControls, useBlockProps } = wp.blockEditor;
import { PanelBody } from '@wordpress/components';
import { StyleControl } from '@agencenous/blocss';

const blockProps = useBlockProps();
const { 
    boxStyle,
    itemStyle,
    } = attributes;

const edit = ({ setAttributes, attributes }) => {
    return (
        <div className={className} {...blockProps}>
            <InspectorControls>
                <PanelBody title={__("Box")} initialOpen={true}>
                    <StyleControl
                        value={boxStyle}
                        font={{
                            size: true,
                        }}
                        color={{
                            background: true
                        }}
                        onChange={(value) => setAttributes({ boxStyle: value })}
                    />
                </PanelBody>
                <PanelBody title={__("Items")} initialOpen={true}>
                    <StyleControl
                        value={itemStyle}
                        font={{
                            size: true,
                        }}
                        color={{
                            text: true
                        }}
                        onChange={(value) => setAttributes({ itemStyle: value })}
                    />
                </PanelBody>
            </InspectorControls>
        </div>
)};

In the callback, use the composer library

composer install agencenous/blocss

function myblock_render_callback($attributes) {
    $block_id = 'my-block-' . uniqid();
    $css_rules = [
        '.my-block' => $attributes['boxStyle'],
        '.my-block .block-item' => $attributes['itemStyle'],
    ];
    return '<div id="'.esc_attr($block_id).'" class="my-block">
        <h3>My block</h3>
        <div class="block-item">Item 1</div>
        <div class="block-item">Item 2</div>
    </div>'.Blocss\inline_styles($css_rules, '#' . $block_id);
}