Block Alignment and Layout applied to child

For some reason, as soon as I add any class name (other than has-x-background to my custom block, the layout is applied to the child of the div I used the {…useBlockProps} statement on.

The block.json file looks as follows:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "test/section-card",
  "version": "0.1.0",
  "title": "Section Card",
  "description": "A card containing text.",
  "icon": "admin-comments",
  "category": "layout",
  "attributes": {
    "backgroundColor": {
        "type": "string",
        "default":"#eee"
    },
    "textColor": {
        "type": "string"
    },
    "cardWidth": {
        "type": "string",
        "default":"40%"
    }
},
  "example": {},
  "supports": {
    "html": false,
    "color": {
      "text": true,
      "background": true
    },
    "layout": {
      "default": {"type": "flex", "orientation": "vertical", "verticalAlignment": "center"},
      "allowVerticalAlignment": true,
      "allowJustification": true,
      "allowOrientation": false
    }
  },
  "textdomain": "section-arrow",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript":""
}

If I use the following .save-method, the code works as expected:

save({ attributes }) {
	const { backgroundColor, cardWidth } = attributes;
	const colorClass = backgroundColor.includes('#') ? "" : has-${backgroundColor}-background;
	return (
			<div {...useBlockProps.save()} style={{background:"none !important"}}>
					<div
						className={colorClass}
						style={{ width:cardWidth, backgroundColor:(backgroundColor.includes('#') ? backgroundColor :'') }}>
							<InnerBlocks.Content />
					</div>
			</div>
	)
}

If I include any other class name such as the letter “a”, the layout is suddenly applied to the child element:

className={colorClass+" a"}

The output without the letter “a” looks like expected. As soon as any class is added (even when the has-background class is removed), the output is wrong:

View post on imgur.com

This bug is incredibly weird. I have no idea what sort of strange bug is triggering this behaviour, but it is definitely not expected. I also want to note, that the block is located inside a core/column block. Any help is greatly appreciated. For now, I will simply restrict the class name to the colour slug.

The block code can be dowloaded here:

https://drive.google.com/drive/folders/13YtczFFTYuGubJ3XwLQrA9sOpfg7lwf4?usp=drive_link

• This topic was modified 10 months ago by badakaa.
• This topic was modified 10 months ago by badakaa.