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"}}}} -->

<FocalPointPicker
   url={coverUrl ?? null}
   value={objectPosition}
   onChange={(focalPoint) => {
   handleChangeobjectPosition(focalPoint);
   }}
   resolvePoint={resolvepoint}
 />

I’ve tried using the resolvePoint method mentionned in the doc, which outputs a precise position, but the number with decimals then get rounded when passed to the handleChange function anyway.

Many thanks in advance for the Help,

I have a custom block MYPANEL. This custom block works just like a div with a default class and I can put whatever I want inside of it. The point of the custom block MYPANEL is that if later I want to change the HTML of MYPANEL I can do it from the PHP side.

For example, say today MYPANEL is a div with a CSS class that gives it a black border. But in 3 months I decide to redesign MYPANEL and my new design needs a wrapper div to work for some reason, or 3 divs, or I want to use <figure> instead of div, etc. I want to be able to just change the PHP template instead of having to update every post.

<!-- fallback static HTML generated by javascript -->
<div class="my-panel">
  <!-- innerblocks... -->
</div>

<!-- future HTML generated by PHP one day maybe -->
<aside class="my-panel">>
  <div class="my-panel_icon" />
  <div class="my-panel__inner">
    <!-- innerblocks... -->
  </div>
</aside>

Right now, on save in javascript, I return a div with the attributes I take from useBlockProps.save and InnerBlocks.Content as child. This saves in the post’s content an unchanging div. So now I need the PHP template to replace that div with whatever HTML I want, while keeping the inner blocks.

I couldn’t find documentation on what the arguments passed to render_callback?are, but from my debugging I get the block attributes as first argument, some HTML as second argument ($content), and the block instance as the third. I don’t know if the $content is the HTML that was saved from Javascript or HTML generated in PHP that includes dynamic rendering of inner blocks. Either way, there doesn’t seem to be an $innerBlocksHTML argument anywhere. So what’s the appropriate way of getting it?

Should I write a simple regex to remove the outer div from $content? This feels like it could get messy if I ever change the save function in javascript.

Should I iterate the inner blocks and call render_block on every inner block to get their HTML and just concatenate that? Although this probably should work, if $content contains the rendered blocks already, I’m calling all the rendering callbacks of the inner blocks a second time. I think there was an argument called skip_inner_blocks that looked like it made WP skip rendering the $content, but I couldn’t find any documentation on it. Is that what it is for? Is there something like a skip_outer_block setting so I can take just the inner blocks’ content?

What’s the recommended way of doing this?

Context: I’m trying to create a custom Gutenberg block using React that reveals/hides content based on the click of button/s — and the content is different innerblocks.

Context: My organisation uses react to create custom blocks, but there is one block that would be better written using alpine instead. As such, I’m trying to assess what to be aware of before implementing any changes.

as a WordPress developer I have already developed some blocks as well as additions for existing blocks. Now I got from users the question why my blocks do not work in the app. A test showed: it really does not work.

Is there a way to use your own blocks in the app? Or to display additions to existing blocks there? Unfortunately, I have not found any documentation on this.

Thanks for any answer in advance

I’m trying to create a custom block and I have the following problem:

I have my custom container block that gets custom rich text blocks (these child blocks add a css animation to the rich-text core block). The point of the container it’s to manage the display of each of its children one-by-one. In order to do so, I’ve developed a small js script that handle all the different instances of my custom container block and I enqueue it in the front. To this point everything its working properly.

Now, since WP embraces the WYSIWYG paradigm, I wanted to add the same behavior in the editor view. My first attempt was to enqueue the script in ‘enqueue_block_editor_assets’ but since the visual editor uses an inline generated iframe my script can’t access the inner document elements.

So the question is, how and where should I add this js script to make it work? Should I approach this differently?