feat (theme-compatibility): features can now inherit theme styles.

plugin.php

@@ -214,10 +214,12 @@ function stackable_deactivation_cleanup() {
 if ( ! is_admin() ) {
 	require_once( plugin_dir_path( __FILE__ ) . 'src/lightbox/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/accordion/index.php' );
+	require_once( plugin_dir_path( __FILE__ ) . 'src/block/button/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/carousel/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/count-up/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/countdown/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/expand/index.php' );
+	require_once( plugin_dir_path( __FILE__ ) . 'src/block/image/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/notification/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/video-popup/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/table-of-contents/index.php' );

src/block-components/button/index.js

@@ -3,6 +3,7 @@
  */
 import classnames from 'classnames'
 import { useBlockAttributesContext } from '~stackable/hooks'
+import { settings } from 'stackable'
 
 /**
  * Internal dependencies
@@ -33,7 +34,11 @@ export const Button = props => {
 
 	return (
 		<Link
-			className={ classnames( [ className, getButtonClasses( attributes ) ] ) }
+			className={ classnames( [
+				className,
+				getButtonClasses( attributes ),
+				{ 'wp-block-button__link wp-element-button': 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

@@ -0,0 +1,33 @@
+<?php
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( get_option( 'stackable_inherit_button_styles_from_theme' ) === '1' ) {
+
+	if ( ! function_exists( 'stackable_add_inherit_button_theme_class' ) ) {
+		function stackable_add_inherit_button_theme_class( $block_content, $block ) {
+			if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
+				return $block_content;
+			}
+
+			$html_tag = new WP_HTML_Tag_Processor( $block_content );
+
+			while ( $html_tag->next_tag( 'a' ) ) {
+				$img_classname = $html_tag->get_attribute( 'class' );
+
+				if ( strpos( $img_classname, 'stk-button' ) !== false ) {
+					$html_tag->add_class( 'wp-block-button__link wp-element-button' );
+				}
+			}
+
+			return $html_tag->get_updated_html();
+		}
+
+	}
+
+	add_filter( 'render_block_stackable/button', 'stackable_add_inherit_button_theme_class', 1, 2 );
+}
+

src/block/image/edit.js

@@ -7,7 +7,9 @@ import BlockStyles from './style'
  * External dependencies
  */
 import classnames from 'classnames'
-import { version as VERSION, i18n } from 'stackable'
+import {
+	version as VERSION, i18n, settings,
+} from 'stackable'
 import { InspectorTabs, AlignButtonsControl } from '~stackable/components'
 import { useBlockContext } from '~stackable/hooks'
 import {
@@ -55,8 +57,8 @@ const Edit = props => {
 
 	const figcaptionClassnames = classnames(
 		getTypographyClasses( props.attributes, 'figcaption%s' ),
-		'stk-img-figcaption'
-
+		'stk-img-figcaption',
+		{ 'wp-element-caption': settings.stackable_inherit_caption_styles_from_theme },
 	)
 
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )

src/block/image/index.php

@@ -0,0 +1,32 @@
+<?php
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( get_option( 'stackable_inherit_caption_styles_from_theme' ) === '1' ) {
+
+	if ( ! function_exists( 'stackable_add_inherit_figcaption_theme_class' ) ) {
+		function stackable_add_inherit_figcaption_theme_class( $block_content, $block ) {
+			if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
+				return $block_content;
+			}
+
+			$html_tag = new WP_HTML_Tag_Processor( $block_content );
+
+			while ( $html_tag->next_tag( 'figcaption' ) ) {
+				$img_classname = $html_tag->get_attribute( 'class' );
+
+				if ( strpos( $img_classname, 'stk-img-figcaption') !== false ) {
+					$html_tag->add_class( 'wp-element-caption' );
+				}
+			}
+
+			return $html_tag->get_updated_html();
+		}
+
+	}
+
+	add_filter( 'render_block_stackable/image', 'stackable_add_inherit_figcaption_theme_class', 1, 2 );
+}

src/editor-settings.php

@@ -154,6 +154,30 @@ public function register_settings() {
 					'default' => true,
 				)
 			);
+
+			register_setting(
+				'stackable_editor_settings',
+				'stackable_inherit_button_styles_from_theme',
+				array(
+					'type' => 'boolean',
+					'description' => __( 'If enabled, the button styles from your theme will be inherited by the button block.', STACKABLE_I18N ),
+					'sanitize_callback' => 'sanitize_text_field',
+					'show_in_rest' => true,
+					'default' => true,
+				)
+			);
+
+			register_setting(
+				'stackable_editor_settings',
+				'stackable_inherit_caption_styles_from_theme',
+				array(
+					'type' => 'boolean',
+					'description' => __( 'If enabled, the caption styles from your theme will be inherited by the image block\'s caption.', STACKABLE_I18N ),
+					'sanitize_callback' => 'sanitize_text_field',
+					'show_in_rest' => true,
+					'default' => true,
+				)
+			);
 		}
 
 		public function sanitize_array_setting( $input ) {
@@ -174,6 +198,8 @@ public function add_settings( $settings ) {
 			$settings['stackable_auto_collapse_panels'] = get_option( 'stackable_auto_collapse_panels' );
 			$settings['stackable_enable_block_linking'] = get_option( 'stackable_enable_block_linking' );
 			$settings['stackable_enable_carousel_lazy_loading'] = get_option( 'stackable_enable_carousel_lazy_loading' );
+			$settings['stackable_inherit_caption_styles_from_theme'] = get_option( 'stackable_inherit_caption_styles_from_theme' );
+			$settings['stackable_inherit_button_styles_from_theme'] = get_option( 'stackable_inherit_button_styles_from_theme' );
 			return $settings;
 		}
 

src/styles/block-design-system-blocks.scss

@@ -18,8 +18,8 @@
 }
 
 :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
-	&:not(.is-style-link) {
-		.stk-button {
+	&:not(.is-style-link, .wp-element-button) {
+		.stk-button:not(.wp-element-button, .wp-block-button__link) {
 			background: cssvar(button-background-color);
 			padding: cssvar(button-padding);
 

src/styles/block-transitions.scss

@@ -13,7 +13,7 @@ body.stk--anim-init {
 	.stk-block-heading__bottom-line,
 	.stk-block-posts__item-hide, // For posts transitions
 	.stk-block-posts__title > a, // For posts title
-	.stk-button, // Buttons
+	.stk-button:not(.wp-block-button__link), // Buttons
 	.stk-button__inner-text, // Button text
 	.stk-block li, // For icon list texts
 	.stk-block p,

src/styles/editor-block-transitions.scss

@@ -10,7 +10,7 @@
 	.stk-block-heading__bottom-line,
 	.stk-block-posts__item-hide, // For posts transitions
 	.stk-block-posts__title > a, // For posts title
-	.stk-button, // Buttons
+	.stk-button:not(.wp-block-button__link), // Buttons
 	.stk-button__inner-text, // Button text
 	.stk-block li, // For icon list texts
 	.stk-block p,

src/welcome/admin.js

@@ -237,6 +237,8 @@ const EditorSettings = () => {
 					'stackable_auto_collapse_panels',
 					'stackable_enable_block_linking',
 					'stackable_enable_carousel_lazy_loading',
+					'stackable_inherit_button_styles_from_theme',
+					'stackable_inherit_caption_styles_from_theme',
 				] ) )
 			} )
 		} )
@@ -386,6 +388,34 @@ const EditorSettings = () => {
 			} }
 			help={ __( 'Disable this if you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading.', i18n ) }
 		/>
+		<AdminToggleSetting
+			label={ __( 'Inherit Button Theme Styles', i18n ) }
+			value={ settings.stackable_inherit_button_styles_from_theme }
+			onChange={ value => {
+				setIsBusy( true )
+				const model = new models.Settings( { stackable_inherit_button_styles_from_theme: value } ) // eslint-disable-line camelcase
+				model.save().then( () => setIsBusy( false ) )
+				setSettings( {
+					...settings,
+					stackable_inherit_button_styles_from_theme: value, // eslint-disable-line camelcase
+				} )
+			} }
+			help={ __( 'If enabled, the button styles from your theme will be inherited by the button block.', i18n ) }
+		/>
+		<AdminToggleSetting
+			label={ __( 'Inherit Caption Theme Styles', i18n ) }
+			value={ settings.stackable_inherit_caption_styles_from_theme }
+			onChange={ value => {
+				setIsBusy( true )
+				const model = new models.Settings( { stackable_inherit_caption_styles_from_theme: value } ) // eslint-disable-line camelcase
+				model.save().then( () => setIsBusy( false ) )
+				setSettings( {
+					...settings,
+					stackable_inherit_caption_styles_from_theme: value, // eslint-disable-line camelcase
+				} )
+			} }
+			help={ __( 'If enabled, the caption styles from your theme will be inherited by the image block\'s caption.', i18n ) }
+		/>
 		{ isBusy &&
 			<div className="s-absolute-spinner">
 				<Spinner />