From 451a54212da5ff6e42472b8858668b339ac54b80 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 22 Apr 2021 16:11:11 +0300
Subject: [PATCH] template should include preferred style

---
 packages/block-library/src/buttons/edit.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 7b1243ccb47da6..19fac68246e117 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -11,7 +11,9 @@ import {
 	useBlockProps,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	JustifyContentControl,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,7 +21,6 @@ import {
 import { name as buttonBlockName } from '../button';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
-const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
 function ButtonsEdit( {
 	attributes: { contentJustification, orientation },
@@ -31,9 +32,23 @@ function ButtonsEdit( {
 			'is-vertical': orientation === 'vertical',
 		} ),
 	} );
+	const preferredStyle = useSelect( ( select ) => {
+		const preferredStyleVariations = select(
+			blockEditorStore
+		).getSettings().__experimentalPreferredStyleVariations;
+		return preferredStyleVariations?.value?.[ 'core/button' ];
+	}, [] );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
-		template: BUTTONS_TEMPLATE,
+		template: [
+			[
+				'core/button',
+				preferredStyle
+					? { className: `is-style-${ preferredStyle }` }
+					: {},
+			],
+		],
 		orientation,
 		__experimentalLayout: {
 			type: 'default',