diff options
Diffstat (limited to 'srcs/wordpress/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php')
| -rw-r--r-- | srcs/wordpress/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php | 526 |
1 files changed, 526 insertions, 0 deletions
diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php b/srcs/wordpress/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php new file mode 100644 index 0000000..cec2496 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php @@ -0,0 +1,526 @@ +<?php +/** + * Customizer settings for this theme. + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { + /** + * CUSTOMIZER SETTINGS + */ + class TwentyTwenty_Customize { + + /** + * Register customizer options. + * + * @param WP_Customize_Manager $wp_customize Theme Customizer object. + */ + public static function register( $wp_customize ) { + + /** + * Site Title & Description. + * */ + $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; + $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; + + $wp_customize->selective_refresh->add_partial( + 'blogname', + array( + 'selector' => '.site-title a', + 'render_callback' => 'twentytwenty_customize_partial_blogname', + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'blogdescription', + array( + 'selector' => '.site-description', + 'render_callback' => 'twentytwenty_customize_partial_blogdescription', + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'custom_logo', + array( + 'selector' => '.header-titles [class*=site-]:not(.site-description)', + 'render_callback' => 'twentytwenty_customize_partial_site_logo', + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'retina_logo', + array( + 'selector' => '.header-titles [class*=site-]:not(.site-description)', + 'render_callback' => 'twentytwenty_customize_partial_site_logo', + ) + ); + + /** + * Site Identity + */ + + /* 2X Header Logo ---------------- */ + $wp_customize->add_setting( + 'retina_logo', + array( + 'capability' => 'edit_theme_options', + 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ), + 'transport' => 'postMessage', + ) + ); + + $wp_customize->add_control( + 'retina_logo', + array( + 'type' => 'checkbox', + 'section' => 'title_tagline', + 'priority' => 10, + 'label' => __( 'Retina logo', 'twentytwenty' ), + 'description' => __( 'Scales the logo to half its uploaded size, making it sharp on high-res screens.', 'twentytwenty' ), + ) + ); + + // Header & Footer Background Color. + $wp_customize->add_setting( + 'header_footer_background_color', + array( + 'default' => '#ffffff', + 'sanitize_callback' => 'sanitize_hex_color', + 'transport' => 'postMessage', + ) + ); + + $wp_customize->add_control( + new WP_Customize_Color_Control( + $wp_customize, + 'header_footer_background_color', + array( + 'label' => __( 'Header & Footer Background Color', 'twentytwenty' ), + 'section' => 'colors', + ) + ) + ); + + // Enable picking an accent color. + $wp_customize->add_setting( + 'accent_hue_active', + array( + 'capability' => 'edit_theme_options', + 'sanitize_callback' => array( __CLASS__, 'sanitize_select' ), + 'transport' => 'postMessage', + 'default' => 'default', + ) + ); + + $wp_customize->add_control( + 'accent_hue_active', + array( + 'type' => 'radio', + 'section' => 'colors', + 'label' => __( 'Primary Color', 'twentytwenty' ), + 'choices' => array( + 'default' => __( 'Default', 'twentytwenty' ), + 'custom' => __( 'Custom', 'twentytwenty' ), + ), + ) + ); + + /** + * Implementation for the accent color. + * This is different to all other color options because of the accessibility enhancements. + * The control is a hue-only colorpicker, and there is a separate setting that holds values + * for other colors calculated based on the selected hue and various background-colors on the page. + * + * @since 1.0.0 + */ + + // Add the setting for the hue colorpicker. + $wp_customize->add_setting( + 'accent_hue', + array( + 'default' => 344, + 'type' => 'theme_mod', + 'sanitize_callback' => 'absint', + 'transport' => 'postMessage', + ) + ); + + // Add setting to hold colors derived from the accent hue. + $wp_customize->add_setting( + 'accent_accessible_colors', + array( + 'default' => array( + 'content' => array( + 'text' => '#000000', + 'accent' => '#cd2653', + 'secondary' => '#6d6d6d', + 'borders' => '#dcd7ca', + ), + 'header-footer' => array( + 'text' => '#000000', + 'accent' => '#cd2653', + 'secondary' => '#6d6d6d', + 'borders' => '#dcd7ca', + ), + ), + 'type' => 'theme_mod', + 'transport' => 'postMessage', + 'sanitize_callback' => array( __CLASS__, 'sanitize_accent_accessible_colors' ), + ) + ); + + // Add the hue-only colorpicker for the accent color. + $wp_customize->add_control( + new WP_Customize_Color_Control( + $wp_customize, + 'accent_hue', + array( + 'section' => 'colors', + 'settings' => 'accent_hue', + 'description' => __( 'Apply a custom color for links, buttons, featured images.', 'twentytwenty' ), + 'mode' => 'hue', + 'active_callback' => function() use ( $wp_customize ) { + return ( 'custom' === $wp_customize->get_setting( 'accent_hue_active' )->value() ); + }, + ) + ) + ); + + // Update background color with postMessage, so inline CSS output is updated as well. + $wp_customize->get_setting( 'background_color' )->transport = 'postMessage'; + + /** + * Theme Options + */ + + $wp_customize->add_section( + 'options', + array( + 'title' => __( 'Theme Options', 'twentytwenty' ), + 'priority' => 40, + 'capability' => 'edit_theme_options', + ) + ); + + /* Enable Header Search ----------------------------------------------- */ + + $wp_customize->add_setting( + 'enable_header_search', + array( + 'capability' => 'edit_theme_options', + 'default' => true, + 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ), + ) + ); + + $wp_customize->add_control( + 'enable_header_search', + array( + 'type' => 'checkbox', + 'section' => 'options', + 'priority' => 10, + 'label' => __( 'Show search in header', 'twentytwenty' ), + ) + ); + + /* Show author bio ---------------------------------------------------- */ + + $wp_customize->add_setting( + 'show_author_bio', + array( + 'capability' => 'edit_theme_options', + 'default' => true, + 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ), + ) + ); + + $wp_customize->add_control( + 'show_author_bio', + array( + 'type' => 'checkbox', + 'section' => 'options', + 'priority' => 10, + 'label' => __( 'Show author bio', 'twentytwenty' ), + ) + ); + + /* Display full content or excerpts on the blog and archives --------- */ + + $wp_customize->add_setting( + 'blog_content', + array( + 'capability' => 'edit_theme_options', + 'default' => 'full', + 'sanitize_callback' => array( __CLASS__, 'sanitize_select' ), + ) + ); + + $wp_customize->add_control( + 'blog_content', + array( + 'type' => 'radio', + 'section' => 'options', + 'priority' => 10, + 'label' => __( 'On archive pages, posts show:', 'twentytwenty' ), + 'choices' => array( + 'full' => __( 'Full text', 'twentytwenty' ), + 'summary' => __( 'Summary', 'twentytwenty' ), + ), + ) + ); + + /** + * Template: Cover Template. + */ + $wp_customize->add_section( + 'cover_template_options', + array( + 'title' => __( 'Cover Template', 'twentytwenty' ), + 'capability' => 'edit_theme_options', + 'description' => __( 'Settings for the "Cover Template" page template. Add a featured image to use as background.', 'twentytwenty' ), + 'priority' => 42, + ) + ); + + /* Overlay Fixed Background ------ */ + + $wp_customize->add_setting( + 'cover_template_fixed_background', + array( + 'capability' => 'edit_theme_options', + 'default' => true, + 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ), + 'transport' => 'postMessage', + ) + ); + + $wp_customize->add_control( + 'cover_template_fixed_background', + array( + 'type' => 'checkbox', + 'section' => 'cover_template_options', + 'label' => __( 'Fixed Background Image', 'twentytwenty' ), + 'description' => __( 'Creates a parallax effect when the visitor scrolls.', 'twentytwenty' ), + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'cover_template_fixed_background', + array( + 'selector' => '.cover-header', + 'type' => 'cover_fixed', + ) + ); + + /* Separator --------------------- */ + + $wp_customize->add_setting( + 'cover_template_separator_1', + array( + 'sanitize_callback' => 'wp_filter_nohtml_kses', + ) + ); + + $wp_customize->add_control( + new TwentyTwenty_Separator_Control( + $wp_customize, + 'cover_template_separator_1', + array( + 'section' => 'cover_template_options', + ) + ) + ); + + /* Overlay Background Color ------ */ + + $wp_customize->add_setting( + 'cover_template_overlay_background_color', + array( + 'default' => twentytwenty_get_color_for_area( 'content', 'accent' ), + 'sanitize_callback' => 'sanitize_hex_color', + ) + ); + + $wp_customize->add_control( + new WP_Customize_Color_Control( + $wp_customize, + 'cover_template_overlay_background_color', + array( + 'label' => __( 'Overlay Background Color', 'twentytwenty' ), + 'description' => __( 'The color used for the overlay. Defaults to the accent color.', 'twentytwenty' ), + 'section' => 'cover_template_options', + ) + ) + ); + + /* Overlay Text Color ------------ */ + + $wp_customize->add_setting( + 'cover_template_overlay_text_color', + array( + 'default' => '#ffffff', + 'sanitize_callback' => 'sanitize_hex_color', + ) + ); + + $wp_customize->add_control( + new WP_Customize_Color_Control( + $wp_customize, + 'cover_template_overlay_text_color', + array( + 'label' => __( 'Overlay Text Color', 'twentytwenty' ), + 'description' => __( 'The color used for the text in the overlay.', 'twentytwenty' ), + 'section' => 'cover_template_options', + ) + ) + ); + + /* Overlay Color Opacity --------- */ + + $wp_customize->add_setting( + 'cover_template_overlay_opacity', + array( + 'default' => 80, + 'sanitize_callback' => 'absint', + 'transport' => 'postMessage', + ) + ); + + $wp_customize->add_control( + 'cover_template_overlay_opacity', + array( + 'label' => __( 'Overlay Opacity', 'twentytwenty' ), + 'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ), + 'section' => 'cover_template_options', + 'type' => 'range', + 'input_attrs' => twentytwenty_customize_opacity_range(), + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'cover_template_overlay_opacity', + array( + 'selector' => '.cover-color-overlay', + 'type' => 'cover_opacity', + ) + ); + } + + /** + * Sanitization callback for the "accent_accessible_colors" setting. + * + * @static + * @access public + * @since 1.0.0 + * @param array $value The value we want to sanitize. + * @return array Returns sanitized value. Each item in the array gets sanitized separately. + */ + public static function sanitize_accent_accessible_colors( $value ) { + + // Make sure the value is an array. Do not typecast, use empty array as fallback. + $value = is_array( $value ) ? $value : array(); + + // Loop values. + foreach ( $value as $area => $values ) { + foreach ( $values as $context => $color_val ) { + $value[ $area ][ $context ] = sanitize_hex_color( $color_val ); + } + } + + return $value; + } + + /** + * Sanitize select. + * + * @param string $input The input from the setting. + * @param object $setting The selected setting. + * + * @return string $input|$setting->default The input from the setting or the default setting. + */ + public static function sanitize_select( $input, $setting ) { + $input = sanitize_key( $input ); + $choices = $setting->manager->get_control( $setting->id )->choices; + return ( array_key_exists( $input, $choices ) ? $input : $setting->default ); + } + + /** + * Sanitize boolean for checkbox. + * + * @param bool $checked Whether or not a box is checked. + * + * @return bool + */ + public static function sanitize_checkbox( $checked ) { + return ( ( isset( $checked ) && true === $checked ) ? true : false ); + } + + } + + // Setup the Theme Customizer settings and controls. + add_action( 'customize_register', array( 'TwentyTwenty_Customize', 'register' ) ); + +} + +/** + * PARTIAL REFRESH FUNCTIONS + * */ +if ( ! function_exists( 'twentytwenty_customize_partial_blogname' ) ) { + /** + * Render the site title for the selective refresh partial. + */ + function twentytwenty_customize_partial_blogname() { + bloginfo( 'name' ); + } +} + +if ( ! function_exists( 'twentytwenty_customize_partial_blogdescription' ) ) { + /** + * Render the site description for the selective refresh partial. + */ + function twentytwenty_customize_partial_blogdescription() { + bloginfo( 'description' ); + } +} + +if ( ! function_exists( 'twentytwenty_customize_partial_site_logo' ) ) { + /** + * Render the site logo for the selective refresh partial. + * + * Doing it this way so we don't have issues with `render_callback`'s arguments. + */ + function twentytwenty_customize_partial_site_logo() { + twentytwenty_site_logo(); + } +} + + +/** + * Input attributes for cover overlay opacity option. + * + * @return array Array containing attribute names and their values. + */ +function twentytwenty_customize_opacity_range() { + /** + * Filter the input attributes for opacity + * + * @param array $attrs { + * The attributes + * + * @type int $min Minimum value + * @type int $max Maximum value + * @type int $step Interval between numbers + * } + */ + return apply_filters( + 'twentytwenty_customize_opacity_range', + array( + 'min' => 0, + 'max' => 90, + 'step' => 5, + ) + ); +} |