From ff8f3e914273017e55dc250540f5b2b78214c6f7 Mon Sep 17 00:00:00 2001 From: Sapayth Hossain Date: Tue, 20 Jan 2026 16:11:50 +0600 Subject: [PATCH 01/17] initial form rendering in elementor builder --- includes/Integrations.php | 4 + includes/Integrations/Elementor/Elementor.php | 28 ++ includes/Integrations/Elementor/Widget.php | 405 ++++++++++++++++++ wpuf.php | 13 + 4 files changed, 450 insertions(+) create mode 100644 includes/Integrations/Elementor/Elementor.php create mode 100644 includes/Integrations/Elementor/Widget.php diff --git a/includes/Integrations.php b/includes/Integrations.php index 99bb8ea77..eca318303 100644 --- a/includes/Integrations.php +++ b/includes/Integrations.php @@ -45,6 +45,10 @@ public function __construct() { } } } + + add_action('elementor/init', function() { + $this->container['elementor'] = new Integrations\Elementor\Elementor(); + }); } /** diff --git a/includes/Integrations/Elementor/Elementor.php b/includes/Integrations/Elementor/Elementor.php new file mode 100644 index 000000000..c1a1009cf --- /dev/null +++ b/includes/Integrations/Elementor/Elementor.php @@ -0,0 +1,28 @@ +register( new Widget() ); + } +} diff --git a/includes/Integrations/Elementor/Widget.php b/includes/Integrations/Elementor/Widget.php new file mode 100644 index 000000000..b20bdbd9a --- /dev/null +++ b/includes/Integrations/Elementor/Widget.php @@ -0,0 +1,405 @@ +start_controls_section( + 'section_content', + [ + 'label' => __( 'Content', 'wp-user-frontend' ), + ] + ); + + $this->add_control( + 'form_id', + [ + 'label' => __( 'Select Form', 'wp-user-frontend' ), + 'type' => Controls_Manager::SELECT, + 'default' => '', + 'options' => $this->get_wpuf_forms(), + ] + ); + + $this->end_controls_section(); + + // Style Tab + $this->register_container_style_controls(); + $this->register_label_style_controls(); + $this->register_input_style_controls(); + $this->register_submit_button_style_controls(); + } + + protected function get_wpuf_forms() { + $forms = get_posts( [ + 'post_type' => 'wpuf_forms', + 'posts_per_page' => -1, + 'post_status' => 'publish', + ] ); + + $options = [ '' => __( 'Select a Form', 'wp-user-frontend' ) ]; + + if ( ! empty( $forms ) ) { + foreach ( $forms as $form ) { + $options[ $form->ID ] = $form->post_title; + } + } + + return $options; + } + + protected function register_container_style_controls() { + $this->start_controls_section( + 'section_container_style', + [ + 'label' => __( 'Form Container', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_group_control( + Group_Control_Background::get_type(), + [ + 'name' => 'container_background', + 'label' => __( 'Background', 'wp-user-frontend' ), + 'types' => [ 'classic', 'gradient' ], + 'selector' => '{{WRAPPER}} .wpuf-elementor-widget-wrapper', + ] + ); + + $this->add_responsive_control( + 'container_padding', + [ + 'label' => __( 'Padding', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', 'em', '%' ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-elementor-widget-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'container_margin', + [ + 'label' => __( 'Margin', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', 'em', '%' ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-elementor-widget-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Border::get_type(), + [ + 'name' => 'container_border', + 'selector' => '{{WRAPPER}} .wpuf-elementor-widget-wrapper', + ] + ); + + $this->add_control( + 'container_border_radius', + [ + 'label' => __( 'Border Radius', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%' ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-elementor-widget-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Box_Shadow::get_type(), + [ + 'name' => 'container_box_shadow', + 'selector' => '{{WRAPPER}} .wpuf-elementor-widget-wrapper', + ] + ); + + $this->end_controls_section(); + } + + protected function register_label_style_controls() { + $this->start_controls_section( + 'section_label_style', + [ + 'label' => __( 'Labels', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'label_color', + [ + 'label' => __( 'Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-label' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'label_typography', + 'selector' => '{{WRAPPER}} .wpuf-form .wpuf-label', + ] + ); + + $this->end_controls_section(); + } + + protected function register_input_style_controls() { + $this->start_controls_section( + 'section_input_style', + [ + 'label' => __( 'Input Fields', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'input_bg_color', + [ + 'label' => __( 'Background Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'input_text_color', + [ + 'label' => __( 'Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'input_typography', + 'selector' => '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select', + ] + ); + + $this->add_group_control( + Group_Control_Border::get_type(), + [ + 'name' => 'input_border', + 'selector' => '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select', + ] + ); + + $this->add_control( + 'input_border_radius', + [ + 'label' => __( 'Border Radius', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%' ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'input_padding', + [ + 'label' => __( 'Padding', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', 'em', '%' ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->end_controls_section(); + } + + protected function register_submit_button_style_controls() { + $this->start_controls_section( + 'section_submit_button_style', + [ + 'label' => __( 'Submit Button', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->start_controls_tabs( 'tabs_submit_button_style' ); + + $this->start_controls_tab( + 'tab_submit_button_normal', + [ + 'label' => __( 'Normal', 'wp-user-frontend' ), + ] + ); + + $this->add_control( + 'submit_button_bg_color', + [ + 'label' => __( 'Background Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-submit-button' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'submit_button_text_color', + [ + 'label' => __( 'Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-submit-button' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'submit_button_typography', + 'selector' => '{{WRAPPER}} .wpuf-form .wpuf-submit-button', + ] + ); + + $this->end_controls_tab(); + + $this->start_controls_tab( + 'tab_submit_button_hover', + [ + 'label' => __( 'Hover', 'wp-user-frontend' ), + ] + ); + + $this->add_control( + 'submit_button_hover_bg_color', + [ + 'label' => __( 'Background Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-submit-button:hover' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'submit_button_hover_text_color', + [ + 'label' => __( 'Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-submit-button:hover' => 'color: {{VALUE}};', + ], + ] + ); + + $this->end_controls_tab(); + + $this->end_controls_tabs(); + + $this->add_group_control( + Group_Control_Border::get_type(), + [ + 'name' => 'submit_button_border', + 'selector' => '{{WRAPPER}} .wpuf-form .wpuf-submit-button', + 'separator' => 'before', + ] + ); + + $this->add_control( + 'submit_button_border_radius', + [ + 'label' => __( 'Border Radius', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%' ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-submit-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'submit_button_padding', + [ + 'label' => __( 'Padding', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', 'em', '%' ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-submit-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->end_controls_section(); + } + + protected function render() { + $settings = $this->get_settings_for_display(); + $form_id = isset( $settings['form_id'] ) ? $settings['form_id'] : null; + + if ( empty( $form_id ) ) { + return; + } + + $shortcode_str = '[wpuf_form id="' . $form_id . '"]'; + $output = do_shortcode( $shortcode_str ); + + echo '
'; + echo $output; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- shortcode output + echo '
'; + } + + /** + * Render the widget output in the editor. + * + * Written as a Backbone JavaScript template. When empty, Elementor + * will fall back to using the render() method for both frontend + * and editor preview. + * + * @since 4.2.7 + * + * @access protected + */ + protected function content_template() {} +} diff --git a/wpuf.php b/wpuf.php index aa14c9782..339e90a66 100644 --- a/wpuf.php +++ b/wpuf.php @@ -187,6 +187,19 @@ public function instantiate() { $this->container['setup_wizard'] = new WeDevs\Wpuf\Setup_Wizard(); $this->container['pro_upgrades'] = new WeDevs\Wpuf\Pro_Upgrades(); $this->container['privacy'] = new WeDevs\Wpuf\WPUF_Privacy(); + + // Load Frontend when in Elementor editor or Elementor AJAX so the wpuf_form + // shortcode is registered and the WPUF widget can render the form. Without + // this, is_admin() is true and Frontend is skipped, so do_shortcode() + // returns the raw shortcode. Covers: (1) editor page ?action=elementor, + // (2) render_widget AJAX when changing "Select Form" (action=elementor_ajax). + $get_action = isset( $_GET['action'] ) ? sanitize_text_field( wp_unslash( $_GET['action'] ) ) : ''; + $request_act = isset( $_REQUEST['action'] ) ? sanitize_text_field( wp_unslash( $_REQUEST['action'] ) ) : ''; + $is_elementor = ( $get_action === 'elementor' ) + || ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) && $request_act === 'elementor_ajax' ); + if ( $is_elementor ) { + $this->container['frontend'] = new WeDevs\Wpuf\Frontend(); + } } else { $this->container['frontend'] = new WeDevs\Wpuf\Frontend(); } From b88043492522a3ff8d2288c2da32b928d477d411 Mon Sep 17 00:00:00 2001 From: Sapayth Hossain Date: Wed, 21 Jan 2026 16:02:28 +0600 Subject: [PATCH 02/17] added css for elementor editor --- Gruntfile.js | 3 +- assets/css/elementor-frontend-forms.css | 187 ++++++ assets/less/elementor-frontend-forms.less | 241 +++++++ includes/Assets.php | 3 + includes/Integrations/Elementor/Elementor.php | 20 + includes/Integrations/Elementor/Widget.php | 592 ++++++++++++++++-- languages/wp-user-frontend.pot | 189 +++++- 7 files changed, 1162 insertions(+), 73 deletions(-) create mode 100644 assets/css/elementor-frontend-forms.css create mode 100644 assets/less/elementor-frontend-forms.less diff --git a/Gruntfile.js b/Gruntfile.js index 5077e0d95..7e0a2bb33 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -27,7 +27,8 @@ module.exports = function( grunt) { // one to one front: { files: { - '<%= dirs.css %>/frontend-forms.css': '<%= dirs.less %>/frontend-forms.less' + '<%= dirs.css %>/frontend-forms.css': '<%= dirs.less %>/frontend-forms.less', + '<%= dirs.css %>/elementor-frontend-forms.css': '<%= dirs.less %>/elementor-frontend-forms.less' } }, diff --git a/assets/css/elementor-frontend-forms.css b/assets/css/elementor-frontend-forms.css new file mode 100644 index 000000000..aee195ca6 --- /dev/null +++ b/assets/css/elementor-frontend-forms.css @@ -0,0 +1,187 @@ +/** + * DESCRIPTION: Elementor-specific WPUF frontend form styles + * + * This file contains form styles scoped to the Elementor widget wrapper + * to avoid conflicts with the theme and provide better Elementor integration. + * + * @package WPUF\Elementor + */ +.wpuf-elementor-widget-wrapper { + --wpuf-border-color: #dadbdd; + --wpuf-border-radius: 7px; + --wpuf-text-color: #606266; + --wpuf-primary-color: #1a7efb; + --wpuf-danger-color: #F56C6C; +} +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="text"], +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="email"], +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="url"], +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="password"], +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="number"], +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="tel"], +.wpuf-elementor-widget-wrapper .wpuf-fields textarea, +.wpuf-elementor-widget-wrapper .wpuf-fields select { + padding: 12px 15px; + color: var(--wpuf-text-color); + border: 1px solid var(--wpuf-border-color); + border-radius: var(--wpuf-border-radius); + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + margin-bottom: 0; + width: 100%; +} +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="text"]:focus, +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="email"]:focus, +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="url"]:focus, +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="password"]:focus, +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="number"]:focus, +.wpuf-elementor-widget-wrapper .wpuf-fields input[type="tel"]:focus, +.wpuf-elementor-widget-wrapper .wpuf-fields textarea:focus, +.wpuf-elementor-widget-wrapper .wpuf-fields select:focus { + color: var(--wpuf-text-color); + background-color: #fff; + border-color: var(--wpuf-primary-color); + outline: none; + box-shadow: 0 0 0 2px rgba(26, 126, 251, 0.1); +} +.wpuf-elementor-widget-wrapper ul.wpuf-form { + list-style: none; +} +.wpuf-elementor-widget-wrapper ul.wpuf-form li:not(:first-child) { + margin-top: 2rem; +} +.wpuf-elementor-widget-wrapper ul.wpuf-form li.wpuf-el .wpuf-label { + margin-bottom: 1rem; +} +.wpuf-elementor-widget-wrapper[data-align="left"] { + margin: 0 auto 0 0; +} +.wpuf-elementor-widget-wrapper[data-align="center"] { + margin: 0 auto; +} +.wpuf-elementor-widget-wrapper[data-align="right"] { + margin: 0 0 0 auto; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-submit-full .wpuf-submit .wpuf-submit-button { + width: 100%; + display: block; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-labels .wpuf-label { + display: none !important; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-errors .wpuf-error, +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-errors .error { + display: none; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder input::-webkit-input-placeholder, +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder textarea::-webkit-input-placeholder { + opacity: 0; + visibility: hidden; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder input::-moz-placeholder, +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder textarea::-moz-placeholder { + opacity: 0; + visibility: hidden; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder input:-moz-placeholder, +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder textarea:-moz-placeholder { + opacity: 0; + visibility: hidden; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder input:-ms-input-placeholder, +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder textarea:-ms-input-placeholder { + opacity: 0; + visibility: hidden; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder input::-ms-input-placeholder, +.wpuf-elementor-widget-wrapper.wpuf-elementor-hide-placeholder textarea::-ms-input-placeholder { + opacity: 0; + visibility: hidden; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-custom-radio-checkbox input[type="checkbox"], +.wpuf-elementor-widget-wrapper.wpuf-elementor-custom-radio-checkbox input[type="radio"] { + outline: none; + min-width: 1px; + width: 15px; + height: 15px; + background: #ddd; + padding: 3px; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-custom-radio-checkbox input[type="radio"] { + border-radius: 50%; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-submit-center .wpuf-submit { + text-align: center; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-submit-center .wpuf-submit .wpuf-submit-button { + margin: 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-submit-right .wpuf-submit { + text-align: right; +} +.wpuf-elementor-widget-wrapper.wpuf-elementor-submit-left .wpuf-submit { + text-align: left; +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .refresh { + cursor: pointer; + transition: opacity 0.2s ease; +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .refresh:hover { + opacity: 0.7; +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .refresh svg { + display: block; +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .captcha-number-area .captcha-number { + display: flex; + align-items: center; + gap: 5px; + margin: 0; + font-size: 16px; + font-weight: 500; + color: var(--wpuf-text-color); +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .captcha-equal { + font-size: 18px; + font-weight: 600; + color: var(--wpuf-text-color); +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .wpuf-captcha-input-wrapper { + flex: 1; + min-width: 80px; + position: relative; +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .wpuf-captcha-input-wrapper .wpuf-captcha-input { + padding: 11px 15px; + color: var(--wpuf-text-color); + border: 1px solid var(--wpuf-border-color); + border-radius: var(--wpuf-border-radius); + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + margin-bottom: 0; + width: 100%; + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .wpuf-captcha-input-wrapper .wpuf-captcha-input:focus { + color: var(--wpuf-text-color); + background-color: #fff; + border-color: var(--wpuf-primary-color); + outline: none; + box-shadow: 0 0 0 2px rgba(26, 126, 251, 0.1); +} +.wpuf-elementor-widget-wrapper .wpuf-math-captcha .captcha .wpuf-captcha-input-wrapper .wpuf-captcha-error { + display: block; + margin-top: 5px; + font-size: 13px; + color: var(--wpuf-danger-color); +} +.lity { + z-index: 9999 !important; +} diff --git a/assets/less/elementor-frontend-forms.less b/assets/less/elementor-frontend-forms.less new file mode 100644 index 000000000..24e7e8ec1 --- /dev/null +++ b/assets/less/elementor-frontend-forms.less @@ -0,0 +1,241 @@ +/** + * DESCRIPTION: Elementor-specific WPUF frontend form styles + * + * This file contains form styles scoped to the Elementor widget wrapper + * to avoid conflicts with the theme and provide better Elementor integration. + * + * @package WPUF\Elementor + */ + +// ============================================ +// CSS Custom Properties (Variables) +// ============================================ + +.wpuf-elementor-widget-wrapper { + --wpuf-border-color: #dadbdd; + --wpuf-border-radius: 7px; + --wpuf-text-color: #606266; + --wpuf-primary-color: #1a7efb; + --wpuf-danger-color: #F56C6C; + + // ============================================ + // Base Input Styles + // ============================================ + + .wpuf-fields input[type="text"], + .wpuf-fields input[type="email"], + .wpuf-fields input[type="url"], + .wpuf-fields input[type="password"], + .wpuf-fields input[type="number"], + .wpuf-fields input[type="tel"], + .wpuf-fields textarea, + .wpuf-fields select { + padding: 12px 15px; + color: var(--wpuf-text-color); + border: 1px solid var(--wpuf-border-color); + border-radius: var(--wpuf-border-radius); + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + margin-bottom: 0; + width: 100%; + + &:focus { + color: var(--wpuf-text-color); + background-color: #fff; + border-color: var(--wpuf-primary-color); + outline: none; + box-shadow: 0 0 0 2px rgba(26, 126, 251, 0.1); + } + } + + ul.wpuf-form { + list-style: none; + + li:not(:first-child) { + margin-top: 2rem; + } + + li.wpuf-el { + .wpuf-label { + margin-bottom: 1rem; + } + + } + } + + // Container alignment based on data-align attribute + &[data-align="left"] { + margin: 0 auto 0 0; + } + + &[data-align="center"] { + margin: 0 auto; + } + + &[data-align="right"] { + margin: 0 0 0 auto; + } + + // Full width submit button + &.wpuf-elementor-submit-full .wpuf-submit .wpuf-submit-button { + width: 100%; + display: block; + } + + // Hide labels option + &.wpuf-elementor-hide-labels .wpuf-label { + display: none !important; + } + + // Hide error messages option + &.wpuf-elementor-hide-errors .wpuf-error, + &.wpuf-elementor-hide-errors .error { + display: none; + } + + // Hide placeholder option + &.wpuf-elementor-hide-placeholder input::-webkit-input-placeholder, + &.wpuf-elementor-hide-placeholder textarea::-webkit-input-placeholder { + opacity: 0; + visibility: hidden; + } + + &.wpuf-elementor-hide-placeholder input::-moz-placeholder, + &.wpuf-elementor-hide-placeholder textarea::-moz-placeholder { + opacity: 0; + visibility: hidden; + } + + &.wpuf-elementor-hide-placeholder input:-moz-placeholder, + &.wpuf-elementor-hide-placeholder textarea:-moz-placeholder { + opacity: 0; + visibility: hidden; + } + + &.wpuf-elementor-hide-placeholder input:-ms-input-placeholder, + &.wpuf-elementor-hide-placeholder textarea:-ms-input-placeholder { + opacity: 0; + visibility: hidden; + } + + &.wpuf-elementor-hide-placeholder input::-ms-input-placeholder, + &.wpuf-elementor-hide-placeholder textarea::-ms-input-placeholder { + opacity: 0; + visibility: hidden; + } + + // Custom radio/checkbox styling + &.wpuf-elementor-custom-radio-checkbox input[type="checkbox"], + &.wpuf-elementor-custom-radio-checkbox input[type="radio"] { + outline: none; + min-width: 1px; + width: 15px; + height: 15px; + background: #ddd; + padding: 3px; + } + + &.wpuf-elementor-custom-radio-checkbox input[type="radio"] { + border-radius: 50%; + } + + // Submit button alignment + &.wpuf-elementor-submit-center .wpuf-submit { + text-align: center; + + .wpuf-submit-button { + margin: 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + } + } + + &.wpuf-elementor-submit-right .wpuf-submit { + text-align: right; + } + + &.wpuf-elementor-submit-left .wpuf-submit { + text-align: left; + } + + // ============================================ + // Math Captcha Styles + // ============================================ + + .wpuf-math-captcha { + .captcha { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; + + .refresh { + cursor: pointer; + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.7; + } + + svg { + display: block; + } + } + + .captcha-number-area { + .captcha-number { + display: flex; + align-items: center; + gap: 5px; + margin: 0; + font-size: 16px; + font-weight: 500; + color: var(--wpuf-text-color); + } + } + + .captcha-equal { + font-size: 18px; + font-weight: 600; + color: var(--wpuf-text-color); + } + + .wpuf-captcha-input-wrapper { + flex: 1; + min-width: 80px; + position: relative; + + .wpuf-captcha-input { + padding: 11px 15px; + color: var(--wpuf-text-color); + border: 1px solid var(--wpuf-border-color); + border-radius: var(--wpuf-border-radius); + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + margin-bottom: 0; + width: 100%; + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + + &:focus { + color: var(--wpuf-text-color); + background-color: #fff; + border-color: var(--wpuf-primary-color); + outline: none; + box-shadow: 0 0 0 2px rgba(26, 126, 251, 0.1); + } + } + + .wpuf-captcha-error { + display: block; + margin-top: 5px; + font-size: 13px; + color: var(--wpuf-danger-color); + } + } + } + } +} + +// Ensure lity popup appears above Elementor popup +.lity { + z-index: 9999 !important; +} \ No newline at end of file diff --git a/includes/Assets.php b/includes/Assets.php index d287540b3..18fae1096 100644 --- a/includes/Assets.php +++ b/includes/Assets.php @@ -109,6 +109,9 @@ public function get_styles() { 'frontend-forms' => [ 'src' => WPUF_ASSET_URI . '/css/frontend-forms.css', ], + 'elementor-frontend-forms' => [ + 'src' => WPUF_ASSET_URI . '/css/elementor-frontend-forms.css', + ], 'frontend-subscriptions' => [ 'src' => WPUF_ASSET_URI . '/css/frontend-subscriptions.min.css', ], diff --git a/includes/Integrations/Elementor/Elementor.php b/includes/Integrations/Elementor/Elementor.php index c1a1009cf..84a418982 100644 --- a/includes/Integrations/Elementor/Elementor.php +++ b/includes/Integrations/Elementor/Elementor.php @@ -11,6 +11,26 @@ class Elementor { public function __construct() { add_action( 'elementor/widgets/register', [ $this, 'register_widgets' ] ); + + add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] ); + add_action( 'elementor/editor/after_enqueue_styles', [ $this, 'enqueue_styles' ] ); + } + + /** + * Enqueue Elementor Specific Styles for both frontend and editor + * + * @since WPUF_SINCE + * + * @return void + */ + public function enqueue_styles() { + wp_dequeue_style('wpuf-frontend-forms'); + wp_dequeue_style('wpuf-layout1'); + wp_dequeue_style('wpuf-layout2'); + wp_dequeue_style('wpuf-layout3'); + wp_dequeue_style('wpuf-layout4'); + wp_dequeue_style('wpuf-layout5'); + wp_enqueue_style( 'wpuf-elementor-frontend-forms' ); } /** diff --git a/includes/Integrations/Elementor/Widget.php b/includes/Integrations/Elementor/Widget.php index b20bdbd9a..a50905115 100644 --- a/includes/Integrations/Elementor/Widget.php +++ b/includes/Integrations/Elementor/Widget.php @@ -1,4 +1,9 @@ start_controls_section( 'section_content', @@ -55,9 +106,20 @@ protected function register_controls() { $this->register_container_style_controls(); $this->register_label_style_controls(); $this->register_input_style_controls(); + $this->register_placeholder_style_controls(); + $this->register_radio_checkbox_style_controls(); $this->register_submit_button_style_controls(); + $this->register_success_message_style_controls(); + $this->register_error_message_style_controls(); } + /** + * Retrieve all published WPUF forms + * + * @since WPUF_SINCE + * + * @return array Array of forms formatted as select options + */ protected function get_wpuf_forms() { $forms = get_posts( [ 'post_type' => 'wpuf_forms', @@ -76,6 +138,13 @@ protected function get_wpuf_forms() { return $options; } + /** + * Register container style controls + * + * @since WPUF_SINCE + * + * @return void + */ protected function register_container_style_controls() { $this->start_controls_section( 'section_container_style', @@ -95,6 +164,60 @@ protected function register_container_style_controls() { ] ); + $this->add_control( + 'container_link_color', + [ + 'label' => __( 'Link Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-elementor-widget-wrapper .wpuf-form a' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_responsive_control( + 'container_max_width', + [ + 'label' => __( 'Max Width', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em', '%' ], + 'range' => [ + 'px' => [ 'min' => 10, 'max' => 1500 ], + 'em' => [ 'min' => 1, 'max' => 80 ], + ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-elementor-widget-wrapper' => 'width: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_control( + 'container_alignment', + [ + 'label' => __( 'Alignment', 'wp-user-frontend' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'default' => [ + 'title' => __( 'Default', 'wp-user-frontend' ), + 'icon' => 'eicon-ban', + ], + 'left' => [ + 'title' => __( 'Left', 'wp-user-frontend' ), + 'icon' => 'eicon-h-align-left', + ], + 'center' => [ + 'title' => __( 'Center', 'wp-user-frontend' ), + 'icon' => 'eicon-h-align-center', + ], + 'right' => [ + 'title' => __( 'Right', 'wp-user-frontend' ), + 'icon' => 'eicon-h-align-right', + ], + ], + 'default' => 'default', + ] + ); + $this->add_responsive_control( 'container_padding', [ @@ -150,6 +273,13 @@ protected function register_container_style_controls() { $this->end_controls_section(); } + /** + * Register label style controls + * + * @since WPUF_SINCE + * + * @return void + */ protected function register_label_style_controls() { $this->start_controls_section( 'section_label_style', @@ -178,26 +308,79 @@ protected function register_label_style_controls() { ] ); + $this->add_control( + 'label_asterisk_color', + [ + 'label' => __( 'Asterisk Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-label .required' => 'color: {{VALUE}};', + ], + 'separator' => 'before', + ] + ); + + $this->add_control( + 'label_asterisk_size', + [ + 'label' => __( 'Asterisk Size', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em', '%' ], + 'range' => [ + 'px' => [ 'min' => 0, 'max' => 30, 'step' => 1 ], + '%' => [ 'min' => 0, 'max' => 30, 'step' => 1 ], + ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .wpuf-label .required' => 'font-size: {{SIZE}}{{UNIT}};', + ], + ] + ); + $this->end_controls_section(); } + /** + * Register input field style controls + * + * @since WPUF_SINCE + * + * @return void + */ protected function register_input_style_controls() { + $input_selector = '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form input[type="number"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select'; + $this->start_controls_section( 'section_input_style', [ - 'label' => __( 'Input Fields', 'wp-user-frontend' ), + 'label' => __( 'Input & Textarea', 'wp-user-frontend' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); + $this->add_responsive_control( + 'input_alignment', + [ + 'label' => __( 'Alignment', 'wp-user-frontend' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ 'title' => __( 'Left', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-left' ], + 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-center' ], + 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-right' ], + ], + 'selectors' => [ $input_selector => 'text-align: {{VALUE}};' ], + ] + ); + + $this->start_controls_tabs( 'tabs_input_style' ); + + $this->start_controls_tab( 'tab_input_normal', [ 'label' => __( 'Normal', 'wp-user-frontend' ) ] ); + $this->add_control( 'input_bg_color', [ 'label' => __( 'Background Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select' => 'background-color: {{VALUE}};', - ], + 'selectors' => [ $input_selector => 'background-color: {{VALUE}};' ], ] ); @@ -206,26 +389,18 @@ protected function register_input_style_controls() { [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select' => 'color: {{VALUE}};', - ], + 'selectors' => [ $input_selector => 'color: {{VALUE}};' ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), - [ - 'name' => 'input_typography', - 'selector' => '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select', - ] + [ 'name' => 'input_typography', 'selector' => $input_selector ] ); $this->add_group_control( Group_Control_Border::get_type(), - [ - 'name' => 'input_border', - 'selector' => '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select', - ] + [ 'name' => 'input_border', 'selector' => $input_selector ] ); $this->add_control( @@ -234,9 +409,7 @@ protected function register_input_style_controls() { 'label' => __( 'Border Radius', 'wp-user-frontend' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], - 'selectors' => [ - '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], + 'selectors' => [ $input_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); @@ -246,8 +419,140 @@ protected function register_input_style_controls() { 'label' => __( 'Padding', 'wp-user-frontend' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], + 'selectors' => [ $input_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], + ] + ); + + $this->add_group_control( + Group_Control_Box_Shadow::get_type(), + [ + 'name' => 'input_box_shadow', + 'selector' => $input_selector, + 'separator' => 'before', + ] + ); + + $this->end_controls_tab(); + + $this->start_controls_tab( 'tab_input_focus', [ 'label' => __( 'Focus', 'wp-user-frontend' ) ] ); + + $this->add_control( + 'input_focus_bg_color', + [ + 'label' => __( 'Background Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-form input[type="text"]:focus, {{WRAPPER}} .wpuf-form input[type="email"]:focus, {{WRAPPER}} .wpuf-form input[type="url"]:focus, {{WRAPPER}} .wpuf-form input[type="password"]:focus, {{WRAPPER}} .wpuf-form input[type="number"]:focus, {{WRAPPER}} .wpuf-form textarea:focus, {{WRAPPER}} .wpuf-form select:focus' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Border::get_type(), + [ + 'name' => 'input_focus_border', + 'selector' => '{{WRAPPER}} .wpuf-form input[type="text"]:focus, {{WRAPPER}} .wpuf-form input[type="email"]:focus, {{WRAPPER}} .wpuf-form input[type="url"]:focus, {{WRAPPER}} .wpuf-form input[type="password"]:focus, {{WRAPPER}} .wpuf-form input[type="number"]:focus, {{WRAPPER}} .wpuf-form textarea:focus, {{WRAPPER}} .wpuf-form select:focus', + ] + ); + + $this->add_group_control( + Group_Control_Box_Shadow::get_type(), + [ + 'name' => 'input_focus_box_shadow', + 'selector' => '{{WRAPPER}} .wpuf-form input[type="text"]:focus, {{WRAPPER}} .wpuf-form input[type="email"]:focus, {{WRAPPER}} .wpuf-form input[type="url"]:focus, {{WRAPPER}} .wpuf-form input[type="password"]:focus, {{WRAPPER}} .wpuf-form input[type="number"]:focus, {{WRAPPER}} .wpuf-form textarea:focus, {{WRAPPER}} .wpuf-form select:focus', + ] + ); + + $this->end_controls_tab(); + + $this->end_controls_tabs(); + + $this->add_responsive_control( + 'input_field_spacing', + [ + 'label' => __( 'Field Spacing', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em' ], + 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 1 ] ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-form .field-items' => 'margin-bottom: {{SIZE}}{{UNIT}};', + ], + 'separator' => 'before', + ] + ); + + $this->end_controls_section(); + } + + /** + * Register placeholder style controls. + * + * @since WPUF_SINCE + * + * @return void + */ + protected function register_placeholder_style_controls() { + $this->start_controls_section( + 'section_placeholder_style', + [ + 'label' => __( 'Placeholder', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $placeholder_selector = '{{WRAPPER}} .wpuf-form input::placeholder, {{WRAPPER}} .wpuf-form textarea::placeholder, {{WRAPPER}} .wpuf-form input::-webkit-input-placeholder, {{WRAPPER}} .wpuf-form textarea::-webkit-input-placeholder, {{WRAPPER}} .wpuf-form input::-moz-placeholder, {{WRAPPER}} .wpuf-form textarea::-moz-placeholder, {{WRAPPER}} .wpuf-form input:-ms-input-placeholder, {{WRAPPER}} .wpuf-form textarea:-ms-input-placeholder'; + + $this->add_control( + 'placeholder_color', + [ + 'label' => __( 'Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ $placeholder_selector => 'color: {{VALUE}};' ], + ] + ); + + $this->end_controls_section(); + } + + /** + * Register radio and checkbox style controls. + * + * @since WPUF_SINCE + * + * @return void + */ + protected function register_radio_checkbox_style_controls() { + $this->start_controls_section( + 'section_radio_checkbox_style', + [ + 'label' => __( 'Radio & Checkbox', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_responsive_control( + 'radio_checkbox_size', + [ + 'label' => __( 'Size', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px' ], + 'range' => [ 'px' => [ 'min' => 0, 'max' => 80, 'step' => 1 ] ], + 'default' => [ 'size' => 18, 'unit' => 'px' ], 'selectors' => [ - '{{WRAPPER}} .wpuf-form input[type="text"], {{WRAPPER}} .wpuf-form input[type="email"], {{WRAPPER}} .wpuf-form input[type="url"], {{WRAPPER}} .wpuf-form input[type="password"], {{WRAPPER}} .wpuf-form textarea, {{WRAPPER}} .wpuf-form select' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + '{{WRAPPER}} .wpuf-form input[type="radio"], {{WRAPPER}} .wpuf-form input[type="checkbox"]' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'radio_checkbox_spacing', + [ + 'label' => __( 'Spacing', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em' ], + 'range' => [ 'px' => [ 'min' => 0, 'max' => 30, 'step' => 1 ] ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-form input[type="radio"], {{WRAPPER}} .wpuf-form input[type="checkbox"]' => 'margin-right: {{SIZE}}{{UNIT}};', ], ] ); @@ -255,7 +560,16 @@ protected function register_input_style_controls() { $this->end_controls_section(); } + /** + * Register submit button style controls + * + * @since WPUF_SINCE + * + * @return void + */ protected function register_submit_button_style_controls() { + $btn_selector = '{{WRAPPER}} .wpuf-form .wpuf-submit-button'; + $this->start_controls_section( 'section_submit_button_style', [ @@ -264,23 +578,56 @@ protected function register_submit_button_style_controls() { ] ); - $this->start_controls_tabs( 'tabs_submit_button_style' ); + $this->add_control( + 'submit_button_width_type', + [ + 'label' => __( 'Width', 'wp-user-frontend' ), + 'type' => Controls_Manager::SELECT, + 'default' => 'custom', + 'options' => [ + 'full-width' => __( 'Full Width', 'wp-user-frontend' ), + 'custom' => __( 'Custom', 'wp-user-frontend' ), + ], + ] + ); - $this->start_controls_tab( - 'tab_submit_button_normal', + $this->add_responsive_control( + 'submit_button_align', + [ + 'label' => __( 'Alignment', 'wp-user-frontend' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ 'title' => __( 'Left', 'wp-user-frontend' ), 'icon' => 'eicon-h-align-left' ], + 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-h-align-center' ], + 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-h-align-right' ], + ], + 'selectors' => [ '{{WRAPPER}} .wpuf-form .wpuf-submit' => 'text-align: {{VALUE}};' ], + 'condition' => [ 'submit_button_width_type' => 'custom' ], + ] + ); + + $this->add_responsive_control( + 'submit_button_width', [ - 'label' => __( 'Normal', 'wp-user-frontend' ), + 'label' => __( 'Width', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%' ], + 'range' => [ 'px' => [ 'min' => 0, 'max' => 1200, 'step' => 1 ] ], + 'selectors' => [ $btn_selector => 'width: {{SIZE}}{{UNIT}};' ], + 'condition' => [ 'submit_button_width_type' => 'custom' ], ] ); + $this->start_controls_tabs( 'tabs_submit_button_style' ); + + $this->start_controls_tab( 'tab_submit_button_normal', [ 'label' => __( 'Normal', 'wp-user-frontend' ) ] ); + $this->add_control( 'submit_button_bg_color', [ 'label' => __( 'Background Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .wpuf-form .wpuf-submit-button' => 'background-color: {{VALUE}};', - ], + 'selectors' => [ $btn_selector => 'background-color: {{VALUE}};' ], ] ); @@ -289,37 +636,59 @@ protected function register_submit_button_style_controls() { [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .wpuf-form .wpuf-submit-button' => 'color: {{VALUE}};', - ], + 'selectors' => [ $btn_selector => 'color: {{VALUE}};' ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), + [ 'name' => 'submit_button_typography', 'selector' => $btn_selector ] + ); + + $this->add_group_control( + Group_Control_Border::get_type(), + [ 'name' => 'submit_button_border', 'selector' => $btn_selector ] + ); + + $this->add_control( + 'submit_button_border_radius', [ - 'name' => 'submit_button_typography', - 'selector' => '{{WRAPPER}} .wpuf-form .wpuf-submit-button', + 'label' => __( 'Border Radius', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%' ], + 'selectors' => [ $btn_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); - $this->end_controls_tab(); + $this->add_responsive_control( + 'submit_button_padding', + [ + 'label' => __( 'Padding', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', 'em', '%' ], + 'selectors' => [ $btn_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], + ] + ); - $this->start_controls_tab( - 'tab_submit_button_hover', + $this->add_group_control( + Group_Control_Box_Shadow::get_type(), [ - 'label' => __( 'Hover', 'wp-user-frontend' ), + 'name' => 'submit_button_box_shadow', + 'selector' => $btn_selector, + 'separator' => 'before', ] ); + $this->end_controls_tab(); + + $this->start_controls_tab( 'tab_submit_button_hover', [ 'label' => __( 'Hover', 'wp-user-frontend' ) ] ); + $this->add_control( 'submit_button_hover_bg_color', [ 'label' => __( 'Background Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .wpuf-form .wpuf-submit-button:hover' => 'background-color: {{VALUE}};', - ], + 'selectors' => [ $btn_selector . ':hover' => 'background-color: {{VALUE}};' ], ] ); @@ -328,9 +697,16 @@ protected function register_submit_button_style_controls() { [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .wpuf-form .wpuf-submit-button:hover' => 'color: {{VALUE}};', - ], + 'selectors' => [ $btn_selector . ':hover' => 'color: {{VALUE}};' ], + ] + ); + + $this->add_control( + 'submit_button_hover_border_color', + [ + 'label' => __( 'Border Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ $btn_selector . ':hover' => 'border-color: {{VALUE}};' ], ] ); @@ -338,42 +714,131 @@ protected function register_submit_button_style_controls() { $this->end_controls_tabs(); + $this->end_controls_section(); + } + + /** + * Register success message style controls. + * + * @since WPUF_SINCE + * + * @return void + */ + protected function register_success_message_style_controls() { + $this->start_controls_section( + 'section_success_message_style', + [ + 'label' => __( 'Success Message', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'success_message_bg_color', + [ + 'label' => __( 'Background Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-elementor-widget-wrapper .wpuf-success' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'success_message_text_color', + [ + 'label' => __( 'Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-elementor-widget-wrapper .wpuf-success' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'success_message_typography', + 'selector' => '{{WRAPPER}} .wpuf-elementor-widget-wrapper .wpuf-success', + ] + ); + $this->add_group_control( Group_Control_Border::get_type(), [ - 'name' => 'submit_button_border', - 'selector' => '{{WRAPPER}} .wpuf-form .wpuf-submit-button', - 'separator' => 'before', + 'name' => 'success_message_border', + 'selector' => '{{WRAPPER}} .wpuf-elementor-widget-wrapper .wpuf-success', ] ); + $this->end_controls_section(); + } + + /** + * Register error message style controls. + * + * @since WPUF_SINCE + * + * @return void + */ + protected function register_error_message_style_controls() { + $this->start_controls_section( + 'section_error_message_style', + [ + 'label' => __( 'Error Message', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $error_selector = '{{WRAPPER}} .wpuf-elementor-widget-wrapper .wpuf-form .wpuf-error, {{WRAPPER}} .wpuf-elementor-widget-wrapper .wpuf-form .error'; + $this->add_control( - 'submit_button_border_radius', + 'error_message_color', [ - 'label' => __( 'Border Radius', 'wp-user-frontend' ), - 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => [ 'px', '%' ], - 'selectors' => [ - '{{WRAPPER}} .wpuf-form .wpuf-submit-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], + 'label' => __( 'Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ $error_selector => 'color: {{VALUE}};' ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'error_message_typography', + 'selector' => $error_selector, ] ); $this->add_responsive_control( - 'submit_button_padding', + 'error_message_padding', [ 'label' => __( 'Padding', 'wp-user-frontend' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], - 'selectors' => [ - '{{WRAPPER}} .wpuf-form .wpuf-submit-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], + 'selectors' => [ $error_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], + ] + ); + + $this->add_responsive_control( + 'error_message_margin', + [ + 'label' => __( 'Margin', 'wp-user-frontend' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', 'em', '%' ], + 'selectors' => [ $error_selector => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); $this->end_controls_section(); } + /** + * Render the widget output on the frontend + * + * @since WPUF_SINCE + * + * @return void + */ protected function render() { $settings = $this->get_settings_for_display(); $form_id = isset( $settings['form_id'] ) ? $settings['form_id'] : null; @@ -382,10 +847,23 @@ protected function render() { return; } + $wrapper_classes = [ 'wpuf-elementor-widget-wrapper' ]; + + if ( ! empty( $settings['submit_button_width_type'] ) && 'full-width' === $settings['submit_button_width_type'] ) { + $wrapper_classes[] = 'wpuf-elementor-submit-full'; + } + + $this->add_render_attribute( 'wrapper', 'class', $wrapper_classes ); + + // Set alignment attribute if not default + if ( ! empty( $settings['container_alignment'] ) && 'default' !== $settings['container_alignment'] ) { + $this->add_render_attribute( 'wrapper', 'data-align', $settings['container_alignment'] ); + } + $shortcode_str = '[wpuf_form id="' . $form_id . '"]'; $output = do_shortcode( $shortcode_str ); - echo '
'; + echo '
get_render_attribute_string( 'wrapper' ) ) . '>'; echo $output; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- shortcode output echo '
'; } @@ -397,7 +875,7 @@ protected function render() { * will fall back to using the render() method for both frontend * and editor preview. * - * @since 4.2.7 + * @since WPUF_SINCE * * @access protected */ diff --git a/languages/wp-user-frontend.pot b/languages/wp-user-frontend.pot index 2c22c9d95..37011cb0b 100644 --- a/languages/wp-user-frontend.pot +++ b/languages/wp-user-frontend.pot @@ -4,7 +4,7 @@ msgid "" msgstr "" "Project-Id-Version: WP User Frontend 4.2.6\n" "Report-Msgid-Bugs-To: https://wedevs.com/contact/\n" -"POT-Creation-Date: 2026-01-14 08:50:52+00:00\n" +"POT-Creation-Date: 2026-01-21 05:31:58+00:00\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" @@ -1564,6 +1564,7 @@ msgstr "" #: admin/template.php:127 includes/Admin/Forms/Admin_Template.php:146 #: includes/Fields/Field_Contract.php:652 +#: includes/Integrations/Elementor/Widget.php:536 msgid "Size" msgstr "" @@ -1604,6 +1605,8 @@ msgstr "" #: admin/template.php:188 includes/Admin/Forms/Admin_Template.php:217 #: includes/Fields/Field_Contract.php:740 +#: includes/Integrations/Elementor/Widget.php:376 +#: includes/Integrations/Elementor/Widget.php:623 msgid "Normal" msgstr "" @@ -6250,6 +6253,11 @@ msgid "Background color for progressbar or active step." msgstr "" #: includes/Free/Free_Loader.php:1609 +#: includes/Integrations/Elementor/Widget.php:381 +#: includes/Integrations/Elementor/Widget.php:442 +#: includes/Integrations/Elementor/Widget.php:628 +#: includes/Integrations/Elementor/Widget.php:689 +#: includes/Integrations/Elementor/Widget.php:739 msgid "Background Color" msgstr "" @@ -7090,6 +7098,169 @@ msgstr "" msgid "Mark the %1$s as featured (remaining %2$d)" msgstr "" +#: includes/Integrations/Elementor/Widget.php:42 +msgid "User Frontend Form" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:89 +msgid "Content" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:96 +msgid "Select Form" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:130 +msgid "Select a Form" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:152 +msgid "Form Container" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:161 +msgid "Background" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:170 +msgid "Link Color" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:181 +msgid "Max Width" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:197 +#: includes/Integrations/Elementor/Widget.php:363 +#: includes/Integrations/Elementor/Widget.php:597 +msgid "Alignment" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:201 +#: includes/functions/settings-options.php:116 +msgid "Default" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:205 +#: includes/Integrations/Elementor/Widget.php:366 +#: includes/Integrations/Elementor/Widget.php:600 +#: includes/functions/settings-options.php:595 +msgid "Left" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:209 +#: includes/Integrations/Elementor/Widget.php:367 +#: includes/Integrations/Elementor/Widget.php:601 +msgid "Center" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:213 +#: includes/Integrations/Elementor/Widget.php:368 +#: includes/Integrations/Elementor/Widget.php:602 +#: includes/functions/settings-options.php:597 +msgid "Right" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:224 +#: includes/Integrations/Elementor/Widget.php:419 +#: includes/Integrations/Elementor/Widget.php:666 +#: includes/Integrations/Elementor/Widget.php:815 +msgid "Padding" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:236 +#: includes/Integrations/Elementor/Widget.php:825 +msgid "Margin" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:256 +#: includes/Integrations/Elementor/Widget.php:409 +#: includes/Integrations/Elementor/Widget.php:656 +msgid "Border Radius" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:287 +msgid "Labels" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:295 +#: includes/Integrations/Elementor/Widget.php:390 +#: includes/Integrations/Elementor/Widget.php:508 +#: includes/Integrations/Elementor/Widget.php:637 +#: includes/Integrations/Elementor/Widget.php:698 +#: includes/Integrations/Elementor/Widget.php:750 +msgid "Text Color" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:314 +msgid "Asterisk Color" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:326 +msgid "Asterisk Size" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:355 +msgid "Input & Textarea" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:437 +msgid "Focus" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:473 +msgid "Field Spacing" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:498 +msgid "Placeholder" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:528 +msgid "Radio & Checkbox" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:550 +msgid "Spacing" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:576 +msgid "Submit Button" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:584 +#: includes/Integrations/Elementor/Widget.php:612 +msgid "Width" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:588 +msgid "Full Width" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:589 +msgid "Custom" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:684 +msgid "Hover" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:707 +msgid "Border Color" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:731 +msgid "Success Message" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:788 +msgid "Error Message" +msgstr "" + +#: includes/Integrations/Elementor/Widget.php:798 +msgid "Color" +msgstr "" + #: includes/Integrations/Events_Calendar/Templates/Event_Form_Template.php:23 msgid "The Events Calendar" msgstr "" @@ -8121,10 +8292,6 @@ msgstr "" msgid "Admins, Editors, Authors, Contributors" msgstr "" -#: includes/functions/settings-options.php:116 -msgid "Default" -msgstr "" - #: includes/functions/settings-options.php:121 msgid "Override the post edit link" msgstr "" @@ -8536,14 +8703,6 @@ msgstr "" msgid "Currency Position" msgstr "" -#: includes/functions/settings-options.php:595 -msgid "Left" -msgstr "" - -#: includes/functions/settings-options.php:597 -msgid "Right" -msgstr "" - #: includes/functions/settings-options.php:599 msgid "Left with space" msgstr "" @@ -9883,11 +10042,11 @@ msgstr "" msgid " or greater." msgstr "" -#: wpuf.php:260 +#: wpuf.php:273 msgid "Your WP User Frontend Pro is almost ready!" msgstr "" -#: wpuf.php:264 +#: wpuf.php:277 #. translators: 1: opening anchor tag, 2: closing anchor tag. msgid "" "We've pushed a major update on both WP User Frontend Free and WP " From 75f31de5f339629c733b324b5299f4ab532b4209 Mon Sep 17 00:00:00 2001 From: Sapayth Hossain Date: Mon, 26 Jan 2026 14:46:44 +0600 Subject: [PATCH 03/17] fix radio, checkbox fields in elementor builder --- includes/Fields/Field_Contract.php | 31 ++++++++++++++++++++-- includes/Integrations/Elementor/Widget.php | 5 ++-- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/includes/Fields/Field_Contract.php b/includes/Fields/Field_Contract.php index cd714f454..7535fb11c 100755 --- a/includes/Fields/Field_Contract.php +++ b/includes/Fields/Field_Contract.php @@ -763,6 +763,33 @@ public function get_default_textarea_option_settings() { ]; } + /** + * Check if we should render admin-style markup + * + * Returns true for admin dashboard, but false for Elementor editor + * since Elementor editor needs frontend-style markup for proper preview. + * + * @since WPUF_SINCE + * + * @return bool + */ + protected function use_admin_markup() { + if ( ! is_admin() ) { + return false; + } + + // Check if we're in Elementor editor mode + // Elementor editor needs frontend markup for proper preview + if ( class_exists( '\Elementor\Plugin' ) ) { + $elementor = \Elementor\Plugin::$instance; + if ( $elementor && $elementor->editor && $elementor->editor->is_edit_mode() ) { + return false; + } + } + + return true; + } + /** * Prints form input label for admin * @@ -770,7 +797,7 @@ public function get_default_textarea_option_settings() { * @param int $form_id */ public function field_print_label( $field, $form_id = 0 ) { - if ( is_admin() ) { ?> + if ( $this->use_admin_markup() ) { ?> print_list_attributes( $field ); ?>> required_mark( $field ) ); ?> @@ -782,7 +809,7 @@ public function field_print_label( $field, $form_id = 0 ) { } public function after_field_print_label() { - if ( is_admin() ) { + if ( $this->use_admin_markup() ) { ?> Date: Tue, 27 Jan 2026 11:45:32 +0600 Subject: [PATCH 04/17] tinymce preview in elementor builder --- includes/Fields/Form_Field_Post_Content.php | 2 + includes/Fields/Form_Field_Post_Excerpt.php | 2 + includes/Integrations/Elementor/Elementor.php | 33 ++++ includes/Integrations/Elementor/Widget.php | 157 ++++++++++++++++++ wpuf-functions.php | 5 + 5 files changed, 199 insertions(+) diff --git a/includes/Fields/Form_Field_Post_Content.php b/includes/Fields/Form_Field_Post_Content.php index 8a922d4c3..7f0b2061b 100755 --- a/includes/Fields/Form_Field_Post_Content.php +++ b/includes/Fields/Form_Field_Post_Content.php @@ -99,6 +99,7 @@ public function render( $field_settings, $form_id, $type = 'post', $post_id = nu } $editor_settings = apply_filters( 'wpuf_textarea_editor_args', $editor_settings ); + wp_editor( $value, $textarea_id, $editor_settings ); } elseif ( isset( $field_settings['rich'] ) && $field_settings['rich'] === 'teeny' ) { $editor_settings = [ @@ -115,6 +116,7 @@ public function render( $field_settings, $form_id, $type = 'post', $post_id = nu } $editor_settings = apply_filters( 'wpuf_textarea_editor_args', $editor_settings ); + wp_editor( $value, $textarea_id, $editor_settings ); } else { ?> diff --git a/includes/Fields/Form_Field_Post_Excerpt.php b/includes/Fields/Form_Field_Post_Excerpt.php index 66a558670..89b14f697 100755 --- a/includes/Fields/Form_Field_Post_Excerpt.php +++ b/includes/Fields/Form_Field_Post_Excerpt.php @@ -56,6 +56,7 @@ public function render( $field_settings, $form_id, $type = 'post', $post_id = nu ]; $editor_settings = apply_filters( 'wpuf_textarea_editor_args', $editor_settings ); + wp_editor( $value, $textarea_id, $editor_settings ); } elseif ( $field_settings['rich'] == 'teeny' ) { $editor_settings = [ @@ -68,6 +69,7 @@ public function render( $field_settings, $form_id, $type = 'post', $post_id = nu ]; $editor_settings = apply_filters( 'wpuf_textarea_editor_args', $editor_settings ); + wp_editor( $value, $textarea_id, $editor_settings ); } else { ?> diff --git a/includes/Integrations/Elementor/Elementor.php b/includes/Integrations/Elementor/Elementor.php index 84a418982..945b1f384 100644 --- a/includes/Integrations/Elementor/Elementor.php +++ b/includes/Integrations/Elementor/Elementor.php @@ -14,6 +14,10 @@ public function __construct() { add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] ); add_action( 'elementor/editor/after_enqueue_styles', [ $this, 'enqueue_styles' ] ); + + // Ensure editor scripts are enqueued for TinyMCE in Elementor preview + add_action( 'elementor/frontend/after_enqueue_scripts', [ $this, 'enqueue_scripts' ] ); + add_action( 'elementor/editor/after_enqueue_scripts', [ $this, 'enqueue_scripts' ] ); } /** @@ -33,6 +37,35 @@ public function enqueue_styles() { wp_enqueue_style( 'wpuf-elementor-frontend-forms' ); } + /** + * Enqueue Elementor Specific Scripts for both frontend and editor + * + * Ensures TinyMCE editor scripts are loaded when WPUF forms with rich text + * fields are rendered in Elementor preview. + * + * @since WPUF_SINCE + * + * @return void + */ + public function enqueue_scripts() { + // Ensure editor scripts are loaded for TinyMCE in Elementor preview + if ( function_exists( 'wp_enqueue_editor' ) ) { + wp_enqueue_editor(); + + // Also explicitly enqueue TinyMCE scripts if available + if ( function_exists( 'wp_enqueue_script' ) ) { + // Check if these scripts exist and enqueue them + global $wp_scripts; + if ( isset( $wp_scripts->registered['tinymce'] ) ) { + wp_enqueue_script( 'tinymce' ); + } + if ( isset( $wp_scripts->registered['wp-tinymce'] ) ) { + wp_enqueue_script( 'wp-tinymce' ); + } + } + } + } + /** * Register Elementor Widgets * diff --git a/includes/Integrations/Elementor/Widget.php b/includes/Integrations/Elementor/Widget.php index 26b91712d..0328a54cf 100644 --- a/includes/Integrations/Elementor/Widget.php +++ b/includes/Integrations/Elementor/Widget.php @@ -75,6 +75,19 @@ public function get_style_depends() { return [ 'wpuf-elementor-frontend-forms' ]; } + /** + * Retrieve the list of scripts the widget depends on. + * + * @since WPUF_SINCE + * + * @return array + */ + public function get_script_depends() { + // Note: wp_enqueue_editor() is called in Elementor::enqueue_scripts() + // to ensure TinyMCE scripts are loaded in Elementor preview + return []; + } + /** * Register widget controls * @@ -863,8 +876,152 @@ protected function render() { $shortcode_str = '[wpuf_form id="' . $form_id . '"]'; $output = do_shortcode( $shortcode_str ); + $is_elementor = class_exists( '\Elementor\Plugin' ) && ( + ( isset( \Elementor\Plugin::$instance->editor ) && \Elementor\Plugin::$instance->editor->is_edit_mode() ) + || ( isset( \Elementor\Plugin::$instance->preview ) && \Elementor\Plugin::$instance->preview->is_preview_mode() ) + ); + echo '
get_render_attribute_string( 'wrapper' ) ) . '>'; echo $output; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- shortcode output + + // Initialize TinyMCE in Elementor preview + if ( $is_elementor ) { + ?> + + '; } diff --git a/wpuf-functions.php b/wpuf-functions.php index 2abeea5af..c8de8a864 100644 --- a/wpuf-functions.php +++ b/wpuf-functions.php @@ -1412,6 +1412,11 @@ function wpuf_shortcode_map( $location, $post_id = null, $args = [], $meta_key = + editor ) && \Elementor\Plugin::$instance->editor->is_edit_mode() ) + || ( isset( \Elementor\Plugin::$instance->preview ) && \Elementor\Plugin::$instance->preview->is_preview_mode() ) + ); + } + + /** + * Render the widget output in the editor + * + * When empty, Elementor will fall back to using the render() method for + * both frontend and editor preview. + * + * @since WPUF_SINCE + * + * @access protected + */ + protected function content_template() {} +} From a4e134e83fc8198040f14960f3d28f1720f07324 Mon Sep 17 00:00:00 2001 From: Sapayth Hossain Date: Fri, 20 Feb 2026 15:13:40 +0600 Subject: [PATCH 14/17] wip --- assets/css/elementor-subscription-plans.css | 57 +------ includes/Frontend.php | 7 +- includes/Integrations/Elementor/Elementor.php | 4 +- .../Elementor/Subscription_Plans_Widget.php | 160 +++++++++++++++++- 4 files changed, 161 insertions(+), 67 deletions(-) diff --git a/assets/css/elementor-subscription-plans.css b/assets/css/elementor-subscription-plans.css index 8089dab86..53d3c8301 100644 --- a/assets/css/elementor-subscription-plans.css +++ b/assets/css/elementor-subscription-plans.css @@ -3,6 +3,7 @@ * * This file contains subscription plans display styles scoped to the * Elementor widget wrapper to avoid conflicts with the theme. + * Design values (colors, fonts, spacing) are controlled by Elementor widget settings. * * @package WPUF\Elementor */ @@ -16,7 +17,6 @@ /* Grid Layout */ .wpuf-subscription-plans-grid { display: grid; - gap: 20px; } /* Responsive: Mobile - 1 column */ @@ -54,10 +54,6 @@ /* Plan Card */ .wpuf-sub-card { - background-color: #ffffff; - border: 1px solid #e5e7eb; - border-radius: 12px; - padding: 24px; transition: box-shadow 0.3s ease, transform 0.3s ease; } @@ -67,18 +63,13 @@ /* Plan Name */ .wpuf-sub-plan-name { - margin: 0 0 16px 0; - font-size: 24px; - font-weight: 700; - color: #111827; + margin: 0 0 0 0; line-height: 1.3; } /* Description */ .wpuf-sub-description { margin-bottom: 20px; - color: #6b7280; - font-size: 14px; line-height: 1.6; } @@ -101,32 +92,12 @@ align-items: baseline; flex-wrap: wrap; gap: 4px; - font-size: 36px; - font-weight: 700; - color: #111827; line-height: 1.2; } -.wpuf-sub-currency { - font-size: 28px; - color: #6b7280; -} - -.wpuf-sub-amount { - font-size: 36px; -} - -.wpuf-sub-billing-cycle { - font-size: 14px; - font-weight: 400; - color: #6b7280; -} - /* Trial Description */ .wpuf-sub-trial-description { margin-bottom: 20px; - font-size: 14px; - color: #059669; line-height: 1.5; } @@ -138,15 +109,8 @@ /* Subscribe Button */ .wpuf-sub-button { display: inline-block; - padding: 12px 24px; - font-size: 16px; - font-weight: 600; text-align: center; text-decoration: none; - border: 1px solid transparent; - border-radius: 8px; - color: #ffffff; - background-color: #3b82f6; transition: all 0.2s ease; cursor: pointer; } @@ -159,7 +123,6 @@ opacity: 0.6; cursor: not-allowed; pointer-events: none; - background-color: #9ca3af !important; } /* Features List */ @@ -173,9 +136,6 @@ display: flex; align-items: flex-start; gap: 12px; - margin-bottom: 12px; - font-size: 14px; - color: #4b5563; line-height: 1.5; } @@ -185,9 +145,6 @@ .wpuf-sub-feature-icon { flex-shrink: 0; - width: 20px; - height: 20px; - fill: #10b981; margin-top: 2px; } @@ -204,9 +161,6 @@ background: none; border: none; padding: 0; - font-size: 14px; - font-weight: 500; - color: #3b82f6; cursor: pointer; text-decoration: none; transition: opacity 0.2s ease; @@ -224,25 +178,18 @@ justify-content: center; padding: 60px 20px; text-align: center; - background-color: #f9fafb; border: 2px dashed #d1d5db; border-radius: 12px; } .wpuf-subscription-empty-icon { margin-bottom: 16px; - color: #9ca3af; } .wpuf-subscription-empty-text { margin: 0 0 8px 0; - font-size: 18px; - font-weight: 600; - color: #374151; } .wpuf-subscription-empty-hint { margin: 0; - font-size: 14px; - color: #6b7280; } diff --git a/includes/Frontend.php b/includes/Frontend.php index 908332727..9785e13bf 100644 --- a/includes/Frontend.php +++ b/includes/Frontend.php @@ -68,8 +68,11 @@ public function enqueue_scripts() { // Load appropriate subscription script based on shortcode if ( wpuf_has_shortcode( 'wpuf_sub_pack' ) ) { - // Load new frontend-subscriptions script for subscription pack shortcode (pricing page) - wp_enqueue_style( 'wpuf-frontend-subscriptions' ); + // Skip loading frontend-subscriptions CSS on Elementor pages (Elementor widget has its own CSS) + $is_elementor_page = did_action( 'elementor/loaded' ) && isset( $post->ID ) && \Elementor\Plugin::$instance->db->is_built_with_elementor( $post->ID ); + if ( ! $is_elementor_page ) { + wp_enqueue_style( 'wpuf-frontend-subscriptions' ); + } wp_enqueue_script( 'wpuf-frontend-subscriptions' ); } else { // Load old subscriptions script for all other pages (dashboard, account, etc.) diff --git a/includes/Integrations/Elementor/Elementor.php b/includes/Integrations/Elementor/Elementor.php index 73716512d..40e5e87af 100644 --- a/includes/Integrations/Elementor/Elementor.php +++ b/includes/Integrations/Elementor/Elementor.php @@ -29,7 +29,7 @@ public function __construct() { * @return void */ public function enqueue_styles() { - // dequeue all wpuf hardcodes styles. so that elementor styles can work + // Dequeue all WPUF hardcoded styles so Elementor styles can work properly wp_dequeue_style('wpuf-frontend-forms'); wp_dequeue_style('wpuf-layout1'); wp_dequeue_style('wpuf-layout2'); @@ -37,7 +37,7 @@ public function enqueue_styles() { wp_dequeue_style('wpuf-layout4'); wp_dequeue_style('wpuf-layout5'); - $style_handles = [ 'wpuf-elementor-frontend-forms', 'wpuf-elementor-subscription-plans' ]; + $style_handles = [ 'wpuf-elementor-frontend-forms' ]; /** * Filters the list of style handles to enqueue in Elementor context. diff --git a/includes/Integrations/Elementor/Subscription_Plans_Widget.php b/includes/Integrations/Elementor/Subscription_Plans_Widget.php index 9f00b8c8f..c131fed47 100644 --- a/includes/Integrations/Elementor/Subscription_Plans_Widget.php +++ b/includes/Integrations/Elementor/Subscription_Plans_Widget.php @@ -149,10 +149,11 @@ protected function register_content_controls() { $this->add_control( 'order_by', [ - 'label' => __( 'Order By', 'wp-user-frontend' ), - 'type' => Controls_Manager::SELECT, - 'default' => 'custom', - 'options' => [ + 'label' => __( 'Order By', 'wp-user-frontend' ), + 'type' => Controls_Manager::SELECT, + 'default' => 'custom', + 'description' => __( 'Choose how to sort the subscription plans. Custom Order uses the sort order set in each plan\'s settings.', 'wp-user-frontend' ), + 'options' => [ 'custom' => __( 'Custom Order', 'wp-user-frontend' ), 'id' => __( 'Plan ID', 'wp-user-frontend' ), 'price_asc' => __( 'Price (Low to High)', 'wp-user-frontend' ), @@ -201,6 +202,7 @@ protected function register_container_style_controls() { [ 'label' => __( 'Background Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-card' => 'background-color: {{VALUE}};', ], @@ -210,8 +212,25 @@ protected function register_container_style_controls() { $this->add_group_control( Group_Control_Border::get_type(), [ - 'name' => 'card_border', - 'selector' => '{{WRAPPER}} .wpuf-sub-card', + 'name' => 'card_border', + 'selector' => '{{WRAPPER}} .wpuf-sub-card', + 'fields_options' => [ + 'border' => [ + 'default' => 'solid', + ], + 'width' => [ + 'default' => [ + 'top' => '1', + 'right' => '1', + 'bottom' => '1', + 'left' => '1', + 'isLinked' => true, + ], + ], + 'color' => [ + 'default' => '#e5e7eb', + ], + ], ] ); @@ -221,6 +240,13 @@ protected function register_container_style_controls() { 'label' => __( 'Border Radius', 'wp-user-frontend' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], + 'default' => [ + 'top' => '12', + 'right' => '12', + 'bottom' => '12', + 'left' => '12', + 'isLinked' => true, + ], 'selectors' => [ '{{WRAPPER}} .wpuf-sub-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], @@ -241,6 +267,13 @@ protected function register_container_style_controls() { 'label' => __( 'Card Padding', 'wp-user-frontend' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], + 'default' => [ + 'top' => '24', + 'right' => '24', + 'bottom' => '24', + 'left' => '24', + 'isLinked' => true, + ], 'selectors' => [ '{{WRAPPER}} .wpuf-sub-card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], @@ -266,6 +299,10 @@ protected function register_container_style_controls() { 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100 ] ], + 'default' => [ + 'size' => '20', + 'unit' => 'px', + ], 'selectors' => [ '{{WRAPPER}} .wpuf-subscription-plans-grid' => 'gap: {{SIZE}}{{UNIT}};', ], @@ -296,6 +333,7 @@ protected function register_plan_name_style_controls() { [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#111827', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-plan-name' => 'color: {{VALUE}};', ], @@ -307,6 +345,17 @@ protected function register_plan_name_style_controls() { [ 'name' => 'plan_name_typography', 'selector' => '{{WRAPPER}} .wpuf-sub-plan-name', + 'fields_options' => [ + 'font_size' => [ + 'default' => [ + 'size' => '24', + 'unit' => 'px', + ], + ], + 'font_weight' => [ + 'default' => '700', + ], + ], ] ); @@ -320,6 +369,7 @@ protected function register_plan_name_style_controls() { 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-center' ], 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-right' ], ], + 'default' => 'left', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-plan-name' => 'text-align: {{VALUE}};', ], @@ -333,6 +383,10 @@ protected function register_plan_name_style_controls() { 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 50 ] ], + 'default' => [ + 'size' => '16', + 'unit' => 'px', + ], 'selectors' => [ '{{WRAPPER}} .wpuf-sub-plan-name' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], @@ -363,6 +417,7 @@ protected function register_price_style_controls() { [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#111827', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-price' => 'color: {{VALUE}};', ], @@ -374,6 +429,7 @@ protected function register_price_style_controls() { [ 'label' => __( 'Currency Symbol Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#6b7280', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-currency' => 'color: {{VALUE}};', ], @@ -385,6 +441,7 @@ protected function register_price_style_controls() { [ 'label' => __( 'Billing Cycle Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#6b7280', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-billing-cycle' => 'color: {{VALUE}};', ], @@ -396,6 +453,17 @@ protected function register_price_style_controls() { [ 'name' => 'price_typography', 'selector' => '{{WRAPPER}} .wpuf-sub-price', + 'fields_options' => [ + 'font_size' => [ + 'default' => [ + 'size' => '36', + 'unit' => 'px', + ], + ], + 'font_weight' => [ + 'default' => '700', + ], + ], ] ); @@ -409,6 +477,7 @@ protected function register_price_style_controls() { 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-center' ], 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-right' ], ], + 'default' => 'left', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-price-wrapper' => 'text-align: {{VALUE}};', ], @@ -422,6 +491,10 @@ protected function register_price_style_controls() { 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 50 ] ], + 'default' => [ + 'size' => '20', + 'unit' => 'px', + ], 'selectors' => [ '{{WRAPPER}} .wpuf-sub-price-wrapper' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], @@ -452,6 +525,7 @@ protected function register_trial_description_style_controls() { [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#059669', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-trial-description' => 'color: {{VALUE}};', ], @@ -463,6 +537,14 @@ protected function register_trial_description_style_controls() { [ 'name' => 'trial_typography', 'selector' => '{{WRAPPER}} .wpuf-sub-trial-description', + 'fields_options' => [ + 'font_size' => [ + 'default' => [ + 'size' => '14', + 'unit' => 'px', + ], + ], + ], ] ); @@ -490,6 +572,7 @@ protected function register_features_list_style_controls() { [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#4b5563', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-features-list' => 'color: {{VALUE}};', ], @@ -501,6 +584,7 @@ protected function register_features_list_style_controls() { [ 'label' => __( 'Icon Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#10b981', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-feature-icon' => 'fill: {{VALUE}};', ], @@ -514,6 +598,10 @@ protected function register_features_list_style_controls() { 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 10, 'max' => 50 ] ], + 'default' => [ + 'size' => '20', + 'unit' => 'px', + ], 'selectors' => [ '{{WRAPPER}} .wpuf-sub-feature-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', ], @@ -525,6 +613,14 @@ protected function register_features_list_style_controls() { [ 'name' => 'features_typography', 'selector' => '{{WRAPPER}} .wpuf-sub-features-list', + 'fields_options' => [ + 'font_size' => [ + 'default' => [ + 'size' => '14', + 'unit' => 'px', + ], + ], + ], ] ); @@ -535,6 +631,10 @@ protected function register_features_list_style_controls() { 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 50 ] ], + 'default' => [ + 'size' => '12', + 'unit' => 'px', + ], 'selectors' => [ '{{WRAPPER}} .wpuf-sub-feature-item' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], @@ -578,6 +678,17 @@ protected function register_button_style_controls() { [ 'name' => 'button_typography', 'selector' => '{{WRAPPER}} .wpuf-sub-button', + 'fields_options' => [ + 'font_size' => [ + 'default' => [ + 'size' => '16', + 'unit' => 'px', + ], + ], + 'font_weight' => [ + 'default' => '600', + ], + ], ] ); @@ -591,6 +702,7 @@ protected function register_button_style_controls() { 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-h-align-center' ], 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-h-align-right' ], ], + 'default' => 'center', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-button-wrapper' => 'text-align: {{VALUE}};', ], @@ -606,6 +718,7 @@ protected function register_button_style_controls() { [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-button' => 'color: {{VALUE}};', ], @@ -617,6 +730,7 @@ protected function register_button_style_controls() { [ 'label' => __( 'Background Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, + 'default' => '#64748b', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-button' => 'background-color: {{VALUE}};', ], @@ -628,6 +742,23 @@ protected function register_button_style_controls() { [ 'name' => 'button_border', 'selector' => '{{WRAPPER}} .wpuf-sub-button', + 'fields_options' => [ + 'border' => [ + 'default' => 'solid', + ], + 'width' => [ + 'default' => [ + 'top' => '1', + 'right' => '1', + 'bottom' => '1', + 'left' => '1', + 'isLinked' => true, + ], + ], + 'color' => [ + 'default' => 'transparent', + ], + ], ] ); @@ -637,6 +768,13 @@ protected function register_button_style_controls() { 'label' => __( 'Border Radius', 'wp-user-frontend' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], + 'default' => [ + 'top' => '5', + 'right' => '5', + 'bottom' => '5', + 'left' => '5', + 'isLinked' => true, + ], 'selectors' => [ '{{WRAPPER}} .wpuf-sub-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], @@ -649,6 +787,13 @@ protected function register_button_style_controls() { 'label' => __( 'Padding', 'wp-user-frontend' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], + 'default' => [ + 'top' => '5', + 'right' => '20', + 'bottom' => '5', + 'left' => '20', + 'isLinked' => false, + ], 'selectors' => [ '{{WRAPPER}} .wpuf-sub-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], @@ -734,8 +879,7 @@ protected function get_subscription_plans( $settings ) { case 'custom': default: $args['meta_key'] = '_sort_order'; - $args['orderby'] = 'meta_value_num'; - $args['order'] = 'ASC'; + $args['orderby'] = [ 'meta_value_num' => 'ASC', 'title' => 'ASC' ]; break; } From 942de70b6ea17e67a5f26ae3f8d7a27c97526612 Mon Sep 17 00:00:00 2001 From: Sapayth Hossain Date: Mon, 23 Feb 2026 09:35:33 +0600 Subject: [PATCH 15/17] tweaks --- .../Elementor/Subscription_Plans_Widget.php | 196 +++++++++++++++++- 1 file changed, 188 insertions(+), 8 deletions(-) diff --git a/includes/Integrations/Elementor/Subscription_Plans_Widget.php b/includes/Integrations/Elementor/Subscription_Plans_Widget.php index c131fed47..fb3cf3006 100644 --- a/includes/Integrations/Elementor/Subscription_Plans_Widget.php +++ b/includes/Integrations/Elementor/Subscription_Plans_Widget.php @@ -448,6 +448,19 @@ protected function register_price_style_controls() { ] ); + $this->add_responsive_control( + 'billing_cycle_font_size', + [ + 'label' => __( 'Billing Cycle Text Size', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em' ], + 'range' => [ 'px' => [ 'min' => 8, 'max' => 50 ] ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-billing-cycle' => 'font-size: {{SIZE}}{{UNIT}};', + ], + ] + ); + $this->add_group_control( Group_Control_Typography::get_type(), [ @@ -480,6 +493,7 @@ protected function register_price_style_controls() { 'default' => 'left', 'selectors' => [ '{{WRAPPER}} .wpuf-sub-price-wrapper' => 'text-align: {{VALUE}};', + '{{WRAPPER}} .wpuf-sub-price' => 'justify-content: {{VALUE}};', ], ] ); @@ -548,6 +562,36 @@ protected function register_trial_description_style_controls() { ] ); + $this->add_responsive_control( + 'trial_font_size', + [ + 'label' => __( 'Text Size', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em' ], + 'range' => [ 'px' => [ 'min' => 8, 'max' => 50 ] ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-trial-description' => 'font-size: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'trial_align', + [ + 'label' => __( 'Text Alignment', 'wp-user-frontend' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ 'title' => __( 'Left', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-left' ], + 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-center' ], + 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-right' ], + ], + 'default' => 'left', + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-trial-description' => 'text-align: {{VALUE}};', + ], + ] + ); + $this->end_controls_section(); } @@ -995,8 +1039,8 @@ protected function render_empty_state() { protected function render_plan_card( $pack, $current_pack_id, $current_pack_status ) { $settings = $this->get_settings_for_display(); $billing_amount = isset( $pack->meta_value['billing_amount'] ) ? floatval( $pack->meta_value['billing_amount'] ) : 0; - $recurring_pay = isset( $pack->meta_value['recurring_pay'] ) ? $pack->meta_value['recurring_pay'] : 'no'; - $trial_status = isset( $pack->meta_value['trial_status'] ) ? $pack->meta_value['trial_status'] : 'no'; + $recurring_pay = wpuf_is_checkbox_or_toggle_on( $pack->meta_value['recurring_pay'] ?? '' ); + $trial_status = wpuf_is_checkbox_or_toggle_on( $pack->meta_value['trial_status'] ?? '' ); $billing_cycle_number = isset( $pack->meta_value['billing_cycle_number'] ) ? $pack->meta_value['billing_cycle_number'] : 1; $cycle_period = isset( $pack->meta_value['cycle_period'] ) ? $pack->meta_value['cycle_period'] : 'month'; $trial_duration = isset( $pack->meta_value['trial_duration'] ) ? $pack->meta_value['trial_duration'] : 0; @@ -1029,10 +1073,12 @@ protected function render_plan_card( $pack, $current_pack_id, $current_pack_stat echo '' . esc_html( $currency_symbol ) . ''; echo '' . esc_html( $amount_formatted ) . ''; - if ( $recurring_pay === 'yes' ) { - $cycle_label = wpuf()->subscription->get_cycle_label( $cycle_period, $billing_cycle_number ); + if ( $recurring_pay ) { + $cycle_label = wpuf()->subscription->get_cycle_label( $cycle_period, $billing_cycle_number ); $billing_text = sprintf( __( 'Every %s %s', 'wp-user-frontend' ), $billing_cycle_number, $cycle_label ); - echo ' ' . esc_html( $billing_text ) . ''; + echo '' . esc_html( $billing_text ) . ''; + } else { + echo '' . esc_html__( 'One time payment', 'wp-user-frontend' ) . ''; } echo '
'; } else { @@ -1041,7 +1087,7 @@ protected function render_plan_card( $pack, $current_pack_id, $current_pack_stat echo '
'; // Trial Description - if ( $billing_amount > 0 && $recurring_pay === 'yes' && $trial_status === 'yes' && $trial_duration > 0 ) { + if ( $billing_amount > 0 && $recurring_pay && $trial_status && $trial_duration > 0 ) { $duration = _n( $trial_duration_type, $trial_duration_type . 's', $trial_duration, 'wp-user-frontend' ); $trial_text = sprintf( __( 'Trial available for first %1$s %2$s', 'wp-user-frontend' ), $trial_duration, $duration ); echo '
' . esc_html( $trial_text ) . '
'; @@ -1161,6 +1207,123 @@ protected function render_features_list( $pack ) { } } + // User Requests limit + if ( isset( $all_limits['user_request'] ) && '0' !== $all_limits['user_request'] ) { + if ( '-1' === $all_limits['user_request'] ) { + $features_list[] = __( 'Unlimited user requests', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d user requests allowed', 'wp-user-frontend' ), intval( $all_limits['user_request'] ) ); + } + } + + // WooCommerce Products limit + if ( isset( $all_limits['product'] ) && '0' !== $all_limits['product'] ) { + if ( '-1' === $all_limits['product'] ) { + $features_list[] = __( 'Unlimited products', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d products allowed', 'wp-user-frontend' ), intval( $all_limits['product'] ) ); + } + } + + // Reusable Blocks limit + if ( isset( $all_limits['wp_block'] ) && '0' !== $all_limits['wp_block'] ) { + if ( '-1' === $all_limits['wp_block'] ) { + $features_list[] = __( 'Unlimited reusable blocks', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d reusable blocks allowed', 'wp-user-frontend' ), intval( $all_limits['wp_block'] ) ); + } + } + + // Templates limit + if ( isset( $all_limits['wp_template'] ) && '0' !== $all_limits['wp_template'] ) { + if ( '-1' === $all_limits['wp_template'] ) { + $features_list[] = __( 'Unlimited templates', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d templates allowed', 'wp-user-frontend' ), intval( $all_limits['wp_template'] ) ); + } + } + + // Template Parts limit + if ( isset( $all_limits['wp_template_part'] ) && '0' !== $all_limits['wp_template_part'] ) { + if ( '-1' === $all_limits['wp_template_part'] ) { + $features_list[] = __( 'Unlimited template parts', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d template parts allowed', 'wp-user-frontend' ), intval( $all_limits['wp_template_part'] ) ); + } + } + + // Navigation Menus limit + if ( isset( $all_limits['wp_navigation'] ) && '0' !== $all_limits['wp_navigation'] ) { + if ( '-1' === $all_limits['wp_navigation'] ) { + $features_list[] = __( 'Unlimited navigation menus', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d navigation menus allowed', 'wp-user-frontend' ), intval( $all_limits['wp_navigation'] ) ); + } + } + + // Global Styles limit + if ( isset( $all_limits['wp_global_styles'] ) && '0' !== $all_limits['wp_global_styles'] ) { + if ( '-1' === $all_limits['wp_global_styles'] ) { + $features_list[] = __( 'Unlimited global styles', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d global styles allowed', 'wp-user-frontend' ), intval( $all_limits['wp_global_styles'] ) ); + } + } + + // Font Families limit + if ( isset( $all_limits['wp_font_family'] ) && '0' !== $all_limits['wp_font_family'] ) { + if ( '-1' === $all_limits['wp_font_family'] ) { + $features_list[] = __( 'Unlimited font families', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d font families allowed', 'wp-user-frontend' ), intval( $all_limits['wp_font_family'] ) ); + } + } + + // Font Faces limit + if ( isset( $all_limits['wp_font_face'] ) && '0' !== $all_limits['wp_font_face'] ) { + if ( '-1' === $all_limits['wp_font_face'] ) { + $features_list[] = __( 'Unlimited font faces', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d font faces allowed', 'wp-user-frontend' ), intval( $all_limits['wp_font_face'] ) ); + } + } + + // Product Variations limit + if ( isset( $all_limits['product_variation'] ) && '0' !== $all_limits['product_variation'] ) { + if ( '-1' === $all_limits['product_variation'] ) { + $features_list[] = __( 'Unlimited product variations', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d product variations allowed', 'wp-user-frontend' ), intval( $all_limits['product_variation'] ) ); + } + } + + // Shop Orders limit + if ( isset( $all_limits['shop_order'] ) && '0' !== $all_limits['shop_order'] ) { + if ( '-1' === $all_limits['shop_order'] ) { + $features_list[] = __( 'Unlimited shop orders', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d shop orders allowed', 'wp-user-frontend' ), intval( $all_limits['shop_order'] ) ); + } + } + + // Shop Refunds limit + if ( isset( $all_limits['shop_order_refund'] ) && '0' !== $all_limits['shop_order_refund'] ) { + if ( '-1' === $all_limits['shop_order_refund'] ) { + $features_list[] = __( 'Unlimited shop refunds', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d shop refunds allowed', 'wp-user-frontend' ), intval( $all_limits['shop_order_refund'] ) ); + } + } + + // Shop Coupons limit + if ( isset( $all_limits['shop_coupon'] ) && '0' !== $all_limits['shop_coupon'] ) { + if ( '-1' === $all_limits['shop_coupon'] ) { + $features_list[] = __( 'Unlimited shop coupons', 'wp-user-frontend' ); + } else { + $features_list[] = sprintf( __( '%d shop coupons allowed', 'wp-user-frontend' ), intval( $all_limits['shop_coupon'] ) ); + } + } + // Featured items limit if ( isset( $pack->meta_value['_total_feature_item'] ) && '0' !== $pack->meta_value['_total_feature_item'] ) { if ( '-1' === $pack->meta_value['_total_feature_item'] ) { @@ -1170,13 +1333,25 @@ protected function render_features_list( $pack ) { } } + // Post expiration + if ( isset( $pack->meta_value['_enable_post_expiration'] ) && 'yes' === $pack->meta_value['_enable_post_expiration'] ) { + $expiry_period = isset( $pack->meta_value['_post_expiration_number'] ) ? intval( $pack->meta_value['_post_expiration_number'] ) : 0; + $expiry_type = isset( $pack->meta_value['_post_expiration_period'] ) ? $pack->meta_value['_post_expiration_period'] : 'day'; + + if ( $expiry_period > 0 ) { + $features_list[] = sprintf( __( 'Posts expire after %d %s', 'wp-user-frontend' ), $expiry_period, $expiry_type . ( $expiry_period > 1 ? 's' : '' ) ); + } else { + $features_list[] = __( 'Post expiration enabled', 'wp-user-frontend' ); + } + } + // Recurring payment - if ( isset( $pack->meta_value['recurring_pay'] ) && 'yes' === $pack->meta_value['recurring_pay'] ) { + if ( wpuf_is_checkbox_or_toggle_on( $pack->meta_value['recurring_pay'] ?? '' ) ) { $features_list[] = __( 'Recurring subscription', 'wp-user-frontend' ); } // Trial period - if ( isset( $pack->meta_value['trial_status'] ) && 'yes' === $pack->meta_value['trial_status'] ) { + if ( wpuf_is_checkbox_or_toggle_on( $pack->meta_value['trial_status'] ?? '' ) ) { $trial_duration = isset( $pack->meta_value['trial_duration'] ) ? intval( $pack->meta_value['trial_duration'] ) : 0; $trial_type = isset( $pack->meta_value['trial_duration_type'] ) ? $pack->meta_value['trial_duration_type'] : 'day'; @@ -1187,6 +1362,11 @@ protected function render_features_list( $pack ) { } } + // Mail notification on expiry + if ( isset( $pack->meta_value['_enable_mail_after_expired'] ) && 'yes' === $pack->meta_value['_enable_mail_after_expired'] ) { + $features_list[] = __( 'Email notifications on post expiry', 'wp-user-frontend' ); + } + // If no features found, show a basic feature if ( empty( $features_list ) ) { $features_list[] = __( 'Full website access', 'wp-user-frontend' ); From 3eb796f67ff66beb5979f65e63740a6d01fb1e05 Mon Sep 17 00:00:00 2001 From: Sapayth Hossain Date: Mon, 23 Feb 2026 10:21:43 +0600 Subject: [PATCH 16/17] Buy Now button text size setting added --- .../Elementor/Subscription_Plans_Widget.php | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/includes/Integrations/Elementor/Subscription_Plans_Widget.php b/includes/Integrations/Elementor/Subscription_Plans_Widget.php index fb3cf3006..1e5848bba 100644 --- a/includes/Integrations/Elementor/Subscription_Plans_Widget.php +++ b/includes/Integrations/Elementor/Subscription_Plans_Widget.php @@ -736,6 +736,27 @@ protected function register_button_style_controls() { ] ); + $this->add_responsive_control( + 'button_font_size', + [ + 'label' => __( 'Text Size', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em', 'rem' ], + 'range' => [ + 'px' => [ 'min' => 8, 'max' => 50 ], + 'em' => [ 'min' => 0.5, 'max' => 5 ], + 'rem' => [ 'min' => 0.5, 'max' => 5 ], + ], + 'default' => [ + 'size' => '1', + 'unit' => 'rem', + ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-button' => 'font-size: {{SIZE}}{{UNIT}};', + ], + ] + ); + $this->add_control( 'button_align', [ From 094543e9455ad3977108ab4a1a39d622a24ad598 Mon Sep 17 00:00:00 2001 From: Sapayth Hossain Date: Thu, 12 Mar 2026 12:33:16 +0600 Subject: [PATCH 17/17] new settings added, organized existing settings - plan description - price amount, icon, billing cycle separate settings - text alignment added for various sections --- .../Elementor/Subscription_Plans_Widget.php | 317 ++++++++++++++---- 1 file changed, 260 insertions(+), 57 deletions(-) diff --git a/includes/Integrations/Elementor/Subscription_Plans_Widget.php b/includes/Integrations/Elementor/Subscription_Plans_Widget.php index 1e5848bba..52f5b7f94 100644 --- a/includes/Integrations/Elementor/Subscription_Plans_Widget.php +++ b/includes/Integrations/Elementor/Subscription_Plans_Widget.php @@ -110,9 +110,11 @@ protected function register_controls() { // Style Controls $this->register_container_style_controls(); $this->register_plan_name_style_controls(); + $this->register_plan_description_style_controls(); $this->register_price_style_controls(); $this->register_trial_description_style_controls(); $this->register_features_list_style_controls(); + $this->register_see_more_style_controls(); $this->register_button_style_controls(); } @@ -176,27 +178,11 @@ protected function register_container_style_controls() { $this->start_controls_section( 'section_container_style', [ - 'label' => __( 'Container', 'wp-user-frontend' ), + 'label' => __( 'Subscription Cards', 'wp-user-frontend' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); - $this->add_responsive_control( - 'container_width', - [ - 'label' => __( 'Container Width', 'wp-user-frontend' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', 'em', '%' ], - 'range' => [ - 'px' => [ 'min' => 100, 'max' => 1500 ], - '%' => [ 'min' => 10, 'max' => 100 ], - ], - 'selectors' => [ - '{{WRAPPER}} .wpuf-subscription-plans-wrapper' => 'max-width: {{SIZE}}{{UNIT}};', - ], - ] - ); - $this->add_control( 'container_bg_color', [ @@ -397,86 +383,99 @@ protected function register_plan_name_style_controls() { } /** - * Register price style controls + * Register plan description style controls * * @since WPUF_SINCE * * @return void */ - protected function register_price_style_controls() { + protected function register_plan_description_style_controls() { $this->start_controls_section( - 'section_price_style', + 'section_plan_description_style', [ - 'label' => __( 'Price', 'wp-user-frontend' ), + 'label' => __( 'Plan Description', 'wp-user-frontend' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( - 'price_color', + 'plan_description_color', [ 'label' => __( 'Text Color', 'wp-user-frontend' ), 'type' => Controls_Manager::COLOR, - 'default' => '#111827', + 'default' => '#6b7280', 'selectors' => [ - '{{WRAPPER}} .wpuf-sub-price' => 'color: {{VALUE}};', + '{{WRAPPER}} .wpuf-sub-description' => 'color: {{VALUE}};', ], ] ); - $this->add_control( - 'currency_color', + $this->add_group_control( + Group_Control_Typography::get_type(), [ - 'label' => __( 'Currency Symbol Color', 'wp-user-frontend' ), - 'type' => Controls_Manager::COLOR, - 'default' => '#6b7280', - 'selectors' => [ - '{{WRAPPER}} .wpuf-sub-currency' => 'color: {{VALUE}};', + 'name' => 'plan_description_typography', + 'selector' => '{{WRAPPER}} .wpuf-sub-description', + 'fields_options' => [ + 'font_size' => [ + 'default' => [ + 'size' => '14', + 'unit' => 'px', + ], + ], ], ] ); - $this->add_control( - 'billing_cycle_color', + $this->add_responsive_control( + 'plan_description_align', [ - 'label' => __( 'Billing Cycle Text Color', 'wp-user-frontend' ), - 'type' => Controls_Manager::COLOR, - 'default' => '#6b7280', + 'label' => __( 'Text Alignment', 'wp-user-frontend' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ 'title' => __( 'Left', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-left' ], + 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-center' ], + 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-right' ], + ], + 'default' => 'left', 'selectors' => [ - '{{WRAPPER}} .wpuf-sub-billing-cycle' => 'color: {{VALUE}};', + '{{WRAPPER}} .wpuf-sub-description' => 'text-align: {{VALUE}};', ], ] ); $this->add_responsive_control( - 'billing_cycle_font_size', + 'plan_description_margin_bottom', [ - 'label' => __( 'Billing Cycle Text Size', 'wp-user-frontend' ), + 'label' => __( 'Margin Bottom', 'wp-user-frontend' ), 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', 'em' ], - 'range' => [ 'px' => [ 'min' => 8, 'max' => 50 ] ], + 'size_units' => [ 'px' ], + 'range' => [ 'px' => [ 'min' => 0, 'max' => 50 ] ], + 'default' => [ + 'size' => '16', + 'unit' => 'px', + ], 'selectors' => [ - '{{WRAPPER}} .wpuf-sub-billing-cycle' => 'font-size: {{SIZE}}{{UNIT}};', + '{{WRAPPER}} .wpuf-sub-description' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); - $this->add_group_control( - Group_Control_Typography::get_type(), + $this->end_controls_section(); + } + + /** + * Register price style controls + * + * @since WPUF_SINCE + * + * @return void + */ + protected function register_price_style_controls() { + $this->start_controls_section( + 'section_price_style', [ - 'name' => 'price_typography', - 'selector' => '{{WRAPPER}} .wpuf-sub-price', - 'fields_options' => [ - 'font_size' => [ - 'default' => [ - 'size' => '36', - 'unit' => 'px', - ], - ], - 'font_weight' => [ - 'default' => '700', - ], - ], + 'label' => __( 'Price', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, ] ); @@ -515,6 +514,100 @@ protected function register_price_style_controls() { ] ); + $this->add_responsive_control( + 'currency_symbol_size', + [ + 'label' => __( 'Currency Symbol Size', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em' ], + 'range' => [ 'px' => [ 'min' => 8, 'max' => 80 ] ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-currency' => 'font-size: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_control( + 'currency_color', + [ + 'label' => __( 'Currency Symbol Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'default' => '#6b7280', + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-currency' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'billing_amount_heading', + [ + 'label' => __( 'Billing Amount', 'wp-user-frontend' ), + 'type' => Controls_Manager::HEADING, + 'separator' => 'before', + ] + ); + + $this->add_control( + 'price_color', + [ + 'label' => __( 'Price Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'default' => '#111827', + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-price' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'billing_amount_typography', + 'selector' => '{{WRAPPER}} .wpuf-sub-amount', + 'fields_options' => [ + 'font_size' => [ + 'default' => [ + 'size' => '36', + 'unit' => 'px', + ], + ], + 'font_weight' => [ + 'default' => '700', + ], + ], + ] + ); + + $this->add_control( + 'billing_cycle_heading', + [ + 'label' => __( 'Billing Cycle', 'wp-user-frontend' ), + 'type' => Controls_Manager::HEADING, + 'separator' => 'before', + ] + ); + + $this->add_control( + 'billing_cycle_color', + [ + 'label' => __( 'Billing Cycle Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'default' => '#6b7280', + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-billing-cycle' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'billing_cycle_typography', + 'selector' => '{{WRAPPER}} .wpuf-sub-billing-cycle', + ] + ); + $this->end_controls_section(); } @@ -668,6 +761,24 @@ protected function register_features_list_style_controls() { ] ); + $this->add_responsive_control( + 'features_align', + [ + 'label' => __( 'Text Alignment', 'wp-user-frontend' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ 'title' => __( 'Left', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-left' ], + 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-center' ], + 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-right' ], + ], + 'default' => 'left', + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-features-list' => 'text-align: {{VALUE}};', + '{{WRAPPER}} .wpuf-sub-feature-item' => 'justify-content: {{VALUE}};', + ], + ] + ); + $this->add_responsive_control( 'features_line_spacing', [ @@ -701,6 +812,98 @@ protected function register_features_list_style_controls() { $this->end_controls_section(); } + /** + * Register see more toggle style controls + * + * @since WPUF_SINCE + * + * @return void + */ + protected function register_see_more_style_controls() { + $this->start_controls_section( + 'section_see_more_style', + [ + 'label' => __( 'See More Toggle', 'wp-user-frontend' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'see_more_color', + [ + 'label' => __( 'Text Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'default' => '#6366f1', + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-features-toggle' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'see_more_hover_color', + [ + 'label' => __( 'Hover Color', 'wp-user-frontend' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-features-toggle:hover' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'see_more_typography', + 'selector' => '{{WRAPPER}} .wpuf-sub-features-toggle', + 'fields_options' => [ + 'font_size' => [ + 'default' => [ + 'size' => '13', + 'unit' => 'px', + ], + ], + ], + ] + ); + + $this->add_responsive_control( + 'see_more_align', + [ + 'label' => __( 'Text Alignment', 'wp-user-frontend' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ 'title' => __( 'Left', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-left' ], + 'center' => [ 'title' => __( 'Center', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-center' ], + 'right' => [ 'title' => __( 'Right', 'wp-user-frontend' ), 'icon' => 'eicon-text-align-right' ], + ], + 'default' => 'left', + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-features-toggle-wrapper' => 'text-align: {{VALUE}};', + ], + ] + ); + + $this->add_responsive_control( + 'see_more_margin_top', + [ + 'label' => __( 'Margin Top', 'wp-user-frontend' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px' ], + 'range' => [ 'px' => [ 'min' => 0, 'max' => 30 ] ], + 'default' => [ + 'size' => '8', + 'unit' => 'px', + ], + 'selectors' => [ + '{{WRAPPER}} .wpuf-sub-features-toggle-wrapper' => 'margin-top: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->end_controls_section(); + } + /** * Register button style controls *