Index: src/wp-admin/css/customize-controls.css
===================================================================
--- src/wp-admin/css/customize-controls.css (revision 38773)
+++ src/wp-admin/css/customize-controls.css (working copy)
@@ -687,6 +687,12 @@
/* Style for custom settings */
+#customize-control-front_page_sections {
+ border-top: 1px solid #ddd;
+ margin-top: 8px;
+ padding-top: 16px;
+}
+
/**
* Dropdowns
*/
@@ -1205,6 +1211,7 @@
*/
/* higher specificity than .wp-core-ui .button */
+#customize-theme-controls .add-new-item,
#customize-theme-controls .add-new-widget,
#customize-theme-controls .add-new-menu-item {
cursor: pointer;
@@ -1219,6 +1226,7 @@
outline: none;
}
+.reordering .add-new-item,
.reordering .add-new-widget,
.reordering .add-new-menu-item {
opacity: 0.2;
@@ -1226,6 +1234,7 @@
cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
}
+.add-new-item:before,
.add-new-widget:before,
.add-new-menu-item:before,
#available-menu-items .new-content-item .add-content:before {
@@ -1282,6 +1291,20 @@
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,6 +1319,7 @@
outline: none;
}
+.wp-reorder-nav button,
.menu-item-reorder-nav button {
width: 30px;
height: 40px;
@@ -1305,6 +1329,7 @@
box-shadow: none;
}
+.wp-reorder-nav button:before,
.widget-reorder-nav span:before,
.menu-item-reorder-nav button:before {
display: inline-block;
@@ -1320,6 +1345,8 @@
-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,11 +1355,22 @@
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,7 +1381,9 @@
.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;
@@ -1351,7 +1391,7 @@
}
/**
- * New widget and Add-menu-items modes and panels
+ * New widget, Add-menu-items, and Drawer modes and panels
*/
.wp-full-overlay-main {
@@ -1359,6 +1399,8 @@
width: 100%;
}
+.customize-control.is-drawer-open .add-new-item,
+.customize-control.is-drawer-open .add-new-item:hover,
body.adding-widget .add-new-widget,
body.adding-widget .add-new-widget:hover,
.adding-menu-items .add-new-menu-item,
@@ -1372,6 +1414,7 @@
box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
}
+.customize-control.is-drawer-open .add-new-item:before,
body.adding-widget .add-new-widget:before,
.adding-menu-items .add-new-menu-item:before,
#accordion-section-add_menu .add-new-menu-item.open:before {
@@ -1380,6 +1423,7 @@
transform: rotate(45deg);
}
+.customize-drawer,
#available-widgets,
#available-menu-items {
position: absolute;
@@ -1398,6 +1442,7 @@
border-right: 1px solid #ddd;
}
+.customize-drawer .customize-section-title,
#available-widgets .customize-section-title,
#available-menu-items .customize-section-title {
display: none;
@@ -1425,6 +1470,7 @@
}
/* search field container */
+.search-group,
#available-widgets-filter,
#available-menu-items-search .accordion-section-title {
padding: 13px 15px;
@@ -1433,6 +1479,11 @@
box-sizing: border-box;
}
+.search-group {
+ position: relative;
+}
+
+.search-group input,
#available-widgets-filter input,
#available-menu-items-search input {
width: 100%;
@@ -1441,11 +1492,13 @@
padding: 6px 30px;
}
+.search-group input::-ms-clear,
#available-widgets-filter input::-ms-clear,
#available-menu-items-search input::-ms-clear {
display: none; /* remove the "x" in IE, which conflicts with the "x" icon on button.clear-results */
}
+.search-group .search-icon,
#available-menu-items-search .search-icon,
#available-widgets-filter .search-icon {
display: block;
@@ -1459,6 +1512,7 @@
color: #72777c;
}
+.search-group .clear-results,
#available-widgets-filter .clear-results,
#available-menu-items-search .clear-results {
position: absolute;
@@ -1475,6 +1529,7 @@
outline: 0;
}
+.search-group .clear-results,
#available-widgets-filter .clear-results,
#available-menu-items-search .clear-results,
#available-menu-items-search.loading .clear-results.is-visible {
@@ -1481,11 +1536,13 @@
display: none;
}
+.search-group .clear-results.is-visible,
#available-widgets-filter .clear-results.is-visible,
#available-menu-items-search .clear-results.is-visible {
display: block;
}
+.search-group .clear-results:before,
#available-widgets-filter .clear-results:before,
#available-menu-items-search .clear-results:before {
content: "\f335";
@@ -1495,6 +1552,8 @@
-moz-osx-font-smoothing: grayscale;
}
+.search-group .clear-results:hover,
+.search-group .clear-results:focus,
#available-widgets-filter .clear-results:hover,
#available-widgets-filter .clear-results:focus,
#available-menu-items-search .clear-results:hover,
@@ -1502,6 +1561,7 @@
color: #dc3232;
}
+.search-group .clear-results:focus,
#available-widgets-filter .clear-results:focus,
#available-menu-items-search .clear-results:focus {
-webkit-box-shadow:
@@ -1512,6 +1572,7 @@
0 0 2px 1px rgba(30, 140, 190, .8);
}
+.search-group .search-icon:after,
#available-menu-items-search .search-icon:after,
#available-widgets-filter .search-icon:after {
content: "\f179";
@@ -1521,6 +1582,17 @@
-moz-osx-font-smoothing: grayscale;
}
+.search-group .spinner {
+ margin: 0;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+}
+
+.search-group.is-searching .clear-results {
+ display: none;
+}
+
.no-widgets-found-message {
display: none;
margin: 0;
@@ -1558,7 +1630,199 @@
position: static;
}
+.customize-drawer.is-open {
+ left: 0;
+ visibility: visible;
+}
+body.drawer-is-open .wp-full-overlay-main {
+ left: 300px;
+}
+
+body.drawer-is-open #customize-preview {
+ opacity: 0.4;
+}
+
+.ios .customize-drawer {
+ -webkit-transition: left 0s;
+ transition: left 0s;
+}
+
+.customize-drawer-notice {
+ padding: 15px;
+}
+
+/* Sortable list items. */
+
+.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 {
+ color: #a00;
+ display: none;
+ height: 38px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-align: center;
+ vertical-align: middle;
+ width: 40px;
+}
+
+.wp-item-delete:hover {
+ color: #f00;
+}
+
+.wp-item-delete:before {
+ content: "\f335";
+}
+
+.wp-item-title {
+ cursor: move;
+ margin: 0;
+ padding: 10px 20px;
+ position: relative;
+ word-wrap: break-word;
+}
+
+.wp-item-title:before {
+ content: "";
+ float: right;
+ height: 28px;
+ width: 46px;
+}
+
+.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 results. */
+
+.search-results {
+ padding: 1px 0 15px;
+}
+
+.search-results ul {
+ margin: -1px 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;
+ padding-left: 10px;
+ 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";
+}
+
+.search-results-item-add,
+.wp-item-delete {
+ cursor: pointer;
+ display: inline-block;
+ font-family: dashicons;
+ font-size: 20px;
+ -webkit-font-smoothing: antialiased;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ text-align: center;
+ text-decoration: inherit;
+ vertical-align: top;
+}
+
+
/* Responsive */
.customize-controls-preview-toggle {
display: none;
@@ -1679,6 +1943,7 @@
margin-top: 6px;
}
+ body.drawer-is-open .customize-drawer,
body.adding-widget div#available-widgets,
body.adding-menu-items div#available-menu-items {
top: 46px;
@@ -1687,6 +1952,7 @@
width: 100%;
}
+ .customize-drawer .customize-section-title,
#available-widgets .customize-section-title,
#available-menu-items .customize-section-title {
display: block;
@@ -1693,11 +1959,13 @@
margin: 0;
}
+ .customize-drawer .customize-section-back,
#available-widgets .customize-section-back,
#available-menu-items .customize-section-back {
height: 69px;
}
+ .customize-drawer .customize-section-title h3,
#available-widgets .customize-section-title h3,
#available-menu-items .customize-section-title h3 {
font-size: 20px;
@@ -1712,6 +1980,7 @@
text-overflow: ellipsis;
}
+ .customize-drawer .customize-section-title .customize-action,
#available-widgets .customize-section-title .customize-action,
#available-menu-items .customize-section-title .customize-action {
font-size: 13px;
Index: src/wp-admin/js/customize-post-collection.js
===================================================================
--- src/wp-admin/js/customize-post-collection.js (revision 0)
+++ src/wp-admin/js/customize-post-collection.js (working copy)
@@ -0,0 +1,558 @@
+(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.CustomizeSectionTitleView = wp.Backbone.View.extend({
+ className: 'customize-section-title',
+ template: wp.template( 'customize-section-title' ),
+
+ events: {
+ 'click .customize-section-back': 'closeDrawer'
+ },
+
+ initialize: function( options ) {
+ this.control = options.control;
+ },
+
+ render: function() {
+ var data = {
+ label: this.control.params.label,
+ l10n: this.control.l10n
+ };
+
+ this.$el.html( this.template( data ) );
+
+ return this;
+ },
+
+ closeDrawer: function( e ) {
+ e.preventDefault();
+ this.control.drawer.close();
+ }
+ });
+
+ 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.AddNewItemButtonView({
+ control: this.control
+ })
+ ]);
+
+ 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.AddNewItemButtonView = wp.Backbone.View.extend({
+ className: '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: {
+ 'click .clear-results' : 'clearResults',
+ 'input input': 'search'
+ },
+
+ initialize: function( options ) {
+ this.control = options.control;
+ this.listenTo( this.collection, 'add remove reset', this.updateClearResultsVisibility );
+ },
+
+ render: function() {
+ this.$el.html( this.template({ l10n: this.control.l10n }) );
+ this.$clearResults = this.$( '.clear-results' );
+ this.$field = this.$( '.search-group-field' );
+ this.$spinner = this.$el.append( '' ).find( '.spinner' );
+ this.updateClearResultsVisibility();
+ return this;
+ },
+
+ clearResults: function() {
+ this.collection.reset();
+ this.$field.val( '' ).trigger( 'input' ).focus();
+ },
+
+ search: function() {
+ var view = this;
+
+ this.$el.addClass( 'is-searching' );
+ this.$spinner.addClass( 'is-active' );
+
+ clearTimeout( this.timeout );
+ this.timeout = setTimeout(function() {
+ view.control.search( view.$field.val() )
+ .always(function() {
+ view.$el.removeClass( 'is-searching' );
+ view.$spinner.removeClass( 'is-active' );
+ });
+ }, 300 );
+ },
+
+ updateClearResultsVisibility: function() {
+ this.$clearResults.toggleClass( 'is-visible', !! this.collection.length && '' !== this.$field.val() );
+ }
+ });
+
+ 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( '' ).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.findWhere({ id: this.model.get( 'id' ) }) );
+ }
+ });
+
+ 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.CustomizeSectionTitleView({
+ control: this
+ }),
+ 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.params.exclude,
+ 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 );
Index: src/wp-includes/canonical.php
===================================================================
--- src/wp-includes/canonical.php (revision 38773)
+++ src/wp-includes/canonical.php (working copy)
@@ -655,3 +655,25 @@
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;
+}
Index: src/wp-includes/class-wp-customize-manager.php
===================================================================
--- src/wp-includes/class-wp-customize-manager.php (revision 38773)
+++ src/wp-includes/class-wp-customize-manager.php (working copy)
@@ -227,6 +227,7 @@
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,6 +290,7 @@
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
@@ -1970,6 +1972,7 @@
$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 */
@@ -2302,6 +2305,33 @@
'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' ),
+ 'exclude' => array(
+ get_option( 'page_on_front' ),
+ get_option( 'page_for_posts' ),
+ ),
+ '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…' ),
+ ),
+ ) ) );
+ }
}
/**
@@ -2381,4 +2411,67 @@
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 ) ) ) );
+ }
}
Index: src/wp-includes/class-wp-query.php
===================================================================
--- src/wp-includes/class-wp-query.php (revision 38773)
+++ src/wp-includes/class-wp-query.php (working copy)
@@ -974,6 +974,15 @@
$qv['page'] = $qv['paged'];
unset($qv['paged']);
}
+ // Add section pages, if they exist.
+ $front_page_sections = array_filter( wp_parse_id_list( get_theme_mod( 'front_page_sections' ) ) );
+ if ( $front_page_sections ) {
+ array_unshift( $front_page_sections, $qv['page_id'] );
+ unset( $qv['page_id'] );
+
+ $qv['post__in'] = $front_page_sections;
+ $qv['orderby'] = 'post__in';
+ }
}
}
@@ -1005,7 +1014,7 @@
}
}
- if ( $qv['page_id'] ) {
+ if ( ! empty( $qv['page_id'] ) ) {
if ( 'page' == get_option('show_on_front') && $qv['page_id'] == get_option('page_for_posts') ) {
$this->is_page = false;
$this->is_home = true;
Index: src/wp-includes/customize/class-wp-customize-post-collection-control.php
===================================================================
--- src/wp-includes/customize/class-wp-customize-post-collection-control.php (revision 0)
+++ src/wp-includes/customize/class-wp-customize-post-collection-control.php (working copy)
@@ -0,0 +1,224 @@
+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…' ),
+ ) );
+ }
+
+ /**
+ * 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['exclude'] = $this->exclude;
+ $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() {
+ ?>
+
+
+
+
+
+
+
+
+
+ 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;
+ }
+}
Index: src/wp-includes/default-filters.php
===================================================================
--- src/wp-includes/default-filters.php (revision 38773)
+++ src/wp-includes/default-filters.php (working copy)
@@ -427,6 +427,7 @@
// 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
Index: src/wp-includes/link-template.php
===================================================================
--- src/wp-includes/link-template.php (revision 38773)
+++ src/wp-includes/link-template.php (working copy)
@@ -312,10 +312,13 @@
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,3 +4145,15 @@
*/
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 );
+}
Index: src/wp-includes/post-template.php
===================================================================
--- src/wp-includes/post-template.php (revision 38773)
+++ src/wp-includes/post-template.php (working copy)
@@ -479,6 +479,11 @@
$classes[] = 'format-standard';
}
+ // Front page sections.
+ if ( is_front_page() && is_front_page_section( $post->ID ) ) {
+ $classes[] = 'front-page-section';
+ }
+
$post_password_required = post_password_required( $post->ID );
// Post requires password.
@@ -1794,3 +1799,16 @@
echo $rows;
echo "";
}
+
+/**
+ * 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 );
+}
Index: src/wp-includes/script-loader.php
===================================================================
--- src/wp-includes/script-loader.php (revision 38773)
+++ src/wp-includes/script-loader.php (working copy)
@@ -476,6 +476,8 @@
$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 );
Index: src/wp-includes/theme.php
===================================================================
--- src/wp-includes/theme.php (revision 38773)
+++ src/wp-includes/theme.php (working copy)
@@ -1730,6 +1730,17 @@
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,6 +1833,7 @@
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,7 +2094,7 @@
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();
}