diff --git a/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-cart-layout-customizer.php b/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-cart-layout-customizer.php index 819ca4259..7aabe7e54 100644 --- a/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-cart-layout-customizer.php +++ b/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-cart-layout-customizer.php @@ -58,11 +58,11 @@ public function customizer_options( $wp_customize ) { $is_cart_block_present = has_block( 'woocommerce/cart', $cart_page_id ); if( ! $is_cart_block_present ) { $enable_crosssells_options_label = esc_html__( 'Enable Cross-sells', 'responsive' ); - responsive_checkbox_control( $wp_customize, 'enable_crosssells_options', $enable_crosssells_options_label, 'responsive_woocommerce_cart_layout', 2, 1, null ); + responsive_toggle_control( $wp_customize, 'enable_crosssells_options', $enable_crosssells_options_label, 'responsive_woocommerce_cart_layout', 2, 1, null ); } $disable_cart_fragments_label = esc_html__( 'Disable Cart Fragments', 'responsive' ); - responsive_checkbox_control( $wp_customize, 'disable_cart_fragments', $disable_cart_fragments_label, 'responsive_woocommerce_cart_layout', 2, 0, null ); + responsive_toggle_control( $wp_customize, 'disable_cart_fragments', $disable_cart_fragments_label, 'responsive_woocommerce_cart_layout', 2, 0, null ); $wp_customize->add_setting( 'responsive_menu_cart_icon', diff --git a/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php b/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php index 02529e00e..1ad5c4202 100644 --- a/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php +++ b/core/includes/compatibility/woocommerce/customizer/settings/class-responsive-woocommerce-shop-layout-customizer.php @@ -155,13 +155,13 @@ public function customizer_options( $wp_customize ) { responsive_separator_control( $wp_customize, 'off_canvas_filter_separator', $off_canvas_filter_label, 'responsive_woocommerce_shop_layout', 110 ); $enable_off_canvas_filter = __( 'Enable Off Canvas Filter', 'responsive' ); - responsive_checkbox_control( $wp_customize, 'enable_off_canvas_filter', $enable_off_canvas_filter, 'responsive_woocommerce_shop_layout', 115, 0, null, 'refresh' ); + responsive_toggle_control( $wp_customize, 'enable_off_canvas_filter', $enable_off_canvas_filter, 'responsive_woocommerce_shop_layout', 115, 0, null, 'refresh' ); $hamburger_off_canvas_btn_label = __( 'Off Canvas Filter Button Text', 'responsive' ); responsive_text_control( $wp_customize, 'hamburger_off_canvas_btn_label_text', $hamburger_off_canvas_btn_label, 'responsive_woocommerce_shop_layout', 120, 'Filter', 'enable_off_canvas_filter_check', 'sanitize_text_field', 'text', 'postMessage' ); $enable_off_canvas_close_btn = __( 'Enable Off Canvas Close Button', 'responsive' ); - responsive_checkbox_control( $wp_customize, 'enable_off_canvas_close_btn', $enable_off_canvas_close_btn, 'responsive_woocommerce_shop_layout', 125, 0, null, 'refresh' ); + responsive_toggle_control( $wp_customize, 'enable_off_canvas_close_btn', $enable_off_canvas_close_btn, 'responsive_woocommerce_shop_layout', 125, 0, null, 'refresh' ); $close_button_color = __( 'Close Button Color', 'responsive' ); responsive_color_control( $wp_customize, 'off_canvas_close_button', $close_button_color, 'responsive_woocommerce_shop_layout', 130, '#CCCCCC', 'enable_enable_off_canvas_close_btn' ); diff --git a/core/includes/customizer/assets/min/css/dimensions.min.css b/core/includes/customizer/assets/min/css/dimensions.min.css index 5463090e3..e2c473ed5 100644 --- a/core/includes/customizer/assets/min/css/dimensions.min.css +++ b/core/includes/customizer/assets/min/css/dimensions.min.css @@ -1 +1 @@ -.customize-control-responsive-dimensions>ul{display:inline-block;width:100%}.customize-control-responsive-dimensions .dimension-wrap{float:left;width:20%;margin:0}.customize-control-responsive-dimensions .dimension-wrap button,.customize-control-responsive-dimensions .dimension-wrap input{display:block;font-size:12px;padding:4px 0;width:100%;height:28px;border:1px solid;border-color:#a4afb7;border-left-width:0;border-radius:0;text-align:center}.customize-control-responsive-dimensions .dimension-wrap:first-child input{border-left-width:1px;border-radius:3px 0 0 3px}.customize-control-responsive-dimensions .dimension-wrap .dimension-label{display:block;color:#949698;font-size:10px;padding-top:5px;font-style:normal;text-transform:uppercase;text-align:center}.customize-control-responsive-dimensions .dimension-wrap input:focus+.dimension-label{color:#42474a}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions{background-color:#fff;border:1px solid #a4afb7;border-left-width:0;padding:0;outline:0;border-radius:0 3px 3px 0;cursor:pointer}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions span{display:block;width:100%;height:28px;line-height:28px;font-size:16px}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions.unlinked .responsive-unlinked{display:none}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions.unlinked .responsive-linked{display:block}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions .responsive-linked{background-color:#a4afb7;color:#fff;display:none} +.customize-control-responsive-dimensions>ul{display:inline-block;width:100%}.customize-control-responsive-dimensions .dimension-wrap{float:left;width:20%;margin:0}.customize-control-responsive-dimensions .dimension-wrap button,.customize-control-responsive-dimensions .dimension-wrap input{display:block;font-size:12px;padding:4px 0;width:100%;height:28px;border:1px solid;border-color:#d2d2d2;border-left-width:0;border-radius:0;text-align:center}.customize-control-responsive-dimensions .dimension-wrap:first-child input{border-left-width:1px;border-radius:3px 0 0 3px}.customize-control-responsive-dimensions .dimension-wrap .dimension-label{display:block;color:#949698;font-size:10px;padding-top:5px;font-style:normal;text-transform:uppercase;text-align:center}.customize-control-responsive-dimensions .dimension-wrap input:focus+.dimension-label{color:#42474a}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions{background-color:#fff;border:1px solid #a4afb7;border-left-width:0;padding:0;outline:0;border-radius:0 3px 3px 0;cursor:pointer}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions span{display:block;width:100%;height:28px;line-height:28px;font-size:16px}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions .responsive-linked{background-color:#007cba;color:#fff}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions.unlinked .responsive-unlinked{display:none}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions.unlinked .responsive-linked{display:block}.customize-control-responsive-dimensions .dimension-wrap .link-dimensions .responsive-linked{display:none} \ No newline at end of file diff --git a/core/includes/customizer/assets/min/css/heading.min.css b/core/includes/customizer/assets/min/css/heading.min.css index ee49377de..0355cbf8a 100644 --- a/core/includes/customizer/assets/min/css/heading.min.css +++ b/core/includes/customizer/assets/min/css/heading.min.css @@ -10,4 +10,11 @@ } #customize-control-responsive_body_typography_separator,#customize-control-responsive_responsive_general_texts_separator,#customize-control-responsive_content_header_color,#customize-control-responsive_page_typography_title_separator{ margin-top: 0; +} +#customize-control-responsive_breadcrumb_display_settings_separator .responsive-customizer-heading { + padding-top: 24px; + padding-bottom: 32px; +} +#customize-control-responsive_breadcrumb_enable_404_page .responsive-toggle-control-wrapper { + padding-bottom: 12px; } \ No newline at end of file diff --git a/core/includes/customizer/assets/min/css/horizontal-separator.min.css b/core/includes/customizer/assets/min/css/horizontal-separator.min.css new file mode 100644 index 000000000..9c0ad3756 --- /dev/null +++ b/core/includes/customizer/assets/min/css/horizontal-separator.min.css @@ -0,0 +1,20 @@ +.responsive-horizontal-separator-control-wrapper hr { + margin-top: 2px; + margin-bottom: 2px; + border: 0; + border-top: 0.5px solid #D0D0D0; + border-bottom: 0.5px solid #D0D0D0; +} +.responsive-horizontal-separator-control-wrapper { + margin-left: -12px; + margin-right: -12px; +} +#customize-control-responsive_breadcrumb_position_separator hr { + margin-top: 24px; +} +#customize-control-responsive_breadcrumb_separator_separator hr { + margin-top: 24px; +} +#customize-control-responsive_content_header_alignment_separator hr { + margin-top: 24px; +} \ No newline at end of file diff --git a/core/includes/customizer/assets/min/css/selectbtn.min.css b/core/includes/customizer/assets/min/css/selectbtn.min.css index cf243e284..b7bcf720b 100644 --- a/core/includes/customizer/assets/min/css/selectbtn.min.css +++ b/core/includes/customizer/assets/min/css/selectbtn.min.css @@ -1 +1 @@ -.customize-control-responsive-selectbtn{display:flex;flex-wrap:wrap;width:100%;gap:8px}.customize-control-responsive-selectbtn__button{flex-grow:1;padding:8px;border:none;border-radius:4px;background-color:#fff}.customize-control-responsive-selectbtn__button.active{color:#fff;background-color:#1e73be}.responsive-selectbtn-text{font-size:24px;line-height:18px;font-weight:300} \ No newline at end of file +.customize-control-responsive-selectbtn{display:flex;flex-wrap:wrap;width:100%}.customize-control-responsive-selectbtn__button{flex-grow:1;padding:8px 10px;color:#666;background-color:#fff;border:1px solid #d2d2d2}.customize-control-responsive-selectbtn__button.active{color:#fff;background-color:#1e73be}.responsive-selectbtn-text{font-size:14px;line-height:17px;font-weight:400}.customize-control-responsive-selectbtn__button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.customize-control-responsive-selectbtn__button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px} \ No newline at end of file diff --git a/core/includes/customizer/assets/min/css/toggle.min.css b/core/includes/customizer/assets/min/css/toggle.min.css new file mode 100644 index 000000000..d36f7cf38 --- /dev/null +++ b/core/includes/customizer/assets/min/css/toggle.min.css @@ -0,0 +1,164 @@ +.customize-control-responsive-toggle .responsive-toggle-control .components-flex { + flex-direction: row-reverse; +} +.customize-control-responsive-toggle .responsive-toggle-control { + margin-bottom: 0; +} +#customize-control-res_breadcrumb .responsive-toggle-control-wrapper { + padding-top: 24px; + padding-bottom: 24px; +} +.responsive-toggle-control-wrapper { + padding-bottom: 18px; +} +.customize-control-responsive-toggle .responsive-toggle-control .components-toggle-control__label { + font-family: "Roboto", sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 16.41px; + text-align: left; +} +.customize-control-responsive-toggle .components-form-toggle .components-form-toggle__track { + background-color: #D9D9D9; + border: none; + height: 20px; +} +.customize-control-responsive-toggle .components-form-toggle.is-checked .components-form-toggle__track { + background-color: #007CBA; +} +.customize-control-responsive-toggle .components-form-toggle .components-form-toggle__thumb { + background-color: #A5A5A5; + width: 14px; + height: 14px; +} +.customize-control-responsive-toggle .components-form-toggle.is-checked .components-form-toggle__thumb { + background-color: #FFF; +} +.customize-control-responsive-toggle .components-form-toggle.is-checked .components-form-toggle__thumb { + left: 1px; +} +#customize-control-responsive_enable_header_widget .responsive-toggle-control-wrapper { + padding-top: 24px; + padding-bottom: 24px; +} +#customize-control-responsive_disable_menu .responsive-toggle-control-wrapper, +#customize-control-responsive_disable_mobile_menu .responsive-toggle-control-wrapper { + padding-top: 18px; +} +#customize-control-responsive_sub_menu_divider .responsive-toggle-control-wrapper { + padding-top: 18px; + padding-bottom: 0; +} +#customize-control-responsive_transparent_header .responsive-toggle-control-wrapper { + padding-top: 18px; +} +#customize-control-responsive_disable_archive_transparent_header .responsive-toggle-control-wrapper { + padding-top: 18px; +} +#customize-control-responsive_disable_woo_products_transparent_header .responsive-toggle-control-wrapper { + padding-bottom: 0; +} +#customize-control-res_blog_post_title_toggle .responsive-toggle-control-wrapper { + padding-top: 8px; + padding-bottom: 8px; +} +#customize-control-responsive_date_box_toggle .responsive-toggle-control-wrapper { + padding-top: 18px; + padding-bottom: 8px; +} +#customize-control-responsive_disable_author_meta .responsive-toggle-control-wrapper { + padding-top: 18px; + padding-bottom: 8px; +} +#customize-control-responsive_single_blog_enable_related_posts .responsive-toggle-control-wrapper { + padding-top: 24px; + padding-bottom: 12px; +} +#customize-control-responsive_footer_full_width .responsive-toggle-control-wrapper { + padding-top: 8px; + padding-bottom: 8px; +} +#customize-control-responsive_footer_widget_desktop_visibility .responsive-toggle-control-wrapper { + padding-top: 18px; +} +#customize-control-responsive_footer_widget_mobile_visibility .responsive-toggle-control-wrapper { + padding-bottom: 0; +} +#customize-control-responsive_copyright .responsive-toggle-control-wrapper { + padding-top: 24px; +} +#customize-control-responsive_scroll_to_top .responsive-toggle-control-wrapper { + padding-top: 8px; + padding-bottom: 8px; +} +#customize-control-responsive_retina_logo .responsive-toggle-control-wrapper { + padding-top: 24px; + padding-bottom: 10px; +} +#customize-control-responsive_mobile_logo_option .responsive-toggle-control-wrapper { + padding-top: 24px; + padding-bottom: 10px; +} +#customize-control-responsive_hide_title .responsive-toggle-control-wrapper { + padding-top: 24px; +} +#customize-control-res_front_page .responsive-toggle-control-wrapper { + padding-top: 24px; + padding-bottom: 8px; +} +#customize-control-responsive_disable_hero_area .responsive-toggle-control-wrapper { + padding-top: 24px; + padding-bottom: 8px; +} +#customize-control-res_cta_button .responsive-toggle-control-wrapper { + padding-top: 18px; + padding-bottom: 8px; +} +#customize-control-about .responsive-toggle-control-wrapper, +#customize-control-feature_front_page .responsive-toggle-control-wrapper, +#customize-control-testimonial_front_page .responsive-toggle-control-wrapper, +#customize-control-team_front_page .responsive-toggle-control-wrapper, +#customize-control-contact_front_page .responsive-toggle-control-wrapper { + padding-top: 18px; + padding-bottom: 8px; +} +#customize-control-home-widgets .responsive-toggle-control-wrapper { + padding-top: 18px; + padding-bottom: 0; +} +#customize-control-responsive_enable_off_canvas_close_btn .responsive-toggle-control-wrapper { + padding-bottom: 0; +} +#customize-control-responsive_enable_off_canvas_filter .responsive-toggle-control-wrapper { + padding-top: 24px; +} +#customize-control-responsive_enable_crosssells_options .responsive-toggle-control-wrapper { + padding-top: 8px; +} +#customize-control-responsive_disable_cart_fragments .responsive-toggle-control-wrapper { + padding-bottom: 8px; +} +#customize-control-responsive_distraction_free_woocommerce .responsive-toggle-control-wrapper { + padding-top: 8px; +} +#customize-control-responsive_disable_product_tag_header_footer .responsive-toggle-control-wrapper { + padding-bottom: 12px; +} +#customize-control-breadcrumbs_options .responsive-toggle-control-wrapper { + padding-top: 8px; +} +#customize-control-toolbar_options .responsive-toggle-control-wrapper { + padding-bottom: 8px; +} +#customize-control-responsive_enable_native_cart_popup .responsive-toggle-control-wrapper { + padding-top: 24px; +} +#customize-control-responsive_native_cart_popup_display .responsive-toggle-control-wrapper { + padding-bottom: 8px; +} +#customize-control-responsive_cart_title .responsive-toggle-control-wrapper { + padding-top: 8px; +} +#customize-control-responsive_cart_count .responsive-toggle-control-wrapper { + padding-bottom: 12px; +} \ No newline at end of file diff --git a/core/includes/customizer/controls/heading/heading.css b/core/includes/customizer/controls/heading/heading.css index c170f2520..07b6071db 100644 --- a/core/includes/customizer/controls/heading/heading.css +++ b/core/includes/customizer/controls/heading/heading.css @@ -3,4 +3,8 @@ .customize-control-responsive-heading .description { margin-top: 10px; } #customize-control-responsive_body_typography_separator h4.responsive-customizer-heading{ margin-top: 0; +} +#customize-control-responsive_breadcrumb_display_settings_separator .responsive-customizer-heading { + padding-top: 24px; + padding-bottom: 32px; } \ No newline at end of file diff --git a/core/includes/customizer/controls/horizontal-separator/class-responsive-customizer-responsive-horizontal-separator.php b/core/includes/customizer/controls/horizontal-separator/class-responsive-customizer-responsive-horizontal-separator.php new file mode 100644 index 000000000..328bc4fb5 --- /dev/null +++ b/core/includes/customizer/controls/horizontal-separator/class-responsive-customizer-responsive-horizontal-separator.php @@ -0,0 +1,59 @@ +json['value'] = $this->value(); + $this->json['link'] = $this->get_link(); + $this->json['id'] = $this->id; + $this->json['type'] = $this->type; + } + + /** + * Content template. + * + * @see WP_Customize_Control::print_template() + * + * @access protected + */ + protected function render_content() {} + } +endif; diff --git a/core/includes/customizer/controls/palette/palette.css b/core/includes/customizer/controls/palette/palette.css index e70125cbb..35443e1f3 100644 --- a/core/includes/customizer/controls/palette/palette.css +++ b/core/includes/customizer/controls/palette/palette.css @@ -1,30 +1,37 @@ -.palette__wrapper { - margin-top: 14px; -} - .palette__wrapper .palette__choice { cursor: pointer; - display: block; - margin-bottom: 10px; - position: relative; + display: flex; + justify-content: space-between; border-radius: 3px; background: #fff; + border-bottom: 1px solid #D0D0D0; + padding: 12px 20px; + align-items: center; +} +.palette__wrapper .palette__choice.selected { + background: #EFEFEF; +} +.palette__wrapper.color_scheme { + position: absolute; + top: -10px; + left: 0; + transform: translateX(0px) translateY(118px) translateY(0px) scale(1) translateZ(0px); + overflow: auto; + z-index: 9999; + background-color: #FFF; + box-shadow: 0px 0px 16px 0px #00000026; + border: 1px solid #D0D0D0; + border-radius: 4px; + height: 300px; } .palette__wrapper .palette__choice .label { - -webkit-backdrop-filter: blur(10px) saturate(150%); - backdrop-filter: blur(10px) saturate(150%); - background: rgba(0, 0, 0, .5); - border-radius: 0 0 3px 3px; - top: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #fff; - padding: 2px 9px 2px; - position: absolute; - text-shadow: 0 0 2px rgba(0, 0, 0, .25); - width: 100%; - text-align: center; + font-family: "Roboto", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-align: left; + color: #333; } .palette__wrapper .palette__choice img { @@ -77,9 +84,8 @@ } .palette__wrapper.color_scheme .palette__choice { - height: 50px; + height: 30px; width: 100%; - margin-bottom: 15px; } .palette__wrapper.color_scheme .palette__choice .color-scheme { @@ -146,3 +152,30 @@ opacity: 1; visibility: visible; } +.responsive-color-picker-btn-wrap { + display: flex; + gap: 8px; + align-items: center; +} +.component-color-indicator.responsive-color-palette-indicate { + width: 30px; + height: 30px; +} +.responsive-selected-palette-details { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + padding-top: 24px; +} +.responsive-selected-palette-details .label { + font-family: "Roboto", sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 16px; + text-align: left; +} +#responsive-color-palette-btn { + cursor: pointer; + margin-left: 6px; +} \ No newline at end of file diff --git a/core/includes/customizer/controls/toggle/class-responsive-customizer-responsive-toggle-control.php b/core/includes/customizer/controls/toggle/class-responsive-customizer-responsive-toggle-control.php new file mode 100644 index 000000000..372e9a790 --- /dev/null +++ b/core/includes/customizer/controls/toggle/class-responsive-customizer-responsive-toggle-control.php @@ -0,0 +1,60 @@ +json['value'] = $this->value(); + $this->json['link'] = $this->get_link(); + $this->json['id'] = $this->id; + $this->json['type'] = $this->type; + $this->json['description'] = $this->description; + } + + /** + * Content template. + * + * @see WP_Customize_Control::print_template() + * + * @access protected + */ + protected function render_content() {} + } +endif; diff --git a/core/includes/customizer/customizer.php b/core/includes/customizer/customizer.php index cc69fcd06..3749b5f26 100644 --- a/core/includes/customizer/customizer.php +++ b/core/includes/customizer/customizer.php @@ -269,7 +269,8 @@ function responsive_custom_controls( $wp_customize ) { require_once $dir . 'selectbtn/class-responsive-customizer-responsive-selectbtn-control.php'; require_once $dir . 'tabs/class-responsive-customizer-responsive-tabs-control.php'; require_once $dir . 'imageradiobtn/class-responsive-customizer-imageradio-button-control.php'; - require_once $dir . 'toggle/class-responsive-customizer-toggle-control.php'; + require_once $dir . 'toggle/class-responsive-customizer-responsive-toggle-control.php'; + require_once $dir . 'horizontal-separator/class-responsive-customizer-responsive-horizontal-separator.php'; require_once RESPONSIVE_THEME_DIR . 'core/includes/customizer/controls/upsell/class-responsive-control-upsell.php'; require_once RESPONSIVE_THEME_DIR . 'core/includes/customizer/controls/upsell/class-responsive-generic-notice-section.php'; @@ -294,6 +295,7 @@ function responsive_custom_controls( $wp_customize ) { $wp_customize->register_control_type( 'Responsive_Customizer_Responsive_Tabs_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Imageradio_Button_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Toggle_Control' ); + $wp_customize->register_control_type( 'Responsive_Customizer_Horizontal_Separator' ); } diff --git a/core/includes/customizer/extend-controls/src/horizontal-separator/control.js b/core/includes/customizer/extend-controls/src/horizontal-separator/control.js new file mode 100644 index 000000000..8c772f923 --- /dev/null +++ b/core/includes/customizer/extend-controls/src/horizontal-separator/control.js @@ -0,0 +1,8 @@ +import HorizontalSeparatorComponent from "./horizontal-separator-component"; + +export const responsiveHorizontalSeparator = wp.customize.responsiveControl.extend({ + renderContent: function renderContent() { + let control = this; + ReactDOM.render(, control.container[0]); + } +}); \ No newline at end of file diff --git a/core/includes/customizer/extend-controls/src/horizontal-separator/horizontal-separator-component.js b/core/includes/customizer/extend-controls/src/horizontal-separator/horizontal-separator-component.js new file mode 100644 index 000000000..cfdc5937f --- /dev/null +++ b/core/includes/customizer/extend-controls/src/horizontal-separator/horizontal-separator-component.js @@ -0,0 +1,20 @@ +import PropTypes from "prop-types"; + +import { __ } from '@wordpress/i18n' + +const HorizontalSeparatorComponent = props => { + + return ( +
+ {[...Array(props.control.params.label)].map((_, index) => ( +
+ ))} +
+ ); +}; + +HorizontalSeparatorComponent.propTypes = { + control: PropTypes.object.isRequired +}; + +export default React.memo(HorizontalSeparatorComponent); \ No newline at end of file diff --git a/core/includes/customizer/extend-controls/src/index.js b/core/includes/customizer/extend-controls/src/index.js index 1b6f3d461..8e6d4c009 100644 --- a/core/includes/customizer/extend-controls/src/index.js +++ b/core/includes/customizer/extend-controls/src/index.js @@ -15,6 +15,8 @@ import { responsiveTabs } from './tabs/control'; import { responsiveImageRadioButton } from './imageradiobtn/control'; import { responsiveRadiusDimensions } from './radiusdimensions/control'; import { responsiveBorderWidthDimensions } from './borderwidth/control'; +import { responsiveToggle } from './toggle/control'; +import { responsiveHorizontalSeparator } from './horizontal-separator/control'; wp.customize.controlConstructor['responsive-sortable'] = responsiveSortable; wp.customize.controlConstructor['responsive-range'] = responsiveSlider; @@ -31,4 +33,6 @@ wp.customize.controlConstructor['responsive-selectbtn'] = responsiveSelectButton wp.customize.controlConstructor['responsive-tabs'] = responsiveTabs; wp.customize.controlConstructor['responsive-imageradiobtn'] = responsiveImageRadioButton; wp.customize.controlConstructor['responsive-radiusdimensions'] = responsiveRadiusDimensions; -wp.customize.controlConstructor['responsive-border-width-dimensions'] = responsiveBorderWidthDimensions; \ No newline at end of file +wp.customize.controlConstructor['responsive-border-width-dimensions'] = responsiveBorderWidthDimensions; +wp.customize.controlConstructor['responsive-toggle'] = responsiveToggle; +wp.customize.controlConstructor['responsive-horizontal-separator'] = responsiveHorizontalSeparator; \ No newline at end of file diff --git a/core/includes/customizer/extend-controls/src/palette/palette-color-picker.js b/core/includes/customizer/extend-controls/src/palette/palette-color-picker.js new file mode 100644 index 000000000..203958c31 --- /dev/null +++ b/core/includes/customizer/extend-controls/src/palette/palette-color-picker.js @@ -0,0 +1,18 @@ +import PropTypes from "prop-types"; + +const PaletteColorPicker = props => { + + return ( +
+ + + +
+ ); +}; + +PaletteColorPicker.propTypes = { + control: PropTypes.object.isRequired +}; + +export default React.memo(PaletteColorPicker); \ No newline at end of file diff --git a/core/includes/customizer/extend-controls/src/palette/palette-component.js b/core/includes/customizer/extend-controls/src/palette/palette-component.js index c8a4100af..1126c116c 100644 --- a/core/includes/customizer/extend-controls/src/palette/palette-component.js +++ b/core/includes/customizer/extend-controls/src/palette/palette-component.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; -import { useState } from 'react'; +import { useState, useEffect, useRef } from 'react'; +import PaletteColorPicker from './palette-color-picker.js'; const PaletteComponent = props => { @@ -12,6 +13,42 @@ const PaletteComponent = props => { link } = props.control.params; + const [selectedChoice, setSelectedChoice] = useState(() => { + return props.control.setting.get() || 'playful-default'; + }); + + const handlePaletteChange = (choice) => { + setSelectedChoice(choice); + props.control.setting.set(choice); + }; + + const [isPaletteVisible, setIsPaletteVisible] = useState(false); + const togglePaletteVisibility = (e) => { + e.stopPropagation(); + setIsPaletteVisible(!isPaletteVisible); + }; + + const paletteWrapperRef = useRef(null); + const buttonRef = useRef(null); + + useEffect(() => { + const handleClickOutside = event => { + if ( + paletteWrapperRef.current && + !paletteWrapperRef.current.contains(event.target) && + buttonRef.current && + !buttonRef.current.contains(event.target) + ) { + setIsPaletteVisible(false); + } + }; + + window.addEventListener('mousedown', handleClickOutside); + return () => { + window.removeEventListener('mousedown', handleClickOutside); + }; + }, [paletteWrapperRef, buttonRef]); + let htmlLabel = null; let descriptionHtml = null; let paletteTypeCheck = "default"; @@ -42,34 +79,47 @@ const PaletteComponent = props => { } let optionsHtml = Object.keys(choices).map(choice => { - if (choices[choice].preview_image) { - paletteDisplayImage = ; - } else { - paletteDisplayImage = <> - - - {choices[choice].label} - - } - - let html =