mirror
/
understrap
mirror of https://github.com/understrap/understrap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1866 from IanDelMar/customizer 

Fix customizer preview
This commit is contained in:
Brian Coords 2022-09-08 11:45:08 -07:00 committed by GitHub
parent f6b0cb9cb2 8c63699333
commit 364bf4e515
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 93 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
inc/customizer.php
View File

@ -10,22 +10,48 @@ defined( 'ABSPATH' ) || exit;
if ( ! function_exists( 'understrap_customize_register' ) ) {
/**
* Register basic support (site title, description, header text color) for the Theme Customizer.
* Register basic support (site title, header text color) for the Theme Customizer.
*
* @param WP_Customize_Manager $wp_customize Customizer reference.
*/
function understrap_customize_register( $wp_customize ) {
$settings = array( 'blogname', 'blogdescription', 'header_textcolor' );
$settings = array( 'blogname', 'header_textcolor' );
foreach ( $settings as $setting ) {
$get_setting = $wp_customize->get_setting( $setting );
if ( $get_setting instanceof WP_Customize_Setting ) {
$get_setting->transport = 'postMessage';
}
}
// Override default partial for custom logo.
$wp_customize->selective_refresh->add_partial(
'custom_logo',
array(
'settings' => array( 'custom_logo' ),
'selector' => '.custom-logo-link',
'render_callback' => 'understrap_customize_partial_custom_logo',
'container_inclusive' => false,
)
);
}
}
add_action( 'customize_register', 'understrap_customize_register' );
if ( ! function_exists( 'understrap_customize_partial_custom_logo' ) ) {
/**
* Callback for rendering the custom logo, used in the custom_logo partial.
*
* @return string The custom logo markup or the site title.
*/
function understrap_customize_partial_custom_logo() {
if ( has_custom_logo() ) {
return get_custom_logo();
} else {
return get_bloginfo( 'name' );
}
}
}
if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
/**
* Register individual settings through customizer's API.
@ -191,6 +217,10 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
)
);
$understrap_site_info = $wp_customize->get_setting( 'understrap_site_info_override' );
if ( $understrap_site_info instanceof WP_Customize_Setting ) {
$understrap_site_info->transport = 'postMessage';
}
}
} // End of if function_exists( 'understrap_theme_customize_register' ).
add_action( 'customize_register', 'understrap_theme_customize_register' );
@ -231,11 +261,17 @@ if ( ! function_exists( 'understrap_customize_preview_js' ) ) {
* Setup JS integration for live previewing.
*/
function understrap_customize_preview_js() {
$file = '/js/customizer.js';
$version = filemtime( get_template_directory() . $file );
if ( false === $version ) {
$version = time();
}
wp_enqueue_script(
'understrap_customizer',
get_template_directory_uri() . '/js/customizer.js',
get_template_directory_uri() . $file,
array( 'customize-preview' ),
'20130508',
(string) $version,
true
);
}
@ -250,11 +286,17 @@ if ( ! function_exists( 'understrap_customize_controls_js' ) ) {
* Setup JS integration for live previewing.
*/
function understrap_customize_controls_js() {
$file = '/js/customizer-controls.js';
$version = filemtime( get_template_directory() . $file );
if ( false === $version ) {
$version = time();
}
wp_enqueue_script(
'understrap_customizer',
get_template_directory_uri() . '/js/customizer-controls.js',
get_template_directory_uri() . $file,
array( 'customize-preview' ),
'20130508',
(string) $version,
true
);
}

37
js/customizer-controls.js
View File

@ -5,22 +5,25 @@
* when users open or close the front page sections section.
*/
(function() {
wp.customize.bind( 'ready', function() {
( function () {
wp.customize.bind( 'ready', function () {
// Only show the navbar type setting when running Bootstrap 5.
wp.customize( 'understrap_bootstrap_version', function( setting ) {
wp.customize.control( 'understrap_navbar_type', function( control ) {
var visibility = function() {
if ( 'bootstrap5' === setting.get() ) {
control.container.slideDown( 180 );
} else {
control.container.slideUp( 180 );
}
};
wp.customize( 'understrap_bootstrap_version', function ( setting ) {
wp.customize.control(
'understrap_navbar_type',
function ( control ) {
const visibility = function () {
if ( 'bootstrap5' === setting.get() ) {
control.container.slideDown( 180 );
} else {
control.container.slideUp( 180 );
}
};
visibility();
setting.bind( visibility );
});
});
});
})();
visibility();
setting.bind( visibility );
}
);
} );
} );
} )();

50
js/customizer.js
View File

@ -1,42 +1,42 @@
/**
* File customizcustomizer.js.
* File: customizer.js.
*
* Theme Customizer enhancements for a better user experience.
*
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
*/
( function( $ ) {
( function () {
let anchor = document.querySelector( '.navbar-brand' );
if ( 'H1' === anchor.tagName ) {
anchor = anchor.firstChild;
}
// Site title and description.
wp.customize( 'blogname', function( value ) {
value.bind( function( to ) {
$( '.site-title a' ).text( to );
} );
} );
wp.customize( 'blogdescription', function( value ) {
value.bind( function( to ) {
$( '.site-description' ).text( to );
// Site title.
wp.customize( 'blogname', function ( value ) {
value.bind( function ( to ) {
anchor.textContent = to;
} );
} );
// Header text color.
wp.customize( 'header_textcolor', function( value ) {
value.bind( function( to ) {
wp.customize( 'header_textcolor', function ( value ) {
value.bind( function ( to ) {
if ( 'blank' === to ) {
$( '.site-title a, .site-description' ).css( {
'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
anchor.style.clip = 'rect(1px, 1px, 1px, 1px)';
anchor.style.position = 'absolute';
} else {
$( '.site-title a, .site-description' ).css( {
'clip': 'auto',
'position': 'relative'
} );
$( '.site-title a, .site-description' ).css( {
'color': to
} );
anchor.style.clip = 'auto';
anchor.style.position = 'relative';
anchor.style.color = to;
}
} );
} );
} )( jQuery );
// Site info.
wp.customize( 'understrap_site_info_override', function ( value ) {
value.bind( function ( to ) {
document.querySelector( '.site-info' ).innerHTML = to;
} );
} );
} )();