• Plugin: Slider Block for Gutenberg Gutenslider by GSlider (gslider-blocks) 1.1.7
    Block: gslider-blocks/image-slider
    WordPress: 7.0.4

    The Image Slider wrapper does not behave like a native Gutenberg block, so extra classes never appear on the saved frontend HTML.

    build/blocks/image-slider/block.json sets:

    "supports": {
      "html": false,
      "anchor": false,
      "customClassName": false
    }

    And save() hard-codes its own className instead of merging extra classes:

    useBlockProps.save({
      className: gslider-image-slider-wrapper ${blockId} ${navPosType} ${navPos} ${showPagination ? "has-pagination" : ""}
    })

    Result: Pattern CSS (and anything else that uses blocks.getSaveContent.extraProps / Additional CSS class) can store a class on the block in the editor, and can even print the compiled CSS in the head, but the wrapper never gets that class.

    Example: Pattern CSS id pcss-z6posv2d compiled to:

    .pcss-z6posv2d{margin-bottom:0!important}

    Saved markup:

    <div class="wp-block-gslider-blocks-image-slider alignfull gslider-image-slider-wrapper gslider-image-slider-73b76d4c inside center has-pagination">

    No pcss-z6posv2d. The editor still looks styled because Pattern CSS can paint the edit wrapper via getEditWrapperProps. The frontend does not.

    Core Group (and other native blocks with the default customClassName: true) get the class on the saved <div> as expected.

    Ask: set customClassName to true (or omit it), and merge extra className from useBlockProps.save() instead of replacing it. Same root cause as the has-pagination class always being present — className is treated as a private template, not a Gutenberg merge.

You must be logged in to reply to this topic.