diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index c901655dd42631..45d2d679a1ff1e 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -11,12 +11,10 @@ import { useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; +import { store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -/** - * Internal dependencies - */ -import { name as buttonBlockName } from '../button'; +const buttonBlockName = 'core/button'; const ALLOWED_BLOCKS = [ buttonBlockName ]; @@ -42,23 +40,29 @@ function ButtonsEdit( { attributes, className } ) { 'has-custom-font-size': fontSize || style?.typography?.fontSize, } ), } ); - const preferredStyle = useSelect( ( select ) => { + const defaultButtonAttributes = useSelect( ( select ) => { const preferredStyleVariations = select( blockEditorStore ).getSettings() .__experimentalPreferredStyleVariations; - return preferredStyleVariations?.value?.[ buttonBlockName ]; + const preferredStyle = + preferredStyleVariations?.value?.[ buttonBlockName ]; + const defaultButton = select( blocksStore ).getDefaultBlockVariation( + buttonBlockName + ) || { attributes: {} }; + const buttonClasses = classnames( defaultButton.attributes.className, { + [ `is-style-${ preferredStyle }` ]: !! preferredStyle, + } ); + return { + ...defaultButton.attributes, + className: buttonClasses === '' ? undefined : buttonClasses, + }; }, [] ); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, - defaultBlock: DEFAULT_BLOCK, + defaultBlock: { ...DEFAULT_BLOCK, attributes: defaultButtonAttributes }, directInsert: true, - template: [ - [ - buttonBlockName, - { className: preferredStyle && `is-style-${ preferredStyle }` }, - ], - ], + template: [ [ buttonBlockName, defaultButtonAttributes ] ], templateInsertUpdatesSelection: true, orientation: layout?.orientation ?? 'horizontal', } );