Header Images: fix cropping for users without the 'customize' capability (#854)

* Header Images: fix cropping for users without the 'customize' capability

* only show users’ own posts to lower capaability users

---------

Co-authored-by: Matthias Pfefferle <[email protected]>

Author: mattwiebe

assets/js/activitypub-header-image.js

@@ -14,7 +14,42 @@
 		$headerImagePreview = $( '#activitypub-header-image-preview' ),
 		$hiddenDataField = $( '#activitypub_header_image' ),
 		$removeButton = $( '#activitypub-remove-header-image' ),
-		frame;
+		frame,
+		ImageCropperNoCustomizer;
+
+	/**
+	 * We register our own handler because the Core one invokes the Customizer, which fails the request unnecessarily
+	 * for users who don't have the 'customize' capability.
+	 * See https://github.com/Automattic/wordpress-activitypub/issues/846
+	 */
+	ImageCropperNoCustomizer = wp.media.controller.CustomizeImageCropper.extend( {
+		doCrop: function( attachment ) {
+			var cropDetails = attachment.get( 'cropDetails' ),
+				control = this.get( 'control' ),
+				ratio = cropDetails.width / cropDetails.height;
+
+			// Use crop measurements when flexible in both directions.
+			if ( control.params.flex_width && control.params.flex_height ) {
+				cropDetails.dst_width  = cropDetails.width;
+				cropDetails.dst_height = cropDetails.height;
+
+			// Constrain flexible side based on image ratio and size of the fixed side.
+			} else {
+				cropDetails.dst_width  = control.params.flex_width  ? control.params.height * ratio : control.params.width;
+				cropDetails.dst_height = control.params.flex_height ? control.params.width  / ratio : control.params.height;
+			}
+
+			return wp.ajax.post( 'crop-image', {
+				// where wp_customize: 'on' would be in Core, for no good reason I understand.
+				nonce: attachment.get( 'nonces' ).edit,
+				id: attachment.get( 'id' ),
+				context: control.id,
+				cropDetails: cropDetails
+			} );
+		}
+	} );
+
+
 
 	/**
 	 * Calculate image selection options based on the attachment dimensions.
@@ -73,6 +108,11 @@
 	 */
 	$chooseButton.on( 'click', function () {
 		var $el = $( this );
+		var userId = $el.data( 'userId' );
+		var mediaQuery = { type: 'image' };
+		if ( userId ) {
+			mediaQuery.author = userId;
+		}
 
 		// Create the media frame.
 		frame = wp.media( {
@@ -86,12 +126,12 @@
 			states: [
 				new wp.media.controller.Library( {
 					title: $el.data( 'choose-text' ),
-					library: wp.media.query( { type: 'image' } ),
+					library: wp.media.query( mediaQuery ),
 					date: false,
 					suggestedWidth: $el.data( 'size' ),
 					suggestedHeight: $el.data( 'size' ),
 				} ),
-				new wp.media.controller.CustomizeImageCropper( {
+				new ImageCropperNoCustomizer( {
 					control: {
 						params: {
 							width: $el.data( 'size' ),

templates/user-settings.php

@@ -65,6 +65,12 @@ class="<?php echo \esc_attr( $classes_for_button ); ?>"
 					data-choose-text="<?php \esc_attr_e( 'Choose a Header Image', 'activitypub' ); ?>"
 					data-update-text="<?php \esc_attr_e( 'Change Header Icon', 'activitypub' ); ?>"
 					data-update="<?php \esc_attr_e( 'Set as Header Image', 'activitypub' ); ?>"
+					<?php
+					// We only need to constrain the user_id for users who can't edit others' posts.
+					if ( ! \current_user_can( 'edit_others_posts' ) ) {
+						printf( 'data-user-id="%s"', esc_attr( \get_current_user_id() ) );
+					}
+					?>
 					data-state="<?php echo \esc_attr( (int) $header_image ); ?>">
 					<?php if ( (int) $header_image ) : ?>
 						<?php \esc_html_e( 'Change Header Image', 'activitypub' ); ?>