'; /** * Constructor */ protected function __construct() { add_filter( 'brandy_extra_localize', array( $this, 'add_localize_data' ) ); parent::__construct(); } /** * Register components display in settings page */ protected function register_components() { $components = array( 'button_text' => array( 'value_path' => array( 'text' ), 'default_value' => 'Button', 'title' => array( 'text' => __( 'Button text', 'brandy' ), 'type' => 'bold', ), 'type' => 'TextInput', 'render_options' => array( 'type' => 'content', 'data' => array( array( 'selector' => '.brandy-button-text-wrap', 'value_path' => array( 'text' ), ), ), ), ), 'button_link' => array( 'value_path' => array( 'link' ), 'default_value' => '#', 'title' => array( 'text' => __( 'Button link', 'brandy' ), 'type' => 'bold', ), 'type' => 'TextInput', 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'selector' => 'a.brandy-button', 'name' => 'href', 'value_path' => array( 'link' ), ), ), ), ), 'icon_enabled' => array( 'value_path' => array( 'icon_enabled' ), 'title' => array( 'text' => __( 'Button icon', 'brandy' ), 'type' => 'bold', ), 'default_value' => true, 'type' => 'Switcher', 'render_options' => array( 'type' => 'force_refresh', ), ), 'button_icon' => array( 'value_path' => array( 'icon' ), 'default_value' => 'icon_3', 'type' => 'ButtonIconSelection', 'render_options' => array( 'type' => 'force_refresh', ), 'visible_conditions' => array( array( 'value_path' => array( 'icon_enabled' ), 'value' => true, ), ), ), 'button_icon_position' => array( 'value_path' => array( 'icon_position' ), 'title' => array( 'text' => __( 'Icon position', 'brandy' ), ), 'default_value' => '-1', 'type' => 'ButtonGroup', 'options' => array( array( 'label' => __( 'Left', 'brandy' ), 'value' => '-1', ), array( 'label' => __( 'Right', 'brandy' ), 'value' => '1', ), ), 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'default', 'selector' => '.brandy-theme-icon', 'name' => 'order', 'value_path' => array( 'icon_position' ), ), ), ), ), 'button_type' => array( 'title' => array( 'text' => __( 'Button type', 'brandy' ), 'type' => 'bold', ), 'value_path' => array( 'type' ), 'type' => 'ButtonType', 'options' => array( array( 'label' => __( 'Fill', 'brandy' ), 'value' => 'fill', ), array( 'label' => __( 'Outline', 'brandy' ), 'value' => 'outline', ), ), 'default_value' => 'fill', 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'selector' => '.brandy-element-wrapper', 'name' => 'data-type', 'value_path' => array( 'type' ), ), ), ), ), 'button_size' => array( 'title' => array( 'text' => __( 'Button size', 'brandy' ), 'type' => 'bold', ), 'value_path' => array( 'size' ), 'type' => 'ButtonSize', 'options' => array( array( 'label' => __( 'Small', 'brandy' ), 'value' => 'small', ), array( 'label' => __( 'Medium', 'brandy' ), 'value' => 'medium', ), array( 'label' => __( 'large', 'brandy' ), 'value' => 'large', ), ), 'default_value' => 'medium', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'custom_variables', 'selector' => '.brandy-button', 'value_path' => array( 'size' ), 'mapping_variables' => array( array( 'condition' => array( 'operator' => 'equal', 'value' => 'small', ), 'path' => array(), 'mapping' => array( 'desktop' => array( 'min-height' => '30px', ), ), ), array( 'condition' => array( 'operator' => 'equal', 'value' => 'medium', ), 'path' => array(), 'mapping' => array( 'desktop' => array( 'min-height' => '38px', ), ), ), array( 'condition' => array( 'operator' => 'equal', 'value' => 'large', ), 'path' => array(), 'mapping' => array( 'desktop' => array( 'min-height' => '48px', ), ), ), ), ), ), ), ), 'link_new_tab' => array( 'value_path' => array( 'link_new_tab' ), 'title' => array( 'text' => __( 'Open link in new tab', 'brandy' ), ), 'default_value' => true, 'type' => 'Switcher', 'render_options' => array( 'type' => 'data_attribute', 'data' => array( array( 'type' => 'switcher', 'selector' => 'a.brandy-button', 'name' => 'target', 'value_path' => array( 'link_new_tab' ), 'enabled_value' => '_blank', 'disabled_value' => '_self', ), ), ), ), // 'css_class' => array( // 'value_path' => array( 'css_class' ), // 'default_value' => '', // 'title' => array( // 'text' => __( 'CSS classes', 'brandy' ), // 'type' => 'bold', // ), // 'type' => 'TextInput', // 'render_options' => array( // 'type' => 'data_attribute', // 'data' => array( // array( // 'selector' => '.brandy-element-wrapper', // 'name' => 'class', // 'default_class' => 'brandy-element-wrapper', // 'value_path' => array( // 'css_class', // ), // ), // ), // ), // ), 'inherit_theme_setting' => array( 'title' => array( 'text' => __( 'Inherit from theme', 'brandy' ), 'type' => 'bold', ), 'type' => 'Switcher', 'value_path' => array( 'inherit_theme' ), 'default_value' => true, 'render_options' => array( 'type' => 'force_refresh', // 'data' => array( // array( // 'selector' => '.brandy-element-wrapper', // 'name' => 'class', // 'type' => 'switcher', // 'value_path' => array( 'inherit_theme' ), // 'enabled_class' => '', // 'disabled_class' => 'brandy-custom-button', // ), // array( // 'selector' => '.brandy-element-wrapper', // 'name' => 'class', // 'type' => 'switcher', // 'value_path' => array( 'inherit_theme' ), // 'disabled_class' => '', // 'enabled_class' => 'wp-block-button', // ), // array( // 'selector' => '.brandy-element-wrapper[data-type="fill"] .brandy-button', // 'name' => 'class', // 'type' => 'switcher', // 'value_path' => array( 'inherit_theme' ), // 'disabled_class' => '', // 'enabled_class' => 'wp-element-button', // ), // array( // 'selector' => '.brandy-element-wrapper[data-type="outline"]', // 'name' => 'class', // 'type' => 'switcher', // 'value_path' => array( 'inherit_theme' ), // 'disabled_class' => '', // 'enabled_class' => 'is-style-outline is-style-outline--1 wp-block-button', // ), // array( // 'selector' => '.brandy-element-wrapper[data-type="outline"] .brandy-button', // 'name' => 'class', // 'type' => 'switcher', // 'value_path' => array( 'inherit_theme' ), // 'disabled_class' => '', // 'enabled_class' => 'wp-element-button wp-block-button__link', // ), // ), ), ), 'button_design_reset' => array( 'title' => array( 'text' => __( 'Button', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'button_design' ), ), ), 'button_design_background_color' => array( 'title' => array( 'text' => __( 'Background color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design', 'background_color' ), 'default_value' => array( 'normal' => array( 'desktop' => 'var(--wp--preset--color--brandy-primary-text)', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => 'var(--wp--preset--color--brandy-primary-text)', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--b-bg-color', 'selector' => '.brandy-custom-button .brandy-button', 'value_path' => array( 'button_design', 'background_color' ), ), ), ), ), 'button_border_color' => array( 'title' => array( 'text' => __( 'Border color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design', 'border', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => 'var(--wp--preset--color--brandy-primary-text)', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => 'var(--wp--preset--color--brandy-primary-text)', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--b-border-color', 'selector' => '.brandy-custom-button[data-type="outline"] .brandy-button', 'value_path' => array( 'button_design', 'border', 'color' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => array( 'type' ), 'value' => 'outline', ), ), ), 'button_border_width' => array( 'title' => array( 'text' => __( 'Border width', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design', 'border', 'width' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 0, 'max' => 20, 'value' => 1, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => 'border-width', 'selector' => '.brandy-custom-button .brandy-button', 'value_path' => array( 'button_design', 'border', 'width' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => array( 'type' ), 'value' => 'outline', ), ), ), 'button_design_border_radius' => array( 'title' => array( 'text' => __( 'Border radius', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design', 'border_radius' ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'min' => 0, 'max' => 50, 'value' => 0, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => 'border-radius', 'selector' => '.brandy-custom-button .brandy-button', 'value_path' => array( 'button_design', 'border_radius' ), ), ), ), ), 'button_design_box_shadow' => array( 'title' => array( 'text' => __( 'Box shadow', 'brandy' ), 'type' => 'bold', ), 'type' => 'BoxShadow', 'default_value' => array( 'enabled' => true, 'type' => 'default', 'custom_value' => array( 'color' => '#c4c3c3', 'x' => 3, 'y' => 3, 'blur' => 6, 'spread' => 1, ), ), 'value_path' => array( 'button_design_box_shadow' ), 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'box_shadow', 'name' => 'box-shadow', 'selector' => '.brandy-button', 'value_path' => array( 'button_design_box_shadow' ), ), ), ), ), 'button_design_text_reset' => array( 'title' => array( 'text' => __( 'Text', 'brandy' ), 'type' => 'bold', 'show_devices' => true, ), 'type' => 'Reset', 'reset_paths' => array( array( 'button_design_text' ), ), ), 'button_design_text_color' => array( 'title' => array( 'text' => __( 'Text Color', 'brandy' ), 'type' => 'normal', ), 'value_path' => array( 'button_design_text', 'color' ), 'default_value' => array( 'normal' => array( 'desktop' => '#fff', 'tablet' => null, 'mobile' => null, ), 'hover' => array( 'desktop' => '#fff', 'tablet' => null, 'mobile' => null, ), ), 'type' => 'ColorGroup', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'color', 'name' => '--b-text-color', 'selector' => '.brandy-custom-button .brandy-button', 'value_path' => array( 'button_design_text', 'color' ), ), ), ), 'visible_conditions' => array( array( 'value_path' => array( 'inherit_theme' ), 'value' => false, ), ), ), 'button_design_text_typography' => array( 'value_path' => array( 'button_design_text', 'typography' ), 'title' => array( 'text' => 'Typography', 'type' => 'normal', ), 'default_value' => null, 'type' => 'Typography', 'is_responsive' => true, 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'typography', 'selector' => '.brandy-button', 'value_path' => array( 'button_design_text', 'typography' ), ), ), ), ), //item spacing 'button_design_item_spacing' => array( 'value_path' => array( 'button_design_item_spacing' ), 'title' => array( 'text' => 'Icon and text spacing', 'type' => 'bold', ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'value' => 7, 'min' => 0, 'max' => 30, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Dimension', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'dimension', 'name' => 'gap', 'selector' => '.brandy-button', 'value_path' => array( 'button_design_item_spacing' ), ), ), ), ), 'button_design_padding' => array( 'value_path' => array( 'button_design_padding' ), 'title' => array( 'text' => 'Padding', 'type' => 'bold', ), 'default_value' => array( 'unit' => 'px', 'top' => 12, 'right' => 16, 'bottom' => 12, 'left' => 16, 'is_constraints' => false, ), 'type' => 'Spacing', 'render_options' => array( 'type' => 'force_refresh', ), 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'spacing', 'name' => 'padding', 'selector' => '.brandy-button', 'value_path' => array( 'button_design_padding' ), ), ), ), ), //margin 'button_design_margin' => array( 'value_path' => array( 'button_design_margin' ), 'title' => array( 'text' => 'Margin', 'type' => 'bold', 'show_devices' => true, ), 'default_value' => array( 'desktop' => array( 'unit' => 'px', 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0, 'is_constraints' => false, ), 'tablet' => null, 'mobile' => null, ), 'type' => 'Spacing', 'render_options' => array( 'type' => 'variable', 'data' => array( array( 'type' => 'spacing', 'name' => 'margin', 'selector' => '.brandy-button', 'value_path' => array( 'button_design_margin' ), ), ), ), ), ); return $components; } /** * Register layout for this element * * @param array $layouts Registered layouts * * @return array Layouts after registering */ public function add_layout( $layouts = array() ) { $layout = array( 'general' => array( 'sections' => array( array( 'components' => array( 'button_text', ), ), array( 'components' => array( 'button_link', 'link_new_tab', ), ), array( 'components' => array( 'icon_enabled', 'button_icon', 'button_icon_position', ), ), array( 'components' => array( 'button_type', ), ), array( 'components' => array( 'button_size', ), ), // array( // 'components' => array( // 'css_class', // ), // ), ), ), 'designs' => array( 'sections' => array( array( 'components' => array( 'inherit_theme_setting', ), ), array( 'components' => array( 'button_design_reset', 'button_design_background_color', 'button_border_color', 'button_border_width', 'button_design_border_radius', ), 'visible_conditions' => array( array( 'value_path' => array( 'inherit_theme' ), 'value' => false, ), ), ), array( 'components' => array( 'button_design_text_reset', 'button_design_text_color', 'button_design_text_typography', ), ), array( 'components' => array( 'button_design_item_spacing', ), 'visible_conditions' => array( array( 'value_path' => array( 'icon_enabled' ), 'value' => true, ), ), ), array( 'components' => array( 'button_design_box_shadow', ), 'visible_conditions' => array( array( 'value_path' => array( 'inherit_theme' ), 'value' => false, ), ), ), array( 'components' => array( 'button_design_padding', ), ), array( 'components' => array( 'button_design_margin', ), ), ), ), ); $mapped_layout = $this->map_layout( $layout ); $layouts[ $this->element_id ] = $mapped_layout; return $layouts; } /** * Add localize data for this element * * @param array $localize_data General localize data * * @return array Data after adding */ public function add_localize_data( $localize_data ) { $icons = array(); $dir = new \DirectoryIterator( self::$path_to_icons ); $dirs = array(); foreach ( $dir as $fileinfo ) { if ( ! $fileinfo->isDot() ) { $dirs[] = $fileinfo->getFilename(); } } usort( $dirs, function( $a, $b ) { return strcmp( $a, $b ); } ); foreach ( $dirs as $file_name ) { $file_path = self::$path_to_icons . '/' . $file_name; $icon_name = basename( $file_name, '.php' ); ob_start(); require $file_path; $icon_data = ob_get_contents(); ob_end_clean(); $icons[ $icon_name ] = $icon_data; } $localize_data['icons']['button'] = $icons; return $localize_data; } /** * Return icon by icon type * * @param string $icon_type Given icon type * * @return string Icon string */ public static function get_icon( $icon_type ) { $file_path = self::$path_to_icons . "$icon_type.php"; if ( file_exists( $file_path ) ) { ob_start(); require $file_path; $icon_data = ob_get_contents(); ob_end_clean(); return $icon_data; } return ''; } public function template_path() { return 'template-parts/builder/elements/button'; } }