useBlockProps not loading spacing preset classes in frontend when creating block

Hello!

I’m creating a full customized theme with custom blocks but I’m having issues to load the style spacing attributes to my blocks. The attributes are saved in the block, but in the frontend it’s not generating the css classes that should apply this paddings.

After creating and editing my custom blocks with @wordpress/create-block I build them running the command:

npm run build

I’m not that experienced, but some class like “–wp–preset–spacing-20” should appear in my output with this kind of class names, right? Does wordpress generate a custom css classes with presets like this or I should load a specific file or add some kind of theme support? What am I doing wrong? I checked everything!

Please note I’m using a starter theme (UnderscoreTW). I’ve enabled this in my functions.php along with other options, I thought that might be relevant for you.

add_theme_support( 'appearance-tools' );
add_theme_support( 'custom-spacing' );

I’ve enabled the support to my block, just like that. This is my block.js.

"supports": {
		"html": false,
		"spacing": {
			"padding": true
		}
	}

The spacing works in my editor but it’s missing in my frontend. This is my save.js file (I’ve deleted not important parts):

import {
	useBlockProps,
} from "@wordpress/block-editor";

export default function save( { attributes } ) {

	const { title } = attributes;

	const blockProps = useBlockProps.save();

	return (
		<>
			<div {...blockProps}>
				<h1>{title}</h1>
			</div>
			</>
	);
}

Also these are my settings in my theme.json file. I’ve deleted some code to make it more clear.

"settings": {
		"spacing": {
			"customSpacingSize": true,
			"padding" : true,
			"spacingScale": {
				"steps": 0
			},
			"spacingSizes": [
				{
					"name": "Step 1",
					"size": "0.25rem",
					"slug": "10"
				},
				{
					"name": "Step 2",
					"size": "0.5rem",
					"slug": "20"
				},
				{Step 3},
				{Step 4},
				{Step 5},

			],
			"units": ["%", "px", "em", "rem", "vh", "vw"]
		}
	}

I also noticed that the classes that I included in my theme.json file are actually loading in my theme global style inline css

<style id='global-styles-inline-css'>
--wp--preset--spacing--10: 0.25rem;
--wp--preset--spacing--20: 0.5rem;
--wp--preset--spacing--30: 0.75rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.25rem;
</style>

This is my output, without the class they should have (–wp–preset–spacing–10, …, etc…).

<div class="wp-block-my-block-titleblock">
    <h1>The title</h1>
</div>

And this is what I can see in my block editor in code editor view. As you can see the settings are saved but they’re still not rendering in the frontend:

<!-- wp:my-block/titleblock {"title":"The Title","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}}}} -->

• This topic was modified 6 months, 3 weeks ago by Alex Freixa.
• This topic was modified 6 months, 3 weeks ago by Alex Freixa.
• This topic was modified 6 months, 3 weeks ago by Alex Freixa.
• This topic was modified 6 months, 3 weeks ago by Alex Freixa.