diff --git a/plugin.php b/plugin.php
index 45ccd88d57..7d3c82799d 100644
--- a/plugin.php
+++ b/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' );
diff --git a/src/block-components/button/index.js b/src/block-components/button/index.js
index 561529d615..a62ff31d5a 100644
--- a/src/block-components/button/index.js
+++ b/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 (
diff --git a/src/block/button/edit.js b/src/block/button/edit.js
index 2b4acbb839..ec7154b61f 100644
--- a/src/block/button/edit.js
+++ b/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( [
diff --git a/src/block/button/index.php b/src/block/button/index.php
new file mode 100644
index 0000000000..6cf4aff91a
--- /dev/null
+++ b/src/block/button/index.php
@@ -0,0 +1,33 @@
+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 );
+}
+
diff --git a/src/block/image/edit.js b/src/block/image/edit.js
index 498da36479..c4d04f11e9 100644
--- a/src/block/image/edit.js
+++ b/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 )
diff --git a/src/block/image/index.php b/src/block/image/index.php
new file mode 100644
index 0000000000..bd68c7ee11
--- /dev/null
+++ b/src/block/image/index.php
@@ -0,0 +1,32 @@
+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 );
+}
diff --git a/src/editor-settings.php b/src/editor-settings.php
index 79d4a0db6a..a348c98434 100644
--- a/src/editor-settings.php
+++ b/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;
}
diff --git a/src/styles/block-design-system-blocks.scss b/src/styles/block-design-system-blocks.scss
index a752413f6e..d6a7255590 100644
--- a/src/styles/block-design-system-blocks.scss
+++ b/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);
diff --git a/src/styles/block-transitions.scss b/src/styles/block-transitions.scss
index 1f0e1f8be4..5a004dbe16 100644
--- a/src/styles/block-transitions.scss
+++ b/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,
diff --git a/src/styles/editor-block-transitions.scss b/src/styles/editor-block-transitions.scss
index aa2b7600dc..6421d5bdf3 100644
--- a/src/styles/editor-block-transitions.scss
+++ b/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,
diff --git a/src/welcome/admin.js b/src/welcome/admin.js
index 8a869f40b0..5cab7928c0 100644
--- a/src/welcome/admin.js
+++ b/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 ) }
/>
+ {
+ 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 ) }
+ />
+ {
+ 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 &&