WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/26/2016 06:51:11 AM (9 years ago)
Author:
westonruter
Message:

Customize: Improve custom background properties UI.

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.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/custom-background.php

    r38719 r38948  
    134134        }
    135135
    136         if ( isset($_POST['background-repeat']) ) {
    137             check_admin_referer('custom-background');
    138             if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) )
    139                 $repeat = $_POST['background-repeat'];
    140             else
     136        if ( isset( $_POST['background-preset'] ) ) {
     137            check_admin_referer( 'custom-background' );
     138
     139            if ( in_array( $_POST['background-preset'], array( 'default', 'fill', 'fit', 'repeat', 'custom' ), true ) ) {
     140                $preset = $_POST['background-preset'];
     141            } else {
     142                $preset = 'default';
     143            }
     144
     145            set_theme_mod( 'background_preset', $preset );
     146        }
     147
     148        if ( isset( $_POST['background-position'] ) ) {
     149            check_admin_referer( 'custom-background' );
     150
     151            $position = explode( ' ', $_POST['background-position'] );
     152
     153            if ( in_array( $position[0], array( 'left', 'center', 'right' ), true ) ) {
     154                $position_x = $position[0];
     155            } else {
     156                $position_x = 'left';
     157            }
     158
     159            if ( in_array( $position[1], array( 'top', 'center', 'bottom' ), true ) ) {
     160                $position_y = $position[1];
     161            } else {
     162                $position_y = 'top';
     163            }
     164
     165            set_theme_mod( 'background_position_x', $position_x );
     166            set_theme_mod( 'background_position_y', $position_y );
     167        }
     168
     169        if ( isset( $_POST['background-size'] ) ) {
     170            check_admin_referer( 'custom-background' );
     171
     172            if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ), true ) ) {
     173                $size = $_POST['background-size'];
     174            } else {
     175                $size = 'auto';
     176            }
     177
     178            set_theme_mod( 'background_size', $size );
     179        }
     180
     181        if ( isset( $_POST['background-repeat'] ) ) {
     182            check_admin_referer( 'custom-background' );
     183
     184            $repeat = $_POST['background-repeat'];
     185
     186            if ( 'no-repeat' !== $repeat ) {
    141187                $repeat = 'repeat';
    142             set_theme_mod('background_repeat', $repeat);
    143         }
    144 
    145         if ( isset($_POST['background-position-x']) ) {
    146             check_admin_referer('custom-background');
    147             if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
    148                 $position = $_POST['background-position-x'];
    149             else
    150                 $position = 'left';
    151             set_theme_mod('background_position_x', $position);
    152         }
    153 
    154         if ( isset($_POST['background-attachment']) ) {
    155             check_admin_referer('custom-background');
    156             if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) )
    157                 $attachment = $_POST['background-attachment'];
    158             else
    159                 $attachment = 'fixed';
    160             set_theme_mod('background_attachment', $attachment);
     188            }
     189
     190            set_theme_mod( 'background_repeat', $repeat );
     191        }
     192
     193        if ( isset( $_POST['background-attachment'] ) ) {
     194            check_admin_referer( 'custom-background' );
     195
     196            $attachment = $_POST['background-attachment'];
     197
     198            if ( 'fixed' !== $attachment ) {
     199                $attachment = 'scroll';
     200            }
     201
     202            set_theme_mod( 'background_attachment', $attachment );
    161203        }
    162204
    … …  
    220262        if ( $background_image_thumb ) {
    221263            $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) );
     264            $background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     265            $background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
     266            $background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
     267            $background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
     268            $background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    222269
    223270            // Background-image URL must be single quote, see below.
    224             $background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');'
    225                 . ' background-repeat: ' . get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) . ';'
    226                 . ' background-position: top ' . get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     271            $background_styles .= " background-image: url('$background_image_thumb');"
     272                . " background-size: $background_size;"
     273                . " background-position: $background_position_x $background_position_y;"
     274                . " background-repeat: $background_repeat;"
     275                . " background-attachment: $background_attachment;";
    227276        }
    228277    ?>
    … …  
    288337</table>
    289338
    290 <h3><?php _e('Display Options') ?></h3>
     339<h3><?php _e( 'Display Options' ); ?></h3>
    291340<form method="post">
    292341<table class="form-table">
    293342<tbody>
    294343<?php if ( get_background_image() ) : ?>
    295 <tr>
    296 <th scope="row"><?php _e( 'Position' ); ?></th>
    297 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
    298 <label>
    299 <input name="background-position-x" type="radio" value="left"<?php checked( 'left', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
    300 <?php _e('Left') ?>
    301 </label>
    302 <label>
    303 <input name="background-position-x" type="radio" value="center"<?php checked( 'center', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
    304 <?php _e('Center') ?>
    305 </label>
    306 <label>
    307 <input name="background-position-x" type="radio" value="right"<?php checked( 'right', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
    308 <?php _e('Right') ?>
    309 </label>
     344<input name="background-preset" type="hidden" value="custom">
     345
     346<?php
     347$background_position = sprintf(
     348    '%s %s',
     349    get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ),
     350    get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) )
     351);
     352
     353$background_position_options = array(
     354    array(
     355        'left top'   => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     356        'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ),
     357        'right top'  => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     358    ),
     359    array(
     360        'left center'   => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     361        'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ),
     362        'right center'  => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     363    ),
     364    array(
     365        'left bottom'   => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     366        'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ),
     367        'right bottom'  => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     368    ),
     369);
     370?>
     371<tr>
     372<th scope="row"><?php _e( 'Image Position' ); ?></th>
     373<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
     374<div class="background-position-control">
     375<?php foreach ( $background_position_options as $group ) : ?>
     376    <div class="button-group">
     377    <?php foreach ( $group as $value => $input ) : ?>
     378        <label>
     379            <input class="screen-reader-text" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>"<?php checked( $value, $background_position ); ?>>
     380            <span class="button display-options position"><span class="<?php echo esc_attr( $input['icon'] ); ?>" aria-hidden="true"></span></span>
     381            <span class="screen-reader-text"><?php echo $input['label']; ?></span>
     382        </label>
     383    <?php endforeach; ?>
     384    </div>
     385<?php endforeach; ?>
     386</div>
    310387</fieldset></td>
    311388</tr>
    312389
    313390<tr>
    314 <th scope="row"><?php _e( 'Repeat' ); ?></th>
    315 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend>
    316 <label><input type="radio" name="background-repeat" value="no-repeat"<?php checked( 'no-repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('No Repeat'); ?></label>
    317     <label><input type="radio" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile'); ?></label>
    318     <label><input type="radio" name="background-repeat" value="repeat-x"<?php checked( 'repeat-x', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Horizontally'); ?></label>
    319     <label><input type="radio" name="background-repeat" value="repeat-y"<?php checked( 'repeat-y', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Vertically'); ?></label>
     391<th scope="row"><label for="background-size"><?php _e( 'Image Size' ); ?></label></th>
     392<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Size' ); ?></span></legend>
     393<select id="background-size" name="background-size">
     394<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option>
     395<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option>
     396<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option>
     397</select>
    320398</fieldset></td>
    321399</tr>
    322400
    323401<tr>
    324 <th scope="row"><?php _ex( 'Attachment', 'Background Attachment' ); ?></th>
    325 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend>
    326 <label>
    327 <input name="background-attachment" type="radio" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> />
    328 <?php _e( 'Scroll' ); ?>
    329 </label>
    330 <label>
    331 <input name="background-attachment" type="radio" value="fixed" <?php checked( 'fixed', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> />
    332 <?php _e( 'Fixed' ); ?>
    333 </label>
     402<th scope="row"><?php _ex( 'Repeat', 'Background Repeat' ); ?></th>
     403<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Repeat', 'Background Repeat' ); ?></span></legend>
     404<input name="background-repeat" type="hidden" value="no-repeat">
     405<label><input type="checkbox" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?>> <?php _e( 'Repeat Background Image' ); ?></label>
     406</fieldset></td>
     407</tr>
     408
     409<tr>
     410<th scope="row"><?php _ex( 'Scroll', 'Background Scroll' ); ?></th>
     411<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Scroll', 'Background Scroll' ); ?></span></legend>
     412<input name="background-attachment" type="hidden" value="fixed">
     413<label><input name="background-attachment" type="checkbox" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?>> <?php _e( 'Scroll with Page' ); ?></label>
    334414</fieldset></td>
    335415</tr>
    … …  
    343423    $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
    344424?>
    345 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> />
     425<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?>>
    346426</fieldset></td>
    347427</tr>
Note: See TracChangeset for help on using the changeset viewer.