Buttons Block: Show inserter if button have variations (#53498) (#53783)

* Buttons Block: Show inserter if button have variations (#53498)

* Combine `useSelect` variations with the existing one

* Add comment about the custom check for the `directInsert` option value that should be handled in the `Inserter`

packages/block-library/src/buttons/edit.js

@@ -12,6 +12,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -42,17 +43,26 @@ function ButtonsEdit( { attributes, className } ) {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
-	const preferredStyle = useSelect( ( select ) => {
+	const { preferredStyle, hasButtonVariations } = useSelect( ( select ) => {
 		const preferredStyleVariations =
 			select( blockEditorStore ).getSettings()
 				.__experimentalPreferredStyleVariations;
-		return preferredStyleVariations?.value?.[ buttonBlockName ];
+		const buttonVariations = select( blocksStore ).getBlockVariations(
+			buttonBlockName,
+			'inserter'
+		);
+		return {
+			preferredStyle:
+				preferredStyleVariations?.value?.[ buttonBlockName ],
+			hasButtonVariations: buttonVariations.length > 0,
+		};
 	}, [] );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		defaultBlock: DEFAULT_BLOCK,
-		directInsert: true,
+		// This check should be handled by the `Inserter` internally to be consistent across all blocks that use it.
+		directInsert: ! hasButtonVariations,
 		template: [
 			[
 				buttonBlockName,