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 &&