Ticket #37974: 37974.1.diff

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

@@ -1219 +1219 @@
         outline: none;
 }
 
+.reordering .add-new-item,
 .reordering .add-new-widget,
 .reordering .add-new-menu-item {
         opacity: 0.2;
@@ -1282 +1283 @@
         color: #00a0d2;
 }
 
+.wp-reorder-nav {
+        display: none;
+        background-color: #fff;
+        position: absolute;
+        top: 0;
+        right: 0;
+}
+
+.reordering .wp-reorder-nav,
+.wp-reorder-nav.is-active {
+        display: block;
+}
+
+.wp-reorder-nav button,
 .widget-reorder-nav span,
 .menu-item-reorder-nav button {
         position: relative;
@@ -1296 +1311 @@
         outline: none;
 }
 
+.wp-reorder-nav button,
 .menu-item-reorder-nav button {
         width: 30px;
         height: 40px;
@@ -1305 +1321 @@
         box-shadow: none;
 }
 
+.wp-reorder-nav button:before,
 .widget-reorder-nav span:before,
 .menu-item-reorder-nav button:before {
         display: inline-block;
@@ -1320 +1337 @@
         -moz-osx-font-smoothing: grayscale;
 }
 
+.wp-reorder-nav button:hover,
+.wp-reorder-nav button:focus,
 .widget-reorder-nav span:hover,
 .widget-reorder-nav span:focus,
 .menu-item-reorder-nav button:hover,
@@ -1328 +1347 @@
         background: #eee;
 }
 
+.wp-reorder-nav button {
+        width: 33px;
+        height: 38px;
+}
+
+.wp-reorder-nav button:before {
+        font: normal 20px/38px dashicons;
+}
+
+.move-item-down:before,
 .move-widget-down:before,
 .menus-move-down:before {
         content: "\f347";
 }
 
+.move-item-up:before,
 .move-widget-up:before,
 .menus-move-up:before {
         content: "\f343";
@@ -1343 +1373 @@
 .move-up-disabled .menus-move-up,
 .move-down-disabled .menus-move-down,
 .move-right-disabled .menus-move-right,
-.move-left-disabled .menus-move-left {
+.move-left-disabled .menus-move-left,
+.wp-item:first-child .move-item-up,
+.wp-item:last-child .move-item-down {
         color: #d5d5d5;
         background-color: #fff;
         cursor: default;

src/wp-admin/css/customize-post-collection.css

@@ +1 @@
+/* General
+------------------------------------------------------------------------------*/
+
+.customize-dashicon,
+.drawer-toggle:before {
+        cursor: pointer;
+        display: inline-block;
+        font-family: dashicons;
+        font-size: 20px;
+        -webkit-font-smoothing: antialiased;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 1;
+        position: relative;
+        text-align: center;
+        text-decoration: inherit;
+        vertical-align: top;
+}
+
+.drawer-toggle:before {
+        content: "\f132";
+        position: relative;
+        left: -2px;
+        top: -1px;
+        transition: all 0.2s;
+        vertical-align: middle;
+}
+
+.customize-button-delete {
+        color: #a00;
+}
+
+.customize-button-delete:hover {
+        color: #f00;
+}
+
+.customize-button-delete.customize-dashicon:before {
+        content: "\f335";
+}
+
+.customize-control.is-drawer-open .drawer-toggle:before {
+        transform: rotate( 45deg );
+}
+
+
+/* Drawer
+------------------------------------------------------------------------------*/
+
+.customize-drawer {
+        background: #eee;
+        border-right: 1px solid #ddd;
+        display: block;
+        margin: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: -301px;
+        transition: left 0.18s;
+        visibility: hidden;
+        width: 300px;
+        z-index: 4;
+}
+
+.customize-drawer-notice {
+        padding: 15px;
+}
+
+.customize-drawer.is-open {
+        left: 0;
+        visibility: visible;
+}
+
+.drawer-is-open .wp-full-overlay-main {
+        left: 300px;
+}
+
+
+/* Sortable Item List
+------------------------------------------------------------------------------*/
+
+.wp-items-list {
+        list-style: none;
+        margin: 0 0 10px 0;
+        padding: 0;
+        position: relative;
+}
+
+.wp-item {
+        background: #fff;
+        margin: -1px 0 0 0;
+        padding: 0;
+}
+
+.wp-item-header {
+        border: 1px solid #dfdfdf;
+        background: #fff;
+        position: relative;
+}
+
+.wp-item-delete {
+        display: none;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        text-align: center;
+        vertical-align: middle;
+        width: 40px;
+}
+
+.wp-item-title {
+        cursor: move;
+        margin: 0;
+        padding: 10px 20px;
+        position: relative;
+        word-wrap: break-word;
+}
+
+.wp-item.ui-sortable-helper {
+        background: #f9f9f9;
+        border: 1px solid #dfdfdf;
+}
+
+.wp-item.ui-sortable-placeholder {
+        background: transparent;
+        border: 1px dashed #a0a5aa;
+        margin-top: 0;
+        margin-bottom: 1px;
+}
+
+.wp-item:hover .wp-item-header {
+        border-color: #999;
+        z-index: 1;
+}
+
+.customize-control.is-drawer-open .wp-item-delete {
+        display: block;
+}
+
+.customize-control.is-drawer-open .wp-reorder-nav {
+        display: none;
+}
+
+
+/* Search
+------------------------------------------------------------------------------*/
+
+.search-group {
+        border-bottom: 1px solid #ddd;
+        margin: 0;
+        padding: 12px 15px;
+        position: relative;
+}
+
+.search-group-field {
+        padding: 6px 10px;
+        width: 100%;
+}
+
+.search-group-spinner {
+        margin: 0;
+        position: absolute;
+        top: 19px;
+        right: 20px;
+}
+
+.search-group-button-clear {
+        background: transparent;
+        border-width: 0;
+        cursor: pointer;
+        height: 20px;
+        padding: 0;
+        position: absolute;
+        top: 19px;
+        right: 20px;
+        text-align: center;
+        width: 20px;
+}
+
+
+/* Search Results
+------------------------------------------------------------------------------*/
+
+.search-results {
+        padding: 1px 0 15px;
+}
+
+.search-results ul {
+        margin: -2px 0 0;
+}
+
+.search-results-item {
+        background: #fff;
+        border-color: #ddd;
+        border-style: solid;
+        border-width: 1px 0;
+        clear: both;
+        cursor: pointer;
+        line-height: 10px;
+        margin: -1px 0 0 0;
+        padding: 10px 15px;
+        position: relative;
+}
+
+.search-results-item-title {
+        display: block;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 20px;
+        padding-left: 20px;
+        word-wrap: break-word;
+}
+
+.search-results-item-type {
+        color: #666;
+        float: right;
+        font-size: 12px;
+        line-height: 20px;
+        text-align: right;
+}
+
+.search-results-item-add {
+        color: #82878c;
+        height: 38px;
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        width: 30px;
+}
+
+.search-results-item-add:before {
+        -webkit-border-radius: 50%;
+        border-radius: 50%;
+        content: "\f543";
+        height: 20px;
+        position: relative;
+        top: 0;
+        left: 2px;
+}
+
+.search-results-item:hover {
+        border-color: #999;
+        color: #0073aa;
+        z-index: 1;
+}
+
+.search-results-item:hover .search-results-item-add:before {
+        color: #0073aa;
+}
+
+.search-results-item.is-selected .search-results-item-add:before {
+        content: "\f147";
+}

src/wp-admin/js/customize-post-collection.js

@@ +1 @@
+(function( wp, $ ) {
+
+        if ( ! wp || ! wp.customize ) { return; }
+
+        var api = wp.customize;
+
+        api.PostCollection = api.PostCollection || {};
+
+        api.DrawerModel = Backbone.Model.extend({
+                defaults: {
+                        status: 'closed'
+                },
+
+                close: function() {
+                        this.set( 'status', 'closed' );
+                },
+
+                open: function() {
+                        this.set( 'status', 'open' );
+                },
+
+                toggle: function() {
+                        if ( 'open' === this.get( 'status' ) ) {
+                                this.close();
+                        } else {
+                                this.open();
+                        }
+                }
+        });
+
+        api.DrawerManager = Backbone.Collection.extend({
+                model: api.DrawerModel,
+
+                initialize: function() {
+                        this.on( 'change:status', this.closeOtherDrawers );
+                },
+
+                closeOtherDrawers: function( model ) {
+                        if ( 'open' === model.get( 'status' ) ) {
+                                _.chain( this.models ).without( model ).invoke( 'close' );
+                        }
+                }
+        });
+
+        api.DrawerView = wp.Backbone.View.extend({
+                tagName: 'div',
+                className: 'customize-drawer',
+
+                initialize: function( options ) {
+                        this.controller = options.controller;
+                        this.listenTo( this.controller, 'change:status', this.updateStatusClass );
+                },
+
+                updateStatusClass: function() {
+                        if ( 'open' === this.controller.get( 'status' ) ) {
+                                this.$el.addClass( 'is-open' );
+                        } else {
+                                this.$el.removeClass( 'is-open' );
+                        }
+                }
+        });
+
+        api.PostCollection.PostModel = Backbone.Model.extend({
+                defaults: {
+                        title: '',
+                        order: 0
+                }
+        });
+
+        api.PostCollection.PostsCollection = Backbone.Collection.extend({
+                model: api.PostCollection.PostModel,
+
+                comparator: function( post ) {
+                        return parseInt( post.get( 'order' ), 10 );
+                }
+        });
+
+        api.PostCollection.ControlView = wp.Backbone.View.extend({
+                initialize: function( options ) {
+                        this.control = options.control;
+                        this.setting = options.setting;
+
+                        this.listenTo( this.collection, 'add remove reset sort', this.updateSetting );
+                        this.listenTo( this.control.drawer, 'change:status', this.maybeTriggerSearch );
+                        this.listenTo( this.control.drawer, 'change:status', this.updateStatusClass );
+                },
+
+                render: function() {
+                        this.views.add([
+                                new api.PostCollection.ItemListView({
+                                        collection: this.collection,
+                                        control: this.control,
+                                        parent: this
+                                }),
+
+                                new api.PostCollection.ControlActionsView({
+                                        collection: this.collection,
+                                        control: this.control,
+                                        parent: this
+                                })
+                        ]);
+
+                        return this;
+                },
+
+                maybeTriggerSearch: function() {
+                        if ( 'open' === this.control.drawer.get( 'status' ) && this.control.results.length < 1 ) {
+                                this.control.search();
+                        }
+                },
+
+                updateSetting: function() {
+                        var postIds = this.collection.sort({ silent: true }).pluck( 'id' ).join( ',' );
+                        this.setting.set( postIds );
+                },
+
+                updateStatusClass: function() {
+                        if ( 'open' === this.control.drawer.get( 'status' ) ) {
+                                this.$el.addClass( 'is-drawer-open' );
+                        } else {
+                                this.$el.removeClass( 'is-drawer-open' );
+                        }
+                }
+        });
+
+        api.PostCollection.ControlActionsView = wp.Backbone.View.extend({
+                className: 'actions',
+                tagName: 'div',
+
+                initialize: function( options ) {
+                        this.control = options.control;
+                        this.parent = options.parent;
+                },
+
+                render: function() {
+                        this.views.add([
+                                new api.PostCollection.AddNewItemButtonView({
+                                        control: this.control
+                                })
+                        ]);
+
+                        return this;
+                }
+        });
+
+        api.PostCollection.AddNewItemButtonView = wp.Backbone.View.extend({
+                className: 'drawer-toggle add-new-item button button-secondary alignright',
+                tagName: 'button',
+
+                events: {
+                        click: 'toggleDrawer'
+                },
+
+                initialize: function( options ) {
+                        this.control = options.control;
+                },
+
+                render: function() {
+                        this.$el.text( this.control.l10n.addPosts );
+                        return this;
+                },
+
+                toggleDrawer: function( e ) {
+                        e.preventDefault();
+                        this.control.drawer.toggle();
+                }
+        });
+
+        api.PostCollection.ItemListView = wp.Backbone.View.extend({
+                className: 'wp-items-list',
+                tagName: 'ol',
+
+                initialize: function( options ) {
+                        this.control = options.control;
+
+                        this.listenTo( this.collection, 'add', this.addItem );
+                        this.listenTo( this.collection, 'add remove', this.updateOrder );
+                        this.listenTo( this.collection, 'reset', this.render );
+                },
+
+                render: function() {
+                        this.$el.empty();
+                        this.collection.each( this.addItem, this );
+                        this.initializeSortable();
+                        return this;
+                },
+
+                initializeSortable: function() {
+                        this.$el.sortable({
+                                axis: 'y',
+                                delay: 150,
+                                forceHelperSize: true,
+                                forcePlaceholderSize: true,
+                                opacity: 0.6,
+                                start: function( e, ui ) {
+                                        ui.placeholder.css( 'visibility', 'visible' );
+                                },
+                                update: _.bind(function() {
+                                        this.updateOrder();
+                                }, this )
+                        });
+                },
+
+                addItem: function( item ) {
+                        var itemView = new api.PostCollection.ItemView({
+                                control: this.control,
+                                model: item,
+                                parent: this
+                        });
+
+                        this.$el.append( itemView.render().el );
+                },
+
+                moveDown: function( model ) {
+                        var index = this.collection.indexOf( model ),
+                                $items = this.$el.children();
+
+                        if ( index < this.collection.length - 1 ) {
+                                $items.eq( index ).insertAfter( $items.eq( index + 1 ) );
+                                this.updateOrder();
+                                wp.a11y.speak( this.control.l10n.movedDown );
+                        }
+                },
+
+                moveUp: function( model ) {
+                        var index = this.collection.indexOf( model ),
+                                $items = this.$el.children();
+
+                        if ( index > 0 ) {
+                                $items.eq( index ).insertBefore( $items.eq( index - 1 ) );
+                                this.updateOrder();
+                                wp.a11y.speak( this.control.l10n.movedUp );
+                        }
+                },
+
+                updateOrder: function() {
+                        _.each( this.$el.find( 'li' ), function( item, i ) {
+                                var id = $( item ).data( 'post-id' );
+                                this.collection.get( id ).set( 'order', i );
+                        }, this );
+
+                        this.collection.sort();
+                }
+        });
+
+        api.PostCollection.ItemView = wp.Backbone.View.extend({
+                tagName: 'li',
+                className: 'wp-item',
+                template: wp.template( 'wp-item' ),
+
+                events: {
+                        'click .js-remove': 'destroy',
+                        'click .move-item-up': 'moveUp',
+                        'click .move-item-down': 'moveDown'
+                },
+
+                initialize: function( options ) {
+                        this.control = options.control;
+                        this.parent = options.parent;
+                        this.listenTo( this.model, 'destroy', this.remove );
+                },
+
+                render: function() {
+                        var data = _.extend( this.model.toJSON(), {
+                                l10n: this.control.l10n
+                        });
+
+                        this.$el.html( this.template( data ) );
+                        this.$el.data( 'post-id', this.model.get( 'id' ) );
+
+                        return this;
+                },
+
+                moveDown: function( e ) {
+                        e.preventDefault();
+                        this.parent.moveDown( this.model );
+                },
+
+                moveUp: function( e ) {
+                        e.preventDefault();
+                        this.parent.moveUp( this.model );
+                },
+
+                /**
+                 * Destroy the view's model.
+                 *
+                 * Avoid syncing to the server by triggering an event instead of
+                 * calling destroy() directly on the model.
+                 */
+                destroy: function() {
+                        this.model.trigger( 'destroy', this.model );
+                },
+
+                remove: function() {
+                        this.$el.remove();
+                }
+        });
+
+        api.PostCollection.DrawerNoticeView = wp.Backbone.View.extend({
+                tagName: 'div',
+                className: 'customize-drawer-notice',
+
+                initialize: function( options ) {
+                        this.control = options.control;
+                        this.listenTo( this.control.state, 'change:notice', this.render );
+                },
+
+                render: function() {
+                        var notice = this.control.state.get( 'notice' );
+                        this.$el.toggle( !! notice.length ).text( notice );
+                        return this;
+                }
+        });
+
+        api.PostCollection.SearchGroupView = wp.Backbone.View.extend({
+                tagName: 'div',
+                className: 'search-group',
+                template: wp.template( 'search-group' ),
+
+                events: {
+                        'input input': 'search'
+                },
+
+                initialize: function( options ) {
+                        this.control = options.control;
+                        this.parent = options.parent;
+                },
+
+                render: function() {
+                        this.$el.html( this.template({ l10n: this.control.l10n }) );
+                        this.$field = this.$el.find( '.search-group-field' );
+                        this.$spinner = this.$el.append( '<span class="search-group-spinner spinner" />' ).find( '.spinner' );
+
+                        this.views.add([
+                                new api.PostCollection.ClearResultsButtonView({
+                                        collection: this.collection,
+                                        control: this.control,
+                                        parent: this
+                                })
+                        ]);
+
+                        return this;
+                },
+
+                search: function() {
+                        var view = this;
+
+                        this.$spinner.addClass( 'is-active' );
+
+                        clearTimeout( this.timeout );
+                        this.timeout = setTimeout(function() {
+                                view.control.search( view.$field.val() )
+                                        .always(function() {
+                                                view.$spinner.removeClass( 'is-active' );
+                                        });
+                        }, 300 );
+                }
+        });
+
+        api.PostCollection.ClearResultsButtonView = wp.Backbone.View.extend({
+                tagName: 'button',
+                className: 'search-group-button-clear customize-button-delete customize-dashicon',
+
+                events: {
+                        'click': 'clearResults'
+                },
+
+                initialize: function( options ) {
+                        this.control = options.control;
+                        this.parent = options.parent;
+                        this.listenTo( this.collection, 'add remove reset', this.toggleVisibility );
+                },
+
+                render: function() {
+                        this.$el.html( $( '<span />', {
+                                'class': 'screen-reader-text',
+                                text: this.control.l10n.clearResults
+                        }) );
+                        this.toggleVisibility();
+                        return this;
+                },
+
+                clearResults: function() {
+                        this.collection.reset();
+                        this.parent.$field.val( '' );
+                },
+
+                toggleVisibility: function() {
+                        this.$el.toggle( !! this.collection.length );
+                }
+        });
+
+        api.PostCollection.SearchResultsView = wp.Backbone.View.extend({
+                tagName: 'div',
+                className: 'search-results',
+
+                initialize: function( options ) {
+                        this.control = options.control;
+                        this.listenTo( this.collection, 'reset', this.render );
+                },
+
+                render: function() {
+                        this.$list = this.$el.html( '<ul />' ).find( 'ul' );
+
+                        if ( this.collection.length ) {
+                                this.collection.each( this.addItem, this );
+                        } else {
+                                this.$el.empty();
+                        }
+
+                        return this;
+                },
+
+                addItem: function( model ) {
+                        this.views.add( 'ul', new api.PostCollection.SearchResultView({
+                                control: this.control,
+                                model: model
+                        }));
+                }
+        });
+
+        api.PostCollection.SearchResultView = wp.Backbone.View.extend({
+                tagName: 'li',
+                className: 'search-results-item',
+                template: wp.template( 'search-result' ),
+
+                events: {
+                        'click': 'addSection'
+                },
+
+                initialize: function( options ) {
+                        this.control = options.control;
+                        this.listenTo( this.control.posts, 'add remove reset', this.updateSelectedClass );
+                },
+
+                render: function() {
+                        var data = _.extend( this.model.toJSON(), {
+                                l10n: this.control.l10n
+                        });
+
+                        this.$el.html( this.template( data ) );
+                        this.updateSelectedClass();
+
+                        return this;
+                },
+
+                addSection: function() {
+                        this.control.posts.add( this.model );
+                },
+
+                updateSelectedClass: function() {
+                        this.$el.toggleClass( 'is-selected', this.control.posts.contains( this.model ) );
+                }
+        });
+
+        api.PostCollection.PostCollectionControl = api.Control.extend({
+                ready: function() {
+                        var controlView, drawerView,
+                                control = this,
+                                section = api.section( this.section() );
+
+                        this.drawer = new api.DrawerModel();
+                        api.drawerManager.add( this.drawer );
+
+                        this.posts = new api.PostCollection.PostsCollection( this.params.posts );
+                        this.results = new api.PostCollection.PostsCollection();
+                        delete this.params.posts;
+
+                        this.l10n = this.params.l10n;
+                        delete this.params.l10n;
+
+                        this.state = new Backbone.Model({
+                                notice: ''
+                        });
+
+                        controlView = new api.PostCollection.ControlView({
+                                el: this.container,
+                                collection: this.posts,
+                                control: this,
+                                data: this.params,
+                                setting: this.setting
+                        });
+
+                        controlView.render();
+
+                        drawerView = new api.DrawerView({
+                                controller: this.drawer
+                        });
+
+                        drawerView.views.set([
+                                new api.PostCollection.SearchGroupView({
+                                        collection: this.results,
+                                        control: this
+                                }),
+                                new api.PostCollection.DrawerNoticeView({
+                                        control: this
+                                }),
+                                new api.PostCollection.SearchResultsView({
+                                        collection: this.results,
+                                        control: this
+                                })
+                        ]);
+
+                        $( '.wp-full-overlay' ).append( drawerView.render().$el );
+
+                        section.expanded.bind(function( isOpen ) {
+                                if ( ! isOpen ) {
+                                        control.drawer.close();
+                                }
+                        });
+                },
+
+                search: function( query ) {
+                        var control = this;
+
+                        return wp.ajax.post( 'customize_find_posts', {
+                                s: query,
+                                post_types: this.params.postTypes,
+                                //not_in: this.posts.pluck( 'id' ),
+                                wp_customize: 'on',
+                                _ajax_nonce: this.params.searchNonce
+                        }).done(function( response ) {
+                                control.results.reset( response );
+                                control.state.set( 'notice', '' );
+                        }).fail(function( response ) {
+                                control.results.reset();
+                                control.state.set( 'notice', response );
+                        });
+                }
+        });
+
+        /**
+         * Extends wp.customize.controlConstructor with control constructor for
+         * post_collection.
+         */
+        $.extend( api.controlConstructor, {
+                post_collection: api.PostCollection.PostCollectionControl
+        });
+
+        /**
+         * Create a global drawer manager.
+         */
+        api.drawerManager = new api.DrawerManager();
+
+        /**
+         * Toggle an HTML class on the body when drawers are opened or closed.
+         */
+        $( document ).ready(function() {
+                var $body = $( document.body );
+
+                api.drawerManager.on( 'change:status', function() {
+                        if ( api.drawerManager.findWhere({ status: 'open' }) ) {
+                                $body.addClass( 'drawer-is-open' );
+                        } else {
+                                $body.removeClass( 'drawer-is-open' );
+                        }
+                });
+        });
+
+        /**
+         * Toggle the front_page_sections control based on the 'show_on_front'
+         * setting value.
+         */
+        api.bind( 'ready', function() {
+                api( 'show_on_front', function( setting ) {
+                        api.control( 'front_page_sections', function( control ) {
+                                var toggleVisibility = function( value ) {
+                                        control.container.toggle( 'page' === value );
+                                };
+
+                                toggleVisibility( setting() );
+                                setting.bind( toggleVisibility );
+                        });
+                });
+        });
+
+})( window.wp, jQuery );

src/wp-includes/canonical.php

@@ -655 +655 @@
                 exit;
         }
 }
+
+/**
+ * Redirect front page section permalinks to the fragment on the front page.
+ *
+ * @since 4.7.0
+ */
+function wp_redirect_front_page_sections() {
+        $object_id = get_queried_object_id();
+
+        if (
+                ! current_theme_supports( 'front-page-sections' )
+                || is_front_page()
+                || is_home()
+                || ! is_singular()
+                || ! is_front_page_section( $object_id )
+        ) {
+                return;
+        }
+
+        wp_redirect( get_front_page_section_url( $object_id ) );
+        exit;
+}

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

@@ -227 +227 @@
                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-name-control.php' );
                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-auto-add-control.php' );
                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-control.php' );
+                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-post-collection-control.php' );
 
                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
 
@@ -289 +290 @@
 
                 add_action( 'wp_ajax_customize_save',           array( $this, 'save' ) );
                 add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
+                add_action( 'wp_ajax_customize_find_posts',     array( $this, 'ajax_find_posts' ) );
 
                 add_action( 'customize_register',                 array( $this, 'register_controls' ) );
                 add_action( 'customize_register',                 array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first
@@ -1963 +1965 @@
                 $this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
                 $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
                 $this->register_control_type( 'WP_Customize_Theme_Control' );
+                $this->register_control_type( 'WP_Customize_Post_Collection_Control' );
 
                 /* Themes */
 
@@ -2295 +2298 @@
                         'section' => 'static_front_page',
                         'type' => 'dropdown-pages',
                 ) );
+
+                if ( current_theme_supports( 'front-page-sections' ) ) {
+                        $this->add_setting( 'front_page_sections', array(
+                                'sanitize_callback' => array( $this, 'sanitize_id_list' ),
+                        ) );
+
+                        $this->add_control( new WP_Customize_Post_Collection_Control( $this, 'front_page_sections', array(
+                                'label'       => __( 'Front page sections' ),
+                                'description' => '',
+                                'section'     => 'static_front_page',
+                                'settings'    => 'front_page_sections',
+                                'post_types'  => get_theme_support( 'front-page-sections', 'post_types' ),
+                                'l10n'        => array(
+                                        'addPost'                => __( 'Add Section' ),
+                                        'addPosts'               => __( 'Add Sections' ),
+                                        'movedUp'                => __( 'Section moved up' ),
+                                        'movedDown'              => __( 'Section moved down' ),
+                                        'removePost'             => __( 'Remove Section' ),
+                                        'searchPosts'            => __( 'Search Sections' ),
+                                        'searchPostsPlaceholder' => __( 'Search sections…' ),
+                                ),
+                        ) ) );
+                }
         }
 
         /**
@@ -2374 +2400 @@
         public function _render_custom_logo_partial() {
                 return get_custom_logo();
         }
+
+        /**
+         * Ajax handler for finding posts.
+         *
+         * @since 4.7.0
+         *
+         * @see wp_ajax_find_posts()
+         */
+        public function ajax_find_posts() {
+                check_ajax_referer( 'find-posts' );
+
+                $post_types = array();
+
+                if ( ! empty( $_POST['post_types'] ) ) {
+                        $post_type_names = array_map( 'sanitize_text_field', wp_unslash( $_POST['post_types'] ) );
+                        foreach ( $post_type_names as $post_type ) {
+                                $post_types[ $post_type ] = get_post_type_object( $post_type );
+                        }
+                }
+
+                if ( empty( $post_types ) ) {
+                        $post_types['post'] = get_post_type_object( 'post' );
+                }
+
+                $args = array(
+                        'post_type'      => array_keys( $post_types ),
+                        'post_status'    => 'publish',
+                        'post__not_in'   => isset( $_POST['not_in'] ) ? wp_parse_id_list( $_POST['not_in'] ) : array(),
+                        'posts_per_page' => 50,
+                );
+
+                if ( ! empty( $_POST['s'] ) ) {
+                        $args['s'] = sanitize_text_field( wp_unslash( $_POST['s'] ) );
+                }
+
+                $posts = get_posts( $args );
+
+                if ( ! $posts ) {
+                        wp_send_json_error( __( 'No results found.' ) );
+                }
+
+                foreach ( $posts as $post ) {
+                        $data[] = array(
+                                'id'    => $post->ID,
+                                'title' => $post->post_title,
+                                'type'  => get_post_type_object( $post->post_type )->labels->singular_name,
+                        );
+                }
+
+                wp_send_json_success( $data );
+        }
+
+        /**
+         * Sanitization callback for lists of IDs.
+         *
+         * @since 4.7.0
+         *
+         * @param string $value Setting value.
+         * @return string Comma-separated list of IDs.
+         */
+        public function sanitize_id_list( $value ) {
+                return implode( ',', array_unique( array_filter( wp_parse_id_list( $value ) ) ) );
+        }
 }

src/wp-includes/customize/class-wp-customize-post-collection-control.php

@@ +1 @@
+<?php
+/**
+ * Customize API: WP_Customize_Post_Collection_Control class
+ *
+ * @package WordPress
+ * @subpackage Customize
+ * @since 4.7.0
+ */
+
+/**
+ * Customize Post Collection Control class.
+ *
+ * @since 4.7.0
+ *
+ * @see WP_Customize_Control
+ */
+class WP_Customize_Post_Collection_Control extends WP_Customize_Control {
+        /**
+         * Control type.
+         *
+         * @since 4.7.0
+         * @var string
+         */
+        public $type = 'post_collection';
+
+        /**
+         * Post types that can be added as sections..
+         *
+         * @since 4.7.0
+         * @var array
+         */
+        public $post_types = array( 'page', 'post' );
+
+        /**
+         * Localization strings.
+         *
+         * @since 4.7.0
+         * @access public
+         * @var array
+         */
+        public $l10n = array();
+
+        /**
+         * Constructor.
+         *
+         * @since 4.7.0
+         *
+         * @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->l10n = wp_parse_args( $this->l10n, array(
+                        'addPost'                => __( 'Add Post' ),
+                        'addPosts'               => __( 'Add Posts' ),
+                        'clearResults'           => __( 'Clear Results' ),
+                        'moveUp'                 => __( 'Move up' ),
+                        'moveDown'               => __( 'Move down' ),
+                        'movedUp'                => __( 'Post moved up' ),
+                        'movedDown'              => __( 'Post moved down' ),
+                        'removePost'             => __( 'Remove Post' ),
+                        'searchPosts'            => __( 'Search Posts' ),
+                        'searchPostsPlaceholder' => __( 'Search posts&hellip;' ),
+                ) );
+        }
+
+        /**
+         * Enqueue control related scripts/styles.
+         *
+         * @since 4.7.0
+         */
+        public function enqueue() {
+                wp_enqueue_style( 'customize-post-collection' );
+                wp_enqueue_script( 'customize-post-collection' );
+
+                add_action( 'customize_controls_print_footer_scripts', array( 'WP_Customize_Post_Collection_Control', 'print_templates' ) );
+        }
+
+        /**
+         * Refresh the parameters passed to the JavaScript via JSON.
+         *
+         * @since 4.7.0
+         * @uses WP_Customize_Control::to_json()
+         */
+        public function to_json() {
+                parent::to_json();
+
+                $this->json['l10n']        = $this->l10n;
+                $this->json['posts']       = $this->get_posts();
+                $this->json['postTypes']   = $this->post_types;
+                $this->json['searchNonce'] = wp_create_nonce( 'find-posts' );
+        }
+
+        /**
+         * Don't render any content for this control from PHP.
+         *
+         * @since 4.7.0
+         *
+         * @see WP_Customize_Post_Collection_Control::content_template()
+         */
+        public function render_content() {}
+
+        /**
+         * An Underscore (JS) template for this control's content (but not its container).
+         *
+         * @see WP_Customize_Control::print_template()
+         *
+         * @since 4.7.0
+         */
+        protected function content_template() {
+                ?>
+                <label>
+                        <# if ( data.label ) { #>
+                                <span class="customize-control-title">{{ data.label }}</span>
+                        <# } #>
+                        <# if ( data.description ) { #>
+                                <span class="description customize-control-description">{{{ data.description }}}</span>
+                        <# } #>
+                </label>
+                <?php
+        }
+
+        /**
+         * Print JavaScript templates in the Customizer footer.
+         *
+         * @since 4.7.0
+         */
+        public static function print_templates() {
+                ?>
+                <script type="text/html" id="tmpl-wp-item">
+                        <div class="wp-item-header">
+                                <h4 class="wp-item-title">{{ data.title }}</h4>
+
+                                <button type="button" class="wp-item-delete customize-button-delete customize-dashicon button-link js-remove">
+                                        <span class="screen-reader-text">{{ data.l10n.removePost }}</span>
+                                </button>
+
+                                <div class="wp-reorder-nav is-active">
+                                        <button class="move-item-down" tabindex="0">{{ data.l10n.moveDown }}</button>
+                                        <button class="move-item-up" tabindex="0">{{ data.l10n.moveUp }}</button>
+                                </div>
+                        </div>
+                </script>
+
+                <script type="text/html" id="tmpl-search-group">
+                        <label class="screen-reader-text" for="search-group-field">{{ data.l10n.searchPosts }}</label>
+                        <input type="text" id="search-group-field" placeholder="{{{ data.l10n.searchPostsPlaceholder }}}" class="search-group-field">
+                </script>
+
+                <script type="text/html" id="tmpl-search-result">
+                        <span class="search-results-item-type">{{ data.type }}</span>
+                        <span class="search-results-item-title">{{ data.title }}</span>
+
+                        <button type="button" class="search-results-item-add customize-dashicon button-link">
+                                <span class="screen-reader-text">{{ data.l10n.addPost }}</span>
+                        </button>
+                </script>
+                <?php
+        }
+
+        /**
+         * Retrieve posts.
+         *
+         * @since 4.7.0
+         *
+         * @return array
+         */
+        protected function get_posts() {
+                $data  = array();
+                $value = $this->value();
+
+                if ( ! empty( $value ) ) {
+                        $posts = get_posts( array(
+                                'post_type'      => $this->post_types,
+                                'post_status'    => 'any',
+                                'post__in'       => array_map( 'absint', explode( ',', $value ) ),
+                                'orderby'        => 'post__in',
+                                'posts_per_page' => 20,
+                        ) );
+                }
+
+                if ( ! empty( $posts ) ) {
+                        $i = 0;
+                        foreach ( $posts as $post ) {
+                                $data[] = array(
+                                        'id'    => $post->ID,
+                                        'title' => $post->post_title,
+                                        'order' => ++$i,
+                                );
+                        }
+                }
+
+                return $data;
+        }
+}

src/wp-includes/default-filters.php

@@ -427 +427 @@
 
 // Canonical
 add_action( 'template_redirect', 'redirect_canonical' );
+add_action( 'template_redirect', 'wp_redirect_front_page_sections' );
 add_action( 'template_redirect', 'wp_redirect_admin_locations', 1000 );
 
 // Shortcodes

src/wp-includes/link-template.php

@@ -312 +312 @@
 function get_page_link( $post = false, $leavename = false, $sample = false ) {
         $post = get_post( $post );
 
-        if ( 'page' == get_option( 'show_on_front' ) && $post->ID == get_option( 'page_on_front' ) )
+        if ( 'page' == get_option( 'show_on_front' ) && $post->ID == get_option( 'page_on_front' ) ) {
                 $link = home_url('/');
-        else
+        } elseif ( is_front_page_section( $post->ID ) ) {
+                $link = get_front_page_section_url( $post->ID );
+        } else {
                 $link = _get_page_link( $post, $leavename, $sample );
+        }
 
         /**
          * Filters the permalink for a page.
@@ -4142 +4145 @@
          */
         return apply_filters( 'parent_theme_file_path', $path, $file );
 }
+
+/**
+ * Retrieve the URL for a front page section.
+ *
+ * @since 4.7.0
+ *
+ * @param int|WP_Post $post Post ID or object.
+ * @return string
+ */
+function get_front_page_section_url( $post ) {
+        return home_url( '#post-' . get_post( $post )->ID );
+}

src/wp-includes/post-template.php

@@ -1794 +1794 @@
         echo $rows;
         echo "</ul>";
 }
+
+/**
+ * Whether a post is a front page section.
+ *
+ * @since 4.7.0
+ *
+ * @param int $post_id Post ID.
+ * @return bool
+ */
+function is_front_page_section( $post_id ) {
+        $section_ids = array_filter( wp_parse_id_list( get_theme_mod( 'front_page_sections' ) ) );
+        return in_array( intval( $post_id ), $section_ids, true );
+}

src/wp-includes/script-loader.php

@@ -476 +476 @@
         $scripts->add( 'customize-nav-menus', "/wp-admin/js/customize-nav-menus$suffix.js", array( 'jquery', 'wp-backbone', 'customize-controls', 'accordion', 'nav-menu' ), false, 1 );
         $scripts->add( 'customize-preview-nav-menus', "/wp-includes/js/customize-preview-nav-menus$suffix.js", array( 'jquery', 'wp-util', 'customize-preview', 'customize-selective-refresh' ), false, 1 );
 
+        $scripts->add( 'customize-post-collection', "/wp-admin/js/customize-post-collection$suffix.js", array( 'jquery', 'jquery-ui-sortable', 'jquery-ui-droppable', 'wp-backbone', 'customize-controls' ), false, 1 );
+
         $scripts->add( 'accordion', "/wp-admin/js/accordion$suffix.js", array( 'jquery' ), false, 1 );
 
         $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );
@@ -819 +821 @@
 
         $styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n' ) );
 
-        $styles->add( 'login',               "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
-        $styles->add( 'install',             "/wp-admin/css/install$suffix.css", array( 'buttons' ) );
-        $styles->add( 'wp-color-picker',     "/wp-admin/css/color-picker$suffix.css" );
-        $styles->add( 'customize-controls',  "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie', 'imgareaselect' ) );
-        $styles->add( 'customize-widgets',   "/wp-admin/css/customize-widgets$suffix.css", array( 'wp-admin', 'colors' ) );
-        $styles->add( 'customize-nav-menus', "/wp-admin/css/customize-nav-menus$suffix.css", array( 'wp-admin', 'colors' ) );
-        $styles->add( 'press-this',          "/wp-admin/css/press-this$suffix.css", array( 'buttons' ) );
+        $styles->add( 'login',                     "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
+        $styles->add( 'install',                   "/wp-admin/css/install$suffix.css", array( 'buttons' ) );
+        $styles->add( 'wp-color-picker',           "/wp-admin/css/color-picker$suffix.css" );
+        $styles->add( 'customize-controls',        "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie', 'imgareaselect' ) );
+        $styles->add( 'customize-widgets',         "/wp-admin/css/customize-widgets$suffix.css", array( 'wp-admin', 'colors' ) );
+        $styles->add( 'customize-nav-menus',       "/wp-admin/css/customize-nav-menus$suffix.css", array( 'wp-admin', 'colors' ) );
+        $styles->add( 'customize-post-collection', "/wp-admin/css/customize-post-collection$suffix.css", array( 'wp-admin', 'colors', 'customize-controls' ) );
+        $styles->add( 'press-this',                "/wp-admin/css/press-this$suffix.css", array( 'buttons' ) );
 
         $styles->add( 'ie', "/wp-admin/css/ie$suffix.css" );
         $styles->add_data( 'ie', 'conditional', 'lte IE 7' );

src/wp-includes/theme.php

@@ -1730 +1730 @@
 
                                 return false;
                         }
+
+                case 'front-page-sections' :
+                        if ( ! is_array( $args ) ) {
+                                $args = array( 0 => array() );
+                        }
+
+                        $args[0] = wp_parse_args( $args[0], array(
+                                'post_types' => array( 'page' ),
+                        ) );
+
+                        break;
         }
 
         $_wp_theme_features[ $feature ] = $args;
@@ -1822 +1833 @@
                 case 'custom-logo' :
                 case 'custom-header' :
                 case 'custom-background' :
+                case 'front-page-sections' :
                         if ( isset( $_wp_theme_features[ $feature ][0][ $args[0] ] ) )
                                 return $_wp_theme_features[ $feature ][0][ $args[0] ];
                         return false;
@@ -2082 +2094 @@
                 return;
         }
 
-        require_once ABSPATH . WPINC . '/class-wp-customize-manager.php'; 
+        require_once ABSPATH . WPINC . '/class-wp-customize-manager.php';
         $GLOBALS['wp_customize'] = new WP_Customize_Manager();
 }