feat: introducing InnerBlocks Primitive

packages/block-primitives/package.json

@@ -30,6 +30,11 @@
       "block-editor": "./dist/block-editor/block.js",
       "types": "./dist/primitives/block.d.ts",
       "default": "./dist/primitives/block.js"
+    },
+    "./inner-blocks": {
+      "block-editor": "./dist/block-editor/inner-blocks.js",
+      "types": "./dist/primitives/inner-blocks.d.ts",
+      "default": "./dist/primitives/inner-blocks.js"
     }
   },
   "imports": {

packages/block-primitives/src/block-editor/inner-blocks.tsx

@@ -0,0 +1,14 @@
+import { InnerBlocks as GutenbergInnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocksProps } from '#shared/types.js';
+
+const InnerBlocks: React.FC<InnerBlocksProps> = ({ className, ...props }) => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div {...blockProps} className={[className, blockProps.className].join(' ')}>
+			<GutenbergInnerBlocks {...props} />
+		</div>
+	);
+};
+
+export default InnerBlocks;

packages/block-primitives/src/primitives/inner-blocks.tsx

@@ -0,0 +1,7 @@
+import { InnerBlocksProps } from '#shared/types.js';
+
+const InnerBlocks: React.FC<InnerBlocksProps> = ({ children, className }) => {
+	return <div className={className}>{children}</div>;
+};
+
+export default InnerBlocks;

packages/block-primitives/src/shared/types.ts

@@ -1,4 +1,4 @@
-import type { RichText } from '@wordpress/block-editor';
+import type { RichText, InnerBlocks } from '@wordpress/block-editor';
 import type { DropdownProps } from '@wordpress/components/build-types/dropdown/types.d.ts';
 
 export type Attributes = Record<string, any>;
@@ -129,7 +129,13 @@ export interface LinkProps {
 	className?: string;
 }
 
+export interface InnerBlocksProps extends InnerBlocks.Props {
+	children?: React.ReactNode;
+	className?: string;
+}
+
 export interface GutenbergBlock<T extends Record<string, unknown>> {
+	children?: React.ReactNode;
 	attributes: {
 		[k in keyof T]: T[k];
 	};

projects/component-library/src/hero/Hero.tsx

@@ -6,7 +6,8 @@ import type {
 import Image from '@headstartwp/block-primitives/image';
 import RichText from '@headstartwp/block-primitives/rich-text';
 import Link from '@headstartwp/block-primitives/link';
-import { containerStyle, titleStyle, linkStyle } from './style.css';
+import InnerBlocks from '@headstartwp/block-primitives/inner-blocks';
+import { containerStyle, titleStyle, linkStyle, innerBlocksStyle } from './style.css';
 
 export type HeroAttributes = {
 	title: string;
@@ -15,7 +16,7 @@ export type HeroAttributes = {
 	link: LinkPrimitiveValue;
 };
 
-export const Hero = ({ attributes }: GutenbergBlock<HeroAttributes>) => {
+export const Hero = ({ attributes, children }: GutenbergBlock<HeroAttributes>) => {
 	return (
 		<div className={containerStyle}>
 			<RichText
@@ -43,6 +44,8 @@ export const Hero = ({ attributes }: GutenbergBlock<HeroAttributes>) => {
 
 			{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
 			<Link name="link" value={attributes.link} className={linkStyle} />
+
+			<InnerBlocks className={innerBlocksStyle}>{children}</InnerBlocks>
 		</div>
 	);
 };

projects/component-library/src/hero/style.css.ts

@@ -17,3 +17,10 @@ export const linkStyle = style({
 		textDecoration: 'underline',
 	},
 });
+
+export const innerBlocksStyle = style({
+	marginTop: '1rem',
+	padding: '1rem',
+	background: 'white',
+	border: '1px solid black',
+});

projects/wp-nextjs-app/src/components/Blocks.tsx

@@ -14,14 +14,14 @@ type BlocksRendererProps = {
 	settings: HeadlessConfig;
 };
 
-const HeroBlock: BlockFC<BlockProps<HeroAttributes>> = ({ block }) => {
+const HeroBlock: BlockFC<BlockProps<HeroAttributes>> = ({ block, children }) => {
 	if (!block) {
 		return null;
 	}
 
 	const { attributes } = block;
 
-	return <Hero attributes={attributes} />;
+	return <Hero attributes={attributes}>{children}</Hero>;
 };
 
 HeroBlock.test = (node) => isBlockByName(node, 'tenup/hero');

wp/10up-theme/includes/blocks/example-block/markup.php

@@ -9,7 +9,7 @@
  * @var WP_Block $block              Block instance.
  * @var array    $context            Block context.
  */
-
 ?>
 <div <?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>>
+    <?php echo wp_kses_post($content); ?>
 </div>

wp/10up-theme/includes/blocks/example-block/save.js

@@ -1,8 +1,12 @@
+import { InnerBlocks } from '@wordpress/block-editor';
+
 /**
  * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
  *
  * @returns {null} Dynamic blocks do not save the HTML.
  */
-const ExampleBlockSave = () => null;
+const ExampleBlockSave = () => {
+	return <InnerBlocks.Content />;
+};
 
 export default ExampleBlockSave;