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

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

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

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


git-svn-id: http://core.svn.wordpress.org/trunk@41092 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-08-14 17:56:42 +00:00
parent ae47e05f74
commit 75ad3494a8
11 changed files with 66 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wp-admin/css/widgets-rtl.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%;

2
wp-admin/css/widgets-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
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%;

2
wp-admin/css/widgets.min.css vendored
View File

File diff suppressed because one or more lines are too long

25
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;
}
});

2
wp-admin/js/widgets/media-image-widget.min.js vendored
View File

@ -1 +1 @@
!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({renderPreview:function(){var a,b,c=this;(c.model.get("attachment_id")||c.model.get("url"))&&(a=c.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(_.extend(c.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b;b=a.state().attributes.image.toJSON(),f.selectedAttachment.set(b),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery);
!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({renderPreview:function(){var a,b,c,d,e,f=this;(f.model.get("attachment_id")||f.model.get("url"))&&(a=f.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(f.previewTemplateProps.toJSON())),e=f.$el.find(".link"),e.is(document.activeElement)||(c=f.$el.find(".media-widget-fields"),d=wp.template("wp-media-widget-image-fields"),c.html(d(f.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b,c;b=a.state().attributes.image.toJSON(),c=b.link,b.link=b.linkUrl,f.selectedAttachment.set(b),f.displaySettings.set("link",c),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b.link_url=d.model.get("link_url"),b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery);

22
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;
}

2
wp-admin/js/widgets/media-widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

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

17
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
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
}