Changeset 21411

Timestamp:

08/02/2012 10:10:03 PM (14 years ago)

Author:

lancewillett

Message:

Twenty Twelve: Add postMessage support in Customizer for fonts, site title and description, and background color body_class value updates.

Props obenland for first patch and testing. Fixes #21443.

Location:

trunk/wp-content/themes/twentytwelve

Files:

• functions.php (modified) (2 diffs)
• inc/theme-options.php (modified) (4 diffs)
• js/theme-customizer.js (modified) (1 diff)

trunk/wp-content/themes/twentytwelve/functions.php

@@ -112 +112 @@
          */
         $options = $twentytwelve_options->get_theme_options();
-        if ( $options['enable_fonts'] ) {
-                $protocol = is_ssl() ? 'https' : 'http';
-                wp_enqueue_style( 'twentytwelve-fonts', "$protocol://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" );
-        }
+        if ( $options['enable_fonts'] )
+                wp_enqueue_style( 'twentytwelve-fonts', $twentytwelve_options->custom_fonts_url() );
 
         /**
@@ -375 +373 @@
 }
 add_action( 'template_redirect', 'twentytwelve_content_width' );
-
-/**
- * Bind JS handler to make Theme Customizer preview reload
- * custom background `body_class` value changes asynchronously.
- *
- * @since Twenty Twelve 1.0
- */
-function twentytwelve_customize_preview_js() {
-        wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120725', true );
-}
-add_action( 'customize_preview_init', 'twentytwelve_customize_preview_js' );

trunk/wp-content/themes/twentytwelve/inc/theme-options.php

@@ -38 +38 @@
                         $this->option_key = get_stylesheet() . '_theme_options';
 
-                add_action( 'admin_init',         array( $this, 'options_init'       ) );
-                add_action( 'admin_menu',         array( $this, 'add_page'           ) );
-                add_action( 'customize_register', array( $this, 'customize_register' ) );
+                add_action( 'admin_init',             array( $this, 'options_init'         ) );
+                add_action( 'admin_menu',             array( $this, 'add_page'             ) );
+                add_action( 'customize_register',     array( $this, 'customize_register'   ) );
+                add_action( 'customize_preview_init', array( $this, 'customize_preview_js' ) );
         }
 
@@ -204 +205 @@
          */
         public function customize_register( $wp_customize ) {
+
+                // Add postMessage support for site title and tagline
+                $wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
+                $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
+
                 // Enable Web Fonts
                 $wp_customize->add_section( $this->option_key . '_enable_fonts', array(
@@ -216 +222 @@
                         'type'       => 'option',
                         'capability' => 'edit_theme_options',
+                        'transport'  => 'postMessage',
                 ) );
 
@@ -225 +232 @@
                 ) );
         }
+
+        /**
+         * Bind JS handlers to make Theme Customizer preview reload changes asynchronously.
+         *
+         * @since Twenty Twelve 1.0
+         * @access public
+         *
+         * @return void
+         */
+        public function customize_preview_js() {
+                wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120725', true );
+                wp_localize_script( 'twentytwelve-customizer', 'twentytwelve_customizer', array(
+                        'option_key' => $this->option_key,
+                        'link'       => $this->custom_fonts_url(),
+                ) );
+        }
+
+        /**
+         * Create path to load fonts CSS file with correct protocol.
+         *
+         * @since Twenty Twelve 1.0
+         * @access public
+         *
+         * @return string Path to load fonts CSS.
+         */
+        public function custom_fonts_url() {
+                $protocol = is_ssl() ? 'https' : 'http';
+                return $protocol . '://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700';
+        }
 }

trunk/wp-content/themes/twentytwelve/js/theme-customizer.js

@@ -1 @@
-( function( $ ){
+/**
+ * Theme Customizer enhancements for a better user experience.
+ *
+ * Contains handlers to make Theme Customizer preview reload changes asynchronously.
+ * Things like fonts, site title and description, and background color changes.
+ *
+ * See related settings in Twenty_Twelve_Options::customize_preview_js()
+ */
+
+( function( $ ) {
+        // Site title and description.
+        wp.customize( 'blogname', function( value ) {
+                value.bind( function( to ) {
+                        $( '.site-title a' ).html( to );
+                } );
+        } );
+        wp.customize( 'blogdescription', function( value ) {
+                value.bind( function( to ) {
+                        $( '.site-description' ).html( to );
+                } );
+        } );
+
+        // Custom fonts.
+        wp.customize( twentytwelve_customizer.option_key + '[enable_fonts]', function( value ) {
+                value.bind( function( to ) {
+                        if ( to ) {
+                                $( 'head' ).append( '<link rel="stylesheet" id="twentytwelve-fonts-css" href="' + twentytwelve_customizer.link + '" type="text/css" media="all" />' );
+                        } else {
+                                $( '#twentytwelve-fonts-css' ).remove();
+                        }
+                } );
+        } );
+
         // Hook into background color change and adjust body class value as needed.
         wp.customize( 'background_color', function( value ) {