Customize: Introduce Logo support for themes.

Allows a common theme feature to have a common implementation provided by core and available in a consistent location for users.
See https://make.wordpress.org/core/2016/02/24/theme-logo-support/

Props kwight, enejb, jeherve, bhubbard, samhotchkiss, zinigor, eliorivero, adamsilverstein, melchoyce, ryan, mikeschroder, westonruter, pento, karmatosed, celloexpressions, obenland. 
See #33755.


Built from https://develop.svn.wordpress.org/trunk@36698


git-svn-id: http://core.svn.wordpress.org/trunk@36665 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -725,6 +725,7 @@ p.customize-section-description {
 .customize-control-background .current,
 .customize-control-cropped_image .current,
 .customize-control-site_icon .current,
+.customize-control-site_logo .current,
 .customize-control-header .current {
 	margin-bottom: 8px;
 }
@@ -766,6 +767,9 @@ p.customize-section-description {
 .customize-control-site_icon .remove-button,
 .customize-control-site_icon .default-button,
 .customize-control-site_icon .upload-button,
+.customize-control-site_logo .remove-button,
+.customize-control-site_logo .default-button,
+.customize-control-site_logo .upload-button,
 .customize-control-header button.new,
 .customize-control-header button.remove {
 	white-space: normal;
@@ -779,6 +783,7 @@ p.customize-section-description {
 .customize-control-background .current .container,
 .customize-control-cropped_image .current .container,
 .customize-control-site_icon .current .container,
+.customize-control-site_logo .current .container,
 .customize-control-header .current .container {
 	overflow: hidden;
 	-webkit-border-radius: 2px;
@@ -792,6 +797,7 @@ p.customize-section-description {
 .customize-control-background .current .container,
 .customize-control-cropped_image .current .container,
 .customize-control-site_icon .current .container,
+.customize-control-site_logo .current .container,
 .customize-control-image .current .container {
 	min-height: 40px;
 }
@@ -820,6 +826,7 @@ p.customize-section-description {
 .customize-control-background .inner,
 .customize-control-cropped_image .inner,
 .customize-control-site_icon .inner,
+.customize-control-site_logo .inner,
 .customize-control-header .inner {
 	display: none;
 	position: absolute;
@@ -835,6 +842,7 @@ p.customize-section-description {
 .customize-control-background .inner,
 .customize-control-cropped_image .inner,
 .customize-control-site_icon .inner,
+.customize-control-site_logo .inner,
 .customize-control-image .inner {
 	display: block;
 	min-height: 40px;
@@ -846,6 +854,7 @@ p.customize-section-description {
 .customize-control-background .inner,
 .customize-control-cropped_image .inner,
 .customize-control-site_icon .inner,
+.customize-control-site_logo.inner,
 .customize-control-header .inner,
 .customize-control-header .inner .dashicons {
 	line-height: 20px;
@@ -989,6 +998,8 @@ p.customize-section-description {
 .customize-control-cropped_image .default-button,
 .customize-control-site_icon .remove-button,
 .customize-control-site_icon .default-button,
+.customize-control-site_logo .remove-button,
+.customize-control-site_logo .default-button,
 .customize-control-header .remove {
 	float: right;
 	margin-left: 3px;
@@ -1000,6 +1011,7 @@ p.customize-section-description {
 .customize-control-background .upload-button,
 .customize-control-cropped_image .upload-button,
 .customize-control-site_icon .upload-button,
+.customize-control-site_logo .upload-button,
 .customize-control-header .new {
 	float: left;
 }

wp-admin/css/customize-controls.css

@@ -725,6 +725,7 @@ p.customize-section-description {
 .customize-control-background .current,
 .customize-control-cropped_image .current,
 .customize-control-site_icon .current,
+.customize-control-site_logo .current,
 .customize-control-header .current {
 	margin-bottom: 8px;
 }
@@ -766,6 +767,9 @@ p.customize-section-description {
 .customize-control-site_icon .remove-button,
 .customize-control-site_icon .default-button,
 .customize-control-site_icon .upload-button,
+.customize-control-site_logo .remove-button,
+.customize-control-site_logo .default-button,
+.customize-control-site_logo .upload-button,
 .customize-control-header button.new,
 .customize-control-header button.remove {
 	white-space: normal;
@@ -779,6 +783,7 @@ p.customize-section-description {
 .customize-control-background .current .container,
 .customize-control-cropped_image .current .container,
 .customize-control-site_icon .current .container,
+.customize-control-site_logo .current .container,
 .customize-control-header .current .container {
 	overflow: hidden;
 	-webkit-border-radius: 2px;
@@ -792,6 +797,7 @@ p.customize-section-description {
 .customize-control-background .current .container,
 .customize-control-cropped_image .current .container,
 .customize-control-site_icon .current .container,
+.customize-control-site_logo .current .container,
 .customize-control-image .current .container {
 	min-height: 40px;
 }
@@ -820,6 +826,7 @@ p.customize-section-description {
 .customize-control-background .inner,
 .customize-control-cropped_image .inner,
 .customize-control-site_icon .inner,
+.customize-control-site_logo .inner,
 .customize-control-header .inner {
 	display: none;
 	position: absolute;
@@ -835,6 +842,7 @@ p.customize-section-description {
 .customize-control-background .inner,
 .customize-control-cropped_image .inner,
 .customize-control-site_icon .inner,
+.customize-control-site_logo .inner,
 .customize-control-image .inner {
 	display: block;
 	min-height: 40px;
@@ -846,6 +854,7 @@ p.customize-section-description {
 .customize-control-background .inner,
 .customize-control-cropped_image .inner,
 .customize-control-site_icon .inner,
+.customize-control-site_logo.inner,
 .customize-control-header .inner,
 .customize-control-header .inner .dashicons {
 	line-height: 20px;
@@ -989,6 +998,8 @@ p.customize-section-description {
 .customize-control-cropped_image .default-button,
 .customize-control-site_icon .remove-button,
 .customize-control-site_icon .default-button,
+.customize-control-site_logo .remove-button,
+.customize-control-site_logo .default-button,
 .customize-control-header .remove {
 	float: left;
 	margin-right: 3px;
@@ -1000,6 +1011,7 @@ p.customize-section-description {
 .customize-control-background .upload-button,
 .customize-control-cropped_image .upload-button,
 .customize-control-site_icon .upload-button,
+.customize-control-site_logo .upload-button,
 .customize-control-header .new {
 	float: right;
 }

wp-admin/includes/admin.php

@@ -72,6 +72,9 @@ require_once(ABSPATH . 'wp-admin/includes/user.php');
 /** WordPress Site Icon API */
 require_once(ABSPATH . 'wp-admin/includes/class-wp-site-icon.php');
 
+/** WordPress Site Logo API */
+require_once(ABSPATH . 'wp-admin/includes/class-wp-site-logo.php');
+
 /** WordPress Update Administration API */
 require_once(ABSPATH . 'wp-admin/includes/update.php');
 

wp-admin/includes/class-wp-site-logo.php

@@ -0,0 +1,136 @@
+<?php
+/**
+ * Administration API: WP_Site_Logo class
+ *
+ * @package WordPress
+ * @subpackage Administration
+ * @since 4.5.0
+ */
+
+/**
+ * Core class used to implement site logo functionality.
+ *
+ * @since 4.5.0
+ */
+class WP_Site_Logo {
+
+	/**
+	 * Get current logo settings stored in theme mod.
+	 *
+	 * @since 4.5.0
+	 * @access public
+	 */
+	public function __construct() {
+		add_action( 'wp_head', array( $this, 'head_text_styles' ) );
+		add_action( 'delete_attachment', array( $this, 'delete_attachment_data' ) );
+		add_filter( 'image_size_names_choose', array( $this, 'media_manager_image_sizes' ) );
+	}
+
+	/**
+	 * Hide header text on front-end if necessary.
+	 *
+	 * @since 4.5.0
+	 * @access public
+	 */
+	public function head_text_styles() {
+		// Bail if our theme supports custom headers.
+		if ( current_theme_supports( 'custom-header' ) || get_theme_mod( 'site_logo_header_text', true ) ) {
+			return;
+		}
+
+		// Is Display Header Text unchecked? If so, we need to hide our header text.
+		?>
+		<!-- Site Logo: hide header text -->
+		<style type="text/css">
+			<?php echo sanitize_html_class( $this->header_text_classes() ); ?>  {
+				position: absolute;
+				clip: rect(1px, 1px, 1px, 1px);
+			}
+		</style>
+		<?php
+	}
+
+	/**
+	 * Reset the site logo if the current logo is deleted in the media manager.
+	 *
+	 * @since 4.5.0
+	 * @access public
+	 *
+	 * @param int $post_id
+	 */
+	public function delete_attachment_data( $post_id ) {
+		$site_logo_id = get_theme_mod( 'site_logo' );
+
+		if ( $site_logo_id && $site_logo_id == $post_id ) {
+			remove_theme_mod( 'site_logo' );
+		}
+	}
+
+	/**
+	 * Make custom image sizes available to the media manager.
+	 *
+	 * @since 4.5.0
+	 * @access public
+	 *
+	 * @param array $sizes Image sizes.
+	 * @return array All default and registered custom image sizes.
+	 */
+	public function media_manager_image_sizes( $sizes ) {
+
+		// Get an array of all registered image sizes.
+		$intermediate = get_intermediate_image_sizes();
+
+		// Have we got anything fun to work with?
+		if ( is_array( $intermediate ) && ! empty( $intermediate ) ) {
+			foreach ( $intermediate as $key => $size ) {
+
+				// If the size isn't already in the $sizes array, add it.
+				if ( ! array_key_exists( $size, $sizes ) ) {
+					$sizes[ $size ] = $size;
+				}
+			}
+		}
+
+		return $sizes;
+	}
+
+	/**
+	 * Get header text classes. If not defined in add_theme_support(), defaults from Underscores will be used.
+	 *
+	 * @since 4.5.0
+	 * @access protected
+	 *
+	 * @return string String of classes to hide
+	 */
+	protected function header_text_classes() {
+		$args = get_theme_support( 'site-logo' );
+
+		if ( isset( $args[0]['header-text'] ) ) {
+			// Use any classes defined in add_theme_support().
+			$classes = $args[0]['header-text'];
+		} else {
+			// Otherwise, use these defaults, which will work with any Underscores-based theme.
+			$classes = array(
+				'site-title',
+				'site-description',
+			);
+		}
+
+		// If we've got an array, reduce them to a string for output.
+		if ( is_array( $classes ) ) {
+			$classes = array_map( 'sanitize_html_class', $classes );
+			$classes = (string) '.' . implode( ', .', $classes );
+		} else {
+			$classes = (string) '.' . $classes;
+		}
+
+		return $classes;
+	}
+}
+
+/**
+ * WP_Site_Logo instance.
+ *
+ * @global WP_Site_Logo $wp_site_logo
+ */
+$GLOBALS['wp_site_logo'] = new WP_Site_Logo;

wp-admin/includes/template.php

@@ -1750,13 +1750,17 @@ function _media_states( $post ) {
 		$media_states[] = __( 'Site Icon' );
 	}
 
+	if ( $post->ID == get_theme_mod( 'site_logo' ) ) {
+		$media_states[] = __( 'Logo' );
+	}
+
 	/**
 	 * Filter the default media display states for items in the Media list table.
 	 *
 	 * @since 3.2.0
 	 *
 	 * @param array $media_states An array of media states. Default 'Header Image',
-	 *                            'Background Image', 'Site Icon'.
+	 *                            'Background Image', 'Site Icon', 'Logo'.
 	 */
 	$media_states = apply_filters( 'display_media_states', $media_states );
 

wp-admin/js/customize-controls.js

@@ -2302,6 +2302,43 @@
 		}
 	});
 
+	/**
+	 * A control for selecting Site Logos.
+	 *
+	 * @class
+	 * @augments wp.customize.MediaControl
+	 * @augments wp.customize.Control
+	 * @augments wp.customize.Class
+	 */
+	api.SiteLogoControl = api.MediaControl.extend({
+
+		/**
+		 * When the control's DOM structure is ready,
+		 * set up internal event bindings.
+		 */
+		ready: function() {
+			var control = this;
+
+			// Shortcut so that we don't have to use _.bind every time we add a callback.
+			_.bindAll( control, 'restoreDefault', 'removeFile', 'openFrame', 'select' );
+
+			// Bind events, with delegation to facilitate re-rendering.
+			control.container.on( 'click keydown', '.upload-button', control.openFrame );
+			control.container.on( 'click keydown', '.thumbnail-image img', control.openFrame );
+			control.container.on( 'click keydown', '.default-button', control.restoreDefault );
+			control.container.on( 'click keydown', '.remove-button', control.removeFile );
+
+			control.setting.bind( function( attachmentId ) {
+				wp.media.attachment( attachmentId ).fetch().done( function() {
+					wp.customize.previewer.send( 'site-logo-attachment-data', this.attributes );
+				} );
+
+				// Re-render whenever the control's setting changes.
+				control.renderContent();
+			} );
+		}
+	});
+
 	/**
 	 * @class
 	 * @augments wp.customize.Control
@@ -3208,6 +3245,7 @@
 		image:         api.ImageControl,
 		cropped_image: api.CroppedImageControl,
 		site_icon:     api.SiteIconControl,
+		site_logo:     api.SiteLogoControl,
 		header:        api.HeaderControl,
 		background:    api.BackgroundControl,
 		theme:         api.ThemeControl

wp-includes/class-wp-customize-manager.php

@@ -217,6 +217,7 @@ final class WP_Customize_Manager {
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' );
+		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-logo-control.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-theme-control.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-widget-area-customize-control.php' );
@@ -828,6 +829,9 @@ final class WP_Customize_Manager {
 			'activeSections' => array(),
 			'activeControls' => array(),
 			'nonce' => $this->get_nonces(),
+			'l10n' => array(
+				'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
+			),
 			'_dirty' => array_keys( $this->unsanitized_post_values() ),
 		);
 
@@ -1857,6 +1861,7 @@ final class WP_Customize_Manager {
 		$this->register_control_type( 'WP_Customize_Background_Image_Control' );
 		$this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
 		$this->register_control_type( 'WP_Customize_Site_Icon_Control' );
+		$this->register_control_type( 'WP_Customize_Site_Logo_Control' );
 		$this->register_control_type( 'WP_Customize_Theme_Control' );
 
 		/* Themes */
@@ -1932,6 +1937,23 @@ final class WP_Customize_Manager {
 			'section'    => 'title_tagline',
 		) );
 
+		// Add a setting to hide header text if the theme isn't supporting the feature itself.
+		// @todo
+		if ( ! current_theme_supports( 'custom-header' ) ) {
+			$this->add_setting( 'header_text', array(
+				'default'           => 1,
+				'sanitize_callback' => 'absint',
+				'transport'         => 'postMessage',
+			) );
+
+			$this->add_control( 'header_text', array(
+				'label'    => __( 'Display Site Title and Tagline' ),
+				'section'  => 'title_tagline',
+				'settings' => 'header_text',
+				'type'     => 'checkbox',
+			) );
+		}
+
 		$this->add_setting( 'site_icon', array(
 			'type'       => 'option',
 			'capability' => 'manage_options',
@@ -1951,6 +1973,26 @@ final class WP_Customize_Manager {
 			'width'       => 512,
 		) ) );
 
+		$this->add_setting( 'site_logo', array(
+			'theme_supports' => array( 'site-logo' ),
+			'transport'      => 'postMessage',
+		) );
+
+		$this->add_control( new WP_Customize_Site_Logo_Control( $this, 'site_logo', array(
+			'label'    => __( 'Logo' ),
+			'section'  => 'title_tagline',
+			'priority' => 0,
+		) ) );
+
+		if ( isset( $this->selective_refresh ) ) {
+			$this->selective_refresh->add_partial( 'site_logo', array(
+				'settings'            => array( 'site_logo' ),
+				'selector'            => '.site-logo-link',
+				'render_callback'     => array( $this, '_render_site_logo_partial' ),
+				'container_inclusive' => true,
+			) );
+		}
+
 		/* Colors */
 
 		$this->add_section( 'colors', array(
@@ -2180,6 +2222,26 @@ final class WP_Customize_Manager {
 
 		return $color;
 	}
+
+	/**
+	 * Callback for rendering the site logo, used in the site_logo partial.
+	 *
+	 * This method exists because the partial object and context data are passed
+	 * into a partial's render_callback so we cannot use get_the_site_logo() as
+	 * the render_callback directly since it expects a blog ID as the first
+	 * argument. When WP no longer supports PHP 5.3, this method can be removed
+	 * in favor of an anonymous function.
+	 *
+	 * @see WP_Customize_Manager::register_controls()
+	 *
+	 * @since 4.5.0
+	 * @access private
+	 *
+	 * @return string Site logo.
+	 */
+	public function _render_site_logo_partial() {
+		return get_the_site_logo();
+	}
 }
 
 /**

wp-includes/customize/class-wp-customize-site-icon-control.php

@@ -41,4 +41,71 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
 		parent::__construct( $manager, $id, $args );
 		add_action( 'customize_controls_print_styles', 'wp_site_icon', 99 );
 	}
+
+	/**
+	 * Render a JS template for the content of the site icon control.
+	 *
+	 * @since 4.5.0
+	 */
+	public function content_template() {
+		?>
+		<label for="{{ data.settings['default'] }}-button">
+			<# if ( data.label ) { #>
+				<span class="customize-control-title">{{ data.label }}</span>
+			<# } #>
+			<# if ( data.description ) { #>
+				<span class="description customize-control-description">{{{ data.description }}}</span>
+			<# } #>
+		</label>
+
+		<# if ( data.attachment && data.attachment.id ) { #>
+		<div class="current">
+			<div class="container">
+				<div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }} site-icon-preview">
+					<strong><?php _e( 'As a browser icon' ); ?></strong>
+					<div class="favicon-preview">
+						<img src="images/browser.png" class="browser-preview" width="182" height="" alt="" />
+
+						<div class="favicon">
+							<img id="preview-favicon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
+						</div>
+						<span class="browser-title"><?php bloginfo( 'name' ); ?></span>
+					</div>
+
+					<strong><?php _e( 'As an app icon' ); ?></strong>
+					<p class="app-icon-preview">
+						<img id="preview-app-icon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
+					</p>
+				</div>
+			</div>
+		</div>
+		<div class="actions">
+			<# if ( data.canUpload ) { #>
+				<button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
+				<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
+				<div style="clear:both"></div>
+			<# } #>
+		</div>
+		<# } else { #>
+		<div class="current">
+			<div class="container">
+				<div class="placeholder">
+					<div class="inner">
+						<span><?php echo $this->button_labels['placeholder']; ?></span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="actions">
+			<# if ( data.defaultAttachment ) { #>
+				<button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
+			<# } #>
+			<# if ( data.canUpload ) { #>
+				<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
+			<# } #>
+			<div style="clear:both"></div>
+		</div>
+		<# } #>
+		<?php
+	}
 }

wp-includes/customize/class-wp-customize-site-logo-control.php

@@ -0,0 +1,53 @@
+<?php
+/**
+ * Customize API: WP_Customize_Site_Logo_Control class
+ *
+ * @package WordPress
+ * @subpackage Customize
+ * @since 4.5.0
+ */
+
+/**
+ * Customize Site Logo control class.
+ *
+ * Used only for custom functionality in JavaScript.
+ *
+ * @since 4.5.0
+ *
+ * @see WP_Customize_Image_Control
+ */
+class WP_Customize_Site_Logo_Control extends WP_Customize_Image_Control {
+
+	/**
+	 * Control type.
+	 *
+	 * @since 4.5.0
+	 * @access public
+	 * @var string
+	 */
+	public $type = 'site_logo';
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 4.5.0
+	 * @access public
+	 *
+	 * @param WP_Customize_Manager $manager Customizer bootstrap instance.
+	 * @param string               $id      Control ID.
+	 * @param array                $args    Optional. Arguments to override class property defaults.
+	 */
+	public function __construct( $manager, $id, $args = array() ) {
+		parent::__construct( $manager, $id, $args );
+
+		$this->button_labels = array(
+			'select'       => __( 'Select logo' ),
+			'change'       => __( 'Change logo' ),
+			'remove'       => __( 'Remove' ),
+			'default'      => __( 'Default' ),
+			'placeholder'  => __( 'No logo selected' ),
+			'frame_title'  => __( 'Select logo' ),
+			'frame_button' => __( 'Choose logo' ),
+		);
+	}
+}

wp-includes/general-template.php

@@ -831,6 +831,93 @@ function has_site_icon( $blog_id = 0 ) {
 	return (bool) get_site_icon_url( 512, '', $blog_id );
 }
 
+/**
+ * Whether the site has a Site Logo.
+ *
+ * @since 4.5.0
+ *
+ * @param int $blog_id Optional. ID of the blog in question. Default current blog.
+ * @return bool Whether the site has a site logo or not.
+ */
+function has_site_logo( $blog_id = 0 ) {
+	if ( is_multisite() && (int) $blog_id !== get_current_blog_id() ) {
+		switch_to_blog( $blog_id );
+	}
+
+	$site_logo_id = get_theme_mod( 'site_logo' );
+
+	if ( is_multisite() && ms_is_switched() ) {
+		restore_current_blog();
+	}
+
+	return (bool) $site_logo_id;
+}
+
+/**
+ * Returns a Site Logo, linked to home.
+ *
+ * @since 4.5.0
+ *
+ * @param int $blog_id Optional. ID of the blog in question. Default current blog.
+ * @return string Site logo markup.
+ */
+function get_the_site_logo( $blog_id = 0 ) {
+	$html = '';
+
+	if ( is_multisite() && (int) $blog_id !== get_current_blog_id() ) {
+		switch_to_blog( $blog_id );
+	}
+
+	$site_logo_id = get_theme_mod( 'site_logo' );
+
+	if ( is_multisite() && ms_is_switched() ) {
+		restore_current_blog();
+	}
+	$size = get_theme_support( 'site-logo' );
+	$size = $size[0]['size'];
+
+	// We have a logo. Logo is go.
+	if ( $site_logo_id ) {
+		$html = sprintf( '<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">%2$s</a>',
+			esc_url( home_url( '/' ) ),
+			wp_get_attachment_image( $site_logo_id, $size, false, array(
+				'class'     => "site-logo attachment-$size",
+				'data-size' => $size,
+				'itemprop'  => 'logo',
+			) )
+		);
+	}
+
+	// If no logo is set but we're in the Customizer, leave a placeholder (needed for the live preview).
+	elseif ( is_customize_preview() ) {
+		$html = sprintf( '<a href="%1$s" class="site-logo-link" style="display:none;"><img class="site-logo" data-size="%2$s" /></a>',
+			esc_url( home_url( '/' ) ),
+			esc_attr( $size )
+		);
+	}
+
+	/**
+	 * Filter the Site Logo output.
+	 *
+	 * @since 4.5.0
+	 *
+	 * @param string $html Site Logo HTML output.
+	 * @param string $size Size specified in add_theme_support declaration, or 'thumbnail' default.
+	 */
+	return apply_filters( 'get_the_site_logo', $html, $size );
+}
+
+/**
+ * Displays a Site Logo, linked to home.
+ *
+ * @since 4.5.0
+ *
+ * @param int $blog_id Optional. ID of the blog in question. Default current blog.
+ */
+function the_site_logo( $blog_id = 0 ) {
+	echo get_the_site_logo( $blog_id );
+}
+
 /**
  * Returns document title for the current page.
  *

wp-includes/js/customize-preview.js

@@ -223,6 +223,62 @@
 			});
 		});
 
+		/**
+		 * Site Logo
+		 *
+		 * The site logo setting only contains the attachment ID. To avoid having to send an AJAX request to get more
+		 * data, we send a separate message with the attachment data we get from the Customizer's media modal.
+		 * Therefore first callback handles only the event of a new logo being selected.
+		 *
+		 * We don't need any information about a removed logo, so the second callback only handles that.
+		 *
+		 * @since 4.5.0
+		 */
+		api.preview.bind( 'site-logo-attachment-data', function( attachment ) {
+			var $logo  = $( '.site-logo' ),
+				size   = $logo.data( 'size' ),
+				srcset = [];
+
+			// If the source was smaller than the size required by the theme, give the biggest we've got.
+			if ( ! attachment.sizes[ size ] ) {
+				size = 'full';
+			}
+
+			_.each( attachment.sizes, function( size ) {
+				srcset.push( size.url + ' ' + size.width + 'w' );
+			} );
+
+			$logo.attr( {
+				height: attachment.sizes[ size ].height,
+				width:  attachment.sizes[ size ].width,
+				src:    attachment.sizes[ size ].url,
+				srcset: srcset
+			} );
+
+			$( '.site-logo-link' ).show();
+			$( 'body' ).addClass( 'wp-site-logo' );
+		} );
+
+		api( 'site_logo', function( setting ) {
+			setting.bind( function( newValue ) {
+				if ( ! newValue ) {
+					$( '.site-logo-link' ).hide();
+					$( 'body' ).removeClass( 'wp-site-logo' );
+				}
+			} );
+
+			// Focus on the control when the logo is clicked, if there is no site_logo partial.
+			if ( ! api.selectiveRefresh || ! api.selectiveRefresh.partial.has( 'site_logo' ) ) {
+				$( document.body ).on( 'click', '.site-logo-link', function( e ) {
+					if ( ! e.shiftKey ) {
+						return;
+					}
+					api.preview.send( 'focus-control-for-setting', 'site_logo' );
+				} );
+				$( '.site-logo-link' ).attr( 'title', api.settings.l10n.shiftClickToEdit );
+			}
+		} );
+
 		api.trigger( 'preview-ready' );
 	});
 

wp-includes/js/customize-preview.min.js

@@ -1 +1 @@
-!function(a,b){var c,d=wp.customize;c=function(a,b,c){var d;return function(){var e=arguments;c=c||this,clearTimeout(d),d=setTimeout(function(){d=null,a.apply(c,e)},b)}},d.Preview=d.Messenger.extend({initialize:function(a,e){var f=this;d.Messenger.prototype.initialize.call(this,a,e),this.body=b(document.body),this.body.on("click.preview","a",function(a){var c,d;c=b(this),d="#"===c.attr("href").substr(0,1),a.preventDefault(),d&&"#"!==c.attr("href")&&b(c.attr("href")).each(function(){this.scrollIntoView()}),a.shiftKey||d||(f.send("scroll",0),f.send("url",c.prop("href")))}),this.body.on("submit.preview","form",function(a){a.preventDefault()}),this.window=b(window),this.window.on("scroll.preview",c(function(){f.send("scroll",f.window.scrollTop())},200)),this.bind("scroll",function(a){f.window.scrollTop(a)})}}),b(function(){var a,c;d.settings=window._wpCustomizeSettings,d.settings&&(d.preview=new d.Preview({url:window.location.href,channel:d.settings.channel}),c=function(a,b,c){var e=d(a);e?e.set(b):(c=c||!1,e=d.create(a,b,{id:a}),c&&(e._dirty=!0))},d.preview.bind("settings",function(a){b.each(a,c)}),d.preview.trigger("settings",d.settings.values),b.each(d.settings._dirty,function(a,b){var c=d(b);c&&(c._dirty=!0)}),d.preview.bind("setting",function(a){var b=!0;c.apply(null,a.concat(b))}),d.preview.bind("sync",function(a){b.each(a,function(a,b){d.preview.trigger(a,b)}),d.preview.send("synced")}),d.preview.bind("active",function(){d.preview.send("nonce",d.settings.nonce),d.preview.send("documentTitle",document.title)}),d.preview.bind("saved",function(a){d.trigger("saved",a)}),d.bind("saved",function(){d.each(function(a){a._dirty=!1})}),d.preview.bind("nonce-refresh",function(a){b.extend(d.settings.nonce,a)}),d.preview.send("ready",{activePanels:d.settings.activePanels,activeSections:d.settings.activeSections,activeControls:d.settings.activeControls}),d.preview.bind("loading-initiated",function(){b("body").addClass("wp-customizer-unloading")}),d.preview.bind("loading-failed",function(){b("body").removeClass("wp-customizer-unloading")}),a=b.map(["color","image","position_x","repeat","attachment"],function(a){return"background_"+a}),d.when.apply(d,a).done(function(a,c,d,e,f){var g,h=b(document.body),i=b("head"),j=b("#custom-background-css");g=function(){var g="";h.toggleClass("custom-background",!(!a()&&!c())),a()&&(g+="background-color: "+a()+";"),c()&&(g+='background-image: url("'+c()+'");',g+="background-position: top "+d()+";",g+="background-repeat: "+e()+";",g+="background-attachment: "+f()+";"),j.remove(),j=b('<style type="text/css" id="custom-background-css">body.custom-background { '+g+" }</style>").appendTo(i)},b.each(arguments,function(){this.bind(g)})}),d.trigger("preview-ready"))})}(wp,jQuery);
+!function(a,b){var c,d=wp.customize;c=function(a,b,c){var d;return function(){var e=arguments;c=c||this,clearTimeout(d),d=setTimeout(function(){d=null,a.apply(c,e)},b)}},d.Preview=d.Messenger.extend({initialize:function(a,e){var f=this;d.Messenger.prototype.initialize.call(this,a,e),this.body=b(document.body),this.body.on("click.preview","a",function(a){var c,d;c=b(this),d="#"===c.attr("href").substr(0,1),a.preventDefault(),d&&"#"!==c.attr("href")&&b(c.attr("href")).each(function(){this.scrollIntoView()}),a.shiftKey||d||(f.send("scroll",0),f.send("url",c.prop("href")))}),this.body.on("submit.preview","form",function(a){a.preventDefault()}),this.window=b(window),this.window.on("scroll.preview",c(function(){f.send("scroll",f.window.scrollTop())},200)),this.bind("scroll",function(a){f.window.scrollTop(a)})}}),b(function(){var a,c;d.settings=window._wpCustomizeSettings,d.settings&&(d.preview=new d.Preview({url:window.location.href,channel:d.settings.channel}),c=function(a,b,c){var e=d(a);e?e.set(b):(c=c||!1,e=d.create(a,b,{id:a}),c&&(e._dirty=!0))},d.preview.bind("settings",function(a){b.each(a,c)}),d.preview.trigger("settings",d.settings.values),b.each(d.settings._dirty,function(a,b){var c=d(b);c&&(c._dirty=!0)}),d.preview.bind("setting",function(a){var b=!0;c.apply(null,a.concat(b))}),d.preview.bind("sync",function(a){b.each(a,function(a,b){d.preview.trigger(a,b)}),d.preview.send("synced")}),d.preview.bind("active",function(){d.preview.send("nonce",d.settings.nonce),d.preview.send("documentTitle",document.title)}),d.preview.bind("saved",function(a){d.trigger("saved",a)}),d.bind("saved",function(){d.each(function(a){a._dirty=!1})}),d.preview.bind("nonce-refresh",function(a){b.extend(d.settings.nonce,a)}),d.preview.send("ready",{activePanels:d.settings.activePanels,activeSections:d.settings.activeSections,activeControls:d.settings.activeControls}),d.preview.bind("loading-initiated",function(){b("body").addClass("wp-customizer-unloading")}),d.preview.bind("loading-failed",function(){b("body").removeClass("wp-customizer-unloading")}),a=b.map(["color","image","position_x","repeat","attachment"],function(a){return"background_"+a}),d.when.apply(d,a).done(function(a,c,d,e,f){var g,h=b(document.body),i=b("head"),j=b("#custom-background-css");g=function(){var g="";h.toggleClass("custom-background",!(!a()&&!c())),a()&&(g+="background-color: "+a()+";"),c()&&(g+='background-image: url("'+c()+'");',g+="background-position: top "+d()+";",g+="background-repeat: "+e()+";",g+="background-attachment: "+f()+";"),j.remove(),j=b('<style type="text/css" id="custom-background-css">body.custom-background { '+g+" }</style>").appendTo(i)},b.each(arguments,function(){this.bind(g)})}),d.preview.bind("site-logo-attachment-data",function(a){var c=b(".site-logo"),d=c.data("size"),e=[];a.sizes[d]||(d="full"),_.each(a.sizes,function(a){e.push(a.url+" "+a.width+"w")}),c.attr({height:a.sizes[d].height,width:a.sizes[d].width,src:a.sizes[d].url,srcset:e}),b(".site-logo-link").show(),b("body").addClass("wp-site-logo")}),d("site_logo",function(a){a.bind(function(a){a||(b(".site-logo-link").hide(),b("body").removeClass("wp-site-logo"))}),d.selectiveRefresh&&d.selectiveRefresh.partial.has("site_logo")||(b(document.body).on("click",".site-logo-link",function(a){a.shiftKey&&d.preview.send("focus-control-for-setting","site_logo")}),b(".site-logo-link").attr("title",d.settings.l10n.shiftClickToEdit))}),d.trigger("preview-ready"))})}(wp,jQuery);

wp-includes/post-template.php

@@ -706,6 +706,10 @@ function get_body_class( $class = '' ) {
 	if ( get_background_color() !== get_theme_support( 'custom-background', 'default-color' ) || get_background_image() )
 		$classes[] = 'custom-background';
 
+	if ( has_site_logo() ) {
+		$classes[] = 'wp-site-logo';
+	}
+
 	$page = $wp_query->get( 'page' );
 
 	if ( ! $page || $page < 2 )

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.5-alpha-36697';
+$wp_version = '4.5-alpha-36698';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.