';
$content .= sprintf(
wp_kses( /* translators: %1$s - WPForms.com Email settings legacy template documentation URL. */
__( 'Some style settings are not available when using the Legacy template. Learn More', 'wpforms-lite' ),
[
'a' => [
'href' => [],
'target' => [],
'rel' => [],
],
]
),
esc_url( wpforms_utm_link( 'https://wpforms.com/docs/customizing-form-notification-emails/#legacy-template', 'Settings - Email', 'Legacy Template' ) )
);
$content .= '
';
// Add the background color control after the header image.
return wpforms_array_insert(
$settings,
[
'email-legacy-notice' => [
'id' => 'email-legacy-notice',
'content' => $content,
'type' => 'content',
'class' => 'wpforms-email-legacy-notice',
],
],
'email-template'
);
}
/**
* Add appearance controls.
* This will include controls for both Light and Dark modes.
*
* @since 1.8.6
*
* @param array $settings Email settings.
*
* @return array
*/
private function add_appearance_controls( $settings ) {
// Education modal arguments.
$education_args = [ 'action' => 'upgrade' ];
// New settings for the Light mode.
$new_setting = [
'email-header-image' => [
'id' => 'email-header-image',
'name' => esc_html__( 'Header Image', 'wpforms-lite' ),
'desc' => esc_html__( 'Upload or choose a logo to be displayed at the top of email notifications.', 'wpforms-lite' ),
'class' => [ 'wpforms-email-header-image', 'hide-for-template-none', 'has-preview-changes', 'email-light-mode', $this->get_external_header_image_class() ],
'type' => 'image',
'is_hidden' => $this->plain_text,
'show_remove' => true,
],
'email-header-image-size' => [
'id' => 'email-header-image-size',
'no_label' => true,
'type' => 'select',
'class' => [ 'wpforms-email-header-image-size', 'has-preview-changes', 'email-light-mode' ],
'is_hidden' => true,
'choicesjs' => false,
'default' => 'medium',
'options' => [
'small' => esc_html__( 'Small', 'wpforms-lite' ),
'medium' => esc_html__( 'Medium', 'wpforms-lite' ),
'large' => esc_html__( 'Large', 'wpforms-lite' ),
],
],
'email-color-scheme' => [
'id' => 'email-color-scheme',
'name' => esc_html__( 'Color Scheme', 'wpforms-lite' ),
'class' => [ 'email-color-scheme', 'hide-for-template-none', 'has-preview-changes', 'email-light-mode', $this->has_education, $this->has_legacy_template ],
'type' => 'color_scheme',
'is_hidden' => $this->plain_text,
'education_badge' => $this->get_pro_education_badge(),
'data_attributes' => $this->has_education ? array_merge( [ 'name' => esc_html__( 'Color Scheme', 'wpforms-lite' ) ], $education_args ) : [],
'colors' => $this->get_color_scheme_controls(),
],
'email-typography' => [
'id' => 'email-typography',
'name' => esc_html__( 'Typography', 'wpforms-lite' ),
'desc' => esc_html__( 'Choose the style that’s applied to all text in email notifications.', 'wpforms-lite' ),
'class' => [ 'hide-for-template-none', 'has-preview-changes', 'email-typography', 'email-light-mode', $this->has_education, $this->has_legacy_template ],
'education_badge' => $this->get_pro_education_badge(),
'data_attributes' => $this->has_education ? array_merge( [ 'name' => esc_html__( 'Typography', 'wpforms-lite' ) ], $education_args ) : [],
'type' => 'select',
'is_hidden' => $this->plain_text,
'choicesjs' => true,
'default' => 'sans-serif',
'options' => [
'sans-serif' => esc_html__( 'Sans Serif', 'wpforms-lite' ),
'serif' => esc_html__( 'Serif', 'wpforms-lite' ),
],
],
];
// Add background color control if the Pro version is not active or Legacy template is selected.
$new_setting = $this->maybe_add_background_color_control( $new_setting );
return wpforms_array_insert(
$settings,
$this->add_appearance_dark_mode_controls( $new_setting ),
'email-appearance'
);
}
/**
* Add appearance dark mode controls.
*
* This function will duplicate the default "Light" color
* controls to create corresponding controls for dark mode.
*
* @since 1.8.6
*
* @param array $settings Email settings.
*
* @return array
*/
private function add_appearance_dark_mode_controls( $settings ) {
// Duplicate and modify each item for dark mode.
foreach ( $settings as $key => $item ) {
// Duplicate the item with '-dark' added to the key.
$dark_key = "{$key}-dark";
$settings[ $dark_key ] = $item;
// Modify the 'name' within the duplicated item.
if ( isset( $settings[ $dark_key ]['id'] ) ) {
$settings[ $dark_key ]['id'] .= '-dark';
$classes = &$settings[ $dark_key ]['class'];
$classes[] = 'email-dark-mode';
$classes[] = 'wpforms-hide';
// Remove classes related to light mode.
$classes = array_filter(
$classes,
static function ( $class_name ) {
return $class_name !== 'email-light-mode' && $class_name !== 'has-external-image-url';
}
);
}
// Override the description for the header image control.
if ( $key === 'email-header-image' ) {
$settings[ $dark_key ]['desc'] = esc_html__( 'Upload or choose a logo to be displayed at the top of email notifications. Light mode image will be used if not set.', 'wpforms-lite' );
}
// Override the background color control attributes.
if ( $key === 'email-background-color' ) {
$settings[ $dark_key ]['default'] = sanitize_hex_color( $this->style_overrides['email_background_color_dark'] );
$settings[ $dark_key ]['data']['fallback-color'] = sanitize_hex_color( $this->style_overrides['email_background_color_dark'] );
}
// Override the color scheme control attributes.
if ( $key === 'email-color-scheme' ) {
$settings[ $dark_key ]['colors'] = $this->get_color_scheme_controls( true );
}
}
return $settings;
}
/**
* Get Email settings heading content.
*
* @since 1.8.5
*
* @return string
*/
private function get_heading_content() {
return wpforms_render( 'admin/settings/email-heading' );
}
/**
* Get Email settings education badge.
* This is only available in the free version.
*
* @since 1.8.6
*
* @return string
*/
private function get_pro_education_badge() {
// Leave early if the user has the Lite version.
if ( empty( $this->has_education ) ) {
return '';
}
// Output the education badge.
return EducationHelpers::get_badge( 'Pro' );
}
/**
* Generate color scheme controls for the color picker.
*
* @since 1.8.6
*
* @param bool $is_dark_mode Whether the color scheme is for dark mode.
*
* @return array
*/
private function get_color_scheme_controls( $is_dark_mode = false ) {
// Append '_dark' to keys if it's for dark mode.
$is_dark_mode_suffix = $is_dark_mode ? '_dark' : '';
// Data attributes to disable extensions from appearing in the input field.
$color_scheme_data = [
'1p-ignore' => 'true', // 1Password ignore.
'lp-ignore' => 'true', // LastPass ignore.
];
$colors = [];
$controls = [
"email_background_color{$is_dark_mode_suffix}" => esc_html__( 'Background', 'wpforms-lite' ),
"email_body_color{$is_dark_mode_suffix}" => esc_html__( 'Body', 'wpforms-lite' ),
"email_text_color{$is_dark_mode_suffix}" => esc_html__( 'Text', 'wpforms-lite' ),
"email_links_color{$is_dark_mode_suffix}" => esc_html__( 'Links', 'wpforms-lite' ),
];
foreach ( $controls as $key => $label ) {
// Construct the color controls array.
$colors[ $key ] = [
'name' => $label,
'data' => array_merge(
[
'fallback-color' => $this->style_overrides[ $key ],
],
$color_scheme_data
),
];
}
return $colors;
}
/**
* Get current email template hyperlink.
*
* @since 1.8.5
*
* @return string
*/
private function get_current_template_preview_link() {
// Leave if the user has the legacy template is set or the user doesn't have the capability.
if ( ! wpforms_current_user_can() || Helpers::is_legacy_html_template() ) {
return '';
}
$template_name = Helpers::get_current_template_name();
$current_template = Notifications::get_available_templates( $template_name );
// Return empty string if the current template is not found.
// Leave early if the preview link is empty.
if ( ! isset( $current_template['path'] ) || ! class_exists( $current_template['path'] ) || empty( $current_template['preview'] ) ) {
return '';
}
return sprintf(
wp_kses( /* translators: %1$s - Email template preview URL. */
__( '