WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Customize: Add edit shortcuts in customizer preview to visually expose editable elements and focus on the corresponding controls when clicked. 

* Edit shortcuts show initially for a moment and then fade away so as to not get in the way of the preview. 
* Visibility of edit shortcuts is toggled by clicking/touching anywhere inert in the document.
* Implements UI for mobile and touch devices which do not support shift-click.
* Adds `editShortcutVisibility` state.
* Adds new methods to `wp.customize.selectiveRefresh.Partial` for managing edit shortcuts.

Incorporates aspects of the Customize Direct Manipulation feature plugin.

Props sirbrillig, mattwiebe, celloexpressions, melchoyce, westonruter, afercia.
Fixes #27403.

Built from https://develop.svn.wordpress.org/trunk@38967


git-svn-id: http://core.svn.wordpress.org/trunk@38910 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2016-10-26 20:03:32 +00:00
parent 834b7c608e
commit 71afe657b6
15 changed files with 563 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-admin/customize.php
View File

@ -161,7 +161,7 @@ do_action( 'customize_controls_print_scripts' );
<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
</div>
<div class="customize-panel-description"><?php
_e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
_e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements; click anywhere in the preview to toggle them off and on.' );
?></div>
</div>

11
wp-admin/js/customize-controls.js
View File

@ -4302,6 +4302,7 @@
if ( 'resolved' !== previewer.deferred.active.state() || previewer.loading ) {
synced.scroll = previewer.scroll;
}
synced['edit-shortcut-visibility'] = api.state( 'editShortcutVisibility' ).get();
previewer.send( 'sync', synced );
// Set the previewUrl without causing the url to set the iframe.
@ -5122,6 +5123,7 @@
expandedSection = state.create( 'expandedSection' ),
changesetStatus = state.create( 'changesetStatus' ),
previewerAlive = state.create( 'previewerAlive' ),
editShortcutVisibility = state.create( 'editShortcutVisibility' ),
populateChangesetUuidParam;
state.bind( 'change', function() {
@ -5158,6 +5160,7 @@
expandedPanel( false );
expandedSection( false );
previewerAlive( true );
editShortcutVisibility( 'initial' );
changesetStatus( api.settings.changeset.status );
api.bind( 'change', function() {
@ -5751,6 +5754,14 @@
api.previewer.refresh();
});
// Update the edit shortcut visibility state.
api.previewer.bind( 'edit-shortcut-visibility', function( visibility ) {
api.state( 'editShortcutVisibility' ).set( visibility );
} );
api.state( 'editShortcutVisibility' ).bind( function( visibility ) {
api.previewer.send( 'edit-shortcut-visibility', visibility );
} );
// Autosave changeset.
( function() {
var timeoutId, updateChangesetWithReschedule, scheduleChangesetUpdate, updatePending = false;

4
wp-admin/js/customize-controls.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
wp-content/themes/twentyfourteen/style.css
View File

@ -1039,6 +1039,10 @@ span + .edit-link:before,
outline: 1px dotted;
}
.secondary-navigation .customize-partial-edit-shortcut:before,
.footer-sidebar .widget:first-child .customize-partial-edit-shortcut:before {
left: 0;
}
/**
* 6.0 Content

162
wp-includes/css/customize-preview-rtl.css Normal file
View File

@ -0,0 +1,162 @@
.customize-partial-refreshing {
opacity: 0.25;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
cursor: progress;
}
/* Override highlight when refreshing */
.customize-partial-refreshing.widget-customizer-highlighted-widget {
-webkit-box-shadow: none;
box-shadow: none;
}
/* Make shortcut buttons essentially invisible */
.widget button.customize-partial-edit-shortcut,
.customize-partial-edit-shortcut {
position: relative;
float: right;
width: 1px; /* required to have a size to be focusable in Safari */
height: 1px;
padding: 0;
margin: -1px -1px 0 0;
border: 0;
background: transparent;
color: transparent;
box-shadow: none;
outline: none;
z-index: 5;
}
.customize-partial-edit-shortcut:active {
padding: 0;
border: 0;
}
/* Styles for the actual shortcut */
.customize-partial-edit-shortcut:before {
position: absolute;
right: -36px;
color: #fff;
width: 30px;
height: 30px;
font-size: 18px;
font-family: dashicons;
content: '\f464';
z-index: 5;
background-color: #0085ba;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 1px rgba(46,68,83,0.15);
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
padding: 0;
animation-fill-mode: both;
animation-duration: .4s;
opacity: 0;
pointer-events: none;
text-shadow: 0 -1px 1px #006799,
-1px 0 1px #006799,
0 1px 1px #006799,
1px 0 1px #006799;
}
.customize-partial-edit-shortcut:hover:before,
.customize-partial-edit-shortcut:focus:before {
background: #008ec2; /* matches primary buttons */
border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
}
body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before {
animation-name: customize-partial-edit-shortcut-bounce-appear;
pointer-events: auto;
}
body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before {
animation-name: customize-partial-edit-shortcut-bounce-disappear;
pointer-events: none;
}
body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before {
animation-duration: 1.5s;
animation-delay: 0.4s;
animation-name: customize-partial-edit-shortcut-bounce-disappear;
pointer-events: none;
}
.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
.customize-partial-edit-shortcut-hidden:before {
visibility: hidden;
}
.widget button.customize-partial-edit-shortcut-absolute,
.customize-partial-edit-shortcut-absolute {
position: static;
}
.customize-partial-edit-shortcut-left-margin:before {
right: 0;
}
@keyframes customize-partial-edit-shortcut-bounce-appear {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes customize-partial-edit-shortcut-bounce-disappear {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
20% {
transform: scale3d(.97, .97, .97);
}
40% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
60% {
transform: scale3d(.9, .9, .9);
}
80% {
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
@media screen and (max-width:800px) {
.customize-partial-edit-shortcut:before {
right: -18px; /* Assume there will be less of a margin available on smaller screens */
}
}

1
wp-includes/css/customize-preview-rtl.min.css vendored Normal file
View File

@ -0,0 +1 @@
.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget button.customize-partial-edit-shortcut{position:relative;float:right;width:1px;height:1px;padding:0;margin:-1px -1px 0 0;border:0;background:0 0;color:transparent;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut:active{padding:0;border:0}.customize-partial-edit-shortcut:before{position:absolute;right:-36px;color:#fff;width:30px;height:30px;font-size:18px;font-family:dashicons;content:'\f464';z-index:5;background-color:#0085ba;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:0;animation-fill-mode:both;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,-1px 0 1px #006799,0 1px 1px #006799,1px 0 1px #006799}.customize-partial-edit-shortcut:focus:before,.customize-partial-edit-shortcut:hover:before{background:#008ec2;border-color:#191e23}body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before{animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before{animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before{animation-duration:1.5s;animation-delay:.4s;animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden:before,.page-sidebar-collapsed .customize-partial-edit-shortcut:before{visibility:hidden}.customize-partial-edit-shortcut-absolute,.widget button.customize-partial-edit-shortcut-absolute{position:static}.customize-partial-edit-shortcut-left-margin:before{right:0}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;transform:scale3d(1,1,1)}20%{transform:scale3d(.97,.97,.97)}40%{opacity:1;transform:scale3d(1.03,1.03,1.03)}60%{transform:scale3d(.9,.9,.9)}80%{transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut:before{right:-18px}}

150
wp-includes/css/customize-preview.css
View File

@ -10,3 +10,153 @@
-webkit-box-shadow: none;
box-shadow: none;
}
/* Make shortcut buttons essentially invisible */
.widget button.customize-partial-edit-shortcut,
.customize-partial-edit-shortcut {
position: relative;
float: left;
width: 1px; /* required to have a size to be focusable in Safari */
height: 1px;
padding: 0;
margin: -1px 0 0 -1px;
border: 0;
background: transparent;
color: transparent;
box-shadow: none;
outline: none;
z-index: 5;
}
.customize-partial-edit-shortcut:active {
padding: 0;
border: 0;
}
/* Styles for the actual shortcut */
.customize-partial-edit-shortcut:before {
position: absolute;
left: -36px;
color: #fff;
width: 30px;
height: 30px;
font-size: 18px;
font-family: dashicons;
content: '\f464';
z-index: 5;
background-color: #0085ba;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 1px rgba(46,68,83,0.15);
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
padding: 0;
animation-fill-mode: both;
animation-duration: .4s;
opacity: 0;
pointer-events: none;
text-shadow: 0 -1px 1px #006799,
1px 0 1px #006799,
0 1px 1px #006799,
-1px 0 1px #006799;
}
.customize-partial-edit-shortcut:hover:before,
.customize-partial-edit-shortcut:focus:before {
background: #008ec2; /* matches primary buttons */
border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
}
body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before {
animation-name: customize-partial-edit-shortcut-bounce-appear;
pointer-events: auto;
}
body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before {
animation-name: customize-partial-edit-shortcut-bounce-disappear;
pointer-events: none;
}
body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before {
animation-duration: 1.5s;
animation-delay: 0.4s;
animation-name: customize-partial-edit-shortcut-bounce-disappear;
pointer-events: none;
}
.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
.customize-partial-edit-shortcut-hidden:before {
visibility: hidden;
}
.widget button.customize-partial-edit-shortcut-absolute,
.customize-partial-edit-shortcut-absolute {
position: static;
}
.customize-partial-edit-shortcut-left-margin:before {
left: 0;
}
@keyframes customize-partial-edit-shortcut-bounce-appear {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes customize-partial-edit-shortcut-bounce-disappear {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
20% {
transform: scale3d(.97, .97, .97);
}
40% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
60% {
transform: scale3d(.9, .9, .9);
}
80% {
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
@media screen and (max-width:800px) {
.customize-partial-edit-shortcut:before {
left: -18px; /* Assume there will be less of a margin available on smaller screens */
}
}

2
wp-includes/css/customize-preview.min.css vendored
View File

@ -1 +1 @@
.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}
.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget button.customize-partial-edit-shortcut{position:relative;float:left;width:1px;height:1px;padding:0;margin:-1px 0 0 -1px;border:0;background:0 0;color:transparent;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut:active{padding:0;border:0}.customize-partial-edit-shortcut:before{position:absolute;left:-36px;color:#fff;width:30px;height:30px;font-size:18px;font-family:dashicons;content:'\f464';z-index:5;background-color:#0085ba;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:0;animation-fill-mode:both;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.customize-partial-edit-shortcut:focus:before,.customize-partial-edit-shortcut:hover:before{background:#008ec2;border-color:#191e23}body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before{animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before{animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before{animation-duration:1.5s;animation-delay:.4s;animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden:before,.page-sidebar-collapsed .customize-partial-edit-shortcut:before{visibility:hidden}.customize-partial-edit-shortcut-absolute,.widget button.customize-partial-edit-shortcut-absolute{position:static}.customize-partial-edit-shortcut-left-margin:before{left:0}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;transform:scale3d(1,1,1)}20%{transform:scale3d(.97,.97,.97)}40%{opacity:1;transform:scale3d(1.03,1.03,1.03)}60%{transform:scale3d(.9,.9,.9)}80%{transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut:before{left:-18px}}

5
wp-includes/customize/class-wp-customize-selective-refresh.php
View File

@ -184,6 +184,11 @@ final class WP_Customize_Selective_Refresh {
'renderQueryVar' => self::RENDER_QUERY_VAR,
'l10n' => array(
'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
'clickEditMenu' => __( 'Click to edit this menu.' ),
'clickEditWidget' => __( 'Click to edit this widget.' ),
'clickEditTitle' => __( 'Click to edit the site title.' ),
'clickEditMisc' => __( 'Click to edit this element.' ),
'editShortcutVisibilityToggle' => __( 'Toggle edit shortcuts' ),
/* translators: %s: document.write() */
'badDocumentWrite' => sprintf( __( '%s is forbidden' ), 'document.write()' ),
),

3
wp-includes/js/customize-preview-widgets.js
View File

@ -357,7 +357,6 @@ wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function(
widgetPartial = new self.WidgetPartial( partialId, {
params: {}
} );
api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
}
// Make sure that there is a container element for the widget in the sidebar, if at least a placeholder.
@ -400,6 +399,8 @@ wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function(
wasInserted = true;
} );
api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
if ( wasInserted ) {
sidebarPartial.reflowWidgets();
}

2
wp-includes/js/customize-preview-widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

224
wp-includes/js/customize-selective-refresh.js
View File

@ -6,6 +6,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
self = {
ready: $.Deferred(),
editShortcutVisibility: new api.Value(),
data: {
partials: {},
renderQueryVar: '',
@ -42,7 +43,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
id: null,
/**
/**
* Constructor.
*
* @since 4.5.0
@ -82,8 +83,9 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
*/
ready: function() {
var partial = this;
_.each( _.pluck( partial.placements(), 'container' ), function( container ) {
$( container ).attr( 'title', self.data.l10n.shiftClickToEdit );
_.each( partial.placements(), function( placement ) {
$( placement.container ).attr( 'title', self.data.l10n.shiftClickToEdit );
partial.createEditShortcutForPlacement( placement );
} );
$( document ).on( 'click', partial.params.selector, function( e ) {
if ( ! e.shiftKey ) {
@ -98,6 +100,181 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
} );
},
/**
* Create and show the edit shortcut for a given partial placement container.
*
* @since 4.7
*
* @param {Placement} placement The placement container element.
* @returns {void}
*/
createEditShortcutForPlacement: function( placement ) {
var partial = this, $shortcut, $placementContainer;
if ( ! placement.container ) {
return;
}
$placementContainer = $( placement.container );
if ( ! $placementContainer.length ) {
return;
}
$shortcut = partial.createEditShortcut();
partial.positionEditShortcut( placement, $shortcut );
$shortcut.on( 'click', function( event ) {
event.preventDefault();
event.stopPropagation();
partial.showControl();
} );
},
/**
* Position an edit shortcut for the placement container.
*
* The shortcut must already be created and added to the page.
*
* @since 4.7
*
* @param {Placement} placement The placement for the partial.
* @param {jQuery} $editShortcut The shortcut element as a jQuery object.
* @returns {void}
*/
positionEditShortcut: function( placement, $editShortcut ) {
var partial = this, $placementContainer;
$placementContainer = $( placement.container );
$placementContainer.prepend( $editShortcut );
if ( 'absolute' === $placementContainer.css( 'position' ) ) {
$editShortcut.addClass( 'customize-partial-edit-shortcut-absolute' );
$editShortcut.css( partial.getEditShortcutPositionStyles( $placementContainer ) );
partial.whenPageChanges( function() {
$editShortcut.css( partial.getEditShortcutPositionStyles( $placementContainer ) );
} );
}
if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
$editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
}
$editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editShortcut.offset().left < 1 );
},
/**
* Call a callback function when the page changes.
*
* This calls a callback for any change that might require refreshing the edit shortcuts.
*
* @since 4.7
*
* @param {Function} callback The function to call when the page changes.
* @returns {void}
*/
whenPageChanges: function( callback ) {
var debouncedCallback, $document;
debouncedCallback = _.debounce( function() {
// Timeout allows any page animations to finish
setTimeout( callback, 100 );
}, 350 );
// When window is resized.
$( window ).resize( debouncedCallback );
// When any customizer setting changes.
api.bind( 'change', debouncedCallback );
$document = $( window.document );
// After scroll in case there are fixed position elements
$document.on( 'scroll', debouncedCallback );
// After page click (eg: hamburger menus)
$document.on( 'click', debouncedCallback );
},
/**
* Return the CSS positioning for the edit shortcut for a given partial placement.
*
* @since 4.7
*
* @param {jQuery} $placementContainer The placement container element as a jQuery object.
* @return {Object} Object containing CSS positions.
*/
getEditShortcutPositionStyles: function( $placementContainer ) {
return {
top: $placementContainer.css( 'top' ),
left: $placementContainer.css( 'left' ),
right: 'auto'
};
},
/**
* Return the unique class name for the edit shortcut button for this partial.
*
* @since 4.7
*
* @return {string} Partial ID converted into a class name for use in shortcut.
*/
getEditShortcutClassName: function() {
var partial = this, cleanId;
cleanId = partial.id.replace( /]/g, '' ).replace( /\[/g, '-' );
return 'customize-partial-edit-shortcut-' + cleanId;
},
/**
* Return the appropriate translated string for the edit shortcut button.
*
* @since 4.7
*
* @return {string} Tooltip for edit shortcut.
*/
getEditShortcutTitle: function() {
var partial = this, l10n = self.data.l10n;
switch ( partial.getType() ) {
case 'widget':
return l10n.clickEditWidget;
case 'blogname':
return l10n.clickEditTitle;
case 'blogdescription':
return l10n.clickEditTitle;
case 'nav_menu':
return l10n.clickEditMenu;
default:
return l10n.clickEditMisc;
}
},
/**
* Return the type of this partial
*
* Will use `params.type` if set, but otherwise will try to infer type from settingId.
*
* @since 4.7
*
* @return {string} Type of partial derived from type param or the related setting ID.
*/
getType: function() {
var partial = this, settingId;
settingId = partial.params.primarySetting || _.first( partial.settings() ) || 'unknown';
if ( partial.params.type ) {
return partial.params.type;
}
if ( settingId.match( /^nav_menu_instance\[/ ) ) {
return 'nav_menu';
}
if ( settingId.match( /^widget_.+\[\d+]$/ ) ) {
return 'widget';
}
return settingId;
},
/**
* Create an edit shortcut button for this partial.
*
* @since 4.7
*
* @return {jQuery} The edit shortcut button element.
*/
createEditShortcut: function() {
var partial = this, shortcutTitle;
shortcutTitle = partial.getEditShortcutTitle();
return $( '<button>', {
'aria-label': shortcutTitle,
'title': shortcutTitle,
'type': 'button',
'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
} );
},
/**
* Find all placements for this partial int he document.
*
@ -175,10 +352,16 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
* @since 4.5.0
*/
showControl: function() {
var partial = this, settingId = partial.params.primarySetting;
var partial = this, settingId = partial.params.primarySetting, menuSlug;
if ( ! settingId ) {
settingId = _.first( partial.settings() );
}
if ( partial.getType() === 'nav_menu' ) {
menuSlug = partial.params.navMenuArgs.theme_location;
if ( menuSlug ) {
settingId = 'nav_menu_locations[' + menuSlug + ']';
}
}
api.preview.send( 'focus-control-for-setting', settingId );
},
@ -319,6 +502,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
self.orginalDocumentWrite = null;
/* jshint ignore:end */
partial.createEditShortcutForPlacement( placement );
placement.container.removeClass( 'customize-partial-refreshing' );
// Prevent placement container from being being re-triggered as being rendered among nested partials.
@ -854,7 +1038,31 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
}
} );
api.preview.bind( 'edit-shortcut-visibility', function( visibility ) {
api.selectiveRefresh.editShortcutVisibility.set( visibility );
} );
api.selectiveRefresh.editShortcutVisibility.bind( function( visibility ) {
var body = $( document.body ), shouldAnimateHide;
shouldAnimateHide = ( 'hidden' === visibility && body.hasClass( 'customize-partial-edit-shortcuts-shown' ) && ! body.hasClass( 'customize-partial-edit-shortcuts-hidden' ) );
body.toggleClass( 'customize-partial-edit-shortcuts-hidden', shouldAnimateHide );
body.toggleClass( 'customize-partial-edit-shortcuts-shown', 'visible' === visibility );
body.toggleClass( 'customize-partial-edit-shortcuts-flash', 'initial' === visibility );
} );
api.preview.bind( 'active', function() {
var body = $( document.body ), buttonText, $editShortcutVisibilityButton;
// Add invisible button to toggle editShortcutVisibility.
if ( $( '.edit-shortcut-visibility-button' ).length < 1 ) {
buttonText = self.data.l10n.editShortcutVisibilityToggle || 'Toggle edit shortcuts';
$editShortcutVisibilityButton = $( '<button type="button" class="edit-shortcut-visibility-button screen-reader-text"></button>' );
$editShortcutVisibilityButton.text( buttonText );
$editShortcutVisibilityButton.on( 'click', function() {
api.selectiveRefresh.editShortcutVisibility.set( 'visible' === api.selectiveRefresh.editShortcutVisibility.get() ? 'hidden' : 'visible' );
} );
body.prepend( $editShortcutVisibilityButton );
}
// Make all partials ready.
self.partial.each( function( partial ) {
@ -865,6 +1073,14 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
self.partial.bind( 'add', function( partial ) {
partial.deferred.ready.resolve();
} );
body.on( 'click', function( event ) {
if ( $( event.target ).is( '.customize-partial-edit-shortcut, :input, a[href]' ) || 0 !== $( event.target ).closest( 'a' ).length ) {
return; // Don't toggle shortcuts on form, link, or link child clicks.
}
api.selectiveRefresh.editShortcutVisibility.set( 'visible' === api.selectiveRefresh.editShortcutVisibility.get() ? 'hidden' : 'visible' );
api.preview.send( 'edit-shortcut-visibility', api.selectiveRefresh.editShortcutVisibility.get() );
} );
} );
} );

2
wp-includes/js/customize-selective-refresh.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/script-loader.php
View File

@ -856,7 +856,7 @@ function wp_default_styles( &$styles ) {
$styles->add( 'editor-buttons', "/wp-includes/css/editor$suffix.css", array( 'dashicons' ) );
$styles->add( 'media-views', "/wp-includes/css/media-views$suffix.css", array( 'buttons', 'dashicons', 'wp-mediaelement' ) );
$styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css", array( 'dashicons' ) );
$styles->add( 'customize-preview', "/wp-includes/css/customize-preview$suffix.css" );
$styles->add( 'customize-preview', "/wp-includes/css/customize-preview$suffix.css", array( 'dashicons' ) );
$styles->add( 'wp-embed-template-ie', "/wp-includes/css/wp-embed-template-ie$suffix.css" );
$styles->add_data( 'wp-embed-template-ie', 'conditional', 'lte IE 8' );

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-alpha-38966';
$wp_version = '4.7-alpha-38967';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.