sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Widgets: Expose link URL input field in Image widget to avoid having to open media modal to discover.

Browse Source 
Props timmydcrawford, westonruter.
See #39993.
Fixes #41274.


git-svn-id: https://develop.svn.wordpress.org/trunk@41252 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2017-08-14 17:55:24 +00:00
parent 242efb0a24
commit b0d06b1222
5 changed files with 57 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/wp-admin/css/widgets.css
View File

@ -152,6 +152,10 @@
border: 1px solid #f00;
}
.media-widget-image-link {
margin: 1em 0;
}
/* Widget Dragging Helpers */
.widget.ui-draggable-dragging {
min-width: 100%;

25
src/wp-admin/js/widgets/media-image-widget.js
View File

@ -30,14 +30,21 @@
* @returns {void}
*/
renderPreview: function renderPreview() {
var control = this, previewContainer, previewTemplate;
var control = this, previewContainer, previewTemplate, fieldsContainer, fieldsTemplate, linkInput;
if ( ! control.model.get( 'attachment_id' ) && ! control.model.get( 'url' ) ) {
return;
}
previewContainer = control.$el.find( '.media-widget-preview' );
previewTemplate = wp.template( 'wp-media-widget-image-preview' );
previewContainer.html( previewTemplate( _.extend( control.previewTemplateProps.toJSON() ) ) );
previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) );
linkInput = control.$el.find( '.link' );
if ( ! linkInput.is( document.activeElement ) ) {
fieldsContainer = control.$el.find( '.media-widget-fields' );
fieldsTemplate = wp.template( 'wp-media-widget-image-fields' );
fieldsContainer.html( fieldsTemplate( control.previewTemplateProps.toJSON() ) );
}
},
/**
@ -64,11 +71,14 @@
mediaFrame.$el.addClass( 'media-widget' );
updateCallback = function() {
var mediaProps;
var mediaProps, linkType;
// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
mediaProps = mediaFrame.state().attributes.image.toJSON();
linkType = mediaProps.link;
mediaProps.link = mediaProps.linkUrl;
control.selectedAttachment.set( mediaProps );
control.displaySettings.set( 'link', linkType );
control.model.set( _.extend(
control.mapMediaToModelProps( mediaProps ),
@ -130,11 +140,12 @@
* @returns {Object} Preview template props.
*/
mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() {
var control = this, mediaFrameProps, url;
var control = this, previewTemplateProps, url;
url = control.model.get( 'url' );
mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );
mediaFrameProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
return mediaFrameProps;
previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );
previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
previewTemplateProps.link_url = control.model.get( 'link_url' );
return previewTemplateProps;
}
});

22
src/wp-admin/js/widgets/media-widgets.js
View File

@ -512,6 +512,26 @@ wp.mediaWidgets = ( function( $ ) {
});
});
// Update link_url attribute.
control.$el.on( 'input change', '.link', function updateLinkUrl() {
var linkUrl = $.trim( $( this ).val() ), linkType = 'custom';
if ( control.selectedAttachment.get( 'linkUrl' ) === linkUrl || control.selectedAttachment.get( 'link' ) === linkUrl ) {
linkType = 'post';
} else if ( control.selectedAttachment.get( 'url' ) === linkUrl ) {
linkType = 'file';
}
control.model.set( {
link_url: linkUrl,
link_type: linkType
});
// Update display settings for the next time the user opens to select from the media library.
control.displaySettings.set( {
link: linkType,
linkUrl: linkUrl
});
});
/*
* Copy current display settings from the widget model to serve as basis
* of customized display settings for the current media frame session.
@ -822,7 +842,7 @@ wp.mediaWidgets = ( function( $ ) {
}
if ( 'post' === mediaFrameProps.link ) {
modelProps.link_url = mediaFrameProps.postUrl;
modelProps.link_url = mediaFrameProps.postUrl || mediaFrameProps.linkUrl;
} else if ( 'file' === mediaFrameProps.link ) {
modelProps.link_url = mediaFrameProps.url;
}

17
src/wp-includes/widgets/class-wp-widget-media-image.php
View File

@ -95,7 +95,7 @@ class WP_Widget_Media_Image extends WP_Widget_Media {
'default' => 'none',
'media_prop' => 'link',
'description' => __( 'Link To' ),
'should_preview_update' => false,
'should_preview_update' => true,
),
'link_url' => array(
'type' => 'string',
@ -103,7 +103,7 @@ class WP_Widget_Media_Image extends WP_Widget_Media {
'format' => 'uri',
'media_prop' => 'linkUrl',
'description' => __( 'URL' ),
'should_preview_update' => false,
'should_preview_update' => true,
),
'image_classes' => array(
'type' => 'string',
@ -307,10 +307,17 @@ class WP_Widget_Media_Image extends WP_Widget_Media {
parent::render_control_template_scripts();
?>
<script type="text/html" id="tmpl-wp-media-widget-image-fields">
<# var elementIdPrefix = 'el' + String( Math.random() ) + '_'; #>
<# if ( data.url ) { #>
<p class="media-widget-image-link">
<label for="{{ elementIdPrefix }}linkUrl"><?php esc_html_e( 'Link to:' ); ?></label>
<input id="{{ elementIdPrefix }}linkUrl" type="url" class="widefat link" value="{{ data.link_url }}" placeholder="http://">
</p>
<# } #>
</script>
<script type="text/html" id="tmpl-wp-media-widget-image-preview">
<#
var describedById = 'describedBy-' + String( Math.random() );
#>
<# var describedById = 'describedBy-' + String( Math.random() ); #>
<# if ( data.error && 'missing_attachment' === data.error ) { #>
<div class="notice notice-error notice-alt notice-missing-attachment">
<p><?php echo $this->l10n['missing_attachment']; ?></p>

2
src/wp-includes/widgets/class-wp-widget-media.php
View File

@ -404,6 +404,8 @@ abstract class WP_Widget_Media extends WP_Widget {
<?php echo esc_html( $this->l10n['add_media'] ); ?>
</button>
</p>
<div class="media-widget-fields">
</div>
</script>
<?php
}