page_title = __( 'Banner Design', 'wpconsent-cookies-banner-privacy-suite' );
parent::__construct();
}
/**
* Page scripts.
*
* @return void
*/
public function page_scripts() {
// Enqueue sortable.
wp_enqueue_script( 'jquery-ui-sortable' );
// Media.
wp_enqueue_media();
}
/**
* Page hooks.
*
* @return void
*/
public function page_hooks() {
add_action( 'admin_init', array( $this, 'save_settings' ) );
$this->views = array(
'layout' => array(
'label' => __( 'Layout', 'wpconsent-cookies-banner-privacy-suite' ),
'icon' => array(
'slug' => 'layout',
'width' => 18,
'height' => 18,
),
),
'style' => array(
'label' => __( 'Style', 'wpconsent-cookies-banner-privacy-suite' ),
'icon' => array(
'slug' => 'style',
'width' => 20,
'height' => 19,
),
),
'content' => array(
'label' => __( 'Content', 'wpconsent-cookies-banner-privacy-suite' ),
'icon' => array(
'slug' => 'content',
'width' => 20,
'height' => 22,
),
),
);
add_filter( 'wpconsent_admin_js_data', array( $this, 'banner_preview_scripts' ) );
}
/**
* Get the current tab label.
*
* @return string
*/
public function get_tab_label() {
$label = '';
if ( isset( $this->views[ $this->view ] ) ) {
$label = $this->views[ $this->view ]['label'];
}
return $label;
}
/**
* Page content.
*
* @return void
*/
public function output_content() {
$this->metabox(
// translators: %s: The name of the current tab: Layout, Style or Content.
sprintf( esc_html__( '%s Settings', 'wpconsent-cookies-banner-privacy-suite' ), $this->get_tab_label() ),
$this->banner_styles_fields()
);
wp_nonce_field( 'wpconsent_save_banner_settings', 'wpconsent_banner_settings_nonce' );
?>
view ) : ?>
view ) : ?>
view ) : ?>
view ) : ?>
' . esc_html__( 'This feature allows you to customize the overall appearance of your banner.', 'wpconsent-cookies-banner-privacy-suite' ) . ' '
);
?>
metabox_row(
esc_html__( 'Background Color', 'wpconsent-cookies-banner-privacy-suite' ),
$this->colorpicker(
'banner_background_color',
wpconsent()->settings->get_option( 'banner_background_color', '#FFFFFF' ),
'.wpconsent-banner-holder .wpconsent-banner',
'#FFFFFF',
'background-color'
),
'banner_background_color'
);
?>
metabox_row(
esc_html__( 'Text Color', 'wpconsent-cookies-banner-privacy-suite' ),
$this->colorpicker(
'banner_text_color',
wpconsent()->settings->get_option( 'banner_text_color', '#000000' ),
'.wpconsent-banner-holder .wpconsent-banner',
'#000000',
'color'
),
'banner_text_color'
);
// Font size select.
$this->metabox_row(
esc_html__( 'Font Size', 'wpconsent-cookies-banner-privacy-suite' ),
$this->select(
'banner_font_size',
array(
'12px' => esc_html__( '12px', 'wpconsent-cookies-banner-privacy-suite' ),
'14px' => esc_html__( '14px', 'wpconsent-cookies-banner-privacy-suite' ),
'16px' => esc_html__( '16px', 'wpconsent-cookies-banner-privacy-suite' ),
'18px' => esc_html__( '18px', 'wpconsent-cookies-banner-privacy-suite' ),
'20px' => esc_html__( '20px', 'wpconsent-cookies-banner-privacy-suite' ),
'22px' => esc_html__( '22px', 'wpconsent-cookies-banner-privacy-suite' ),
'24px' => esc_html__( '24px', 'wpconsent-cookies-banner-privacy-suite' ),
'26px' => esc_html__( '26px', 'wpconsent-cookies-banner-privacy-suite' ),
'28px' => esc_html__( '28px', 'wpconsent-cookies-banner-privacy-suite' ),
'30px' => esc_html__( '30px', 'wpconsent-cookies-banner-privacy-suite' ),
),
wpconsent()->settings->get_option( 'banner_font_size', '16px' ),
false,
'',
'.wpconsent-banner-body',
'font-size'
),
'banner_font_size'
);
?>
metabox_row_separator();
$this->metabox_row(
esc_html__( 'Buttons', 'wpconsent-cookies-banner-privacy-suite' ),
'' . esc_html__( 'Customize the styles of your banner buttons.', 'wpconsent-cookies-banner-privacy-suite' ) . ' '
);
?>
metabox_row(
esc_html__( 'Button Size', 'wpconsent-cookies-banner-privacy-suite' ),
$this->select(
'banner_button_size',
array(
'small' => esc_html__( 'Small', 'wpconsent-cookies-banner-privacy-suite' ),
'regular' => esc_html__( 'Regular', 'wpconsent-cookies-banner-privacy-suite' ),
'large' => esc_html__( 'Large', 'wpconsent-cookies-banner-privacy-suite' ),
),
wpconsent()->settings->get_option( 'banner_button_size', 'regular' ),
false,
'',
'.wpconsent-banner-holder .wpconsent-banner-footer',
'class',
'wpconsent-button-size-'
),
'banner_button_size'
);
// Button corner (radius) - select with options like: rounded, slightly rounded, square.
$this->metabox_row(
esc_html__( 'Button Corner', 'wpconsent-cookies-banner-privacy-suite' ),
$this->select(
'banner_button_corner',
array(
'square' => esc_html__( 'Square', 'wpconsent-cookies-banner-privacy-suite' ),
'slightly-rounded' => esc_html__( 'Slightly Rounded', 'wpconsent-cookies-banner-privacy-suite' ),
'rounded' => esc_html__( 'Rounded', 'wpconsent-cookies-banner-privacy-suite' ),
),
wpconsent()->settings->get_option( 'banner_button_corner', 'rounded' ),
false,
'',
'.wpconsent-banner-holder .wpconsent-banner-footer',
'class',
'wpconsent-button-corner-'
),
'banner_button_corner'
);
?>
metabox_row(
esc_html__( 'Button Type', 'wpconsent-cookies-banner-privacy-suite' ),
$this->select(
'banner_button_type',
array(
'filled' => esc_html__( 'Filled', 'wpconsent-cookies-banner-privacy-suite' ),
'outlined' => esc_html__( 'Outlined', 'wpconsent-cookies-banner-privacy-suite' ),
),
wpconsent()->settings->get_option( 'banner_button_type', 'filled' ),
false,
'',
'.wpconsent-banner-holder .wpconsent-banner-footer',
'class',
'wpconsent-button-type-'
),
'banner_button_type'
);
?>
metabox_row_separator();
$this->metabox_row(
esc_html__( 'Button Color', 'wpconsent-cookies-banner-privacy-suite' ),
'' . esc_html__( 'Customize button colors.', 'wpconsent-cookies-banner-privacy-suite' ) . ' '
);
$button_bg_property = 'background-color';
if ( 'outlined' === wpconsent()->settings->get_option( 'banner_button_type', 'filled' ) ) {
$button_bg_property = 'border-color';
}
?>
metabox_row(
esc_html__( 'Accept Background', 'wpconsent-cookies-banner-privacy-suite' ),
$this->colorpicker(
'banner_accept_bg',
wpconsent()->settings->get_option( 'banner_accept_bg', '#E8B13A' ),
'#wpconsent-accept-all',
'#04194E',
$button_bg_property
),
'banner_accept_bg'
);
$this->metabox_row(
esc_html__( 'Font Color', 'wpconsent-cookies-banner-privacy-suite' ),
$this->colorpicker(
'banner_accept_color',
wpconsent()->settings->get_option( 'banner_accept_color', '#FFFFFF' ),
'#wpconsent-accept-all',
'#FFFFFF',
'color'
),
'banner_accept_color'
);
?>
metabox_row(
esc_html__( 'Cancel Background', 'wpconsent-cookies-banner-privacy-suite' ),
$this->colorpicker(
'banner_cancel_bg',
wpconsent()->settings->get_option( 'banner_cancel_bg', '#FFFFFF' ),
'#wpconsent-cancel-all',
'#04194E',
$button_bg_property
),
'banner_cancel_bg'
);
$this->metabox_row(
esc_html__( 'Font Color', 'wpconsent-cookies-banner-privacy-suite' ),
$this->colorpicker(
'banner_cancel_color',
wpconsent()->settings->get_option( 'banner_cancel_color', '#FFFFFF' ),
'#wpconsent-cancel-all',
'#FFFFFF',
'color'
),
'banner_cancel_color'
);
?>
metabox_row(
esc_html__( 'Customize Background', 'wpconsent-cookies-banner-privacy-suite' ),
$this->colorpicker(
'banner_preferences_bg',
wpconsent()->settings->get_option( 'banner_preferences_bg', '#04194E' ),
'#wpconsent-preferences-all',
'#04194E',
$button_bg_property
),
'banner_preferences_bg'
);
$this->metabox_row(
esc_html__( 'Font Color', 'wpconsent-cookies-banner-privacy-suite' ),
$this->colorpicker(
'banner_preferences_color',
wpconsent()->settings->get_option( 'banner_preferences_color', '#FFFFFF' ),
'#wpconsent-preferences-all',
'#FFFFFF',
'color'
),
'banner_preferences_color'
);
?>
settings->get_option( 'enable_consent_floating' ) ) {
$this->metabox_row_separator();
$this->metabox_row(
esc_html__( 'Floating Settings Button Design', 'wpconsent-cookies-banner-privacy-suite' ),
'' . esc_html__( 'Customize the appearance of the floating settings button that appears on your website.', 'wpconsent-cookies-banner-privacy-suite' ) . ' '
);
?>
get_tcf_content_notice(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$this->metabox_row(
esc_html__( 'Message', 'wpconsent-cookies-banner-privacy-suite' ),
$this->wysiwyg(
'banner_message',
wpconsent()->settings->get_option( 'banner_message', wpconsent()->strings->get_string( 'banner_message' ) ),
'',
'.wpconsent-banner-body'
),
'banner_message',
'',
'',
'',
false,
'',
$this->is_tcf_field_locked( 'banner_message' )
);
$this->metabox_row_separator();
$this->metabox_row(
esc_html__( 'Buttons', 'wpconsent-cookies-banner-privacy-suite' ),
$this->buttons_content_fields(),
'',
'',
'',
'',
false,
'',
$this->is_tcf_field_locked( 'accept_button_text' )
);
$this->metabox_row(
esc_html__( 'Disable Close Button', 'wpconsent-cookies-banner-privacy-suite' ),
$this->get_checkbox_toggle(
wpconsent()->settings->get_option( 'disable_close_button' ),
'disable_close_button',
esc_html__( 'Disable the close (x) button in the banner to prevent users from dismissing it without making a choice.', 'wpconsent-cookies-banner-privacy-suite' )
),
'disable_close_button'
);
$this->metabox_row_separator();
// Add a title for the preferences panel section.
echo '' . esc_html__( 'Preferences Panel Settings', 'wpconsent-cookies-banner-privacy-suite' ) . ' ';
// Preferences Panel Settings - Accordion.
echo '';
echo '
';
echo ''; // .wpconsent-accordion-header.
echo '
'; // Not collapsed by default.
$this->metabox_row(
esc_html__( 'Preferences Panel Title', 'wpconsent-cookies-banner-privacy-suite' ),
$this->get_input_text(
'preferences_panel_title',
wpconsent()->settings->get_option( 'preferences_panel_title', wpconsent()->strings->get_string( 'preferences_panel_title' ) ),
'',
'preferences_panel_title'
),
'preferences_panel_title'
);
$this->metabox_row(
esc_html__( 'Preferences Panel Description', 'wpconsent-cookies-banner-privacy-suite' ),
$this->get_input_textarea(
'preferences_panel_description',
wpconsent()->settings->get_option( 'preferences_panel_description', wpconsent()->strings->get_string( 'preferences_panel_description' ) ),
'',
'preferences_panel_description'
),
'preferences_panel_description',
'',
'',
'',
false,
'',
$this->is_tcf_field_locked( 'preferences_panel_description' )
);
$this->metabox_row(
esc_html__( 'Cookie Policy Title', 'wpconsent-cookies-banner-privacy-suite' ),
$this->get_input_text(
'cookie_policy_title',
wpconsent()->settings->get_option( 'cookie_policy_title', wpconsent()->strings->get_string( 'cookie_policy_title' ) ),
'',
'cookie_policy_title'
),
'cookie_policy_title'
);
$this->metabox_row(
esc_html__( 'Cookie Policy Text', 'wpconsent-cookies-banner-privacy-suite' ),
$this->get_input_textarea(
'cookie_policy_text',
wpconsent()->settings->get_option( 'cookie_policy_text', wpconsent()->strings->get_string( 'cookie_policy_text' ) ),
sprintf(
// Translators: %1$s is the cookie policy placeholder ({cookie_policy}), %2$s is the privacy policy placeholder ({privacy_policy}).
esc_html__( 'This text will appear at the bottom of the Preferences panel. We recommend including the %1$s and %2$s placeholders.', 'wpconsent-cookies-banner-privacy-suite' ),
'{cookie_policy}',
'{privacy_policy}'
) . '
'; // .wpconsent-accordion-content
echo '
'; // .wpconsent-accordion-item
// Cookie Table Headers Section - Separate accordion item.
echo '
';
echo ''; // .wpconsent-accordion-header.
echo '
'; // Not collapsed by default.
$this->metabox_row(
esc_html__( 'Name Header', 'wpconsent-cookies-banner-privacy-suite' ),
$this->get_input_text(
'cookie_table_header_name',
wpconsent()->settings->get_option( 'cookie_table_header_name', wpconsent()->strings->get_string( 'cookie_table_header_name' ) ),
esc_html__( 'The header text for the Name column in the cookie table.', 'wpconsent-cookies-banner-privacy-suite' ),
'cookie_table_header_name'
),
'cookie_table_header_name'
);
$this->metabox_row(
esc_html__( 'Description Header', 'wpconsent-cookies-banner-privacy-suite' ),
$this->get_input_text(
'cookie_table_header_description',
wpconsent()->settings->get_option( 'cookie_table_header_description', wpconsent()->strings->get_string( 'cookie_table_header_description' ) ),
esc_html__( 'The header text for the Description column in the cookie table.', 'wpconsent-cookies-banner-privacy-suite' ),
'cookie_table_header_description'
),
'cookie_table_header_description'
);
$this->metabox_row(
esc_html__( 'Duration Header', 'wpconsent-cookies-banner-privacy-suite' ),
$this->get_input_text(
'cookie_table_header_duration',
wpconsent()->settings->get_option( 'cookie_table_header_duration', wpconsent()->strings->get_string( 'cookie_table_header_duration' ) ),
esc_html__( 'The header text for the Duration column in the cookie table.', 'wpconsent-cookies-banner-privacy-suite' ),
'cookie_table_header_duration'
),
'cookie_table_header_duration'
);
echo '
'; // .wpconsent-accordion-content
echo '
'; // .wpconsent-accordion-item
echo '
array(
'label' => esc_html__( 'Accept Button', 'wpconsent-cookies-banner-privacy-suite' ),
'text' => wpconsent()->settings->get_option( 'accept_button_text', wpconsent()->strings->get_string( 'accept_button_text' ) ),
'enabled' => wpconsent()->settings->get_option( 'accept_button_enabled', true ),
),
'cancel' => array(
'label' => esc_html__( 'Reject Button', 'wpconsent-cookies-banner-privacy-suite' ),
'text' => wpconsent()->settings->get_option( 'cancel_button_text', wpconsent()->strings->get_string( 'cancel_button_text' ) ),
'enabled' => wpconsent()->settings->get_option( 'cancel_button_enabled', true ),
),
'preferences' => array(
'label' => esc_html__( 'Settings Button', 'wpconsent-cookies-banner-privacy-suite' ),
'text' => wpconsent()->settings->get_option( 'preferences_button_text', wpconsent()->strings->get_string( 'preferences_button_text' ) ),
'enabled' => wpconsent()->settings->get_option( 'preferences_button_enabled', true ),
),
);
$button_order = wpconsent()->settings->get_option( 'button_order', array_keys( $buttons ) );
ob_start();
?>
 . ')
';
}
?>