WordPress.org

Make WordPress Core

Ticket #38164: 38164.diff

File 38164.diff, 8.4 KB (added by celloexpressions, 3 years ago)

First pass, with full menus integration.

  • src/wp-admin/css/customize-controls.css

     
    629629        float: left;
    630630}
    631631
     632#available-menu-items .accordion-section-content .new-content-item,
     633.customize-control-dropdown-pages .new-content-item {
     634        width: -webkit-calc(100% - 30px);
     635        width: calc(100% - 30px);
     636        padding: 8px 15px;
     637        position: absolute;
     638        bottom: 0;
     639        z-index: 10;
     640        background: #eee;
     641        display: -webkit-box;
     642        display: -moz-box;
     643        display: -ms-flexbox;
     644        display: -webkit-flex;
     645        display: flex;
     646}
     647
     648.customize-control-dropdown-pages .new-content-item {
     649        width: 100%;
     650        padding: 8px 0;
     651        position: relative;
     652}
     653
     654#available-menu-items .new-content-item .create-item-input,
     655.customize-control-dropdown-pages .new-content-item .create-item-input {
     656        -webkit-box-flex: 10;
     657        -webkit-flex-grow: 10;
     658        -moz-box-flex: 10;
     659        -ms-flex-positive: 10;
     660        -ms-flex: 10;
     661        flex-grow: 10;
     662}
     663
     664#available-menu-items .new-content-item .add-content,
     665.customize-control-dropdown-pages .new-content-item .add-content {
     666        margin: 2px 0 2px 6px;
     667        -webkit-box-flex: 10;
     668        -webkit-flex-grow: 10;
     669        -moz-box-flex: 10;
     670        -ms-flex-positive: 10;
     671        -ms-flex: 10;
     672        flex-grow: 1;
     673}
     674
    632675#customize-preview iframe {
    633676        width: 100%;
    634677        height: 100%;
  • src/wp-admin/css/customize-nav-menus.css

     
    567567        padding: 0 15px 15px 15px;
    568568}
    569569
    570 #available-menu-items .accordion-section-content .new-content-item {
    571         width: -webkit-calc(100% - 30px);
    572         width: calc(100% - 30px);
    573         padding: 8px 15px;
    574         position: absolute;
    575         bottom: 0;
    576         z-index: 10;
    577         background: #eee;
    578         display: -webkit-box;
    579         display: -moz-box;
    580         display: -ms-flexbox;
    581         display: -webkit-flex;
    582         display: flex;
    583 }
    584 
    585 #available-menu-items .new-content-item .create-item-input {
    586         -webkit-box-flex: 10;
    587         -webkit-flex-grow: 10;
    588         -moz-box-flex: 10;
    589         -ms-flex-positive: 10;
    590         -ms-flex: 10;
    591         flex-grow: 10;
    592         margin-left: 5px;
    593         padding: 4.5px;
    594 }
    595 #available-menu-items .new-content-item .add-content {
    596         padding-left: 6px;
    597         -webkit-box-flex: 10;
    598         -webkit-flex-grow: 10;
    599         -moz-box-flex: 10;
    600         -ms-flex-positive: 10;
    601         -ms-flex: 10;
    602         flex-grow: 1;
    603 }
    604 
    605570#available-menu-items .menu-item-tpl {
    606571        margin: 0;
    607572}
  • src/wp-admin/js/customize-controls.js

     
    17021702                 *
    17031703                 * @abstract
    17041704                 */
    1705                 ready: function() {},
     1705                ready: function() {
     1706                        if ( 'dropdown-pages' === this.params.type ) {
     1707                                var control = this;
     1708                                control.container.find( '.new-content-item' ).hide(); // Hide in JS to preserve flex display when showing.
     1709                                control.container.on( 'click', '.add-new-toggle', function( e ) {
     1710                                        $( e.currentTarget ).slideUp( 180 );
     1711                                        control.container.find( '.new-content-item' ).slideDown( 180 )
     1712                                                                                     .find( '.create-item-input' ).focus();
     1713                                });
     1714                                control.container.on( 'click', '.add-content', function() {
     1715                                        control.addNewPage();
     1716                                });
     1717                                control.container.on( 'keyup', '.create-item-input', function( e ) {
     1718                                        if ( 13 === e.which ) { // Enter
     1719                                                control.addNewPage();
     1720                                        }
     1721                                });
     1722                        }
     1723                },
    17061724
    17071725                /**
    17081726                 * Get the element inside of a control's container that contains the validation error message.
     
    19201938                                        control.container.html( template( control.params ) );
    19211939                                }
    19221940                        }
     1941                },
     1942
     1943                /**
     1944                 * Add a new page to a dropdown-pages control reusing menus code for this.
     1945                 *
     1946                 * @since 4.7.0
     1947                 */
     1948                addNewPage: function () {
     1949                        if ( 'dropdown-pages' !== this.params.type || ! api.Menus ) {
     1950                                return;
     1951                        }
     1952
     1953                        var control = this, promise,
     1954                            toggle = control.container.find( '.add-new-toggle' ),
     1955                            container = control.container.find( '.new-content-item' ),
     1956                            input = control.container.find( '.create-item-input' ),
     1957                            title = input.val();
     1958                            select = control.container.find( 'select' );
     1959
     1960                        if ( ! title ) {
     1961                                return;
     1962                        }
     1963
     1964                        input.attr( 'disabled', 'disabled' );
     1965
     1966                        // The menus functions add the page, publish when appropriate, and also add the new page to the dropdown-pages controls.
     1967                        promise = api.Menus.insertAutoDraftPost( {
     1968                                post_title: title,
     1969                                post_type: 'page'
     1970                        } );
     1971                        promise.done( function( data ) {
     1972                                var availableItem, $content, itemTemplate;
     1973
     1974                                // Prepare the new page as an available menu item.
     1975                                // See api.Menus.submitNew().
     1976                                availableItem = new api.Menus.AvailableItemModel( {
     1977                                        'id': 'post-' + data.post_id, // Used for available menu item Backbone models.
     1978                                        'title': title,
     1979                                        'type': 'page',
     1980                                        'type_label': api.Menus.data.l10n.page_label,
     1981                                        'object': 'post_type',
     1982                                        'object_id': data.post_id,
     1983                                        'url': data.url
     1984                                } );
     1985
     1986                                // Add the new item to the list of available menu items.
     1987                                api.Menus.availableMenuItemsPanel.collection.add( availableItem );
     1988                                $content = $( '#available-menu-items-post_type-page' ).find( '.available-menu-items-list' );
     1989                                itemTemplate = wp.template( 'available-menu-item' );
     1990                                $content.prepend( itemTemplate( availableItem.attributes ) );
     1991
     1992                                // Focus the select control.
     1993                                select.focus();
     1994                                control.setting.set( String( data.post_id ) ); // Triggers a preview refresh and updates the setting.
     1995                                select.val( String( data.post_id ) );
     1996
     1997                                // Reset the create page form.
     1998                                container.slideUp( 180 );
     1999                                toggle.slideDown( 180 );
     2000                                input.val( '' ).removeAttr( 'disabled' );
     2001                        } );
    19232002                }
    19242003        });
    19252004
  • src/wp-includes/class-wp-customize-control.php

     
    115115        public $input_attrs = array();
    116116
    117117        /**
     118         * @access public
     119         * @var array
     120         */
     121        public $add_new = false;
     122
     123        /**
    118124         * @deprecated It is better to just call the json() method
    119125         * @access public
    120126         * @var array
     
    557563                                echo $dropdown;
    558564                                ?>
    559565                                </label>
    560                                 <?php
     566                                <?php if ( $this->add_new && current_user_can( 'publish_pages' ) && current_user_can( 'edit_theme_options' ) ) : // Currently tied to menus functionality. ?>
     567                                        <button type="button" class="button-link add-new-toggle"><?php _e( 'Add new page' ); ?></button>
     568                                        <div class="new-content-item">
     569                                                <label for="create-input-<?php echo $this->id; ?>"><span class="screen-reader-text"><?php _e( 'New page title' ); ?></span></label>
     570                                                <input type="text" id="create-input-<?php echo $this->id; ?>" class="create-item-input" placeholder="<?php esc_attr_e( 'New page title&hellip;' ); ?>">
     571                                                <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     572                                        </div>
     573                                <?php endif;
    561574                                break;
    562575                        default:
    563576                                ?>
  • src/wp-includes/class-wp-customize-manager.php

     
    22902290                        'label' => __( 'Front page' ),
    22912291                        'section' => 'static_front_page',
    22922292                        'type' => 'dropdown-pages',
     2293                        'add_new' => true,
    22932294                ) );
    22942295
    22952296                $this->add_setting( 'page_for_posts', array(
     
    23012302                        'label' => __( 'Posts page' ),
    23022303                        'section' => 'static_front_page',
    23032304                        'type' => 'dropdown-pages',
     2305                        'add_new' => true,
    23042306                ) );
    23052307        }
    23062308
  • src/wp-includes/class-wp-customize-nav-menus.php

     
    368368                                'untitled'          => _x( '(no label)', 'missing menu item navigation label' ),
    369369                                'unnamed'           => _x( '(unnamed)', 'Missing menu name.' ),
    370370                                'custom_label'      => __( 'Custom Link' ),
     371                                'page_label'        => __( 'Page' ),
    371372                                /* translators: %s: menu location */
    372373                                'menuLocation'      => _x( '(Currently set to: %s)', 'menu' ),
    373374                                'menuNameLabel'     => __( 'Menu Name' ),