-link__link' ) => 'color: {{VALUE}}', ), ) ); $this->controls_manager->add_control( array( 'id' => 'link_icon_color', 'label' => __( 'Icon Color', 'jet-engine' ), 'type' => 'color-picker', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__icon' ) => 'color: {{VALUE}}', $this->css_selector( ' .jet-listing-dynamic-link__icon svg path' ) => 'fill: {{VALUE}}', ), ) ); $this->controls_manager->add_control( array( 'id' => 'link_border_color', 'label' => __( 'Border Color', 'jet-engine' ), 'type' => 'color-picker', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link' ) => 'border-color: {{VALUE}};', ), ) ); $this->controls_manager->add_control( array( 'id' => 'link_bg_hover', 'label' => esc_html__( 'Background Color on Hover', 'jet-engine' ), 'type' => 'color-picker', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link:hover' ) => 'background-color: {{VALUE}}', ), ) ); $this->controls_manager->add_control( array( 'id' => 'link_color_hover', 'label' => esc_html__( 'Text Color on Hover', 'jet-engine' ), 'type' => 'color-picker', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link:hover' ) => 'color: {{VALUE}}', ), ) ); $this->controls_manager->add_control( array( 'id' => 'link_icon_color_hover', 'label' => __( 'Icon Color on Hover', 'jet-engine' ), 'type' => 'color-picker', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link:hover .jet-listing-dynamic-link__icon' ) => 'color: {{VALUE}}', $this->css_selector( ' .jet-listing-dynamic-link__link:hover .jet-listing-dynamic-link__icon svg path' ) => 'fill: {{VALUE}}', ), ) ); $this->controls_manager->add_control( array( 'id' => 'link_hover_border_color', 'label' => __( 'Border Color on Hover', 'jet-engine' ), 'type' => 'color-picker', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link:hover' ) => 'border-color: {{VALUE}};', ), ) ); $this->controls_manager->add_responsive_control( array( 'id' => 'link_alignment', 'label' => __( 'Alignment', 'jet-engine' ), 'default' => 'flex-start', 'type' => 'choose', 'separator' => 'before', 'options' => array( 'flex-start' => array( 'shortcut' => esc_html__( 'Left', 'jet-engine' ), 'icon' => ! is_rtl() ? 'dashicons-editor-alignleft' : 'dashicons-editor-alignright', ), 'center' => array( 'shortcut' => esc_html__( 'Center', 'jet-engine' ), 'icon' => 'dashicons-editor-aligncenter', ), 'flex-end' => array( 'shortcut' => esc_html__( 'Right', 'jet-engine' ), 'icon' => ! is_rtl() ? 'dashicons-editor-alignright' : 'dashicons-editor-alignleft', ), 'stretch' => array( 'shortcut' => esc_html__( 'Justify', 'jet-engine' ), 'icon' => 'dashicons-editor-justify', ), ), 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link' ) => 'align-self: {{VALUE}};', ), ) ); $this->controls_manager->add_responsive_control( array( 'id' => 'link_padding', 'label' => __( 'Padding', 'jet-engine' ), 'type' => 'dimensions', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link' ) => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), ) ); $this->controls_manager->add_responsive_control( array( 'id' => 'link_margin', 'label' => __( 'Margin', 'jet-engine' ), 'type' => 'dimensions', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link' ) => 'margin: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), ) ); $this->controls_manager->add_control( array( 'id' => 'link_border', 'label' => __( 'Border', 'jet-engine' ), 'type' => 'border', 'separator' => 'before', 'disable_radius' => true, 'disable_color' => true, 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link' ) => 'border-style: {{STYLE}}; border-width: {{WIDTH}}; border-radius: {{RADIUS}};', ), ) ); $this->controls_manager->add_responsive_control( array( 'id' => 'link_border_radius', 'label' => __( 'Border Radius', 'jet-engine' ), 'type' => 'dimensions', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link' ) => 'border-radius: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};', ), ) ); $low_order = $this->prevent_wrap() ? -1 : 1; $this->controls_manager->add_control( array( 'id' => 'link_icon_position', 'label' => __( 'Icon Position', 'jet-engine' ), 'type' => 'choose', 'separator' => 'before', 'default' => $low_order, 'options' => array( $low_order => array( 'label' => esc_html__( 'Before Label', 'jet-engine' ), 'icon' => 'dashicons-editor-outdent', ), '2' => array( 'label' => esc_html__( 'After Label', 'jet-engine' ), 'icon' => 'dashicons-editor-indent', ), ), 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__icon' ) => 'order: {{VALUE}};', ), ) ); $this->controls_manager->add_control( array( 'id' => 'link_icon_orientation', 'label' => __( 'Icon Orientation', 'jet-engine' ), 'type' => 'choose', 'default' => 'row', 'separator' => 'before', 'options' => array( 'row' => array( 'label' => esc_html__( 'Horizontal', 'jet-engine' ), 'icon' => 'dashicons-arrow-right-alt', ), 'column' => array( 'label' => esc_html__( 'Vertical', 'jet-engine' ), 'icon' => 'dashicons-arrow-down-alt', ), ), 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link' ) => 'flex-direction: {{VALUE}};', ), ) ); $this->controls_manager->add_responsive_control( array( 'id' => 'link_icon_size', 'label' => __( 'Icon Size', 'jet-engine' ), 'type' => 'range', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__icon svg' ) => 'width: {{VALUE}}px !important; height: auto !important;', ), ) ); $this->controls_manager->add_responsive_control( array( 'id' => 'link_icon_gap', 'label' => __( 'Icon Gap', 'jet-engine' ), 'type' => 'range', 'separator' => 'before', 'css_selector' => array( $this->css_selector( ' .jet-listing-dynamic-link__link' ) => 'gap: {{VALUE}}px;', ), ) ); $this->controls_manager->end_section(); do_action( 'jet-engine/blocks-views/dynamic-link/style-controls', $this->controls_manager, $this ); } public function render_callback( $attributes = array() ) { $this->_root['class'][] = 'jet-listing-dynamic-link-block'; return parent::render_callback( $attributes, false ); } } }