refactored implementation

src/block-components/button/index.js

@@ -34,7 +34,11 @@ export const Button = props => {
 
 	return (
 		<Link
-			className={ classnames( [ className, getButtonClasses( attributes ), settings.stackable_inherit_button_styles_from_theme && 'wp-element-button' ] ) }
+			className={ classnames( [
+				className,
+				getButtonClasses( attributes ),
+				{ 'wp-block-button__link': settings.stackable_inherit_button_styles_from_theme }, //Check if body contains stk--is-kadence-theme
+			] ) }
 			linkProps={ buttonProps }
 			linkTrigger={ linkTrigger }
 		>

src/block/button/edit.js

@@ -2,7 +2,9 @@
  * External dependencies
  */
 import classnames from 'classnames'
-import { version as VERSION, i18n } from 'stackable'
+import {
+	version as VERSION, i18n, settings,
+} from 'stackable'
 import { InspectorTabs } from '~stackable/components'
 import {
 	getTypographyClasses,
@@ -69,6 +71,10 @@ const Edit = props => {
 		{
 			[ `is-style-${ blockStyle }` ]: blockStyle,
 		},
+		// Kadence theme's css selector for their buttons are different compared to other themes
+		{
+			'wp-block-button': settings.stackable_inherit_button_styles_from_theme && document.body.classList.contains( 'stk--is-kadence-theme' ),
+		},
 	] )
 
 	const typographyInnerClassNames = classnames( [

src/block/button/index.php

@@ -19,7 +19,7 @@ function stackable_add_inherit_button_theme_class( $block_content, $block ) {
 				$img_classname = $html_tag->get_attribute( 'class' );
 
 				if ( strpos( $img_classname, 'stk-button' ) !== false ) {
-					$html_tag->add_class( 'wp-element-button' );
+					$html_tag->add_class( 'wp-block-button__link wp-element-button' );
 				}
 			}
 

src/block/image/edit.js

@@ -58,7 +58,7 @@ const Edit = props => {
 	const figcaptionClassnames = classnames(
 		getTypographyClasses( props.attributes, 'figcaption%s' ),
 		'stk-img-figcaption',
-		settings.stackable_inherit_caption_styles_from_theme && 'wp-element-caption',
+		{ 'wp-element-caption': settings.stackable_inherit_caption_styles_from_theme },
 	)
 
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )