Image Slider save() drops extra classes (customClassName false)
-
Plugin: Slider Block for Gutenberg Gutenslider by GSlider (
gslider-blocks) 1.1.7
Block:gslider-blocks/image-slider
WordPress: 7.0.4The 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.jsonsets:"supports": { "html": false, "anchor": false, "customClassName": false }And
save()hard-codes its ownclassNameinstead 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-z6posv2dcompiled 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 viagetEditWrapperProps. 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
customClassNameto true (or omit it), and merge extraclassNamefromuseBlockProps.save()instead of replacing it. Same root cause as thehas-paginationclass always being present —classNameis treated as a private template, not a Gutenberg merge.
You must be logged in to reply to this topic.