diff --git a/classes/class-responsive-block-editor-addons-frontend-styles.php b/classes/class-responsive-block-editor-addons-frontend-styles.php index 72b197749..fa8ddfe29 100644 --- a/classes/class-responsive-block-editor-addons-frontend-styles.php +++ b/classes/class-responsive-block-editor-addons-frontend-styles.php @@ -16932,6 +16932,8 @@ public static function get_responsive_block_call_mail_button_css( $attr, $id ) { $button_background = 'transparent' === $attr['buttonStyleToggle'] ? '' : $attr['buttonColor']; $text_color_hover = 'transparent' === $attr['buttonStyleToggle'] ? $attr['buttonColorHover'] : $attr['buttonTextColorHover']; $button_background_hover = 'transparent' === $attr['buttonStyleToggle'] ? '' : $attr['buttonColorHover']; + $icon_color = isset( $attr['icon_color'] ) ? $attr['icon_color'] : ''; + $icon_fill = ! empty( $icon_color ) ? $icon_color : $text_color; $justify_content_direction = 'flex-start'; if ( 'left' === $attr['buttonAlign'] ) { @@ -16971,7 +16973,7 @@ public static function get_responsive_block_call_mail_button_css( $attr, $id ) { 'justify-content' => $justify_content_direction, ), ' .responsive-block-editor-addons-call-mail-button-button-container' => array( - 'width' => $button_width_css, + 'width' => $flag ? '' : $button_width_css, 'border' => $flag ? '' : $button_border, 'background-color' => $flag ? '' : $button_background, 'border-radius' => $flag ? '' : $button_border_radius, @@ -16987,7 +16989,10 @@ public static function get_responsive_block_call_mail_button_css( $attr, $id ) { 'font-style' => $flag ? '' : $attr['textFontStyle'], ), ' .responsive-block-editor-addons-call-mail-button-icon' => array( - 'fill' => $text_color, + 'fill' => $icon_fill, + ), + ' .responsive-block-editor-addons-call-mail-button-icon svg, .responsive-block-editor-addons-call-mail-button-icon svg path' => array( + 'fill' => $icon_fill, ), ' .responsive-block-editor-addons-call-mail-button-icon svg' => array( 'height' => self::get_css_value( $attr['iconSize'], 'px' ) . ' !important', @@ -17001,7 +17006,10 @@ public static function get_responsive_block_call_mail_button_css( $attr, $id ) { 'color' => $flag ? '' : $text_color_hover, ), ' .responsive-block-editor-addons-call-mail-button-button-container:hover .responsive-block-editor-addons-call-mail-button-icon' => array( - 'fill' => $text_color_hover, + 'fill' => ! empty( $icon_color ) ? $icon_color : $text_color_hover, + ), + ' .responsive-block-editor-addons-call-mail-button-button-container:hover .responsive-block-editor-addons-call-mail-button-icon svg, .responsive-block-editor-addons-call-mail-button-button-container:hover .responsive-block-editor-addons-call-mail-button-icon svg path' => array( + 'fill' => ! empty( $icon_color ) ? $icon_color : $text_color_hover, ), ' .responsive-block-editor-addons-call-mail-button-icon-iconPosition-left' => array( 'margin-right' => self::get_css_value( $attr['iconTextGap'], 'px' ), @@ -17013,7 +17021,7 @@ public static function get_responsive_block_call_mail_button_css( $attr, $id ) { $mobile_selectors = array( ' .responsive-block-editor-addons-call-mail-button-button-container' => array( - 'width' => $button_width_css_mobile, + 'width' => $flag ? '' : $button_width_css_mobile, ), ' .responsive-block-editor-addons-call-mail-button-text' => array( 'font-size' => $flag ? '' : self::get_css_value( $attr['textFontSizeMobile'], 'px' ) . ' !important', @@ -17038,7 +17046,7 @@ public static function get_responsive_block_call_mail_button_css( $attr, $id ) { $tablet_selectors = array( ' .responsive-block-editor-addons-call-mail-button-button-container' => array( - 'width' => $button_width_css_tablet, + 'width' => $flag ? '' : $button_width_css_tablet, ), ' .responsive-block-editor-addons-call-mail-button-text' => array( 'font-size' => $flag ? '' : self::get_css_value( $attr['textFontSizeTablet'], 'px' ) . ' !important', @@ -17084,9 +17092,9 @@ public static function get_responsive_block_call_mail_button_default_attributes( 'buttonWidth' => 200, 'buttonWidthMobile' => 200, 'buttonWidthTablet' => 200, - 'iconSize' => '', - 'iconSizeMobile' => '', - 'iconSizeTablet' => '', + 'iconSize' => 20, + 'iconSizeMobile' => 20, + 'iconSizeTablet' => 20, 'buttonColor' => '#4aac38', 'buttonTextColor' => '#ffffff', 'buttonColorHover' => '', diff --git a/src/blocks/call-mail-button/attributes.js b/src/blocks/call-mail-button/attributes.js index 67090106e..941b1ad30 100644 --- a/src/blocks/call-mail-button/attributes.js +++ b/src/blocks/call-mail-button/attributes.js @@ -68,21 +68,25 @@ const attributes = { type: "string", default: "" }, + icon_color: { + type: "string", + default: "", + }, iconPosition: { type: "string", default: "left" }, iconSize: { type: "number", - default: "" + default: "20" }, iconSizeMobile: { type: "number", - default: "" + default: "20" }, iconSizeTablet: { type: "number", - default: "" + default: "20" }, //Colors buttonColor: { diff --git a/src/blocks/call-mail-button/components/edit.js b/src/blocks/call-mail-button/components/edit.js index 04b68dfa5..17d2b5ac9 100644 --- a/src/blocks/call-mail-button/components/edit.js +++ b/src/blocks/call-mail-button/components/edit.js @@ -110,8 +110,8 @@ export default class Edit extends Component {
@@ -131,7 +131,7 @@ export default class Edit extends Component { placeholder={__("Call", "responsive-block-editor-addons")} value={callText} className={classnames("responsive-block-editor-addons-call-mail-button-text", - inheritFromTheme ? "wp-block-button wp-block-button__link" : null)} + inheritFromTheme ? "wp-block-button" : null)} onChange={(value) => setAttributes({ callText: value })} multiline={false} allowedFormats={[ @@ -150,7 +150,7 @@ export default class Edit extends Component { onChange={(value) => setAttributes({ mailText: value })} multiline={false} className={classnames("responsive-block-editor-addons-call-mail-button-text", - inheritFromTheme ? "wp-block-button wp-block-button__link" : null)} + inheritFromTheme ? "wp-block-button" : null)} allowedFormats={[ "core/bold", "core/italic", diff --git a/src/blocks/call-mail-button/components/editor-styles.js b/src/blocks/call-mail-button/components/editor-styles.js index df0cad025..ada783edf 100644 --- a/src/blocks/call-mail-button/components/editor-styles.js +++ b/src/blocks/call-mail-button/components/editor-styles.js @@ -13,6 +13,7 @@ buttonWidth, buttonWidthMobile, buttonWidthTablet, + icon_color, iconSize, iconSizeMobile, iconSizeTablet, @@ -78,6 +79,7 @@ let buttonBackground = buttonStyleToggle === "transparent" ? "" : buttonColor; let textColorHover = buttonStyleToggle === "transparent" ? buttonColorHover : buttonTextColorHover; let buttonBackgroundHover = buttonStyleToggle === "transparent" ? "" : buttonColorHover; + let iconFill = icon_color ? icon_color : textColor; let justifyButtonDirection = 'flex-start'; if(buttonAlign === 'center') { @@ -98,10 +100,10 @@ "justify-content": justifyButtonDirection, }, " .responsive-block-editor-addons-call-mail-button-button-container": { - "width": buttonWidthCSS, + "width": inheritFromTheme ? '' : buttonWidthCSS, "background-color": inheritFromTheme ? '' : buttonBackground, "border": inheritFromTheme ? '' : buttonBorder, - "border-radius": buttonBorderRadius, + "border-radius": inheritFromTheme ? '' : buttonBorderRadius, }, " .responsive-block-editor-addons-call-mail-button-button-container:hover": { "background-color": inheritFromTheme ? '' : buttonBackgroundHover, @@ -118,7 +120,10 @@ "font-style": textFontStyle, }, " .responsive-block-editor-addons-call-mail-button-icon": { - "fill": textColor, + "fill": iconFill, + }, + " .responsive-block-editor-addons-call-mail-button-icon svg, .responsive-block-editor-addons-call-mail-button-icon svg path": { + "fill": iconFill, }, " .responsive-block-editor-addons-call-mail-button-icon svg": { "height": `${generateCSSUnit(iconSize, "px")} !important`, @@ -128,7 +133,10 @@ "color": inheritFromTheme ? '' : textColorHover, }, " .responsive-block-editor-addons-call-mail-button-button-container:hover .responsive-block-editor-addons-call-mail-button-icon": { - "fill": inheritFromTheme ? '' : textColorHover, + "fill": icon_color ? icon_color : ( inheritFromTheme ? '' : textColorHover ), + }, + " .responsive-block-editor-addons-call-mail-button-button-container:hover .responsive-block-editor-addons-call-mail-button-icon svg, .responsive-block-editor-addons-call-mail-button-button-container:hover .responsive-block-editor-addons-call-mail-button-icon svg path": { + "fill": icon_color ? icon_color : ( inheritFromTheme ? '' : textColorHover ), }, " .responsive-block-editor-addons-call-mail-button-icon-iconPosition-left": { "margin-right": generateCSSUnit(iconTextGap, "px") @@ -145,7 +153,7 @@ "padding": `${generateCSSUnit(blockTopPaddingMobile, "px")} ${generateCSSUnit(blockRightPaddingMobile, "px")} ${generateCSSUnit(blockBottomPaddingMobile, "px")} ${generateCSSUnit(blockLeftPaddingMobile, "px")}`, }, " .responsive-block-editor-addons-call-mail-button-button-container": { - "width": buttonWidthMobileCSS, + "width": inheritFromTheme ? '' : buttonWidthMobileCSS, }, " .responsive-block-editor-addons-call-mail-button-text": { "font-size": `${generateCSSUnit(textFontSizeMobile, "px")} !important`, @@ -169,7 +177,7 @@ "padding": `${generateCSSUnit(blockTopPaddingTablet, "px")} ${generateCSSUnit(blockRightPaddingTablet, "px")} ${generateCSSUnit(blockBottomPaddingTablet, "px")} ${generateCSSUnit(blockLeftPaddingTablet, "px")}`, }, " .responsive-block-editor-addons-call-mail-button-button-container": { - "width": buttonWidthTabletCSS, + "width": inheritFromTheme ? '' : buttonWidthTabletCSS, }, " .responsive-block-editor-addons-call-mail-button-text": { "font-size": `${generateCSSUnit(textFontSizeTablet, "px")} !important`, diff --git a/src/blocks/call-mail-button/components/inspector.js b/src/blocks/call-mail-button/components/inspector.js index fef254ecc..728e4b351 100644 --- a/src/blocks/call-mail-button/components/inspector.js +++ b/src/blocks/call-mail-button/components/inspector.js @@ -204,6 +204,7 @@ export default class Inspector extends Component { buttonWidthTablet, //Icon icon, + icon_color, iconPosition, iconSize, iconSizeMobile, @@ -383,137 +384,145 @@ export default class Inspector extends Component { )} - - ({ - value, - label, - }))} - onChange={(value) => setAttributes({ buttonSize: value })} - defaultValue={"medium"} - /> - - - setAttributes({ buttonWidthType: value })} - defaultValue={"fixed"} - /> - {"flexible" === buttonWidthType && ( - , - className: - " responsive-desktop-tab responsive-responsive-tabs", - }, - { - name: "tablet", - title: , - className: - " responsive-tablet-tab responsive-responsive-tabs", - }, - { - name: "mobile", - title: , - className: - " responsive-mobile-tab responsive-responsive-tabs", - }, - ]} + { + !inheritFromTheme && ( + - {(tab) => { - let tabout; + ({ + value, + label, + }))} + onChange={(value) => setAttributes({ buttonSize: value })} + defaultValue={"med ium"} + /> + + ) + } + { + !inheritFromTheme && ( + + setAttributes({ buttonWidthType: value })} + defaultValue={"fixed"} + /> + {"flexible" === buttonWidthType && ( + , + className: + " responsive-desktop-tab responsive-responsive-tabs", + }, + { + name: "tablet", + title: , + className: + " responsive-tablet-tab responsive-responsive-tabs", + }, + { + name: "mobile", + title: , + className: + " responsive-mobile-tab responsive-responsive-tabs", + }, + ]} + > + {(tab) => { + let tabout; - if ("mobile" === tab.name) { - tabout = ( - - - setAttributes({ buttonWidthMobile: value }) - } - min={0} - max={1000} - /> - - ); - } else if ("tablet" === tab.name) { - tabout = ( - - - setAttributes({ buttonWidthTablet: value }) - } - min={0} - max={1000} - /> - - ); - } else { - tabout = ( - - - setAttributes({ buttonWidth: value }) - } - min={0} - max={1000} - /> - - ); - } + if ("mobile" === tab.name) { + tabout = ( + + + setAttributes({ buttonWidthMobile: value }) + } + min={0} + max={1000} + /> + + ); + } else if ("tablet" === tab.name) { + tabout = ( + + + setAttributes({ buttonWidthTablet: value }) + } + min={0} + max={1000} + /> + + ); + } else { + tabout = ( + + + setAttributes({ buttonWidth: value }) + } + min={0} + max={1000} + /> + + ); + } - return
{tabout}
; - }} - - )} - + return
{tabout}
; + }} + + )} + + ) + } {textFontFamily && loadGoogleFont(textFontFamily)} - - - setAttributes({ buttonStyleToggle: value}) - } - options={[ - { value: "rounded", label: __("Rounded", "responsive-block-editor-addons") }, - { value: "transparent", label: __("Transparent", "responsive-block-editor-addons") }, - ]} - /> - {"rounded" === buttonStyleToggle && ( - setAttributes({ buttonRadius: value })} - min={0} - max={100} - /> - )} - + { + !inheritFromTheme && ( + + + setAttributes({ buttonStyleToggle: value}) + } + options={[ + { value: "rounded", label: __("Rounded", "responsive-block-editor-addons") }, + { value: "transparent", label: __("Transparent", "responsive-block-editor-addons") }, + ]} + /> + {"rounded" === buttonStyleToggle && ( + setAttributes({ buttonRadius: value })} + min={0} + max={100} + /> + )} + + ) + } + setAttributes({ icon_color: colorValue })} + resetColor={() => setAttributes({ icon_color: "" })} + />

{__("Selected Icon", "responsive-block-editor-addons")}

@@ -758,101 +777,109 @@ export default class Inspector extends Component { }} - - - {(tabName) => { - let color_tab; - if ("normal" === tabName.name) { - color_tab = ( - - setAttributes({ buttonColor: colorValue }) - } - resetColor={() => setAttributes({ buttonColor: "" })} - /> - ); - } else if("hover" === tabName.name) { - color_tab = ( - - setAttributes({ buttonColorHover: colorValue }) - } - resetColor={() => setAttributes({ buttonColorHover: "" })} - /> - ); - } else { - color_tab = emptyColorControl; - } - return
{color_tab}
; + + {(tabName) => { + let color_tab; + if ("normal" === tabName.name) { + color_tab = ( + + setAttributes({ buttonColor: colorValue }) + } + resetColor={() => setAttributes({ buttonColor: "" })} + /> + ); + } else if("hover" === tabName.name) { + color_tab = ( + + setAttributes({ buttonColorHover: colorValue }) + } + resetColor={() => setAttributes({ buttonColorHover: "" })} + /> + ); + } else { + color_tab = emptyColorControl; + } + return
{color_tab}
; + }} + + + ) + } + { + !inheritFromTheme && ( + - - + showLetterSpacing={false} + showColorWithHoverControlTab={true} + showTextDecoration={true} + setAttributes={setAttributes} + {...this.props} + /> + ) + }