limit number of inner blocks to 2

src/edit.js

@@ -1,31 +1,29 @@
 import { __ } from '@wordpress/i18n';
 
-/**
+import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
- * React hook that is used to mark the block wrapper element.
+import { useSelect } from '@wordpress/data';
- * It provides all the necessary props like the class name.
- *
- * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
- */
-import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import { ColorPicker } from '@wordpress/components';
 
-/**
- * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
- * Those files can contain any CSS code that gets applied to the editor.
- *
- * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
- */
 import './editor.scss';
 
-/**
+const InnerBlocksWithLimit = ( {clientId, limit=2, ...rest} ) => {
- * The edit function describes the structure of your block in the context of the
+	const { blockCount } = useSelect(select => ({
- * editor. This represents what the editor will render when the block is used.
+		blockCount: select('core/block-editor').getBlockCount(clientId)
- *
+	}))
- * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
+
- *
+	const blockAppender = () => {
- * @return {WPElement} Element to render.
+		return blockCount < limit ? (<InnerBlocks.DefaultBlockAppender />) : false;
- */
+	}
-export default function Edit({ attributes, setAttributes }) {
+
+	return (
+		<InnerBlocks
+			renderAppender={ () => blockAppender() }
+			{...rest}
+		/>
+	)
+}
+
+export default function Edit({ attributes, setAttributes, clientId }) {
 	return (
 		<>
 			<InspectorControls>
@@ -47,12 +45,7 @@ export default function Edit({ attributes, setAttributes }) {
 			}) }>
 				<div className="orbital-content content-center anti-clockwise">
 					<div className="feature">
-						<div className="feature-item primary">
+						<InnerBlocksWithLimit  orientation="horizontal" clientId={clientId} />
-							<img className="img" src={attributes.imgSrc} />
-						</div>
-						<div className="feature-item secondary">
-							<p>Hallo!</p>
-						</div>
 					</div>
 				</div>
 			</li>

src/editor.scss

@@ -31,12 +31,19 @@
 		color: #555;
 	}
 
-	.feature {
+	.block-editor-inner-blocks > .block-editor-block-list__layout {
 		display: flex;
 		align-items: center;
-	}
 
-	.feature-item {
+		> * {
+			max-height: 120px;
 			margin: 16px;
 		}
+
+		img {
+			max-height: 120px;
+			width: auto;
+			max-width: 240px;
+		}
+	}
 }

src/save.js

@@ -3,7 +3,7 @@
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
  */
-import { __ } from '@wordpress/i18n';
+import { __ } from "@wordpress/i18n";
 
 /**
  * React hook that is used to mark the block wrapper element.
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 
 /**
  * The save function defines the way in which the different attributes should
@@ -22,13 +22,21 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @return {WPElement} Element to render.
  */
-export default function save() {
+export default function save({ attributes }) {
 	return (
-		<p { ...useBlockProps.save() }>
+		<li
-			{ __(
+			{...useBlockProps.save({
-				'Red Orbital Orbiter – hello from the saved content!',
+				className: "orbital",
-				'red-orbiter'
+				style: {
-			) }
+					color: attributes.backgroundColor,
-		</p>
+				},
+			})}
+		>
+			<div className="orbital-content content-center anti-clockwise">
+				<div className="feature">
+					<InnerBlocks.Content />
+				</div>
+			</div>
+		</li>
 	);
 }