vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-04 06:37:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customize: Improve custom background properties UI.

Browse Source 
Introduces new control for managing the background position. Adds control for setting the `background-size`.

Props cdog, celloexpressions, grapplerulrich, MikeHansenMe, FolioVision, afercia, helen, melchoyce, karmatosed, westonruter, Kelderic, sebastian.pisula.
Fixes #22058.


git-svn-id: https://develop.svn.wordpress.org/trunk@38948 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2016-10-26 06:51:11 +00:00
parent 84d9dcb1e6
commit 16bfeb6608
11 changed files with 660 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/customize/class-wp-customize-background-image-control.php
+2
View File
@@ -40,7 +40,9 @@ class WP_Customize_Background_Image_Control extends WP_Customize_Image_Control {
public function enqueue() {
parent::enqueue();
$custom_background = get_theme_support( 'custom-background' );
wp_localize_script( 'customize-controls', '_wpCustomizeBackground', array(
'defaults' => ! empty( $custom_background[0] ) ? $custom_background[0] : array(),
'nonces' => array(
'add' => wp_create_nonce( 'background-add' ),
),
src/wp-includes/customize/class-wp-customize-background-position-control.php
+87
View File
@@ -0,0 +1,87 @@
<?php
/**
* Customize API: WP_Customize_Background_Position_Control class
*
* @package WordPress
* @subpackage Customize
* @since 4.7.0
*/
/**
* Customize Background Position Control class.
*
* @since 4.7.0
*
* @see WP_Customize_Control
*/
class WP_Customize_Background_Position_Control extends WP_Customize_Control {
/**
* Type.
*
* @since 4.7.0
* @access public
* @var string
*/
public $type = 'background_position';
/**
* Don't render the control content from PHP, as it's rendered via JS on load.
*
* @since 4.7.0
* @access public
*/
public function render_content() {}
/**
* Render a JS template for the content of the position control.
*
* @since 4.7.0
* @access public
*/
public function content_template() {
$options = array(
array(
'left top' => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ),
'right top' => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
),
array(
'left center' => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ),
'right center' => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
),
array(
'left bottom' => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ),
'right bottom' => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
),
);
?>
<# if ( data.label ) { #>
<span class="customize-control-title">{{{ data.label }}}</span>
<# } #>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<div class="customize-control-content">
<fieldset>
<legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
<div class="background-position-control">
<?php foreach ( $options as $group ) : ?>
<div class="button-group">
<?php foreach ( $group as $value => $input ) : ?>
<label>
<input class="screen-reader-text" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>">
<span class="button display-options position"><span class="<?php echo esc_attr( $input['icon'] ); ?>" aria-hidden="true"></span></span>
<span class="screen-reader-text"><?php echo $input['label']; ?></span>
</label>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</fieldset>
</div>
<?php
}
}