Embed dynamic media query in a Gutenberg block

If we stick to your exact example, I would define the value as a custom property in an inline style:

<div class="item" style="--my-gap: <?php echo esc_attr( $attributes['gap'] ); ?>;">

Then in CSS use a media query to use the property as the appropriate margin:

.item {
    margin-bottom: var(--my-gap);
}

@media ( min-width: 768px ) {
    .item {
        margin-bottom: 0;
        margin-right: var(--my-gap);
    }
}

But if you’re trying to lay out a grid, or set of columns and rows, I would suggest using something modern like flexbox or grid and using the gap property.

If display: flexbox and gap can work to get the result you want, then you could look at supporting blockGap in your block. In WordPress 6.2 this is still experimental, but it might be finalised in 6.3. To add support for blockGap in your custom block add it to supports in your block.json file:

"supports": {
    "spacing": {
        "blockGap": true
    }
}

Then declare your block’s layout as flex:

"supports": {
    "__experimentalLayout": {
        "allowEditing": false,
        "default": {
            "type": "flex"
        }
    }
}

In a future version of WordPress __experimentalLayout will probably become layout.

This will enable the core “Block spacing” control for your block, which will let users adjust the spacing using the spacing presets/configuration defined by their theme. The selected value will be automatically output as the gap CSS property on the block’s main element.

Related Posts: