From 1b3c1d035514dddae1f2f66f8e755fdc3eb16304 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <98727316+mxkae@users.noreply.github.com>
Date: Tue, 8 Oct 2024 17:22:49 +0800
Subject: [PATCH] fix (button block): autofocus when adding buttons (#3339)

---
 src/block/button-group/edit.js       | 29 ++++++++++++++++------------
 src/block/button-group/variations.js |  7 +------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/block/button-group/edit.js b/src/block/button-group/edit.js
index b718591d9..a44a4f46d 100644
--- a/src/block/button-group/edit.js
+++ b/src/block/button-group/edit.js
@@ -33,7 +33,7 @@ import {
 	FlexGapControls,
 	Transform,
 } from '~stackable/block-components'
-import { useBlockContext, useDeviceType } from '~stackable/hooks'
+import { useDeviceType } from '~stackable/hooks'
 import {
 	withBlockAttributeContext,
 	withBlockWrapperIsHovered,
@@ -49,6 +49,7 @@ import {
 } from '@wordpress/block-editor'
 import { sprintf, __ } from '@wordpress/i18n'
 import { memo } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 
 const ALLOWED_INNER_BLOCKS = [ 'stackable/button', 'stackable/icon-button' ]
 
@@ -109,7 +110,12 @@ const Edit = props => {
 	const deviceType = useDeviceType()
 	const rowClass = getRowClasses( attributes )
 	const blockAlignmentClass = getAlignmentClasses( attributes )
-	const { hasInnerBlocks } = useBlockContext()
+	const { hasInnerBlocks } = useSelect( select => {
+		const { getBlockOrder } = select( 'core/block-editor' )
+		return {
+			hasInnerBlocks: getBlockOrder( props.clientId ).length > 0,
+		}
+	}, [ props.clientId ] )
 
 	const blockClassNames = classnames( [
 		className,
@@ -176,16 +182,15 @@ const Edit = props => {
 				<CustomCSS mainBlockClass="stk-block-button-group" />
 
 				{ ! hasInnerBlocks && <GroupPlaceholder blockName="stackable/button" /> }
-				{ hasInnerBlocks &&
-					<div className={ contentClassNames }>
-						<InnerBlocks
-							orientation="horizontal"
-							allowedBlocks={ ALLOWED_INNER_BLOCKS }
-							template={ TEMPLATE }
-							templateInsertUpdatesSelection={ true }
-						/>
-					</div>
-				}
+				<div className={ contentClassNames }>
+					<InnerBlocks
+						orientation="horizontal"
+						allowedBlocks={ ALLOWED_INNER_BLOCKS }
+						template={ TEMPLATE }
+						templateInsertUpdatesSelection={ true }
+						renderAppender={ hasInnerBlocks ? undefined : false }
+					/>
+				</div>
 			</BlockDiv>
 			{ props.isHovered && hasInnerBlocks && <MarginBottom /> }
 		</>
diff --git a/src/block/button-group/variations.js b/src/block/button-group/variations.js
index 8753be419..7da4fe73d 100644
--- a/src/block/button-group/variations.js
+++ b/src/block/button-group/variations.js
@@ -31,12 +31,7 @@ const variations = [
 		'stk-type': 'essential',
 		'stk-demo': 'https://wpstackable.com/button-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink',
 		isDefault: true,
-		innerBlocks: [
-			[
-				'stackable/button',
-				{},
-			],
-		],
+		innerBlocks: [],
 		example: buttonExample,
 	},
 	{