mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-08-12 21:00:21 +00:00
Customize: Allow page stubs to be created via dropdown-pages controls in the Static Front Page section.
This ability was previously added to nav menus via the available page items panel. The "Add New Page" button only appears when the `allow_addition` control param is supplied as `true`. Code is adapted from the Customize Posts feature plugin. Props celloexpressions, westonruter. See #38013, #34923. Fixes #38164. git-svn-id: https://develop.svn.wordpress.org/trunk@38906 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
@@ -565,8 +565,8 @@ p.customize-section-description {
|
||||
}
|
||||
|
||||
.customize-control select {
|
||||
min-width: 50%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@@ -587,6 +587,7 @@ p.customize-section-description {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
line-height: 18px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@@ -674,6 +675,54 @@ p.customize-section-description {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#available-menu-items .accordion-section-content .new-content-item,
|
||||
.customize-control-dropdown-pages .new-content-item {
|
||||
width: -webkit-calc(100% - 30px);
|
||||
width: calc(100% - 30px);
|
||||
padding: 8px 15px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
background: #eee;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.customize-control-dropdown-pages .new-content-item {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
padding: 5px 0 5px 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#available-menu-items .new-content-item .create-item-input,
|
||||
.customize-control-dropdown-pages .new-content-item .create-item-input {
|
||||
-webkit-box-flex: 10;
|
||||
-webkit-flex-grow: 10;
|
||||
-moz-box-flex: 10;
|
||||
-ms-flex-positive: 10;
|
||||
-ms-flex: 10;
|
||||
flex-grow: 10;
|
||||
}
|
||||
|
||||
#available-menu-items .new-content-item .add-content,
|
||||
.customize-control-dropdown-pages .new-content-item .add-content {
|
||||
margin: 2px 0 2px 6px;
|
||||
-webkit-box-flex: 10;
|
||||
-webkit-flex-grow: 10;
|
||||
-moz-box-flex: 10;
|
||||
-ms-flex-positive: 10;
|
||||
-ms-flex: 10;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
|
||||
border: 1px solid #f00;
|
||||
}
|
||||
|
||||
#customize-preview iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -572,41 +572,6 @@
|
||||
padding: 0 15px 15px 15px;
|
||||
}
|
||||
|
||||
#available-menu-items .accordion-section-content .new-content-item {
|
||||
width: -webkit-calc(100% - 30px);
|
||||
width: calc(100% - 30px);
|
||||
padding: 8px 15px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
background: #eee;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#available-menu-items .new-content-item .create-item-input {
|
||||
-webkit-box-flex: 10;
|
||||
-webkit-flex-grow: 10;
|
||||
-moz-box-flex: 10;
|
||||
-ms-flex-positive: 10;
|
||||
-ms-flex: 10;
|
||||
flex-grow: 10;
|
||||
margin-left: 5px;
|
||||
padding: 4.5px;
|
||||
}
|
||||
#available-menu-items .new-content-item .add-content {
|
||||
padding-left: 6px;
|
||||
-webkit-box-flex: 10;
|
||||
-webkit-flex-grow: 10;
|
||||
-moz-box-flex: 10;
|
||||
-ms-flex-positive: 10;
|
||||
-ms-flex: 10;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#available-menu-items .menu-item-tpl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -2516,9 +2516,28 @@
|
||||
/**
|
||||
* Triggered when the control's markup has been injected into the DOM.
|
||||
*
|
||||
* @abstract
|
||||
* @returns {void}
|
||||
*/
|
||||
ready: function() {},
|
||||
ready: function() {
|
||||
var control = this, newItem;
|
||||
if ( 'dropdown-pages' === control.params.type && control.params.allow_addition ) {
|
||||
newItem = control.container.find( '.new-content-item' );
|
||||
newItem.hide(); // Hide in JS to preserve flex display when showing.
|
||||
control.container.on( 'click', '.add-new-toggle', function( e ) {
|
||||
$( e.currentTarget ).slideUp( 180 );
|
||||
newItem.slideDown( 180 );
|
||||
newItem.find( '.create-item-input' ).focus();
|
||||
});
|
||||
control.container.on( 'click', '.add-content', function() {
|
||||
control.addNewPage();
|
||||
});
|
||||
control.container.on( 'keyup', '.create-item-input', function( e ) {
|
||||
if ( 13 === e.which ) { // Enter
|
||||
control.addNewPage();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the element inside of a control's container that contains the validation error message.
|
||||
@@ -2736,6 +2755,73 @@
|
||||
control.container.html( template( control.params ) );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Add a new page to a dropdown-pages control reusing menus code for this.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access private
|
||||
* @returns {void}
|
||||
*/
|
||||
addNewPage: function () {
|
||||
var control = this, promise, toggle, container, input, title, select;
|
||||
|
||||
if ( 'dropdown-pages' !== control.params.type || ! control.params.allow_addition || ! api.Menus ) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggle = control.container.find( '.add-new-toggle' );
|
||||
container = control.container.find( '.new-content-item' );
|
||||
input = control.container.find( '.create-item-input' );
|
||||
title = input.val();
|
||||
select = control.container.find( 'select' );
|
||||
|
||||
if ( ! title ) {
|
||||
input.addClass( 'invalid' );
|
||||
return;
|
||||
}
|
||||
|
||||
input.removeClass( 'invalid' );
|
||||
input.attr( 'disabled', 'disabled' );
|
||||
|
||||
// The menus functions add the page, publish when appropriate, and also add the new page to the dropdown-pages controls.
|
||||
promise = api.Menus.insertAutoDraftPost( {
|
||||
post_title: title,
|
||||
post_type: 'page'
|
||||
} );
|
||||
promise.done( function( data ) {
|
||||
var availableItem, $content, itemTemplate;
|
||||
|
||||
// Prepare the new page as an available menu item.
|
||||
// See api.Menus.submitNew().
|
||||
availableItem = new api.Menus.AvailableItemModel( {
|
||||
'id': 'post-' + data.post_id, // Used for available menu item Backbone models.
|
||||
'title': title,
|
||||
'type': 'page',
|
||||
'type_label': api.Menus.data.l10n.page_label,
|
||||
'object': 'post_type',
|
||||
'object_id': data.post_id,
|
||||
'url': data.url
|
||||
} );
|
||||
|
||||
// Add the new item to the list of available menu items.
|
||||
api.Menus.availableMenuItemsPanel.collection.add( availableItem );
|
||||
$content = $( '#available-menu-items-post_type-page' ).find( '.available-menu-items-list' );
|
||||
itemTemplate = wp.template( 'available-menu-item' );
|
||||
$content.prepend( itemTemplate( availableItem.attributes ) );
|
||||
|
||||
// Focus the select control.
|
||||
select.focus();
|
||||
control.setting.set( String( data.post_id ) ); // Triggers a preview refresh and updates the setting.
|
||||
|
||||
// Reset the create page form.
|
||||
container.slideUp( 180 );
|
||||
toggle.slideDown( 180 );
|
||||
} )
|
||||
.always( function() {
|
||||
input.val( '' ).removeAttr( 'disabled' );
|
||||
} );
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -101,7 +101,6 @@
|
||||
|
||||
request.done( function( response ) {
|
||||
if ( response.post_id ) {
|
||||
deferred.resolve( response );
|
||||
api.Menus.insertedAutoDrafts.push( response.post_id );
|
||||
api( 'nav_menus_created_posts' ).set( _.clone( api.Menus.insertedAutoDrafts ) );
|
||||
|
||||
@@ -121,6 +120,7 @@
|
||||
}
|
||||
} );
|
||||
}
|
||||
deferred.resolve( response );
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
Reference in New Issue
Block a user