How to render a block in the edit function, without innerBlocks ?

[tresorama]

Is it possible to render a block inside an Edit component render, without using innerBlocks due to the limitation that innerBlock can be used only once?

Example scenario:

const Edit = (props) => {
  const { attributes } = props;
  const { description, age } = attributes;

  return (
    <div {...useBlockProps()}>
      <div>{description}</div>
      {/*
      This innerBlocks is used only to render the `Button` block,
      so that the visual of Button is consistent with rest of the webssite
      */}
      <InnerBlocks
        templateLock={'all'}
        template={[
          ['core/buttons', {}, [
            ['core/button', { text: 'Button One', url: "..." }],
          ]],
        ]}
      />
      <div>{age}</div>
      {/* Now i want a second Button but innerBlcks can be used only once. So i cant do this */}
      <InnerBlocks
        templateLock={'all'}
        template={[
          ['core/buttons', {}, [
            ['core/button', { text: 'Button Two', url: "..." }],
          ]],
        ]}
      />
    </div>
  );
};

Is there something like this ?

// ... omitted
<div {...useBlockProps()}>
  <div>{description}</div>
  <Block slug="core/buttons">
    <Block slug="core/button" attributes={{/*...*/}}/>
  </Block>
  <div>{age}</div>
  <Block slug="core/buttons">
    <Block slug="core/button" attributes={{/*...*/}}/>
  </Block>
</div>

[brittonwalker]

Unfortunately, the answer is no here. If you wanted do something like this you would have to roll your own.

[tresorama]

Thanks for your direct reply, you saved me some valuable time!

[tresorama]

I discovered the ServerSideRender component that interestingly is invoked similar to my question

import ServerSideRender from '@wordpress/server-side-render';

const MyServerSideRender = () => (
    <ServerSideRender
        block="core/archives"
        attributes={ {
            showPostCounts: true,
            displayAsDropdown: false,
        } }
    />
);

...but it works only with dynamic blocks, and for good reason, because PHP cannot know how to render a static block due to lacking of JS runtime.

If only all block were dynamic, we should be able to do with i wanted to do, and this will open new possibilities...

Related: #53556

[t-hamano]

The ServerSideRender component is not recommended for use when creating new blocks in the future.

You will probably want to implement your own buttons rather than attempting to render the core button block in a custom block.

For example,

/**
 * WordPress dependencies
 */
import {
	useBlockProps,
	RichText,
	__experimentalGetElementClassName,
} from '@wordpress/block-editor';

const Edit = ( props ) => {
	const { attributes, setAttributes } = props;
	const { description, age, descriptionText, ageText } = attributes;

	return (
		<div { ...useBlockProps() }>
			<div>{ description }</div>
			<RichText
				value={ descriptionText }
				onChange={ ( value ) => {
					setAttributes( { descriptionText: value } );
				} }
				className={ __experimentalGetElementClassName( 'button' ) }
			/>
			<div>{ age }</div>
			<RichText
				value={ ageText }
				onChange={ ( value ) => {
					setAttributes( { ageText: value } );
				} }
				className={ __experimentalGetElementClassName( 'button' ) }
			/>
		</div>
	);
};

__experimentalGetElementClassName( 'button' ) returns a class named .wp-element-button.

If the theme defines the style of the button via theme.json, the same style would be applied to this button in the custom block.