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

plugin.php

@@ -212,10 +212,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,7 @@ export const Button = props => {
 
 	return (
 		<Link
-			className={ classnames( [ className, getButtonClasses( attributes ) ] ) }
+			className={ classnames( [ className, getButtonClasses( attributes ), settings.stackable_inherit_styles_from_theme && 'wp-element-button' ] ) }
 			linkProps={ buttonProps }
 			linkTrigger={ linkTrigger }
 		>

src/block/button/index.php

@@ -0,0 +1,35 @@
+<?php
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+var_dump(get_option( 'stackable_inherit_styles_from_theme' ));
+
+if ( get_option( 'stackable_inherit_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-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',
+		settings.stackable_inherit_styles_from_theme && 'wp-element-caption',
 	)
 
 	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_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

@@ -160,7 +160,19 @@ public function register_settings() {
 				'stackable_enable_carousel_lazy_loading',
 				array(
 					'type' => 'boolean',
-					'description' => __( 'Disables image lazy loading when using images inside carousel-type blocks to prevent space or layout issues .', STACKABLE_I18N ),
+					'description' => __( 'Disables image lazy loading when using images inside carousel-type blocks to prevent space or layout issues.', STACKABLE_I18N ),
+					'sanitize_callback' => 'sanitize_text_field',
+					'show_in_rest' => true,
+					'default' => true,
+				)
+			);
+
+			register_setting(
+				'stackable_editor_settings',
+				'stackable_inherit_styles_from_theme',
+				array(
+					'type' => 'boolean',
+					'description' => __( 'Inherits the styles created by the theme.', STACKABLE_I18N ),
 					'sanitize_callback' => 'sanitize_text_field',
 					'show_in_rest' => true,
 					'default' => true,
@@ -187,6 +199,7 @@ 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_styles_from_theme'] = get_option( 'stackable_inherit_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) {
 			background: cssvar(button-background-color);
 			padding: cssvar(button-padding);
 

src/welcome/admin.js

@@ -238,6 +238,7 @@ const EditorSettings = () => {
 					'stackable_auto_collapse_panels',
 					'stackable_enable_block_linking',
 					'stackable_enable_carousel_lazy_loading',
+					'stackable_inherit_styles_from_theme',
 				] ) )
 			} )
 		} )
@@ -401,6 +402,20 @@ 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 Theme Styles', i18n ) }
+			value={ settings.stackable_inherit_styles_from_theme }
+			onChange={ value => {
+				setIsBusy( true )
+				const model = new models.Settings( { stackable_inherit_styles_from_theme: value } ) // eslint-disable-line camelcase
+				model.save().then( () => setIsBusy( false ) )
+				setSettings( {
+					...settings,
+					stackable_inherit_styles_from_theme: value, // eslint-disable-line camelcase
+				} )
+			} }
+			help={ __( 'Enable this if you want certain elements in your site to be styled by the theme.', i18n ) }
+		/>
 		{ isBusy &&
 			<div className="s-absolute-spinner">
 				<Spinner />