<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[50124] trunk: REST API, Media: Add batch image editing endpoints.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/50124">50124</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/50124","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>antpb</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-02-01 18:35:38 +0000 (Mon, 01 Feb 2021)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>REST API, Media: Add batch image editing endpoints.
Introduces new endpoints to allow for batch image editing using the REST API.
The new endpoints can take an array of modifiers that will be applied in the order they appear.
Props ajlende, TimothyBlynJacobs, hellofromTonya, Mista-Flo.
Fixes <a href="https://core.trac.wordpress.org/ticket/52192">#52192</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesrestapiendpointsclasswprestattachmentscontrollerphp">trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-attachments-controller.php</a></li>
<li><a href="#trunktestsphpunittestsrestapirestattachmentscontrollerphp">trunk/tests/phpunit/tests/rest-api/rest-attachments-controller.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesrestapiendpointsclasswprestattachmentscontrollerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-attachments-controller.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-attachments-controller.php 2021-02-01 18:04:36 UTC (rev 50123)
+++ trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-attachments-controller.php 2021-02-01 18:35:38 UTC (rev 50124)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -448,25 +448,40 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Check if we need to do anything.
- $rotate = 0;
- $crop = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // The `modifiers` param takes precedence over the older format.
+ if ( isset( $request['modifiers'] ) ) {
+ $modifiers = $request['modifiers'];
+ } else {
+ $modifiers = array();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! empty( $request['rotation'] ) ) {
- // Rotation direction: clockwise vs. counter clockwise.
- $rotate = 0 - (int) $request['rotation'];
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! empty( $request['rotation'] ) ) {
+ $modifiers[] = array(
+ 'type' => 'rotate',
+ 'args' => array(
+ 'angle' => $request['rotation'],
+ ),
+ );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isset( $request['x'], $request['y'], $request['width'], $request['height'] ) ) {
- $crop = true;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( isset( $request['x'], $request['y'], $request['width'], $request['height'] ) ) {
+ $modifiers[] = array(
+ 'type' => 'crop',
+ 'args' => array(
+ 'left' => $request['x'],
+ 'top' => $request['y'],
+ 'width' => $request['width'],
+ 'height' => $request['height'],
+ ),
+ );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! $rotate && ! $crop ) {
- return new WP_Error(
- 'rest_image_not_edited',
- __( 'The image was not edited. Edit the image before applying the changes.' ),
- array( 'status' => 400 )
- );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 0 === count( $modifiers ) ) {
+ return new WP_Error(
+ 'rest_image_not_edited',
+ __( 'The image was not edited. Edit the image before applying the changes.' ),
+ array( 'status' => 400 )
+ );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -489,34 +504,49 @@
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( 0 !== $rotate ) {
- $result = $image_editor->rotate( $rotate );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ foreach ( $modifiers as $modifier ) {
+ $args = $modifier['args'];
+ switch ( $modifier['type'] ) {
+ case 'rotate':
+ // Rotation direction: clockwise vs. counter clockwise.
+ $rotate = 0 - $args['angle'];
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( is_wp_error( $result ) ) {
- return new WP_Error(
- 'rest_image_rotation_failed',
- __( 'Unable to rotate this image.' ),
- array( 'status' => 500 )
- );
- }
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 0 !== $rotate ) {
+ $result = $image_editor->rotate( $rotate );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $crop ) {
- $size = $image_editor->get_size();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( is_wp_error( $result ) ) {
+ return new WP_Error(
+ 'rest_image_rotation_failed',
+ __( 'Unable to rotate this image.' ),
+ array( 'status' => 500 )
+ );
+ }
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $crop_x = round( ( $size['width'] * (float) $request['x'] ) / 100.0 );
- $crop_y = round( ( $size['height'] * (float) $request['y'] ) / 100.0 );
- $width = round( ( $size['width'] * (float) $request['width'] ) / 100.0 );
- $height = round( ( $size['height'] * (float) $request['height'] ) / 100.0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ break;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $result = $image_editor->crop( $crop_x, $crop_y, $width, $height );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ case 'crop':
+ $size = $image_editor->get_size();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( is_wp_error( $result ) ) {
- return new WP_Error(
- 'rest_image_crop_failed',
- __( 'Unable to crop this image.' ),
- array( 'status' => 500 )
- );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $crop_x = round( ( $size['width'] * $args['left'] ) / 100.0 );
+ $crop_y = round( ( $size['height'] * $args['top'] ) / 100.0 );
+ $width = round( ( $size['width'] * $args['width'] ) / 100.0 );
+ $height = round( ( $size['height'] * $args['height'] ) / 100.0 );
+
+ if ( $size['width'] !== $width && $size['height'] !== $height ) {
+ $result = $image_editor->crop( $crop_x, $crop_y, $width, $height );
+
+ if ( is_wp_error( $result ) ) {
+ return new WP_Error(
+ 'rest_image_crop_failed',
+ __( 'Unable to crop this image.' ),
+ array( 'status' => 500 )
+ );
+ }
+ }
+
+ break;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1286,8 +1316,90 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> protected function get_edit_media_item_args() {
</span><span class="cx" style="display: block; padding: 0 10px"> return array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'rotation' => array(
- 'description' => __( 'The amount to rotate the image clockwise in degrees.' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'src' => array(
+ 'description' => __( 'URL to the edited image file.' ),
+ 'type' => 'string',
+ 'format' => 'uri',
+ 'required' => true,
+ ),
+ 'modifiers' => array(
+ 'description' => __( 'Array of image edits.' ),
+ 'type' => 'array',
+ 'minItems' => 1,
+ 'items' => array(
+ 'description' => __( 'Image edit.' ),
+ 'type' => 'object',
+ 'required' => array(
+ 'type',
+ 'args',
+ ),
+ 'oneOf' => array(
+ array(
+ 'title' => __( 'Rotation' ),
+ 'properties' => array(
+ 'type' => array(
+ 'description' => __( 'Rotation type.' ),
+ 'type' => 'string',
+ 'enum' => array( 'rotate' ),
+ ),
+ 'args' => array(
+ 'description' => __( 'Rotation arguments.' ),
+ 'type' => 'object',
+ 'required' => array(
+ 'angle',
+ ),
+ 'properties' => array(
+ 'angle' => array(
+ 'description' => __( 'Angle to rotate clockwise in degrees.' ),
+ 'type' => 'number',
+ ),
+ ),
+ ),
+ ),
+ ),
+ array(
+ 'title' => __( 'Crop' ),
+ 'properties' => array(
+ 'type' => array(
+ 'description' => __( 'Crop type.' ),
+ 'type' => 'string',
+ 'enum' => array( 'crop' ),
+ ),
+ 'args' => array(
+ 'description' => __( 'Crop arguments.' ),
+ 'type' => 'object',
+ 'required' => array(
+ 'left',
+ 'top',
+ 'width',
+ 'height',
+ ),
+ 'properties' => array(
+ 'left' => array(
+ 'description' => __( 'Horizontal position from the left to begin the crop as a percentage of the image width.' ),
+ 'type' => 'number',
+ ),
+ 'top' => array(
+ 'description' => __( 'Vertical position from the top to begin the crop as a percentage of the image height.' ),
+ 'type' => 'number',
+ ),
+ 'width' => array(
+ 'description' => __( 'Width of the crop as a percentage of the image width.' ),
+ 'type' => 'number',
+ ),
+ 'height' => array(
+ 'description' => __( 'Height of the crop as a percentage of the image height.' ),
+ 'type' => 'number',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ 'rotation' => array(
+ 'description' => __( 'The amount to rotate the image clockwise in degrees. DEPRECATED: Use `modifiers` instead.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'integer',
</span><span class="cx" style="display: block; padding: 0 10px"> 'minimum' => 0,
</span><span class="cx" style="display: block; padding: 0 10px"> 'exclusiveMinimum' => true,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1294,36 +1406,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'maximum' => 360,
</span><span class="cx" style="display: block; padding: 0 10px"> 'exclusiveMaximum' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'x' => array(
- 'description' => __( 'As a percentage of the image, the x position to start the crop from.' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'x' => array(
+ 'description' => __( 'As a percentage of the image, the x position to start the crop from. DEPRECATED: Use `modifiers` instead.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'number',
</span><span class="cx" style="display: block; padding: 0 10px"> 'minimum' => 0,
</span><span class="cx" style="display: block; padding: 0 10px"> 'maximum' => 100,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'y' => array(
- 'description' => __( 'As a percentage of the image, the y position to start the crop from.' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'y' => array(
+ 'description' => __( 'As a percentage of the image, the y position to start the crop from. DEPRECATED: Use `modifiers` instead.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'number',
</span><span class="cx" style="display: block; padding: 0 10px"> 'minimum' => 0,
</span><span class="cx" style="display: block; padding: 0 10px"> 'maximum' => 100,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'width' => array(
- 'description' => __( 'As a percentage of the image, the width to crop the image to.' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'width' => array(
+ 'description' => __( 'As a percentage of the image, the width to crop the image to. DEPRECATED: Use `modifiers` instead.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'number',
</span><span class="cx" style="display: block; padding: 0 10px"> 'minimum' => 0,
</span><span class="cx" style="display: block; padding: 0 10px"> 'maximum' => 100,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'height' => array(
- 'description' => __( 'As a percentage of the image, the height to crop the image to.' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'height' => array(
+ 'description' => __( 'As a percentage of the image, the height to crop the image to. DEPRECATED: Use `modifiers` instead.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'number',
</span><span class="cx" style="display: block; padding: 0 10px"> 'minimum' => 0,
</span><span class="cx" style="display: block; padding: 0 10px"> 'maximum' => 100,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'src' => array(
- 'description' => __( 'URL to the edited image file.' ),
- 'type' => 'string',
- 'format' => 'uri',
- 'required' => true,
- ),
</del><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunktestsphpunittestsrestapirestattachmentscontrollerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/rest-api/rest-attachments-controller.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/rest-api/rest-attachments-controller.php 2021-02-01 18:04:36 UTC (rev 50123)
+++ trunk/tests/phpunit/tests/rest-api/rest-attachments-controller.php 2021-02-01 18:35:38 UTC (rev 50124)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2079,6 +2079,49 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @ticket 52192
+ * @requires function imagejpeg
+ */
+ public function test_batch_edit_image() {
+ wp_set_current_user( self::$superadmin_id );
+ $attachment = self::factory()->attachment->create_upload_object( $this->test_file );
+
+ $params = array(
+ 'modifiers' => array(
+ array(
+ 'type' => 'rotate',
+ 'args' => array(
+ 'angle' => 60,
+ ),
+ ),
+ array(
+ 'type' => 'crop',
+ 'args' => array(
+ 'left' => 50,
+ 'top' => 10,
+ 'width' => 10,
+ 'height' => 5,
+ ),
+ ),
+ ),
+ 'src' => wp_get_attachment_image_url( $attachment, 'full' ),
+ );
+
+ $request = new WP_REST_Request( 'POST', "/wp/v2/media/{$attachment}/edit" );
+ $request->set_body_params( $params );
+ $response = rest_do_request( $request );
+ $item = $response->get_data();
+
+ $this->assertSame( 201, $response->get_status() );
+ $this->assertSame( rest_url( '/wp/v2/media/' . $item['id'] ), $response->get_headers()['Location'] );
+
+ $this->assertStringEndsWith( '-edited.jpg', $item['media_details']['file'] );
+ $this->assertArrayHasKey( 'parent_image', $item['media_details'] );
+ $this->assertEquals( $attachment, $item['media_details']['parent_image']['attachment_id'] );
+ $this->assertContains( 'canola', $item['media_details']['parent_image']['file'] );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 50565
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_edit_image_returns_error_if_mismatched_src() {
</span></span></pre>
</div>
</div>
</body>
</html>